매일 꾸준히

언제 useCallback을 쓰고 어느 시점에 useMemo를 써야할까요? 이 주제에 관해 정리해보려고 합니다. (먼저 useCallback 훅부터 정리를 하고 가려고 합니다.) (막연하게 성능 최적화를위해 useCallback과 useMemo를 쓴다고만 알고 있었던..) 리액트에서는 useCallback과 useMemo라는 훅이 존재합니다. 공식문서에 따르면 두 훅은 다음과 같은 상황에 사용된다고 합니다. useCallback useCallback은 함수를 기억했다가 재사용가능하도록 도와주는 훅입니다. 리액트에서 부모 컴포넌트가 랜더링 될떄, 하위 자식 컴포넌트들도 랜더링이 일어납니다. 이 과정에서 useCallback으로 함수의 불필요한 생성을 방지 할 수 있습니다. 이처럼 useCallback을 사..

깃헙 페이지로 배포를 하고 있었고,import.meta객체를 이용해 로컬환경에서 환경변수를 했다. 다만 배포 환경에서는 (env파일이 깃에 올라기지 않는다는 가정하에는) 다른 방법의 환경변수 설정이 필요하다. firebase등등 보여줘서는 안되는 환경변수들을 배포 시에도 유지하기 위해서 깃헙 secrets을 이용해 환경변수를 관리할 수 있다. github Action secrets? 깃헙 레포의 action secrets는 환경변수를 암호화해서 저장할 수 있는 기능이다. 결과적으로 로컬환경에서는 .env파일을, github action을 이용한 배포 시에는 , action secrets를 이용해서 환경변수를 관리 할 수 있다. 먼저 github Action의 secrets를 저장하는 방법은 간단하다. 깃..

기존의 CRA에서 process.env로 환경변수를 관리했어서, vite + react의 환경에서도 process.env를 통한 환경 변수 관리가되지 않을까.. 하고 시도를 해봤지만 실패하였다. process.env가 뭐길래? process.env는 노드에서 사용하는 전역객체고, 환경변수를 저장하기 위한 객체이다. 리액트에서는 REACT_APP_키워드를 붙여서 환경변수를 관리한다. CRA를 통해 만든 리액트의 프로젝트에서는, 기본적으로 환경변수를 사용할 떄 .env파일을 사용한다. 이때 process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다. 이떄 등록된 변수들은 자바스크립트에서 process.env객체를 통해 접근 할 수 있다! 공식문서에 따르면, 환경변수의 접두사를 VITE_로 ..

먼저 기존에는 입력 컴포넌트를 만들고 Props를 주입해서 사용하고 있었다. 키워드를 통해 검색 결과를 검색하는 기능을 구현하기 위해 위에서 정의한 컴포넌트를 사용했지만 , 입력할때마다 상태가 바뀌는 불편함이 존재하였다! 입력한 상태가 바뀔떄마다 입력값을 통해 검색 결과를 가져오기 떄문에 너무 과도하게 검색 결과가 바꾸는 문제도 발생했다. 입력을 할때마다 굉장히 불필요하고 많은 검색 결과를 찾고 있었고, 개선이 필요했다. 디바운스 이를 해결하기 위해 디바운스를 이용할 수 있다. 다바운스는 짧은 시간 간격으로 연속해서 발생하는 이벤트를 묶어, 과도한 이벤트의 호출을 방지하는 기법이다. 위의 경우 텍스트 입력 필드에 값을 입력할 떄마다 연속해서 검색 결과를 찾게 되는데, 사용자가 입력을 모두 끝냈을 떄 한번..

클로저 자바스크립트에는 클로저라는 것이 존재한다. 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 예를들어서 다음과 같은 경우가 존재한다. function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); makeFunc의 함수 안에 name이라는 변수와 displayName이라는 함수가 선언되었다. makeFunc는 displayName이라는 함수를 반환하는데, displayName은 makeFunc의 name이라는 변수를 참조한다. myFunc..

리액트에서 라우팅은 보통 react-router-dom을 사용한다. 이 react-router-dom은 두 가지의 라우터를 제공한다. 공식문서에서는 BroswerRouter가 현재 브라우저의 위치를 받아사 브라우저의 history스택을 이용해 이동한다고 한다. 하나씩 살펴보자. export interface BrowserRouterProps { basename?: string; children?: React.ReactNode; window?: Window; } 먼저 BrowserRouterProps는 basename이라는 기본 URL을 받고 children이라는 라우터의 자식이 되는, 랜더링 될 리액트 노드를 받고 window를 사용하고 있다. let historyRef = React.useRef(); ..

정적인 사이트를 만들때, 스크롤 애니메이션은 정말 멋진 것 같다. 특히 애플 공식 홈페이지의 애니메이션은 너무너무 이쁜데, 이를 보고 내가 만드는 것에 도입해보고 싶었다. 스크롤 애니메이션 브라우저는 사용자가 화면을 스크롤 할떄마다, 스크롤 이벤트를 발생시킨다. 리액트로 스크롤을 구현하는 라이브러리는 많지만, 직접 구현해 보고 싶었다. 화면을 스크롤 할떄, 특정 화면이 보이기 시작한다면 애니메이션이 적용되면서 등장하는 방식이다. Intersection Observer 방금 말한 '특정 화면이 보인다면'을 Intersection Observer를 통해 해결 가능하다. 기본적으로 뷰포트와 설정한 교차점을 관찰해, 요소가 뷰포트에 포함되는지 ,사용자에게 지금 보이는 화면인지를 쉽게 판단가능하게 해준다. 비동기..

랜더링이란? 리액트는 컴포넌트를 랜더링한다. 컴포넌트가 스스로의 상태를 능동적으로 바꾸든, 다른 변화 떄문에 수동적으로 바뀌었든, 컴포넌트는 리액트에 의해 호출된다. 컴포넌트가 상태 업데이트를 했다고 해서, 반드시 하나의 랜더링으로 이어지는 것은 아니다 리액트는 컴포넌트의 상태의 변화가 의미 없는 변화로 해석할 지도 모른다! 리액트에서 상태 업데이트를 모아서 한번에 처리하고(batch update) 이 일괄 업데이트로, 불필요한 랜더링 횟수를 최소화 한다. 리액트는 다양한 이유로 컴포넌트를 랜더링 할 수 있기 때문에 컴포넌트를 랜더링 하는 것이 즉각적인 UI 변화로 이어지지 않을 수 있다 랜더링 과정 살펴보기 리액트는 컴포넌트의 루트부터 시작하면서 (아래의 코드에는 root부터 ), 아래쪽으로 쭉 훑어보..

리액트를 다루는 기술 14장을 참고해서 만들었고, 타입스크립트도 적용해보았다. 먼저 API KEY가 필요하다. https://newsapi.org/account Login - News API newsapi.org API KEY를 발급받으면 이메일로, KEY가 올 것이다. 리액트에서 API KEY를 환경변수로 관리 할 수 있다. 프로젝트 최상단에 .env파일을 만들고, .gitingnore파일에 .env를 추가해서 깃에 올라가는 것을 막아준다. 그리고 API KEY를 적어주면 된다. 이떄, API KEY는 REACT_APP_으로 시작해야 한다 사용할 떄는 jsx,js에서 process.env.REACT_APP_이름 변수명을 넣어서 사용해준다. src폴더 구조는 다음과 같고, constants.ts에서는 받..

먼저 리액트 앱을 타입스크립트와 같이 사용하려면, $ npx create-react-app ts-react-tutorial --typescript 명령어를 사용하면 됩니다. (ts-react-tutorial부분은 앱 이름입니다.) 전체 폴더 구조 스타일링은 styled-components를 사용하였습니다. styled-components는 자바스크립트 파일 안에서 CSS를 사용할 수 있도록 해주는 (CSS-In-JS)라이브러리입니다. styled-components 설치 npm i styled-components 타입스크립트와 함께 사용하려면, 다음의 명령어를 추가로 실행해야 합니다. npm i -D @types/styled-components 🌕Todo의 타입을 지정해보자 할 일 목록(Todo)에는 고..