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. 성능 최적화를 생각해보기 리액트 성능최적화를 위해서 불필요한 리렌더링, 중복코드도 줄여보고 코드도 간결하게 해보고 라이트 하우스도 끌어올리려고 해보지만 제 생각에는 번들 용..

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

css 로 styled -component 를 사용하면 공통적인 css 또는 반복적일거라고 예상되는 css 는 미리 정의해두고 사용할 수 있다. theme.ts 를 활용하는건데, 보통 postcss sass 후처리/전처리 css 나 부트스트랩, 차크라, 테일윈드 같은 css 라이브러리도 많이 사용할텐데 저같은 경우에는 위에 나열한 css 를 많이 사용해본것도 아니지만 다른 것들에 비해 사용하기 편해서 Styled 를 사용해보려고 함 개인적으로 편한이유 1. 동적으로 스타일링 가능, props 로 동적으로 스타일링이 가능함, 2. 글 제목과 같이 공통적인 요소, 반본적인 요소등을 theme 에 정의해두고 사용가능, 물론 이 2가지의 이유도 전/후처리에서도 변수를 이용해서 글로벌하게 적용할수있겠지만 styl..

SPA(Single Page Application) 한개의 페이지 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운한다. 이후 새로운 페이지의 요청이 있는 경우, 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신함. 모든 페이지가 새로고침 되는게 아니라 요청이 있는 부분만 리렌더링 되는 방식 SPA 를 CSR(Client Side Rendering) 방식이라고 한다. 클라이언트가 서버에게 최초 요청을 하면 HTML을 받아온다. 추가적인 요청에 대해서는 AJAX 을 통해 JSON 데이터를 받아서 업데이트만 해준다. SPA 장점 요청 받는 부분만 렌더링하면 되기 때문에 빠르다. (성능과 연결) 새로고침에 대한 페이지 깜빡임이 없다. 페이지의 일부만 바뀌는 것이기 때문에 application..

1. 현재까지 사용 한 라이브러리 styled.components styled.reset react-router-dom (Link) useEffect, useState, useRef 2. 컴포넌트 구성 Home (제목) Inputs (입력 창) Btns(수정 삭제 버튼 그룹) 2-1. 컴포넌트 설명 Header 가 없는 관계로 Home 컴포넌트에 TodoList 라는 제목을 넣어주었습니다. Link 로 홈으로 연결 시켜줬습니다. 더보기 잠깐 알고 가는 a Tag 와 Link to 의 차이점 https://gomgomkim.tistory.com/9 a 태그는 새로 렌더링을 하기 때문에 속도저하와 SPA 와는 어울리지 않는다. Link 는 페이지 전부를 새로 렌더링하지 않고 주소 값만 바꿔준다. 눈속임이랄까..