Front-end
-
Next.js 13 으로 알아보는 FE 렌더링 방식 (SSR vs RSC) 1. 소개 FE 개발자라면 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)이라는 용어는 매우 익숙할 것이다. 이번 포스팅에서는 이와 같은 렌더링 방식에 대해 다룰 예정이다. 최근에 Server Components가 Next.js 13의 출시와 함께 등장하면서 렌더링 방식이 획기적으로 변했기 때문에 지금까지의 렌더링 방식의 변화과정과 RSC(React Server Components)와 SSR을 Next.js를 통해 비교해볼 것이다. 결론부터 확인하고싶다면 "3.비교" 부분부터 봐도 좋다. * 렌더링 방식의 변화 비교적 최근 FE에서 자주 볼 수 있는 렌더링 방식의 변화과정이다. 리액트와 같은 도구의 등장으로 CSR(Client-Side Rendering).. -
BFF 개발 시의 고려요소 1. 소개 - 지난 포스팅에서는 BFF란 무엇인지, 어떻게 구현될 수 있는지 알아보았다. BFF는 프론트엔드와 백엔드 사이에서 중간 계층으로 동작하는 서버이다. 서버이기 때문에 BFF를 개발할 때는 데이터 통신, 보안, 성능 최적화, 배포 등을 고려해야 한다. 이 포스팅에서는 BFF 개발 시 이 네 가지 요소에 대해 자세히 알아보고, 각 요소의 중요성과 고려사항을 살펴보겠다. 2. 고려사항 * 데이터 통신 - BFF의 데이터 통신은 프론트엔드와 백엔드 간의 효율적인 데이터 전송을 위해 중요한 요소다. 데이터 통신을 최적화하기 위해 다음과 같은 전략과 기법을 고려할 수 있다. 비동기적인 방식으로 API 호출을 처리하여 응답 시간을 단축한다. 이를 통해 클라이언트는 여러 개의 API 요청을 병렬로 처리할 수.. -
프론트엔드 상태 관리와 역사 1. 상태관리란 * 소개 - 프론트엔드하면 상태관리라는 단어를 빼놓을 수 없다. 상태를 효율적으로 관리하고 보여 주는 것이 프론트엔드 역량의 핵심이라 해도 과언이 아닐 것이다. - 그렇다면 도대체 상태가 무엇이고, 상태가 왜 프론트엔드에서 중요할까. 이러한 필요성들이 어떻게 어떤 목표를 가지고 발전해왔을까. 오늘의 포스팅은 이런 고민에서 시작하게 되었다. * 상태란? - 프론트엔드에서 상태란 주로 유저 정보나 UI에 영향을 미치는 동적으로 표현되는 데이터이다. 특정 컴포넌트안에서 관리되는 로컬 상태와 여러 컴포넌트에서 관리되는 전역 상태로 구분지을 수 있다. 말로는 어려우니 아래의 예시를 보자. - 위는 필자가 최근 진행했던 프로젝트에서 할일을 보여주는 부분을 캡쳐한 것이다. 회사 내에서 개인이 자신의 ..
