react 41 [Next] Tailwind CSS 도입 및 세팅(feat.Next 12) Tailwind CSS 란? 공식홈페이지의 설명을 살펴보겠습니다. "HTML에서 떠나는 일 없이 빠르게 모던한 웹사이트를 빌드해줄수 있게 하는 프레임워크" 라는 설명으로 시작합니다. 어떤걸 보여주는가 | BEM 전통적인 방식의 CSS 중에 유명한 것으로는 BEM이 있습니다. BEM은 Block, Element, Modifier의 앞글자들을 합친것으로 각각 __와 --로 구분합니다. .header__navigation--navi-text { color: red; } 이렇게 class를 통해 스타일을 정의하고 각각의 HTML element에 입히게 되는 구조입니다. 따라서 어떻게 보이는가 보다는 "어떤걸 보여주는가" 에 초점을 맞춘 방법론입니다. 예를 들자면 위의 CSS는 header 블록의 navigati.. 2022. 1. 5. [리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3. [Next] 웹페이지의 성능 개선을 해보자 #2 (feat.LightHouse) [Next] 웹페이지의 성능 개선을 해보자 #1 (feat.LightHouse) 최근 들어 Next.js를 접하고 너무 재밌어서 기존에 미뤘던 프로젝트를 Next.js로 마이그레이션 해봤다. 바로 내 포트폴리오 사이트였는데, 2019년도인가 처음 fork를 뜨고 가져와서 내용만 업데이트를 all-dev-kang.tistory.com 이전 글에 이어서 이번에도 계속 진행해보도록 하겠습니다. 이번에는 Accessibility에 대해서 점수를 올려보도록 해보겠습니다. Accessibility 란? Accessibility 이란 해당 웹사이트에 장애가 있는 사람들이 사용할 수 있도록 설계 및 개발되는 것을 의미합니다. 따라서 다음과 같은 모든 장애에 대해 인식하고 개발하기를 권장하고 있습니다. 시각 : 시각 장.. 2021. 12. 22. [Next] Susponse, Error Boundary 적용 후기(feat.SWR) 도입부 [리액트] React-query 도입과 Suspense, Error Boundary를 적용 React-query는 왜 도입했는가? 실제로 처음 접한 라이브러리는 react-query가 아닌 swr입니다. 진행하고 있는 사이드 프로젝트가 Next를 사용하고 있고 그래서 자연스레 swr를 도입했습니다. 사용하다 보 all-dev-kang.tistory.com 먼저 위의 글을 읽고 오시면 React-query 또는 SWR을 이용해 Susponse와 ErrorBoundary를 처리하는 구조을 왜 적용하려는 지에 대한 의문이 약간이나마 해소되실 겁니다. 다시 한번 상기해보면 SWR의 useSWR은 다음과 같은 형태를 가지고 있고 data와 error 주고 해당 값을 통해 상황에 맞는 랜더링을 하도록 예시를.. 2021. 12. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
