분류 전체보기53 React 커스텀 훅 리엑트를 배우기 시작하면서 많이듣게되는게 커스텀 훅입니다. 리엑트의 훅은 알고있는데 커스텀 훅도 들어서는 알고있지만 자세하게 사용법이나 어떤 역할을 하는지에 대해 알지 못하고 있어서 이번 기회에 자세히 알아보려고 합니다. 커스텀 훅이란? 커스텀 훅(Custom Hook)은 React 애플리케이션에서 사용자 정의로 만든 함수이며, React Hook을 활용하여 컴포넌트에서 특정 로직을 공유하고 재사용하기 위한 방법입니다. 커스텀 훅은 주로 상태 관리, 부수 효과 처리, 데이터 가져오기, 로직 추상화 등과 같은 작업을 모듈화하고 코드 재사용성을 높이기 위해 사용됩니다. 커스텀 훅 만들기 커스텀 훅을 만들 때, 이를 사용할 컴포넌트에서 인스턴스화해 필요한 데이터 또는 함수를 추출 하고 활용합니다. 이런 커스텀.. 2023. 10. 4. REST API에 대하여 REST API는 웹 개발에서 자주 사용되는 표준화된 방법 중 하나로, 서로 다른 시스템 간 데이터 통신을 위한 규칙과 원칙을 제공합니다. 이를 이해하고 활용하기 위해서는 HTTP 메서드(GET, POST, PUT, DELETE)와 리소스 관리에 대한 이해가 필요합니다. 아래에서 REST API의 기본 개념을 간단히 설명해드리겠습니다. REST API는 Representational State Transfer API의 약어로, 웹 서비스 간의 통신과 데이터 교환을 위한 아키텍처 스타일 중 하나입니다. RESTful한 API는 일련의 규칙과 원칙을 따르는데, 이러한 규칙은 다음과 같습니다. Uniform Interface (일관된 인터페이스): 자원을 고유하게 식별하는 데 URL을 사용합니다. HTTP 메.. 2023. 9. 23. 웹 브라우저에 URL을 입력하면 벌어지는 일 요즘 원티드 프리온보딩 및 개발자 스터디모임에 다니면서 최적화 이야기를 많이 듣게 되었습니다. 그중 많이 들리는 내용이 네트워크 최적화였습니다. 지금까지 대충은 알고 있었지만 자세히 알아보고 싶어 공부를 시작하게 되었다. 내용을 기록해 두면 공부가 잘되었던 기억이 있어서 내용을 정리해 기록하고 공유해보려고 합니다. 뒤로 갈수록 중요한 내용이니 끝까지 보길 권장드립니다. 웹 브라우저가 www.naver.com을 입력하면 발생하는 일련의 과정을 살펴보겠습니다. 브라우저 주소창에 주소 입력: 사용자가 웹 브라우저의 주소창에 "www.naver.com"을 입력합니다. DNS 조회: 브라우저는 입력한 도메인 이름인 "www.naver.com"을 IP 주소로 변환해야 합니다. 브라우저는 먼저 자체 캐시에서 DNS .. 2023. 9. 21. 프로젝트 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. 씨앗 개발자 커뮤니티 참석 <유월엔 아키텍처> 오늘은 대전 개발자 모임인 씨앗에서 주최하는 개발자 모임이 있었다. 이번 개발자 모임의 주제는 유월엔 아키텍처이다. 주제가 아키텍처를 주제로 3가지 세션으로 구성이 되어있다. 작은 회사에서 개발을 하다 보니 대규모 서비스는 어떻게 진행되고 어떻게 운영되는지에 관심도 있었고, 이번에 주최하는 행사 장소가 눈여겨보던 회사에서 행사를 진행한다고 해서 참석하게 되었다. 개발자 모임을 처음 나가게 되었는데 작은 우물 안에 있었어서 그런지 처음 들어보는 개념도 많았고 알고 있지만 도입하지 못한 개념들이 많았다. 내가 요즘 제일 관심 있게 생각했던 CI/CD파트가 있었다. 1년 정도 회사에서 Flutter을 사용해 앱 개발을 하고 있는데 4개 정도의 앱 개발을 진행하면서 느낀 점은 항상 빌드하고 파일을 배포하기까지의.. 2023. 6. 24. 이전 1 2 3 4 ··· 9 다음
