다다의 개발일지 6v6

클라이언트에서 fetch 요청 vs 서버에서 fetch 요청Next.js에서는 fetch()를 클라이언트와 서버에서 모두 사용할 수 있음. 하지만 실행되는 환경이 다르기 때문에 성능과 보안 측면에서 차이가 있음. 📌 핵심 차이점 요약 클라이언트에서 fetch() 요청서버에서 fetch() 요청실행 위치브라우저 (클라이언트)Next.js 서버 (Node.js)요청 횟수사용자가 페이지 방문할 때마다 요청서버에서 한 번 요청 후 결과 반환보안API 키가 브라우저에서 노출될 수 있음API 키를 숨길 수 있음성능네트워크 요청이 많아질 수 있음서버에서 미리 데이터 가져와서 빠름SEOCSR 방식이므로 SEO 불리함SSR로 SEO 최적화 가능 1. 클라이언트에서 fetch 요청하는 방식 📌 클라이언트에서 실행되는 ..

Git Flow란?Git Flow는 Git을 활용한 브랜치 전략(Workflow) 중 하나이다.✅ 협업을 쉽게 하기 위해 브랜치 역할을 명확히 구분✅ 안정적인 배포를 위해 개발/배포 단계별 브랜치를 운영✅ 새로운 기능 개발과 버그 수정을 체계적으로 관리  Git Flow 브랜치 구조Git Flow에서는 5가지 주요 브랜치를 사용각 브랜치마다 역할이 다르며, 장기 브랜치(항상 존재)와 단기 브랜치(필요할 때 생성됨)나뉜다.🔹 장기(Long-lived) 브랜치 → 항상 유지됨main실제 서비스 운영 중인 배포용 브랜치develop개발 중인 최신 코드가 모이는 브랜치🔹 단기(Short-lived) 브랜치 → 필요할 때 생성 후 삭제됨feature새로운 기능을 개발하는 브랜치release배포 준비를 위한 브..

주소창에 https://www.example.com 를 입력한다. 어떤 일이 일어날지 알아보자. 1. URL 해석 및 DNS 조회 (Domain Name System)사용자가 입력한 https://www.example.com을 브라우저가 분석함.브라우저가 example.com의 IP주소를 찾기위해 캐시에서 DNS 기록을 확인한다.DNS 조회 과정 ( 먼저 캐시에서 DNS 기록을 확인하고 없으면 루트 네임서버로 ):브라우저 캐시 확인 → 최근 방문한 사이트라면 저장된 IP 사용운영체제(OS) 캐시 확인로컬 네트워크(라우터) 캐시 확인ISP(internet service provider로 KT SKT 같은곳을 의미) DNS 서버 캐시 조회최종적으로 루트 네임서버를 거쳐 실제 IP 주소 조회DNS 조회 과정 ..

3/10 (월) ^^,,, next.js 서버컴포넌트, 클라이언트 컴포넌트 차이 공부 -> api 호출, strict mode 적용 이런것 차이prefetch새로고침을 안하고 다른 창으로 들어가면 네트워크 로그가 계속 이어지는 것, 새로고침하면 로그가 초기화되는 것react query , swr, contextAPI, redux   3/11 (화) - 현재 회사 프론트코드 분석한 것 발표! useLayoutEffect가 뭐지? (O) 더보기더보기`useLayoutEffect`는 `useEffect`와 비슷하지만 실행 시점이 다른 React 훅이다브라우저 화면 그리기 전에 동기적으로 실행useLayoutEffect(() => {    // 여기 코드가 먼저 실행});브라우저 화면 그린 후에 비동기적으로 실..

Homebrew란?Homebrew는 macOS와 Linux에서 패키지를 쉽게 설치하고 관리할 수 있는 패키지 관리자간단한 명령어 몇 개만으로 원하는 패키지를 쉽게 설치 & 관리할 수 있어서 개발 생산성을 크게 향상시켜준다. Homebrew의 주요 편리한 기능패키지 설치 & 관리터미널에서 간단한 명령어(brew install)로 프로그램을 설치 가능자동 의존성 관리설치할 패키지가 다른 라이브러리를 필요로 하면 자동으로 설치해 줌.빠른 업데이트brew update : Homebrew의 패키지 목록(Formula, Cask)과 자체 코드를 최신 상태로 업데이트brew upgrade : 모든 패키지를 최신 버전으로 유지 가능!macOS 기본 패키지가 아닌 소프트웨어 설치 가능macOS에는 기본적으로 없는 wge..

Nextjs API 서버 구축 ( json-server )  db.json 파일을 만들고 아래 코드를 터미널에 치면 된다~--watch는 변경될때마다 새로고침 해준다.npx json-server --port 9999 --watch db.json  Next.js의 컴포넌트 : 서버, 클라이언트 (이건 react 최신 버전에도 있다고 함)특별한 처리를 해주지 않으면 서버 컴포넌트(기본)로 간주한다.클라이언트 컴포넌트 처리: 컴포넌트 파일 맨 위에 "use client"; 서버, 클라이언트 컴포넌트에 대해서 더 상세히 알아보자.이 두 컴포넌트를 도입하여 성능과 개발 경험을 최적화할 수 있다. 서버 컴포넌트: 백엔드에서 렌더링되고 클라이언트로 HTML만 전달됨 → SEO 최적화, 빠른 로딩, 서버 자원 활용클라..