TypeScript 17 [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. [Next] 웹페이지의 성능 개선을 해보자 #1 (feat.LightHouse) 최근 들어 Next.js를 접하고 너무 재밌어서 기존에 미뤘던 프로젝트를 Next.js로 마이그레이션 해봤다. 바로 내 포트폴리오 사이트였는데, 2019년도인가 처음 fork를 뜨고 가져와서 내용만 업데이트를 하고 있었다. 기존에는 바닐라JS + HTML + CSS + GithubPage를 이용했었는데, React도 익숙해졌다 싶어서 Next를 도입했고 Next 배포를 위해 GithubPage를 쓰다가 이미지 경로설정때문에 귀찮기도 하고 또 Vercel를 써보고 싶어 Vercel를 통해 배포했다.(당연히 짱짱이었음) 일단 최대한 디자인적으로 비슷하게 구현하는 것을 목표로 했고 실제 완성된 모습은 https://kang-portfolio.vercel.app/ 가면 확인할수 있다. 쨋든 배포도 하고 SEO도.. 2021. 12. 7. [타입스크립트] 인터페이스 vs 타입 에 대하여 제가 배운 바로는 타입스크립트는 자바스크립트에 타입이 추가된 슈퍼셋 언어라고 배웠습니다. 그래서 타입을 선언할 때 interface 대신에 type를 쓰는 것이 뭔가 옳아 보인다고 생각하기도 했습니다. 하지만 어쩔때는 type보다 interface를 많이 쓰는 것을 보고 어느 것이 옳은 것인가 고민을 하다 제가 선택한 방법은 누군가 type으로 써놓으면 나도 type으로 선언하고 interface가 많으면 interface를 쓴다. 제가 이러한 방법을 생각한 이유는 적어도 일관성은 유지되지 않을까 라는 생각과 복붙의 용이성 때문이었습니다. 그 후에 이펙티브 타입스크립트를 읽으며 습득한 지식에 따르면 다행스럽게도 폐급 수준은 아니었음을 확인하였습니다. 책의 내용을 두괄식으로 요약하자면 저자 형님은 3가지를.. 2021. 7. 12. [리액트] 프로젝트에 웹팩을 적용해보자 #3 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #2 (feat.타입스크립트) 이전 포스트에 이어서 이번 포스트에서는 리액트를 개발하기 위한 webpack-dev-server의 새로운 모습인 webpack serve를 적용하고 핫로딩을 적용해보도록 하겠다. Webpack 4에서는 webpack-dev-server를 설치하여 사용했었다. 하지만 Webpack 5부터는 별도의 라이브러리를 설치하지 않고 Webpack에서 바로 사용한다.(하지만 아직 공식문서에는 webpack-dev-server를 설치하라고 나와있다. 굳이 필요없다) npx webpack serve.. 2021. 7. 6. 이전 1 2 3 4 5 다음
