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

환경설정- 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 파일 생성 (타입스크립트를 사용하..

문제발생 개요 ) 멀쩡하게 돌아가던 데이터가 깃배포 이후 에러가 발생했다. WHY? SOP (Same Origin Policy, 동일 출처 정책)으로 인한 CORS 오류 발생이었다. SOP 정책이란? 자바스크립트 엔진 표준 스펙의 보안 규칙중, 하나의 출처 (Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용하지 못하도록 요청 발생을 제한하는 정책이다. 쉽게 말해, 본인의 경우 HTTPS 작업환경에서 HTTP 데이터를 끌어오려니 에러가 발생한 것이었다. 여기서 동일출처의 기준이란? Protocol, host, port 가 같아야 동일한 출처라 할 수 있다. ex. http(Protocol)//localhost(host):8000(port) 그렇다면 다른 출처의 리소스가 필요하..

만들어진 리액트 프로젝트를 깃에 배포를 시도했으나 번들링 된 웹팩이 해결되지 않아 2-3일째 난항을 겪었다. 겪은 난항은 세가지가 있었다. 1) 웹팩 번들링 문제 _ 이미지 로더의 문제 >> 이미지 파일이 형성되지 않음 2) 리액트 라우터 경로 이탈 >> 빈공백 화면이 뜨게 됨 3) react - build 에러 >> 이미지 및 json 파일 경로를 public에 두고 필요한 react-scripts 가 설치되지 않아서 발생 4) deploy 사용과 에러 첫번째 , 웹팩 번들링 문제 1. webpack을 번들링하는 파일명을 '/dist' 에서 '/docs' 로 변경시켜준다 >> 깃허브 배포가 목적이라면 처음부터 docs 로 만들어도 괜찮다 >> /docs 폴더만 깃에 업로드한 후 build 이후 main..

1. 웹팩이란? Webpack은 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. - (웹팩 문서 참고) 간단히 말하자면 html에 들어가는 다수의 js 파일들을 하나의 js 파일로 만들어 주는 것을 의미한다. 웹팩은 '모듈(module)'을 위한 '번들러(bundler)' 라고 명시되어있다. 번들러란? JS,CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고 작업의 결과물은 '번들(Bundle)'이라고 한다. 웹팩 자체는 묶어주는 역할을 하기 때문에 번들러(Bundler)라고 칭한다. 번들링 과정이 끝나면 기존 스크립트에서 import/export가 사라지기때문에 type="module"이 필요없어진다. 따라서 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취..

1. node.js 를 통한 json 파일 작성 npm init -y (server설치) : 데이터(server) 공간에 서버 설치 npm i express (express 설치) : express란? 서버기능 구현을 위한 프레임워크 npm i cors (cors 설치) : axios 에러를 잡기 위한 설치 >> 비동기 통신 오류 잡기 1) express 관련 코드 삽입 >> server.js 코드 작성 ** express.Router 사용시 주의사항 ( 관련 코드작성은 todoList.js 파일화면 참조 ) 1) app.use('/api/todoList' , todoRouter) -> /api/todoList' 를 검색하는 순간, router의 파일이 함께 구동하게 만듦. ('/api/todoList'..