전체 글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. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유 SSR을 사용해야 하는 이유 React를 사용하다 보면 SSR이 필요하다는 생각을 하게된다. 해당 페이지를 사용자들이 검색했을때 사용자들에게 해당 페이지가 노출이 되기위해서는 구글봇이나 네이버 봇이 우리 페이지의 정보를 가져가야한다. 하지만 봇은 해당 페이지가 로드되기전에 HTML파일과 robots.txt정보만을 가져간다 CSR을 사용하면 해당 페이지가 다 나오기전에 봇이 떠나기 떄문에 해당 문제를 해결하기 위해SSR을 사용해야 한다는 결론이 나온다. 그래서 이번에 SSR에 대해 알아 보려고한다. SSR을 사용하는 이유 초기 페이지 로딩 속도 향상 SSR의 주요 장점 중 하나는 초기 페이지 로드 속도를 향상시키는 기능입니다. SPA에서 클라이언트의 브라우저는 페이지를 렌더링하기 전에 JavaScript .. 2023. 6. 21. CSR(Client-side Rendering)이란 무었인가? React를 사용하다 보면 CSR(Client-side Rendering) 에 대해 많이 듣게 된다. 관련된 내용을 알고는 있지만 설명을 할 수 없을 정도의 지식을 가지고 있어 원티드 사전 과제에 CSR에 대해 알아보는 과제가 있어 CSR에 대해 알아보고 장점과 단점을 정리 하려고 한다. CSR이란? CSR(클라이언트측 렌더링)은 웹 페이지 렌더링이 서버가 아닌 클라이언트의 웹 브라우저에서 주로 처리되는 웹 개발 접근 방식입니다. CSR에서 서버는 주로 필요한 데이터와 자산을 클라이언트에 보내고 클라이언트 측 JavaScript 프레임워크 또는 라이브러리는 HTML을 동적으로 생성하고 브라우저에서 렌더링합니다. CSR의 장점 사용자 경험 CSR을 통해 시각적으로 매력적인 대화형 사용자 인터페이스를 만들.. 2023. 6. 19. Canvas 기초 한번사용해보자 HTML Canvas 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. canvas 기초 사용법 html 문서에 canvas 엘리먼트를 선언한다. canvas 엘리먼트에 id 속성을 설정한다. canvas 태그 내부에 width, height를 설정한다. canvas 내장 '그리기 객체'를 취득한다. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 자바스크립트를 통해 다양한 효과를 구현한다. 캔버스 사이즈 설정 캔버스 사이즈 설.. 2022. 2. 5. 이전 1 2 3 4 ··· 6 다음
