developia.soye.log

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

React 2025. 4. 17. 18:35

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

React 2024. 4. 8. 15:05

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

React 2024. 2. 22. 16:18

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

React 2024. 1. 30. 14:17

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'..

React 2023. 8. 24. 17:57