모던 리액트 Deep Dive에서 React의 렌더링 과정을 공부하고, 기존 브라우저 렌더링과의 차이점을 알아보고, React의 렌더링의 핵심인 Fiber에 대해서 공부해봤습니다.

서버 컴포넌트가 어떤 식으로 렌더링이 되고, 그래서 이를 사용 시에 어떤 이점을 볼 수 있는지를 정리해봤습니다.

서버 컴포넌트가 무엇인지 이해하기 위해 그 탄생하기까지의 과정을 참고해서 정리해봤습니다.

마이그레이션을 했는데 성능이… 본래 SSR로 마이그레이션하면서 개인적으로 CSR 때보다 기대하고 있던 거라면 당연, 초기 페이지 로딩 속도였다. 그러나, 마이그레이션을 마친 뒤 로그인 후 메인 페이지에 진입하는 걸 지켜봤는데 생각과 달리 느리다는 느…

근심, 관심 그리고 싹고칠 결심 지난 글로부터 시간이 좀 지났다. 그 사이에 면접도 있고 해서 준비하느라 잠시 놓고 있던 것도 있고, 각각 작업한 과정에 대한 블로깅을 하자는 의미에서 따로 집중한 시간도 있어서 종합적인 내용을 다루는 이 글을 이제서…

커스텀 훅은 대체 어떻게 써야 좋은 걸까? 면접 때도 그렇고, 프로젝트를 할 때도 그렇고 스스로에게 던지는 좋은 커스텀 훅이란 무엇인가에 대한 질문을 던지면 뚜렷한 답이 나오지 않는다. 실제로도 커스텀 훅에 대해서 고민해보고, 관련한 방법들을 찾아…

만능 Input은 죄악이다. ‘준비물 챙겼어’에서 Input 컴포넌트 자체에 여러 가지 기능이 다 담긴 만능 Input 컴포넌트를 만들려고 했었다. 그러나 점점 기능들이 다양하고, 엮어있는 컴포넌트들이 다양해지면서 코드가 점점 스파게티가 되어가고 나중가서는 …

마이그레이션에서 가장 고민했던 스타일링 스타일링 라이브러리 춘추 전국 시대. 그만큼 프로젝트의 입맛에 맞게 다양한 방식으로 스타일링을 적용하는 것이 가능해진 요즘이다. 계속해서 개발중인 사이드 프로젝트, ‘준비물 챙겼어?’에서는 Vite, React 기…

누구나 다 알던 간단한 지식인데 나는 이제 알게 된 내용들 4월에서 6월 사이에 면접 질문들을 준비하면서 이런저런 공부들을 하게 되었는데, 그 중에서 가장 충격적이었던 건 다른 사람은 다 알고 잘 쓰면서 정작 나는 모르던 것들이 있었다. 그 중 하나가…

서문 Next.js를 공부하면서 초반에 가장 많이 본 에러 중 하나가 바로 Hydration Error이다. 클라이언트 컴포넌트에 ‘use client’를 입력하지 않아서 종종 이런 에러들을 보곤 했는데, 돌이켜보니 이런 에러들을 해결하기에만 급급했지 대체 hydration이 뭐…

API 로직에 대한 고민 마이그레이션을 하면서 고민했던 사항 중 하나는 API 로직의 재사용 및 코드량 줄이기였다. 아래는 마이그레이션 전의 useEffect를 통해서 API 로직을 구현했던 코드이다. useEffect(() => { const getUserTravelLists = async () => …

❓ 면접에서 많이 물어보던 useEffect와 useLayoutEffect 얼마 전에 진행했던 과제에서도 그렇고, 이따금씩 면접에서도 이 둘에 대한 질문이 들어올 때가 있었다. 얼마 전까지는 단순히 면접 때문에 이를 외우고 있었다가, 과제에서의 리뷰에서 React에서는 u…

취업 준비와 업무 진행으로 인한 개발 중단, 그리고 복귀 마지막 커밋이 확인해보니 3월 28일이었다. 그 날로부터 지금까지 그 사이에 다양한 일들이 있었는데, 상반기 회고에 정리하긴 했지만 간략하게 여기서도 좀 풀어내자면 우선 4월 초부터는 면접 기…

과제에서의 경험 얼마 전, 제의를 받은 회사에서 과제를 했던 적이 있었다. 그 과정 속에서 Next.js로 CORS 정책에 따른 문제를 해결하던 적이 있었는데, 추후에도 이와 관련해서 같은 경험을 겪을 거라 생각했다. 그래서 이참에 CORS에 대해서, 그리고 COR…

프로젝트에 대한 고민 프로젝트의 3분의 1이 구현 완료 됐다. 구현하면서 너무 많은 것들이 바뀌었는데, 문서화를 거치면서 코드 컨벤션 맞추고 하는 변경 사항은 저번에 작성을 했었으니 이번엔 작업하면서 알게 된 사항이나 헤메던 것들을 기록하고자 한…

느슨한 생각은 개발에 해를 준다. 집중하지 못했던 시간을 제외하고 작업을 진행하게 된 지 약 2~3주 정도가 지난 것 같다. 기본 요소 이후로 어느 정도 뼈대가 잡아지긴 했지만, 하다 보니까 크게 반성하게 되었던 부분이 몇 가지 있었는데 가장 컸던 건 ‘…

⚠️ Next.JS 프로젝트에서 Vercel 배포 중에 발생한 이슈 어제, 너굴의 숲 행사 관련으로 3시간 정도 급하게 프로젝트를 만들었던 적이 있었는데 막판에 Vercel로 배포했더니 계속해서 실패하는 이슈가 있었다. 어떤 이슈였을지 파악해보니 다음과 같은 배포 …

️ 이번의 이야기 저번에는 프로젝트의 계기와 그 준비 과정에 대한 이야기를 적었다. 여기서는 1주차에서 기본 요소라고 생각한 페이지들을 구현하면서 배우거나 알게 된 점들을 적어보고자 한다. Next.JS가 아닌 Vite로 진행하니까 구현할 때, 설정 면에서 …

개인 프로젝트를 다시 시작하다. 회사에서 6개월 동안 일을 하고 계약 만료로 그만두게 됐다. 이후에는 지쳐있던 멘탈을 관리해야겠다 싶어 한동안 코드를 멀리하고 12월에는 여행을 다니고, 1월에는 많은 분들과의 커피챗을 나누면서 개인적인 시간들을 보…

이슈의 고통, 그리고 복습. 요 2주 동안 특정 피쳐의 이슈 처리들을 진행했다. 열심히 수정해도 터지는 이슈들, 수정해도 되돌아오는 이슈들. 하면 할 수록 자존감도, 자존심도 많이 떨어지고 극단적인 생각으로 개발을 포기해야 하나라는 생각도 들었는데,…

tsconfig.json부터 배포까지 지난 시간에는 Webpack과 여러 패키지를 설치했고, Webpack에 관한 설정을 이것저것 찾아봤다. 이번엔 후반부로서 TypeScript를 사용할 거라면 알아야 하는 TypeScript의 설정과 마지막으로 React에 App.tsx로 연결까지 완료해 …

프로젝트 세팅은 어떻게 하는거지? 얼마 전 친해지게 된 담 님을 통해서 이런저런 이야기를 하다가, 개발 환경 구축에 대해서 이해하고 싶다면 Webpack으로 환경 구축해볼 것을 권장하는 이야기를 해주셨다. 번들링, 소스맵 등 개발 환경 및 빌드 등을 할 …

⚡ Vite로 프로젝트를 생성해보자! Vite 터미널에 다음과 같이 입력하자. $ npm create vite@latest 다음과 같이 환경을 세팅해주자. Need to install the following packages: create-vite@4.4.1 Ok to proceed? (y) y √ Project name: ... . √ Select a fra…

나는 useState를 이해하고 있나? 문득 그런 생각이 들었다. 그런 생각이 들었던 건, 예전의 예차니즘 님께서 말씀하신 그 말이 떠올라서였는데.. 클로저에 대해서 물어볼 때, useState가 왜 클로저인지를 말할 수 있어야 한다는 그 말씀. 되게 기억에 남아…

ScrollView와 FlatList는 같이 쓰면 안 된다. 이번에 구현하면서 미처 수정을 하지 못 했던 한 가지 이슈가 있다. QA에 등록되지 않았는데, 이건 기술적인 이슈였기 때문이다. 이번에 만든 프로젝트 관련으로 ScrollView 속에 FlatList를 넣어서 쓴 이슈가 …

⚠️ 이슈가 들어왔다. 이번에 작업한 업무와 관련하여 QA 팀과 디자인 팀에서 속도 개선에 대한 건의 사항이 들어왔다. 이번에 작업한 내용 중에 follow와 unfollow를 하는 페이지가 있는데, 이미 있는 기능을 그대로 가져와 쓰고 있는 데다 해당 기능은 누를…

‍ React Native의 style 적용법 기본 style 적용 방법 React Native의 style은 Web의 CSS 방식이 아닌 CSS-in-JS 방식과 비슷하다. 사용 시에 주의해야할 사항이 있는데, 다음의 코드를 보면서 이해해보자. import React from 'react'; import {StyleSheet, …

갑자기 왜 React-Native인가? 현재 회사에서 운영중인 서비스는 React-Native로 운영되고 있는 앱이다. 회사에서는 어찌됐든 프론트엔드 개발자는 모두 RN을 할 줄 알아야 했고, 나 역시 예외는 아니었어서 결국 피할 수 없는 운명에 처하게 되었다. 오 갓.…

부트캠프에서 프로잭트를 진행했을 때, 상태 관리툴로 Redux Toolkit을 사용했다. 그러나 그 당시에는 미들웨어의 역할이 무엇이고, 왜 쓰는지. 그리고, 그냥 fetch나 axios 통해 연결하고 쓰면 되는게 아닌지. 프로젝트를 진행하는 과정 내내 그런 생각이 …

참고 도서 모두의 네트워크 - YES24 강의 정리 프로토콜 (Protocol) 컴퓨터 간에 정보를 주고받을 때의 통신 방법에 대한 규칙이나 표준 각자의 언어가 다르면 대화가 이어지지 않으므로 공용어를 사용하도록 규칙을 정해 대화가 이어지도록 한다. OSI 7 L…