최근 Recoil로 상태관리하고 있는 프로젝트 진행중에 새로고침시 Recoil 데이터/상태들이 💨증발💨해버리는 것을 발견했다.그래서 필자는 이 문제를 어떻게 해결했는지에 대해 정리해보고자 한다.필자는 민감한 정보를 recoil로 관리했기 때문에 localStorage와 sessionStorage를 사용하지 않으려 했다.Web Storage의 이해프론트엔드 개발을 하면서 상태관리는 항상 중요한 화두라고 할 수 있다.일단 문제 해결을 하기 전에 다양한 스토리지 옵션에 대해서 이해해야된다고 생각한다.localStorage웹 브라우저에서 제공하는 데이터 저장소로, 브라우저를 종료하더라도 데이터가 유지된다.(도메인별로 별도의 저장공간을 가지며, 최대 5MB까지 저장할 수 있음.)// localStorage 사..

오늘은 아주아주 기초적인 컴포넌트 종류에 대해 개념 정리하고자 한다 (아카이빙용).기초를 배우는 사람들은 이러한 차이가 있구나~라고 이해라도 해주면 좋을 것 같다.React 컴포넌트란?먼저 React 컴포넌트가 뭘까?React에서 컴포넌트는 UI를 구성하는 가장 기본적인 단위이다.웹 페이지를 레고 블록으로 비유한다면, 컴포넌트는 각각의 레고 조각이라고 할 수 있다.(재사용이 가능하고, 독립적이며, 고유한 기능을 가진 UI 조각들!! 🧩)클래스형 컴포넌트클래스형 컴포넌트는 React의 전통적인 방식으로, ES6의 class를 사용하여 정의한다.💡ES6란?ECMAScript 6로서 2015년 공식적으로 업데이트한 자바스크립트 문법이다.React.Component를 상속받아 만들어지며, 반드시 render..

오늘은 웹 렌더링의 핵심이라고 할 수 있는 CSR과 SSR에 대해 React를 중심으로 정리해보고자 한다.CSR(Client Side Rendering)이란?CSR은 브라우저가 JavaScript를 다운로드, 실행하여 페이지를 렌더링하는 방식이다.초기에 빈 HTML을 받고, React 애플리케이션이 브라우저에서 실행되면서 콘텐츠를 생성한다고 볼 수 있다! 기본적인 CSR React 앱의 HTML 구조를 살펴볼까? 이 HTML은 거의 비어있고, bundle.js가 실제 애플리케이션 코드를 포함하고 있으며,브라우저는 이 JavaScript를 실행하여 페이지의 내용을 동적으로 생성한다.SSR(Server Side Rendering)이란?SSR은 서버에서 페이지의 HTML을 생성하여 클라..

최근에 React의 개념을 파헤치던중 컴포넌트의 생명주기에 대해서 공부하게 되었다.처음에는 단순히 컴포넌트가 화면에 나타나고 사라지는 것이라고만 생각했는데, 실제로 공부해보니 훨씬 더 복잡하고 깊이있는 개념이었기에 필자가 생명주기에 대해 공부하면서 정리한 내용을 공유하고자 한다. 생명주기란?React 컴포넌트의 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 전체적인 과정을 의미한다.이는 마치 우리가 태어나서 살아가다가 죽음을 맞이하는 것처럼, 컴포넌트도 자신만의 생애 주기를 가지고 있다.(React에서는 이러한 각각의 단계에서 특정 코드를 실행할 수 있게 해주는 메서드들을 제공하고 있다.) 그럼 이제 자세하게 알아보자!1. 마운팅 단계마운팅은 컴포넌트가 처음 DOM에 렌더링되는 과정이며, 이 단..

처음 React 프로젝트를 시작할 때 마주치는게 무엇일까? 함은 바로 이 npm이라고 할 수 있다.블로그 여기저기를 찾다보면 npm install 뭐시기 뭐시기 하라고 해서 뭔지도 모르고 따라한 사람들이 많을것이다.(필자도 마찬가지,,))따라서 필자는 npm에 대해서 공부하고 이해한 내용을 정리해보기로 했다.npm이란?npm은 Node Package Manager의 약자로, JavaScript 패키지의 거대한 생태계라고 볼 수 있다.전 세계 개발자들이 만든 다양한 JavaScript 라이브러리들을 쉽게 설치하고 관리할 수 있게 해주는 도구이며,Node.js를 설치하면 자동으로 함께 설치되는데, 마치 앱스토어처럼 필요한 패키지를 검색하고 설치할 수 있다고 보면된다!예전에는 개발자들이 직접 JavaScrip..

SPA와 라우팅의 이해먼저 SPA가 무엇인지 알아봐야 되지 않을까 싶다. 뭘까?SPA(Single Page Application)는 하나의 HTML 페이지에서 JavaScript를 통해 동적으로 콘텐츠를 변경하는 웹 애플리케이션이다.최초 접속 시 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 한 번에 받아온 후, 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 서버에서 전달받아 페이지를 업데이트한다.아직도 이해가 안되는 사람들이 많다고 생각한다. 정리해보자면 아래와 같다.[전통적인 웹 페이지 방식]브라우저 -> 페이지 요청 -> 서버서버 -> HTML 페이지 전체 전송 -> 브라우저브라우저 -> 페이지 전체 새로고침[SPA 방식]브라우저 -> 최초 접속 -> 서버서버 -> 전체..

필자는 여러 프로젝트를 진행하면서 Props Drilling 문제를 항상 마주하였고 정말 귀찮음을 느꼈던것 같다. 그러다 Recoil을 접했는데 신세계? 였던것 같다,, 그렇기에 내가 사랑하는 Recoil에 대해 개념정리를 해보고자 한다!!! Recoil이란??Recoil은 React 애플리케이션을 위한 상태 관리 라이브러리이다.Redux나 MobX와 같은 다른 상태 관리 도구들과 비교했을 때, React에 최적화되어 있어 학습하기 쉽고 사용법이 직관적이다.React의 내부 상태 관리 방식과 유사한 접근법을 사용하기 때문에, React 개발자들이 쉽게 적응할 수 있을거라고 개인적으로 생각이 든다. 더 깊게 들어가기전에 Props Drilling 문제가 궁금할수도 있따고 생각한다.Props Drilling..

최근 프로젝트를 진행하면서 카카오 로그인과 같은 API 키를 .env파일과 함께 다루다가 마주친 문제가 있었다.바로.env파일 내에서 카카오 로그인 API키를 변경하고 저장을 눌렀는데,이미 npm start로 실행된 웹에서 변경된 api키를 감지하지 못하고 카카오 로그인이 안된 문제였다.. (식겁)일단 이 부분에 대해 트러블슈팅하기 전에 환경변수부터 알아보고자 한다.환경변수란?환경변수는 애플리케이션이 실행되는 환경에 따라 다르게 설정되어야 하는 값들을 저장하는 변수이다.API 키, 데이터베이스 접속 정보, 서버 URL 등과 같은 민감한 정보나 환경별로 다르게 설정해야 하는 값들을 관리할 때 주로 사용된다!!!// .env 파일 예시REACT_APP_KAKAO_KEY=kakao_api_keyREACT_AP..

React를 배우면서 가장 어려웠던 개념 중 하나가 useEffect였던 것 같다.필자는 useEffect가 처음에는 단순히 '컴포넌트가 렌더링될 때 실행되는 함수구나'라고 생각했지만, 실제로 사용해보니 그 이상의 것들이 있다는 것을 알게 되었다.그래서 필자는 useEffect에 대해 정리하고자한다. useEffect란?useEffect는 React 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 Hook이다.❗️여기서 부수 효과란? ❗️데이터 페칭, 구독 설정, DOM 수동 조작과 같은 외부 시스템과의 동기화 작업을 의미한다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 하나로 통합한 것이라고 볼 수 있다!..

React란 스택을 배우고 공부하면서 마주치지 않을 수가 없는 개념이 있다.바로 Props이다. 필자는 이 Props에 대해 복잡하게는 아니더라도 이게 무엇인지에 대한 개념정리를 해보려고 한다.Props가 뭘까?Props는 React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.Properties의 줄임말로, 컴포넌트 간의 통신을 가능하게 하는 핵심적인 메커니즘이기 때문에 너무 중요한 개념이라고 볼 수 있다.기본 개념Props는 읽기 전용(read-only)이며, 자식 컴포넌트에서 직접 수정할 수 없다.이는 React의 단방향 데이터 흐름 원칙을 따르는 것으로, 데이터의 흐름을 예측 가능하게 만드는 장점이 있다. 예시 코드를 잠시 살펴보겠다.// 부모 컴포넌트function Paren..