웹페이지 최적화하기 위해서 하는 방법 중에 하나인 Lazy Loading. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략으로 페이지 리소스를 줄여 페이지 로드 시간이 단축된다. Lazy Loading이란? https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical renderi..

useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..

리액트로 간단한 환율 계산기로 만들어보고 싶었다. 그래서 환율 관련한 API가 필요로 했는데, 실시간 갱신되는 API는 유료이거나 무료면 API 호출수에 제한이 있거나 REST API 필터 기능에 제한이 있는 등 제한 사항이 많았다. (혹시 괜찮은 환율 무료 API가 있다면 댓글로 추천 부탁드려요) 그래서 실시간 갱신되는 것을 포기하고 하루에 한번만 갱신되는 Gihhub API를 구글 검색 찾았다. 물론 무료 API이고 하루에 몇번을 호출해도 제한이 없다. 하루에 한번씩 json 파일을 갱신한다. 다음은 응답 값인데, 업데이트 날짜와 환율 결과 값이 표기된다. (심지어 코인도 있다) 예시(유로 => 달러) https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/..

Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..

Next.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..

Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..

자바스크립트의 조건문 자바스크립트에서는 다양한 조건문이 있다. 리액트에서는 특히 JSX 템플릿을 쓰면서 If 문 if 문 안에 있는 조건식이 참인 경우 해당하는 조건식의 영역을 실행. 조건문은을 여러 개 조합히기 위해서는 else if를 사용. 조건문의 조건이 어느 것도 충족되지 않으며 그대로 skip 하거나 else 구문을 실행. ** 다른 언어에서도 많이 쓰이는 구문이다 ** 조건식을 거짓을 판단하는 반환값 false undefined null 0 빈 문자열("") NaN(Not a Number // 표현 불가능한 수치형 결과) if .. else graph TD A[start] --> B{Condition} B -->|true| C[if block] B -->|false| D[else block] ..

[공지사항] 푸샤 깃허브 블로그 업데이트 사항 checked & defaultChecked 기본 엘리먼트에서는 checked 속성으로 사용하지만 react 에서는 defaultChecked값이 추가되었습니다. 이 두 가지 속성은 역할은 같지만 작은 차이가 있습니다. // radio // checkbox checked checked값을 사용하면 onChange값과 함께 사용하여 컨트롤할 수 있습니다. 만약 onChange 값이 없으면 해당 컴포넌트는 readOnly로 바뀌어 체크를 변경할 수 없습니다. this.setState({ foo: !this.state.foo })} checked={this.state.foo}/> checked: {this.state.foo ? 'true' : 'false'} de..

자바스크립트는 Ecmascript 로 발전하면서 다양한 기호로 연산자를 표시하게 된다. 가장 많이 쓰이는 논리연산자 Or (||) 연산자, And (&&) 연산자, Not(!) 연산자부터 조건 삼항 연산자( 조건 ? 값1 : 값2) 까지. 그 중에서 오늘은 물음표 기호르 쓰는 연산자인 OptIoN chaing에 대해 글을 써보려고 한다. Optional chaining (?)은 영어 표현식 그대로 옵션으로 표기하는 연산자인데, 이는 있을 수도 있고 없을 수도 있는 값을 undefined 으로 return을 해주는 것이다. 보통 그 값이 없을 경우 error 로 리턴이 되는데, error 가 아닌 undefined 으로 리턴해주어서 error가 아니게 해준다. 예) const adventurer = { n..

Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다. 다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다. 구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다. 리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다. (리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다) 출처 github.com/CookPete/react-player/issues/145

개인적으로 세 가지 프론트엔드 프레임워크를 경험해보았다. (Vue의 경우는 짧게 1달만 사용해봐서 정확히 판단하기는 어렵지만 그럼에도 이 세가지 프레임워크(?)를 주관적으로 비교해보려고 한다. 비교 (차이점 위주로) Angular React Vue 모델 MVC Virtual DOM(Flux) Virtual DOM(Flux) NPM Trends(28.02.2021) 541,128 10,499,740 2,388,670 특징 비유 데스크탑 모바일 태블릿 데인터 바인딩 및 큰 변화 양방향, Angularjs → Angular 단방향, class → functional 양방향 구조 객체 지향, HTML/CSS/Typescript 객체 지향(Class) → 함수형, js.jsx vue 사용 용도 Enterprise..

다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..

Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'. 현재 프로젝트에서 리덕스를 쓰며, 구글 extension 으로 리덕스를 디버깅하고 싶다면 redux devtools 를 사용하게 될 것이다. 그러나 만약 프로젝트에서 js나 jsx가 아닌 tsx,ts(타입스크립트)를 쓰고 리덕스 디버깅 extension 사용한다면 위와 같은 에러가 발생할 것이다. 위의 에러는 번역하면 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__가 윈도우라는 타입을 가지고 있지 않기 때문이다. 이럴 경우 Window 타입을 정의해주면 된다. import * as React from 'react' impo..