Jerry

리액트에 대해서 공부하는 사람이라면 대부분 듣거나 알고 있을 개념인 Props Drilling에 대해서 공부하는 도중..Props Drilling에 대한 해결책으로 여러 라이브러리나 리액트 내부 기능이 존재했다. 리액트에서 제공하는 상태 관리 기능은 Context API이 존재하고,상태 관리 라이브러리에는 Redux, Zustand, Recoil, Jotai 같은 것들이 대표적으로 있다.거의 모든 상태관리 라이브러리들은 이 api를 기반으로 개발되었다고 한다. 먼저, Props Drilling에 대해 알아보았다.기존에 상태 관리하는 기능이나 라이브러리가 없었던 시절(?), 컴포넌트 간에 상태를 공유하기 위해 Prop을 여러 계층을 통해 전달하는 것이 일반적이었다. 즉, Props Drilling은  상위..

캐싱: 캐싱은 자주 사용하는 데이터나 연산 결과를 임시 저장소(Cache)에 저장해, 동일한 요청이 들어왔을 때 저장된 값을 반환하여 성능을 향상시키는 기법 특징주로 디스크 I/O, 네트워크 요청, DB 조회 등과 같은 비싼 연산 비용을 줄이기 위해 사용됨캐시 계층(Cache Layer) 를 두어 속도가 빠른 저장소(RAM, SSD 등)에 데이터를 저장일반적으로 범용적인 데이터 저장소로 활용됨 예시 웹 브라우저 캐시: 방문한 웹사이트의 이미지, CSS, JavaScript 파일을 저장하여 다시 방문할 때 빠르게 로드데이터베이스 캐시: Redis나 Memcached 같은 인메모리 캐시를 사용하여 데이터베이스 조회 부담을 줄임CPU 캐시: 프로세서가 자주 사용하는 데이터를 L1, L2, L3 캐시에 저장하여..

#페이지라우팅- 경로에 따라 알맞은 페이지를 렌더링 하는 과정- /new -> new 페이지 렌더링Multi Page Application (MPA)- 애초에 서버가 여러 개의 페이지를 가지고 있음- 많은 서비스가 사용하는 전통적인 방식서버 사이드 렌더링 vs MPA- 서비가 여러 개의 페이지를 가지고 있는 것이 후자- 브라우저가 페이지 요청을 했을 때, 해당 페이지를 응답해주는 것이 전자But, 리액트는 이 방식을 따르지 않음- 페이지 이동이 매끄럽지 않고 비 효율적임- 다수의 사용자 접속 시, 서버의 부하가 심해 짐-SPA(Single Page Application)- 페이지 이동이 매끄럽고 효율적임- 다수의 사용자가 접속해도 크게 상관 없음- 필요한 요소만 교체동적 경로(Dynamic Segment..

#useReducer- 컴포넌트 내부에 새로운 State를 생성하는 React Hook- 모든 useState는 useReducer로 대체 가능- 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음   #최적화- 웹 서비스의 성능을 개선하는 모든 행위를 일컫음- 아주 단순한 것부터 아주 어려운 방법까지 매우 다양함일반적인 웹 서비스 최적화 방법- 서버의 응답속도 개선- 이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선- 불필요한 네트워크 요청 줄임- ...React App 내부의 최적화 방법- 컴포넌트 내부의 불 필요한 연산 방지- 컴포넌트 내부의 불 필요한 함수 재생성 방지- 컴포넌트의 불 필요한 리렌더링 방지     #useMemo- "메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리..

이번에는 '리렌더링이 되는 조건'이라는 주제에 대해서 이야기해보려고 한다. 리렌더링 되는 조건 이란 무슨 뜻일까? 요 며칠간 리액트에 관해 공부하고 있어서 그나마 쉽게 정리를 하지 않을까 싶었지만 리렌더링에 대한 의미에 대해 생각해보니 단순하게 입으로 리렌더링이란 말을 썼지 이 용어 의미하는 바를 제대로 모르고 있었고 NaverD2에 있는 이 글을 보고 이해해볼 수 있을까했는데... D2에 있는 글은 열심히!! 읽어봤지만 필자에겐 아직 어려웠다... 다른 레퍼런스를 참고해 리렌더링에 대해 알아보려고 한다! 가즈아!! 포기하지마!!! 그렇다면 먼저! 렌더링에 대해서 알아보자! 1. 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 2. React 엘리먼트를 루트 DOM 노드에 렌더링 하려..

어제 '리액트 최적화'에 대한 키워드를 정리하다 보니 최적화라는 것이 Virtual DOM과 연관이 있다는 것을 덤으로 알게 되었다. 덩달아 기술면접 관련 스터디 주제에 Virtual DOM이 있는 것이 아닌가?! 이때다 싶어서 이번 주제를 Virtual DOM으로 정했다!! 최적화에 대해 공부하면서 Virtual DOM에 대해 잠깐 보았지만 정말 내가 제대로 알고 있는 것 같지 않았기에 이번 기회를 통해서 관련 개념이 한층 깊어지는 시간이 되었으면 한다. Virtual DOM 이란 무엇일까? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory ..

필자는 현재 코드스테이츠 Immersive 수료 후에 취업 준비 과정 중에 있다. 취업 준비 과정에서 리액트에 다시 개념 공부도 하고 있기도 하고 스터디원들과 기술 면접 리스트를 가지고 준비하는 과정에서 이번에 "리액트 최적화"라는 주제가 내 눈길을 사로잡아 이번 기회로 잘 정리해보려고 한다. 이번 주제와 관련해서 공식 문서와 여러 잘 정리된 블로그 글들을 보고 너튜브 영상도 찾아서 보았다. 참고한 자료들을 나름 집대성해보려고 했으나 양이 비대해지는 걸 막지 못해 핵심적인 부분 위주로 구성을 해보았다. 각 내용의 자세한 내용들을 참고한 자료의 출처에 대한 내용들을 보시면 더 이해가 잘 될 것이다. 만약, 한 번 보고 이해가 안 가신다면 그건 당연하다고(?) 말씀드리고 싶고 꼭 필자의 글만 볼 필요 없고 ..

이틀간 스프린트 결과물이다. 아직 많이 부족하지만, 주말에 보강해보고 부족하면 더 시간 날 때마다 해볼 생각이다. 스프린트 내용은 밑에 적어 놓았다. 스프린트 설명 이번 스프린트는 클라이언트 사이드 프로젝트와 서버 사이드 프로젝트를 따로 만드는 스프린트다. 테마는 Personal Portfolio이며, 즉 자신의 포트폴리오를 만들기다.! Bare minimum Requirement로는 클라이언트 사이드 React를 사용해야 합니다. SPA(Single Page App)로 만들어야 합니다. 클라이언트 상에서 페이지 라우팅을 적용하십시오. React Router를 사용해봅시다 Stateful 한 컴포넌트를 두 개 이상 만드세요. (다음 예시를 참조하세요. 라이브러리를 사용하지 마세요.) 메뉴 선택 (sele..