Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML - html-webpack-plugin에서 html파일의 minifiaction설정이 가능 module.exports = { ..., plugins: [ new HtmlWebpackPlugin({ title: 'Webpack', template: './template.hbs', meta:{ viewport: "width=device-width, initial-scale=1.0" }, minify:{ removeComments: true, useShortDoctype: t..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/coYIuw/btraqstf9AY/iO5lcBNShTdPWlxp0yUNBk/img.png)
Caching은 자주 사용하는 데이터를 저장해 두고 client - server 통신의 비용을 줄일 수 있는 시스템이다. Webpack을 이용하여 Caching설정을 할 수 있다. module들을 bundle.js로 만들면, 브라우저는 bundle.js를 받고 web application을 동작시키게 되는데, 이때 설정한 내용으로 bundle.js를 만들게 되면 브라우저는 같은 이름으로 bundle.js을 호출한다. 브라우저가 caching을 구별하는 기준은 url이다. 그래서 load하는 resource의 이름이 같을 경우 caching을 이용하기 때문에 이전 bundle.js의 결과로 보이게 되어, 파일이 수정이 되었더라도 수정이 안된것 처럼 보여진다. 이런 문제를 방지하기 위해 bundle.js에 ..
선언 //선언 let mut tmp = String::from(""); 문자열 casting let mut s = String::from(""); let mut c = 'c'; s = c.to_string(); println!("char to string : [{}]", s); let mut i = 1; s = i.to_string(); println!("i32 to string : [{}]", s); let mut f = 1.0; s = f.to_string(); println!("f64 to string : [{}]", s); i = s.parse().unwrap(); println!("string to i32 : [{}]", i); f = s.parse().unwrap(); println!("str..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/CQZZs/btradS5XAIi/tLA77LM4ioQVP9pQOT9hF0/img.png)
Module exports키워드를 이용하여 모듈관리 //내보내기 module.exports = { module명1, module명2 } exports.getCircleArea = module명3; //가져오기 const module = require('모듈 위치'); ESM을 이용한 module관리 npm install esm package.json에 "type": "module"추가 //가져오기 import module명 from '모듈위치'; //내보내기 export module명 export default module을 사용할 경우 코드의 재사용성이 증가 코드의 관리가 편해짐 코드를 모듈화 하는 기준이 명확해야 한다. Bundle module들의 의존성을 안전하게 유지하며 하나의 파일로 묶는것을 b..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/TNype/btq92Rssy42/u2qpIEU6cza4GD7bN5mT8k/img.png)
Capacity Estimation 기획 단계에서 어떤 서비스를 만들고 어떠한 feature가 들어갈 지 생각해 보면, Capacity Estimation이 되어야 어느 정도 사이즈로 DB table을 만들고 Server의 크기, 분포도를 어느정도로 설정할 지 결정하는데 도움이 된다. 이는 scalable한 서비스를 만드는데 중요하다. Cache Repeat : 반복 호출이 필요한 Data Immutability : static Data Computation heavy : cost가 많은 결과물 길찾기 알고리즘을 실행한다고 가정 어떤 목적지에서 다른 목적지로 이동하는 최단거리 알고리즘의 시간 복잡도가 O(n²)라고 가정 해당 연산을 요청을 보낼때 마다 반복한다면 Server의 부담이 커진다. (같은 응답..
Ducks: Redux Reducer Bundles Redux를 사용하여 상태관리를 구축하는 과정에서 하나의 기능을 만들 떄 각각 use case에 따라 type, action, reducer를 계속 추가해야 된다는 점과 reducer와 actions만 서로 연관된 동작을 하므로 하나의 독립된 모듈로 묶는것이 더 의미가 있고 라이브러리로 packaging하기 더 쉽다고 한다. 규칙 1. 하나의 모듈은 항상 reducer 함수를 default로 export해야 한다. 2. action 생성자를 함수로 export해야 한다. 3. action 타입은 npm-module-or-app/reducer 4. 외부 reducer가 해당 action들의 발생을 계속 기다리거나, 재사용이 가능한 라이브러리일 경우 "UP..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/brNN1F/btq9ReaXmIu/QyGXcvrVSrVJq4kR324Kk1/img.png)
System Design시 고려 사항 Server - Client 통신 시 다음과 같은 예외사항이 발생할 수 있다. - Client가 Server를 찾지 못하는 경우 - Server가 다운되어 Client의 Request를 받지 못할 경우 - Client가 다운되어 Server의 Response가 소실된 경우 - Client가 crash된 경우 이러한 예외사항을 방어하기 위해 다음을 고려할 수 있다. Reliability : 신뢰성 Availability : 유용성 Low latency : 짧은 지연시간 Performance : 성능 Const effective : 지속성 상황별로 네트워크 프로토콜을 TCP또는 UDP를 사용할 수 있다. - TCP는 3way-handshake와 세그먼트를 통한 높은 신뢰..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/zgyhg/btq9KnT6FwG/B4V9VLfba5nPA92KGmKPdK/img.png)
CDN(Content Delivery Network) - 서버와 사용자 간 물리적인 거리를 줄여 콘텐츠의 지연을 최소화 하는 시스템이다. - main server가 한국의 서울에 위치하고 있고, 영국의 한 사용자가 이 서버를 사용하려고 할 경우를 생각해보자. - 이럴 경우 물리적으로 지구 반대편의 서버에 까지 request를 보내고, 다시 지구 반대편을 돌아 response를 받는데 이는 물리적인 거리가 먼 만큼 지연 시간도 길어진다. - 또한 main server에 모든 사용자가 접근하려고 할 경우 막대한 트래픽이 발생하여 서버에 부하를 줄 리스크도 있다. - 이러한 단점을 CDN으로 보완할 수 있다. - CDN을 사용할 경우 아래의 그림과 같이 동작하게 된다. - 글로벌 서비스는 이러한 CDN방식을 ..