본문 바로가기

개발 179

[리액트] React-query 도입과 Suspense, Error Boundary를 적용해보자 들어가며 리액트를 하나보면 필연적으로 흰화면에 loading...를 띄우는 경험을 해보셨을 것이라 생각합니다. 그리고 주로 데이터가 없는 경우 if 문으로 분기처리를 하게 됩니다. 위의 방식이 나쁜것은 아닌데 하나의 컴포넌트에 return 문이 여러개가 되는 상황이 발생합니다. 아니면 삼항연산자로 분기처리를 하던가요. 그래서 조금더 리액트스러운 방법을 생각했고 Suspense와 Error Boundary를 통해 개선했습니다. 이번 글에서는 이 경험을 다뤄보도록 할게요. React-query는 왜 도입했는가? 뜬금없이 loading... 처리 얘기를 하다가 갑자기 React-query가 왜 나오냐? 하실수도 있습니다. 하지만 생각하보면 당연히 데이터패칭과 관계될수밖에 없는 것이 주로 loading을 보여줘.. 2021. 12. 15.
[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.
[VSCode] 같은 프로젝트에 여러 윈도우 띄우기(화면 분할, 탭찢기, 탭분할) 문제 해결 | 탭분할 생김 (2023년 10월)이제 아래 방법을 사용하지말고 drag and drop으로 하세요.단축키로 설정하시려면 해당 커멘트에 추가하시면 됩니다.업데이트 로그  Visual Studio Code October 2023Learn what is new in the Visual Studio Code October 2023 Release (1.84)code.visualstudio.comms형님들이 다른 ide의 위험에 개발좀 하시려고 하는듯? 문제 인식  | 탭분할이 없음다른 ide를 썼을 때 drag & drop으로 화면을 분할하는 기능은 당연히 제공하는 기능인줄 알았습니다.  제가 말하는 화면 분할 기능은 구글 브라우저의 탭을 나누는 것처럼 분할하는 것을 의미합니다.코드를 작성하다보면 .. 2021. 8. 3.
[리액트] 리액트 컴포넌트의 변천사, 역사에 대하여 이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다. 제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다. 또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다. 쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다. 첫 번째. 리액트 컴포.. 2021. 7. 29.

티스토리툴바