개발 메모장 개발 메모장

최적화

• useState와 useEffect를 넘어선 고급 React Hooks

  React 2024. 1. 29. 14:11

  React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..

  Read More
• 당신의 뇌는 최적화를 원한다 - 가바사와 시온

  서평 2022. 9. 19. 17:53

  - 정리 1. 도파민 : 의욕과 열정의 행복물질 행복물질이 팡팡 나오는 목표 달성 7단계 1. 명확한 목표를 세운다. 2. 목표를 이룬 자신을 구체적으로 상상한다. 3. 목표를 자주 확인한다. 4. 즐겁게 실행한다. 5. 목표를 달성하면 자신에게 상을 준다. 6. 즉시 '더 높은 목표'를 새롭게 세운다. 7. '1~6단계'를 반복한다. 도파민이 분비되면 행복해진다. 뇌에 보상을 주면 동기부여가 된다. 도파민의 보수 사이클을 돌려서 목표를 달성할 수 있다. 적당한 난이도의 작은 목표(마일스톤)를 설정하면 큰 목표를 이룰 수 있다. 목표를 달성한 자신의 모습을 생생하게 떠올려보자. 명확하게 상상할수록 실현 확률이 올라간다. 즐기면서 실행하는 것이 최고의 성공 비결이다. 목표를 달성하면 자신에게 상을 준다. ..

  Read More
• 나는 4시간만 일한다 - 팀 패리스

  서평 2022. 9. 12. 16:51

  - 정리 1. Definition 정의 단계 현실 속에서 대부분의 이들이 속해있는 유예자 뉴 리치에 대해 정의한다. 자유로운 삶이 부자만의 전유물이 아니며 삶을 어떻게 받아들이냐에 따라 다르다는 의미에 대해 설명한다. 2. Elimination 제거 단계 80대 20의 파레토 법칙 80% 결과(생산량, 이익, 이익 등...)는 20%의 원인(투입량, 노력, 시간, 제품, 고객 등...)에서 나온다. 80대 20의 법칙을 따져 20에 속하지 않은 불필요한 일들을 줄이자. 과도한 정보 제거 실용서를 읽을 때에 설명과 자전적 부분만 읽는다. 일주일간 정보 금지 시험해보기(국내 상황에 맞게 변경) 아래의 것들을 끊고 가족, 지인들과 대화하고 아이들과 놀아주며 시간이 남는다면 이 책에 나온 것들 시도. 유튜브, ..

  Read More
• NextJS 사이트맵(Site Map) 만들기

  Next.js 2022. 7. 14. 16:47

  (해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.) 1. Site Map은 왜? 모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다. 바로 사이트맵을 생성하는 일이다. 물론 사이트맵을 생성하지 않는 방법도 있다. 실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다. 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다. 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다. 연결되는 ..

  Read More
• Lazy initialization로 useState 최적화하기

  Tip 2022. 6. 27. 17:43

  react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다. 평소라면 이런 초기값 할당은 큰 문제가 없다. 하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다. 이를 해결하는 것은 무척 간단하다. const getLocalData = () => window.localStorage('cacheCount'); // 평소 [count, setCount] = useState(getLocalData()); // Lazy Initialization [count, setCount] useState(()=> getLocalData()); 위와 같이 useState의 ..

  Read More
• NextJS Image태그를 활용한 스켈레톤(Skeleton)처리

  Next.js 2022. 4. 21. 18:18

  스켈레톤(Skeleton)의 필요성 개인적인 생각으로 웹에서 사용자 관점에서 가장 완성도가 떨어져 보이는 요소는 과도한 Layout Shift라고 생각한다. 그렇기에 프로젝트를 진행할 때 스켈레톤 적용에 무척 긍정적이며 더 나아가 꼭 적용해야 되는 요소라고 생각한다. NextJS Image에서의 처리 방법 그런 점에서 NextJS의 Image태그에는 loading을 blur 처리할 수 있다. 하지만 외부에서 가지고 오는 동적 이미지의 경우 blur 처리하기 위해서는 blurDataURL속성을 입력하라고 되어 있다. 그리고 해당 내용에 대해 NextJS의 공식 Docs에서는 plaiceholder를 사용하는 것을 추천한다. 내가 사용할 방법은 아니지만 해당 방법의 로직을 간단하게 설명하자면 이런 방식이다...

  Read More
• NextJS Image 태그 height auto로 사용하기

  Next.js 2022. 1. 11. 14:38

  이 글은 NextJS 12 버전을 기반으로 작성되었습니다. 2023.08.04 - [Next.js] - Next.js Image 태그 height auto로 사용하기 (update 13 version)업데이트 된 내용은 이 글에서 확인하시기 바랍니다. NextJS 10 버전이 나오며 가장 눈에 띄었던 것은 개인적으로 Image 태그였다. Vercel로 배포하게 되면 cdn역할까지 해주며 큰 사용성을 보여주는 역할을 했는데, 생각보다 많이 사용하지만 NextJS Image태그(이하 Image 태그)에서는 사용하기 어려운 것이 있다. Public 이미지의 경우 width, height를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에..

  Read More
• 내가 Front-End를 끝내고 체크하는 리스트

  Tip 2021. 8. 26. 19:00

  FontEnd 개발을 끝내고 QA까지 어느 정도 마무리하면 최적화라는 벽을 맞이한다. 그 상황에서 자주 사용하는 것들을 정리하려 한다. 1. The Front-End Checklist - ✨ Your best Front-End Tool ✨ (frontendchecklist.io) ✨ Your best Front-End Tool ✨ 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report! frontendchecklist.io 이 사이트를 이용해 완전하진 않지만 내..

  Read More