doeunn.log

프로젝트에 MSW를 적극 도입한 이유 새로 프로젝트를 시작하게 되면, 프론트엔드 개발자라면 백엔드 개발자와 협업을 하게 되죠 ? 프론트엔드 개발자는 백엔드 개발자가 만든 API를 기반으로 요청을 보내 응답을 받고 화면에 적절히 보여주는 부분이 많을 수 밖에 없습니다. 그렇다보니, 프론트엔드 개발자의 작업이 뒤로 밀리는 경우가 생길 수 밖에 없는데요. 이럴 때 프론트엔드 개발자는 막연하게 기다리기만 한다면 당연히 프로젝트 진행이 딜레이됩니다. 그래서 저희는 이번 프로젝트에서 MSW를 적극 도입하여 초반에도 작업이 딜레이 되지 않고 생산성을 유지할 수 있었다고 생각이 듭니다. 어떻게 MSW를 활용했는지 저희 프로젝트의 경우, 백엔드 개발자 분께서 미리 정확한 API까지는 아니더라도 request와 respo..

Next.js를 활용하면 페이지별로 Pre-rendering 방식을 선택할 수 있다 특정 페이지 별로 이곳은 SSG, 저기는 SSR 이런 식으로 가변적으로 사용할 수 있습니다. 또 아예 Pre-render를 안 하고 싶다고 하고 CSR에서 하도록도 선택할 수 있습니다. getStaticProps를 사용하면 SSG getServerSideProps를 사용하면 SSR SSG(Static Site Generation)를 사용하면 좋은 페이지 Marketing pages Blog posts E-commerce product listings Help and documentation 위 네 가지 모두 전반적으로 정적일 수 있고 자주 바뀌지 않는 데이터들일 것입니다. 정적으로 만든다면 새로 배포하기 전까지 새로 바뀔..

public 정적 리소스를 Next.js로 서빙하기 위한 디렉토리입니다. Image Component vs 이미지를 화면에 렌더링할 수 있는 방법은 위와 같이 두 가지입니다. 1. 로드될 때 유형과 크기가 다르다 아래 이미지는 제가 컴포넌트에 ``와 ``를 같이 렌더링하여 네트워크 탭에서 확인한 결과입니다. 보시면 형식 자체가 달라졌는데요. 태그로 이미지를 로드한 경우는 png, 컴포넌트로 로드한 경우에는 webp라는 유형으로 로드가 되었는데요. webp는 구글에서 만든 이미지의 포멧입니다. png나 jpeg보다 훨씬 가볍게 동일 혹은 더 좋은 화상의 이미지를 제공할 수 있는 포멧입니다. 크롬에서는 wepb를 알아서 제공하기 때문에 최적화된 이미지 포멧으로 제공을 하게 됩니다. 용량도 좀 더 적도 더 좋..

react-hook-form을 도입했던 이유 저에게 유효성 검사는 항상 숙제와 같은 일들이였는데요. 우선 정규식과 onChange를 통해 바르게 입력하고 있는지 확인해야 하며 이에 맞는 alert 텍스트도 보여줘야 합니다. 물론 hook함수화 하여 하는 방법도 생각나겠지만, 분명 그 필드에 있는 값을 가져오기, 그 필드에 있는 값 없애기, 필드에 값 집어넣기 등 여러 부가적인 동작들까지도 필요하게 됩니다. 이러한 form 관리와 관련된 여러 기능들을 손쉽게 사용하기 위해 react hook form 라이브러리를 도입하게 되었는데요. react-hook-form 적용 과정에서의 이슈 + 알게된 내용 1) 중복되는 코드들 한 form에 input이 많아질수록 label + input안에 내용들 + error..

Hook React에서 기존에 사용하던 Class형 컴포넌트에서 사용되던 메소드들 없이도 함수형 컴포넌트에서 Hook을 통해 상태 관리와 여러 기능을 사용할 수 있도록 만든 기능입니다. Hook 탄생 배경 React 컴포넌트는 클래스형 컴포넌트 & 함수형 컴포넌트로 나뉘었는데요. 기존의 개발 방식은 일반적으로 함수형 컴포넌트를 주로 사용하되, state나 life cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었습니다. 그렇게 사용했던 이유는 클래스형 컴포넌트의 어려운 클래스 문법, 어려운 축소, 어려운 로직의 재사용성이라는 단점이 존재하지만, state나 life cycle method를 사용하기 위해서는 클래스형 컴포넌트를 사용해야만 했었기 때문인데요. 이러한 불편함을..

보통 React를 배운다고 하면 react-router-dom이라는 라이브러리를 가장 먼저 알게 되는 것 같은데요. 오늘은 이 쓸 줄만 알았던 react-router-dom의 동작원리에 대해서도 알아보고! v6가 되면서 변경된 사항까지도 알아봅시다 :) React Router React에서 Router라는 건, 웹 페이지를 다시 로드하지 않고 (즉, 새로고침 X) 사용자 요청에 따라 애플리케이션의 다른 부분 또는 다른 페이지로 이동하는 프로세스입니다. 그건 그렇다치고... React Router가 필요한 이유는? 여러 페이지를 넘나들 때 웹 페이지를 다시 로드하지 않으면서 이동하기 위해서인데요. React에 router 없이도 페이지 이동은 가능합니다! 다만, 이전 페이지로 돌아온다고 했을 때, 그 이전..