일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- ESlint
- 반공변성
- useAppDispatch
- dfs
- webpack
- app router
- tailwind
- autosize
- Jest
- 결정 알고리즘
- recoil
- CI/CD
- SSR
- 호이스팅
- 인터섹션
- 리터럴 타입
- 이분 검색
- CORS
- map
- 공변성
- RTK Query
- async/await
- 타입 좁히기
- 투포인터
- 무한 스크롤
- React
- TS
- Promise
- 태그된 유니온
- Cypress
- Today
- Total
목록인프런, 유데미 (97)
짧은코딩
웹 브라우저 요청 흐름 1. 사용자가 URL을 입력하여 요청을 보낸다.("https://www.google.com/search?q=hello&hl=ko"에 요청을 보냈다고 가정) 2. 웹 브라우저는 "https://www.google.com:443/search?q=hello&hl=ko"에서 DNS를 조회하고 생략된 port 번호 443을 찾아냄 그리고 HTTP 요청 메시지를 생성 3. HTTP 메시지 전송 웹 브라우저가 HTTP 메시지를 생성 -> SOCKET에서 IP, PORT 정보를 가지고 목적지 IP와 TCP 3-way handshake를 함 -> TCP/IP로 데이터를 전송하고 패킷을 씌움 -> 요청 패킷 정보가 인터넷으로 흘러감 4. 목적지에 요청 패킷이 도착 목적지에 요청 패킷이 도착하면 T..
URI(Uniform Resource Identifier) URI는 URL과 URN을 포함하는 큰 개념이며 리소스(자원)을 식별한다. 예를 들면 사람의 주민등록번호 처럼 식별하는 것이다. URL과 URN URL: 리소스의 위치, 사람으로치면 현재 있는 위치, URN: 리소스의 이름, 사람으로치면 그 사람의 이름 URN으로는 거의 찾을 수 없어서 사실상 URL만 사용한다고 보면된다. 즉, URI를 URL과 같은 의미로 봐도 된다. URL 문법 URL은 "scheme://[userinfo@]host[:port][/path][?query][#fragment]" 이런 구조를 가지고 있다. 예시로 "https://www.google.com:443/search?q=hello&hl=ko" 이렇게 사용한다. sheme..
웹팩 데브 서버가 필요한 이유 그냥 웹팩을 사용하고 코드 수정을 하면 다시 빌드 명령어를 입력하고 실행해야 바뀐 내용이 반영된다. 하지만 웹팩 데브 서버를 사용하면 코드 변경 시 자동으로 빌드하고 새로고침이 된다. 웹팩 데브 서버의 특징 웹팩 데브 서버를 사용해서 빌드를 하면 결과물이 파일 탐색기나 폴더에 보이지 않는다. 즉, 기존에 생기던 dist 폴더가 생기지 않는다. 이는 메모리에 빌드 결과를 저장하기 때문이다. 개발자 도구의 network 탭에 가면 메모리에 저장되어 있는 bundle.js가 보인다. 파일 입출력보다 메모리 입출력이 더 빠르고 자원이 덜 사용되어 효율적이다. package.json "scripts": { "test": "echo \"Error: no test specified\" ..
IP(인터넷 프로토콜) 1. 지정한 IP 주소(IP Address)에 데이터를 전달한다. 2. 패킷(packet)이라는 단위를 사용하여 데이터를 전달한다. 3. IP 패킷에는 출발지, 목적지 IP와 전송 데이터 등이 있다. 패킷은 여러 노드(서버)를 거쳐서 목적지에 도착한다. 거쳐가는 노드는 상황에 따라 달라진다. 단점 1. 비연결성을 가지고 있어서 패킷을 받을 대상이 없거나 서비스 불능이어도 패킷이 전송된다. 2. 비신뢰적이라 패킷이 중간에 사라지거나 순서대로 가지 않을 수 있다.(패킷은 보통 1500bytes씩 잘라서 보냄) 3. 같은 IP에서 사용하는 애플리케이션이 둘 이상이면 프로그램 구분이 어렵다. ex) 게임, 노래 다 듣고 있으면 어느 프로그램으로 요청을 줘야할지 모름 TCP와 UDP 인터넷..
Loader module.exports = { module: { rules: [] } } 로더는 웹팩이 js가 아닌 HTML, CSS, Images, 폰트 같은 자원을 변환할 수 있도록 도와주는 속성이다. 로더는 module로 사용된다. module을 주석 처리한 경우 module을 주석 처리하고 빌드를 하면 사진 처럼 오류가 난다. js 파일 안에 css가 들어갈 수 없어서 로더를 설정하라는 메시지이다. 예시 module.exports = { module: { rules: [ { // 모든 css 확장자를 가진 파일에 use에 있는 loader를 적용하겠다라는 의미 test: /\.css$/, use: ["style-loader", "css-loader"], }, // 모든 js 파일에 대해 babel..
Entry module.exports = { entry: "./index.js", }; entry는 웹팩에서 웹 자원을 변환시키기 위한 최초의 js 파일 경로이다. 디펜던시 그래프(Dependency Graph) 빌드를 하면 이 사진처럼 모듈 간의 의존 관계가 생기는 구조인 디펜던시 그래프가 생긴다. Entry 포인트가 2개인 경우 entry: { login: './src/LoginView.js', main: './src/MainView.js' } entry 포인트는 2개가 될 수 있다. entry 포인트 2개 이상 쓰는 경우는 싱글 페이지 애플리케이션(SPA)보다 서버에서 정보를 내려주는 형태의 멀티 페이지 애플리케이션이 적합하다. Output module.exports = { output: { fil..
configureStore.js import { createWrapper } from "next-redux-wrapper"; import { applyMiddleware, compose, createStore } from "redux"; import { composeWithDevTools } from "redux-devtools-extension"; import createSagaMiddleware from "redux-saga"; import reducer from "../reducers"; import rootSaga from "../sagas"; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.l..
코드 사이트 https://joshua1988.github.io/webpack-guide/getting-started.html#%EC%9B%B9%ED%8C%A9-%EB%A7%9B%EB%B3%B4%EA%B8%B0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC 웹팩 맛보기 | 웹팩 핸드북 웹팩 맛보기 튜토리얼 그럼 이제 웹팩을 가볍게 맛볼수 있는 튜토리얼을 진행해보겠습니다. 이번 튜토리얼로 웹팩을 실행할 수 있는 개발 환경을 구성하고 빌드 과정을 경험해볼 수 있을 것입 joshua1988.github.io 이 사이트의 코드를 예제로 사용했다. 동작의 원리 package.json 및 dist webpack을 설치하고나서 package.json에 "scripts": { "test": "ech..
webpack(웹팩) 웹팩은 프론트엔드 프레임워크에서 사용하는 모듈 번들러(Module Bundler)이다. 모듈 번들러는 HTML, CSS, JS 등의 파일을 각각 모듈로 보고 모든 모듈을 조합해서 하나로 만드는 도구를 의미한다. 모듈 function sum(a, b) { return a + b; } export { sum } 모듈은 위 코드처럼 기능을 갖는 작은 단위의 코드이다. 웹팩에서는 HTML, CSS, JS, 이미지, 폰트 등이 각각 모듈이다. 모듈 번들링 모듈 번들링은 여러 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미한다. (빌드, 번들링, 변환은 모두 같은 의미이다.) -참고 페이지 https://joshua1988.github.io/webpack-guide/webpack/wha..
npm 설치 --save-prod npm i jquery --save-prod 우리는 보통 "--save-prod"는 생략하고 npm을 설치한다. 생략을 하고 설치해도 자동으로 "--save-prod"가 붙기 때문에 생략해도 된다. 이렇게 설치한 라이브러리, 패키지는 package.json의 "dependencies"에 저장이된다. --save-dev(-D) npm install jquery --save-dev npm i jquery -D 개발을 하다보면 가끔 "--save-dev"나 "-D"를 붙여서 설치하는 경우가 있었다. 하지만 이것이 어떠한 역할을 하는지는 잘 몰랐다. 우선 위에 있는 코드는 모두 같은 코드이다. "--save-dev" 대신 "-D"를 써도 되는 것이다. 이렇게 설치한 라이브러리,..