개요진행중이던 프로젝트 중간에 투여되어 작업을 진행했던 7개월동안지속적으로 궁금했던 프로젝트내(vue) axios 관련 통신 구조를 파헤쳐보기로 했다. (공부도 할겸) 목차1. axios1-1. axios 전역설정1-2. axios instance 1-3. axios interceptors 1. axios axios란 무엇인가? 간단히 설명하고 넘어가자면,axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이며 백엔드와 프론트엔드의 통신을 간결하고 쉽게 진행하기 위해 사용한다. axios의 특징 가운데 이 포스팅에서 우리가 눈여겨 봐야할 것은 아래와 같이 3가지이다. 1. 자동으로 JSON데이터 형식으로 변환2. data 속성을 사용 3. data는..

1. 개요next.js 프로젝트를 앞두고 react 상태관리를 시범삼아 해보기로 했다.이전엔 useState 및 React Context API 를 통한 상태관리를 경험했다면 프로젝트 규모에 따라 달라지는 상태관리를 파악해 라이브러리를 사용해보기로 했다. 2. Zustand 라이브러리 적용할 프로젝트 next.js의 버전이 15.2.4 라는 점과 상태와 액션을 통합해 React Context나 Provider없이도 전역상태를 사용할 수 있다는 점, 간결한 코드 패턴과 단순하고 관리가 용이하다는 점에서 Zustand 를 사용하기로 했다.선택하기에 가장 큰 장점이라면 Redux와 같이 복잡한 코드 구조보다 코드의 가독성이 좋고 상태흐름이 명확하게 파악된다는 점이 컸다. 3. Zustand 시작하기 3..

1. 개요- 네이버 지도를 활용한 맵 팝업을 구성 - 네이버 정책상 네이버 지도 url에 위도, 경도 값을 넣어도 출발,도착 경로 설정이 불가- 개선방향으로 데스크톱 웹에서는 url에 장소명을 넣어 장소를 표출하고 출발, 도착 지점을 사용자가 지정할 수 있도록 구성 모바일에서는 네이버 지도 어플이 있는 경우 어플로 이동하고, 없는 경우 웹페이지 자체에서 네이버 지도 영역으로 이동해 데스크톱 웹처럼 이용할 수 있도록 구성 2. 요구되어지는 사항- 모바일에서 안드로이드 또는 IOS 기기의 네이버 지도 어플이 없는 경우 열린 웹페이지내에서 페이지 이동이 가능하도록하는 fallback 기능이 필요** 여기서 fallback_ 이란 개발에서 자주 쓰는 개념으로 쉽게 말하면 **주요 동작이 실패했을 때 대..

주요 차이점✅ 콜백함수(callback function)란?- 함수의 매개변수를 통해 다른 함수의 내부로 전달되어지는 함수이다.- 중첩함수가 외부함수를 돕는 헬퍼 함수의 역할을 하는 것처럼 콜백함수도 고차함수에 전달되어 헬퍼함수의 역할을 한다.단, 중첩함수는 고정되어있어 교체하기 곤란하지만 콜백함수는 함수 외부에서 고차함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다. 즉, 고차함수는 콜백함수를 자신의 일부분으로 합성한다.**고차함수(higer-order-function)란? 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다. ✅ 콜백함수의 전개- 고차함수는 매개 변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다.- 다시 말해, 콜백함수는..

🔍 개념정리 : localstorage 란? - 웹스토리지(저장소) LocalStorage는 웹 브라우저에서 제공하는 웹 스토리지(Web Storage) API의 한 종류로, 클라이언트(사용자 브라우저)에 데이터를 영구적으로 저장할 수 있는 방법 중 하나이다. 👉 "클라이언트(사용자의 브라우저)에 저장한다"는 의미는 즉, 저장된 데이터는 오직 사용자의 웹 브라우저 안에만 존재하며, 서버와는 아무 관련이 없다. ✅ LocalStorage 특징저장 위치클라이언트(브라우저)데이터 수명브라우저나 탭을 닫아도 삭제되지 않음 (명시적으로 제거해야 함)저장 용량보통 약 5MB (브라우저마다 다름)접근 방식키-값(Key-Value) 쌍지원 타입문자열(string)만 저장 가능 (JSON.strin..

환경설정- node 20.10.0- next.js15.2.4- react 19.1.0- react-dom 19.1.0 개요- 프론트엔드 영역에서 React, Vue + SSR렌더링 요구 증가 -> Next.js 가 요구되어지는 곳들이 많아짐. - Next.js 사이트들도 제법 많아서 활용해보기로 함 1. Next.js 시작하기 ( 가장 최신버전으로 설치 ) -수동버전 설치 : npm install react@latest next@latest react-dom@latest -package.json설정 : "license" : "MIT"로 변경, "scripts" : { "dev" : "next dev" } 로 설정-app 폴더안에 page.jsx 혹은 page.tsx 파일 생성 (타입스크립트를 사용하..