1. 들어가며개인적으로 Zustand 라이브러리를 여태껏 사용해보면서 굉장히 만족감을 느끼고 있고 가히 최신 상태 관리 라이브러리 중에 앞서고 있는 라이브러리가 아닐까 생각이 듭니다. 이에 Zustand의 기본적인 사용만 해보는 것이 아니라 조금 더 다양한 기능들을 알아보면서 심화된 기능들도 사용해보고자 글을 작성하게 되었습니다. 2. Zustand의 위엄Zustand는 모던 React 라이브러리로 React 웹 개발 생태계에 상당히 뜨거운 바람을 불어 넣고 있습니다. 그 단순함은 Redux와 비교했을 때 엄청난 차이를 보여주기도 합니다.(안정성 측면은 모르겠지만...) 제가 체감했을 때는 난이도도 난이도지만 코드 양 자체가 별찍기 문제를 C언어로 푸는 것과 파이썬을 푸는 것을 비교하는 것과 비슷하다고 ..

최근 프론트엔드 개발을 진행하면서 Sentry라는 에러 모니터링 도구를 알게되었습니다. 제가 맨 처음 프론트엔드 개발을 했을 때는 에러가 발생하는 경우 그냥 브라우저의 console.error()를 통해 에러 로그를 찍었었는데 이는 사용자 입장에서는 보이지도 않을 뿐더러 개발자 도구를 열어서 본다고 하더라도 의미없는 에러 로그만 보이게 됩니다. 개발자 입장에서도 어떤 에러가 발생했는지 사용자 브라우저에 들어가보지 않는 이상 모르기 때문에 디버깅을 하기 또한 어렵습니다. 그래서 최근에는 사용자 입장에서 유의미한 에러 문구를 보여주기 위해 콘솔을 찍지 않고 toast UI에 에러 메세지를 담아 보여주는 방식으로 사용하고 있습니다. 하지만 그렇다고 해도 그러한 에러를 수집하지 않는 이상 개발을 하는 제 입장에..

본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 react-pdf과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며'깃트폴리오'에서는 사용자의 이력서를 자동으로 생성해주며 AI와 같이 수정해 나가면서 최종적으로 나에게 온전히 맞춰진 이력서를 손쉽게 만들어 주는 것에 초점을 두고 있습니다. '이력서를 만들어준다'라는 것은 AI를 통해 만들어진 이력서의 내용을 단순히 보는 것에 그치는 것이 아니라 해당 이력서를 pdf 등의 문서로 저장하는 것까지 포함해야 했습니다. react 컴포넌트를 pdf로 저장하는 기능을 구현하려는 분들에게 제가 대신 겪었던 문제와 해결 방법을 공유하여 이 글이 조그만 이정표가 되어줬으면 하는 바램으로 글을 작성해보았습니다...

1. 들어가며2024년 9월 초 즈음에 OpenAI에서 기술 스택 전환에 대한 내용이 화두가 된 적이 있습니다.  생태계가 꾸준히 RSC(React Server Component), SSR(Server Side Rendering)으로 발전하고 있으며, 머지 않아 SPA(Single Page Application)이 없는 것처럼 동작하는 react 생태계를 보게될 것이라는 예측이 항간에 나오고 있습니다. Vercel은 Next.js와 자사의 플랫폼 사용을 증가시키고, 이를 통해 수익을 창출하기 위해 노력해왔습니다. 이런 행보는 매우 자연스러운 일이죠. 하지만 여기서 문제가 되는 것은 많은 React Core 팀 멤버들이 Next.js 팀으로 이동하면서, React의 방향을 Next.js의 우선순위에 맞추는..

1. React 상태 관리React에서 상태 관리는 애플리케이션 내에서 데이터의 동적인 변화를 추적하고 조작하는 그 행위 자체를 의미합니다. React에서 '상태(state)'는 컴포넌트의 렌더링 결과에 직접적인 영향을 미치는 데이터로, 사용자 입력, 서버로부터 받은 응답, 혹은 기타 이벤트에 따라 변경될 수 있다는 특징을 가지고 있습니다. 주요 특징은 아래와 같습니다.컴포넌트 상태: 각 컴포넌트는 자체적으로 상태를 가질 수 있도록, useState와 같은 훅을 통해 관리합니다.상태의 복잡성 증가: 애플리케이션 규모가 커지면서 여러 컴포넌트 간에 상태를 공유해야 하는 상황이 발생합니다.상태 관리의 중요성: 효율적인 상태 관리는 코드의 가독성, 유지보수성, 그리고 애플리케이션의 성능에 직접적인 영향을 줍니..

본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 text selection과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며 깃트폴리오의 궁극적인 목표는 이력서를 생성해주는 데에서 그치지 않고 AI와 커뮤니케이션을 통해 나에게 맞는 최적의 이력서를 뽑아내는 데에 있습니다. 그렇기 때문에 '내 이력서'를 확인하는 화면에서는 이력서의 내용뿐만 아니라 AI에게 이력서의 특정 부분을 수정 요청할 수 있도록 우측에 마련한 '채팅 사이드바'가 존재하는데요. 기획 단계에서 이 부분을 구현하는 방식에 있어서 팀원들끼리 다양한 의견이 오고 갔었습니다. 물론 가장 이상적인 상황은 요구사항만 딱 보내도 AI가 알잘딱하게 알아서 수정해주는 것일 것입니다. 하지만 ..

1. 들어가며[Front-end] - [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링) [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링)1. 들어가며우리가 컴퓨터를 하면서 가장 많이 사용하는 프로그램은 무엇일까요? 단연 웹 브라우저(크롬, 사파리, Edge,...)일 것입니다. 웹 프론트엔드의 근간이라고도 할 수 있는 웹 브라우저가cdragon.tistory.com 지난 포스팅에서 브라우저가 어떤 방식으로 화면을 그리는지에 대해서 알아보았습니다. 이번 포스팅에서는 그렇다면 React는 어떤 과정들을 거쳐 브라우저에게 파일을 전달하며, 렌더링은 어떻게 되는 것인지에 대해 알아보도록 하겠습니다. 지난 시간 다루었던 웹 페이지가 렌더링 되는 과정을 간단히 요약하면 아..

1. 들어가며우리가 컴퓨터를 하면서 가장 많이 사용하는 프로그램은 무엇일까요? 단연 웹 브라우저(크롬, 사파리, Edge,...)일 것입니다. 웹 프론트엔드의 근간이라고도 할 수 있는 웹 브라우저가 어떤 방식으로 화면에 요소들을 그리는지에 대해서 알아보도록 하겠습니다. 2. 웹 브라우저란?어떤 내용으로 시작을 할까 고민을 하면서 웹 브라우저의 역사부터 시작해야 하나 생각도 했지만 항상 드는 생각은 너무 많을 것을 담으려다 보니 내용이 고봉밥이 되는 문제가 있었기 때문에 이제는 좀 핵심적인 내용만 담으려고 합니다.  웹 브라우저란 무엇일까요? 우리가 흔히 사용하는 크롬, Microsoft Edge, 사파리 등이 모두 웹 브라우저입니다. 인터넷 상에 존재하는 모든 페이지들을 넘나들 수 있다는 특징을 갖고있죠..