React Suspense > 컴포넌트가 데이터를 기다리고 있음 > 데이터를 기다리는 동안 fallback 컴포넌트를 선언적으로 렌더링 선언적이라는 개념은 명령형과 비교하여 아래에서 설명해보도록 하겠다. 명령형 프로그래밍(Imperative) VS 선언형 프로그래밍(Declarative) |명령형 프로그래밍|선언형 프로그래밍| |:-:|:-:| |HOW|WHAT| |무엇을 어떻게(HOW) 할까|무엇(WHAT) 을 할 것인가| 말로만 보면 둘이 정확히 어떤 차이가 있는지 좀 모호하기 때문에 동일한 예시를 각 방법으로 코드로 표현한 것을 통해 차이를 알아보도록 하자. 배열 요소들의 합을 구하는 예제이다. 명령형, 선언형으로 어떻게 구현할 수 있는지 나타내보았다. |명령형 프로그래밍|선언형 프로그래밍| |:-:|:-:| |어떻게(HOW) 배열의 합을 구할지 설명|무엇(WHAT)을 하는지 작성(배열의 합 구하기)| ||명령형의 추상화된 형태| |![](h

VAC 패턴이란? > View Asset Component HTML과 거의 유사한 뷰(View) 컴포넌트와 비즈니스 로직(Business Logic)만 담고 있는 컴포넌트를 만드는 것으로 역할을 완전히 분리하는 것 모든 컴포넌트를 뷰 파일과 로직 파일로 분리한다는 것이 특징 비즈니스 로직(Business Logic)과 뷰(View) 비즈니스 로직(Business Logic) > 컴퓨터 프로그램에서 실세계의 규칙에 따라 데이터를 생성, 표시 저장, 변경하는 부분을 일컫는다. 뷰(View) > 데이터를 표시만 해주는 것. 화면에 나타나는 부분(UI) VAC 패턴 도입 이유 관심사가 분

필요한 모듈 설치 react-use-gesture 제스처를 통한 UI 상호작용을 구현할 수 있는 라이브러리이다. react-use-gesture 설치 react-spring spring-physics 기반의 애니메이션 라

반응형 웹 구현을 위해 화면 크기가 달라질 때마다 화면의 가로나 세로 길이를 구하고자 했다. 컴포넌트 내에서 window.innerWidth로 받아오면 처음 렌더링할 때의 가로 길이는 받아올 수 있었는데, 새로 고침을 하지 않고 화면 사이즈가 변경되었을 때는 동적으로 브라우저의 가로 길이를 받아올 수 없었다. 브라우저 화면 사이즈가 변경될 때마다 그 값을 리턴하고 리렌더링하는 리액트 커스텀 훅을 사용하여 특정 컴포넌트가 데스크탑 사이즈일 때만 보일 수 있도록 처리했다. useEffect useEffect 를 사용하여 이벤트 리스너를 부착하고, window size가 변경될 때 state를 변경해준다. removeEventListener removeEventListener를 하지 않을 경우 이벤트가 붙어있는 컴포넌트가 unmount되어도 addEventListener가 남아있기 때문에 sideEffect(부작용)이 일어날 수 있다. 따라서 useEffect

프로젝트 배포가 끝났다. 첫 배포 후 라이트하우스에서 성능을 측정해보니 성능 65점, 접근성 86점으로 개선해야 하는 수치가 나왔다. 성능과 접근성 면에서 여러 가지 방법으로 리팩토링을 시도해볼 예정인데, 첫번째 시도는 이미지 스프라이트를 사용하여 Peformance 점수를 향상 시켜보는 것이다. 문제 상황 많은 아이콘 이미지들이 한 페이지에서 동시에 불려지고 있는데, 레티나 디스플레이 대응을 위해 2배 크기의 이미지로 저장해두었더니 용량도 용량이고 아이콘 이미지 호출 횟수가 많은 것을 확인해볼 수 있다. 문제 해결을

지금까지 주로 깃헙 페이지를 이용해서 배포를 했었는데 리액트 코드는 코드를 수정하고 빌드하고 다시 업로드하는게 번거로워서 이번 팀 프로젝트는 Netlify를 사용하여 배포하였다. 가장 편리했던 점이 Netlify에서 빌드를 알아서 해줘서 배포를 해주는 것이었다. 최신 코드를 push하면 알아서 build해서 최신 상태의 코드로 서비스를 배포해준다. 그래서 리액트 코드를 Netlify로 배포하는 데 성공했다! 링크를 통해 잘 실행은 되는데... 새로고침만 하면 404 에러가 뜨는 문제가 발생했다. > 새로

프로젝트에서 사용하는 일반적인 폴더 구조에 대해 정리해보려고 한다. (⚠️ 일반적이지 않을 수 있음..) 리액트 프로젝트를 시작할 때 다음 명령어로 손쉽게 환경을 셋팅할 수 있다. 위 명령어를 실행하면 다음과 같은 파일들과 디렉토리들이 생성된다. 기본 파일 구조 📂 node_modules package.json 파일에서 명세된 모듈들이 설치된 폴더이다. 소스가 많아 용량이 크기 때문에 .gitignore 파일에 nodemodules/ 폴더를 추가해놓고 깃허브에는 올리지 않는 것이 일반적이다. 아까 전 명령어를 입력하여 .gitignore 파일이 생성됨과 동시에 파일에 nodemodules/ 폴더가 등록되었으니 별도로 .gitignore에