Jaeilit

프론트엔드 개발자로써 컴포넌트를 만들고 사용하는데 익숙합니다... 컴포넌트를 만드는 패턴에도 여러가지가 존재하고 만드는 것에 대해서도 알게모르게 규칙들이 존재합니다. 그리고 UI 컴포넌트에 대한 디자인 시스템이라는 개념도 등장하고 이 개념을 뒷받침 해줄 아토믹 패턴도 등장했습니다. 아토믹 디자인 패턴에 대한 장점과 단점 또한 명확하며 그 단점을 보완해줄 스토리북이라는 프레임워크도 등장했습니다. 이런것들을 생태계라고 표현한다면 제가 처음 리액트를 접했을 때 보다 엄청 비대해졌습니다. 물론 이런 개념적인 부분이 모든 프론트엔드 개발자분들에게 필수역량이 아니기에 무시하는 사람도 존재합니다. 단적으로 예를들어서, 페이지 단위로 파일을 작업하고 이것을 컴포넌트라고 부르며 모든 코드를 페이지 단위로 만들어버릴 수도..

React Suspense https://ko.reactjs.org/docs/react-api.html#reactsuspense React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 공식문서 참고 "컴포넌트가 아직 렌더링 할 준비가 되지 않는 경우 로딩을 나타낼수 있도록 해줍니다." 현재는 lazy loading 때만 사용한다고 하지만 향후에는 fetching 등 비동기 로직에도 사용할 수 있도록 업데이트 할 예정이라고 합니다. 1. 성능 최적화를 생각해보기 리액트 성능최적화를 위해서 불필요한 리렌더링, 중복코드도 줄여보고 코드도 간결하게 해보고 라이트 하우스도 끌어올리려고 해보지만 제 생각에는 번들 용..

프로젝트 리팩터링 과정에서 어떻게 리액트 / 컴포넌트 를 설계해야할까? 라는 고민이 생겼다. 사실 리액트를 하는 프론트 개발자라고 하기엔 너무 늦게 고민이 생긴게 아닌가.. 평소 너무 생각 없이 작업을 해왔던게 아닌가 조금 부끄러웠다. 가장 먼저 리액트 공식홈페이지에서 리액트는 선언형 이라고 소개하고 있다. 선언형 프로그래밍이란? 위키피디아에서의 선언형 프로그래밍에 대해 이렇게 설명하고 있다. 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 설명하는 경우에 '선언형' 이라고 한다. 예를들어, 웹 페이지는 선언형인데 윕페이지는 제목, 글꼴, 본문, 그림과 같이 '무엇'이 나타나야하는지를 묘사하는 것이지 '어떤방법'으로 컴퓨터 화면에 페이지를 나타내야하는지를 묘사하는 것이 아니기 때문 ...