분류 전체보기91 라우팅 하기 in next.js 라우팅을 어떻게 할까 ? pages 폴더 안에 있는 건 next.js 로 인해 자동으로 라우팅 해줌. No routing libraries are required. 넥스트js 는 코드스플리팅을 자동으로 해준다. Only the JavaScript for /posts/first-post is loaded. 코드스플리팅? 쉽게 말하자면 각각의 페이지들은 필요한 것들만 로드한다.https://parkjaeho.tistory.com/130 코드스플리팅 코드 스플리팅? SPA 에서 웹사이트가 방대하다고 가정한다면, 컴포넌트가 몇 만개가 될 가능성이 존재한다. 처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페 parkjaeho.tistory.com 넥스트js는 페이지.. 2021. 10. 22. 코드스플리팅 코드 스플리팅? SPA 에서 웹사이트가 방대하다고 가정한다면, 컴포넌트가 몇 만개가 될 가능성이 존재한다. 처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페이지 로딩이 오랜시간 걸림. 그렇기 때문에, 필요없는 컴포넌트는 번들링한 하나의 .js 페이지에서 처음에 불러오지 않도록 하는것이 코드스플리팅. 즉, 처음에 필요없는건 나중에 불러오는 방식 그렇다면 기준은 아래 1,2처럼 잡자 1.pages 폴더 (서비스 별로 나뉘어져 있는 폴더임) 컴포넌트 기준으로 2.서버사이드렌더링 안될 애들 npm install @loadable/component Typescript 사용시 npm i --save-dev @types/loadable__component https:/.. 2021. 10. 19. 웹팩 웹팩 ? 하나의 웹서비스를 구성하는 모든 파일들 (html 제외) ( css ,js ,image 들을 각각의 모듈로 본다) 을 해석한다음 그 파일들을 하나의 파일로 합쳐줌(모듈 번들링) 이것이 바로 웹팩. 웹팩 사용 전 무수히 많은 파일들을 요청하고 응답한다. 수백개의 파일들이 있다면 느릴 것이고, 지구 반대편에서 요청을하면 더 더욱 응답이 느릴 것이다. 웹팩 사용 후 파일들을 하나의 파일에 합쳐준다. 이것을 모듈 번들링이라고 한다. 페이지 로딩속도가 빨라질 것이다. loader 로더가 무엇일까? js가 아닌 파일들에 대해서 ( CSS, Images, 폰트 등) 웹팩안에서 합쳐(번들링) 줄 수 있게 적용해주는 속성, (css 로더를 적용한 상태에서 웹팩 build를 하면 빌드 결과물에 css 코드가 포함.. 2021. 10. 15. (NPM) dependencies && devDependencies dependencies 그리고 devDependencies 차이점이 무엇일까 ? dependencies 애플리케이션의 로직과 연관이 있는 것들. (화면) - 배포용 npm i react npm i chart npm i vue devDependencies 개발을 할때 개발을 위한 보조 라이브러리 - 개발용 -D === --save-dev npm i typescript -D npm i webpack -D npm i js-compression -D 나중에 최종적으로 서버에 빌드가 될경우 devDependncies는 배포가 되지 않는다. npm 커스텀 명령어 npm run bulid === tsc 2021. 10. 9. CORS. CORS,SOP 웹브라우저의 내장된 보안정책이다 . 쉽게 한번 풀어보려고한다. cors 를 알기전에 Origin(출처)를 알고가자 Origin(출처)? http://localhost:3000/ http : 프로토콜. localhost : 호스트. 3000 : 포트번호. SOP(Same-Origin Policy) 웹브라우저의 보안 정책으로 말 그대로 “같은 출처에서만 리소스를 서로 공유할 수 있다”라는 규칙을 가진 정책이다. 쉽게말해서, 같은 도메인이어야 통신을 할 수 있다 라는 내용이다. 그럼 cors는 c=cross 다른 출처 리소스 아니겠는가? 그렇다는건 도메인이 다르면 CORS 정책 위반으로 인해 에러가 발생한다. ex) 민수는 백엔드개발자이고, 민수의 집주소는 http://localhost:500.. 2021. 9. 8. node.js? node.js 가 뭘까 ? 노드는 서버가아니다. 자바스크립트 실행환경. --> JS 만 이해 할 수 있음. 자바스크립트 실행기이다. 런타임이 뭘까 ? js코드를 웹브라우저 밖에 터미널에서 실행 할 수 있게 도와주는 애 npm ? (패키지 매니저)라이브러리를 간편하게 설치,삭제,업뎃 가능 node js 설치하면 자동으로 npm 패키지매니저가 따라온다 그럼 js 로 서버를 어떻게 돌리냐? node는 http 라는 모듈을 제공한다. http ? 인터넷에서 데이터를 주고받을 수 있는 프로토콜 프로토콜? 규칙 노드가 위의 코드를 실행한다. -> http서버 실행 package.json 을 만들자 node app.js 2021. 8. 20. CORS 에러내용 : CORS정책에 의해서 3060 -> 3065 차단됌 브라우저 포트번호 3060 백엔드 서버 포트번호 3065 브라우저가 다른 도메인(3060 -> 3080) 으로 요청을 보내면 브라우저가 차단된다 프론트서버-> 백엔드서버 로 요청할땐 생기지 않는다. 브라우저가 3060 에서 3080으로 요청을 보낼 수 있게 허용을 해줘야한다. 해결법 1. 브라우저 -> 프론트서버로 요청 도메인이 같으면 CORS 정책위반 아님 해결법 2. 프록시 방식 -> 요청을 허용/거부하는 역할 브라우저 -> 프론트 서버 -> 백엔드 서버 허용은 서버에서. 2021. 8. 19. 이전 1 2 3 4 5 ··· 13 다음
