Fe4 React 커스텀 훅 리엑트를 배우기 시작하면서 많이듣게되는게 커스텀 훅입니다. 리엑트의 훅은 알고있는데 커스텀 훅도 들어서는 알고있지만 자세하게 사용법이나 어떤 역할을 하는지에 대해 알지 못하고 있어서 이번 기회에 자세히 알아보려고 합니다. 커스텀 훅이란? 커스텀 훅(Custom Hook)은 React 애플리케이션에서 사용자 정의로 만든 함수이며, React Hook을 활용하여 컴포넌트에서 특정 로직을 공유하고 재사용하기 위한 방법입니다. 커스텀 훅은 주로 상태 관리, 부수 효과 처리, 데이터 가져오기, 로직 추상화 등과 같은 작업을 모듈화하고 코드 재사용성을 높이기 위해 사용됩니다. 커스텀 훅 만들기 커스텀 훅을 만들 때, 이를 사용할 컴포넌트에서 인스턴스화해 필요한 데이터 또는 함수를 추출 하고 활용합니다. 이런 커스텀.. 2023. 10. 4. 프로젝트 Next.js 세팅하기 Next.js 세팅 Next.js세팅에 블로그 작성하는 이유는 Next.js 사용해서 프로젝트를 진행하기로 하였다. (참고로 일하면서 진행하다 보니 1주일은 소요되었다....) 이전에 세팅을 해본 적이 있는데 기록을 해두지 않아서 이번 세팅할 때 어려움이 있었다. 이러한 이유와 내가 잘못세팅한 부분을 다른 사용 자들과 공유하고 잘못된 점을 듣고 싶어서 블로그를 작성하게 되었다. 초반 세팅만 되어 있고 폴더 구조는 다음 블로그에서 진행할 예정이다. 사용 스택 코어: Next.js, TypeScript 상태 관리: React-Query, Recoil (차후 세팅 적용 예정) 스타일링: emotion 테스트: jest 빌드: Babel 패키지 매니저: Yarn Berry next.js에서 제공하는 간편한 초기.. 2023. 9. 14. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. 윈티드 프리온보딩 사전 과제중에서 3번째 과제가 가장 어려웠다. 처음으로 깃헙 레포지토리에 가서 확인을 하는데 처음 보니 뭐가 어떤 기능인지 감도 오지 않았다. 하지만 3번쨰 과제가 가장 크게 도움이 된다고 하여서 포기하지 않고 여러 문서와 GPT를 활용해 검색을 하면서 찾아 보았다. ../node_modules/next/dist/server/lib/start-server.js 해당 경로에 next.js 서버를 실행 해주는 파일로 판단되는 곳을 찾게 되었다. let targetHost = hostname; await new Promise((resolve)=>{ server.on("listening", ()=>{ const addr = server.address(); port = typeof addr ==.. 2023. 6. 29. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유 SSR을 사용해야 하는 이유 React를 사용하다 보면 SSR이 필요하다는 생각을 하게된다. 해당 페이지를 사용자들이 검색했을때 사용자들에게 해당 페이지가 노출이 되기위해서는 구글봇이나 네이버 봇이 우리 페이지의 정보를 가져가야한다. 하지만 봇은 해당 페이지가 로드되기전에 HTML파일과 robots.txt정보만을 가져간다 CSR을 사용하면 해당 페이지가 다 나오기전에 봇이 떠나기 떄문에 해당 문제를 해결하기 위해SSR을 사용해야 한다는 결론이 나온다. 그래서 이번에 SSR에 대해 알아 보려고한다. SSR을 사용하는 이유 초기 페이지 로딩 속도 향상 SSR의 주요 장점 중 하나는 초기 페이지 로드 속도를 향상시키는 기능입니다. SPA에서 클라이언트의 브라우저는 페이지를 렌더링하기 전에 JavaScript .. 2023. 6. 21. 이전 1 다음
