기타4 코드스플리팅 코드 스플리팅? 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. 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. 프론트엔드 개발자의 협업 ( 더미데이터 dummy data ) 백엔드개발자가 API 를 만들동안 더미데이터를 만들고 있어야한다. - 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미 (시간적 손실을 방지하고자) https://ko.wikipedia.org/wiki/%EB%8D%94%EB%AF%B8_%EB%8D%B0%EC%9D%B4%ED%84%B0 더미 데이터 - 위키백과, 우리 모두의 백과사전 정보과학에서 더미 데이터(dummy data)는 유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미한다. 더미 데이터는 테스트 및 ko.wikipedia.org 서버가 없는데 로그인을 어떻게 할까. 더미데이터를 만들면된다. const [isLoggedIn,setIsLoggedIn] =useState(.. 2021. 8. 4. 이전 1 다음
