Front-end4

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. React & TypeScript/React 2022. 12. 14.

• 

  성능 최적화를 위한 개발이 아닌 다른 노력 front 페이지에서 이미지의 용량이 너무 컸다. 그래서 속도가 너무 느렸다. 그래서, 이미지를 줄여서 업로드 해달라고 운영팀에 요청했다. 이 것을 이해할 수 있도록 하기 위해서 짧게 설명하는 영상을 찍었다. https://youtu.be/Ytv6gmm23T8 플랫폼에 업로드되는 이미지 용량을 줄이기 위해서 운영팀에 설명하는 영상을 찍었다. 다행하게도 내가 디자인과 출신이라, 이 쪽 부분에 대한 생각을 할 수 있었던 것 같다. 암튼 덕분에 이미지 로딩 속도는 1/8로 줄일 수 있었다. 엄청난 차이다... 모바일에서는 더 큰 차이가 있겠지... 결국 개발자도 더 많은 사용자가 편리하게 쓰기 위해서 노력하는 직장인이다. 이미지 용량 줄이는 게 개발 업무에 해당되는 것은 아니지만, 다른 괜찮은 방법이 있다면,.. 개발 다이어리 2021. 6. 23.

• 

  React Hook이 생긴 이유... 리액트 = Component 만드는 방법은 Class, Function으로 만들 수 있다. 주기적으로 업데이트하기 위해서 Class에서 할 수 있는데, Class에서는 State라는 Object가 있어서 값이 변할 때마다 재 호출이 가능하다. 이 State는 Component 상태 값을 표현해서 생명주기 (Lifecycle Methods)를 관리하는 것이 가능하다. Function에서는 State 같은 것이 없었다. 그런데 React Hook 이 class에서 lifecycle을 관리하는 것과 똑같은 기능을 지원하는 것이 생겼다. (React ver 16.8) 생긴 이유는 Script를 다루던 개발자들이 Class 이해를 어려워해서 똑같은 기능이 생긴 것이다. (class is difficult...?... React & TypeScript/React 2020. 12. 17.