react 40 [리액트] 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. [리액트] 리액트 컴포넌트의 변천사, 역사에 대하여 이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다. 제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다. 또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다. 쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다. 첫 번째. 리액트 컴포.. 2021. 7. 29. [리액트] table에는 thead와 tbody가 필요해요(feat. react 형님들) 여느때와 같이 리액트 컴포넌트를 만들고 나서 동작을 확인하고 있는데 콘솔창에 다음과 같은 에러가 떴다. 하.. warning 로그가 있으면 뭔가 큰일 날거같고 너무 허접해보이니 생기면 없애는 나에겐 스트레스다. 그러니 한번 해결해보자. Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 바로 구글링 해보면 react 상에서 table를 쓸때에는 되도록 thead 와 tbody 태그를 써서 해야한다고 되어있다. thead와 tbody 태그를 넣어주니 바로 콘솔경고는 사라졌다. 하지만 나는 이전까지 thead와 tbod.. 2021. 7. 19. 이전 1 ··· 4 5 6 7 8 9 10 다음
