![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nmnWg/btra34jZsc9/GkxZHw3ywpIWpaxBeVkOeK/img.png)
Next.js란? React에서 SSR(Server Side Rendering)을 지원해주는 framework이다. Nextjs 공식 사이트 https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org SSR이란 서버사이드렌더링의 약자로 CSR의 단점인 로딩 시간의 감소를 위한 기술이다. CSR은 클라이언트사이드렌더링이고 클라이언트 측에서 html, css, ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/daLXov/btraWT4c5ab/vJ1oRlVrm2uSBJA4dLO7zK/img.png)
Leader Election main server(leader server)와 그 server의 replica들로 다중 server 환경을 구성했을 때 main server가 다운되면 main server는 자신을 대체할 서버(Leader server)를 찾을 신호를 보낸다. 이 신호를 받은 Copy server들은 main server를 대신할 leader server를 선정한다. 그 중 가장 latency와 throughput이 적은 server가 Leader server가 되어 일시적으로 main server의 Leadership을 가진다. 모든 request는 우선적으로 Leader로 선정된 서버로 간다. 어떤 server가 leader가 될지를 결정하는 알고리즘 매우 복잡하고, leader el..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/EPXHh/btraSZJGonB/d4WUvY4volWZAFhlGEIw81/img.png)
기존에 webpack을 공부하며 react환경과 webpack을 이용하여 react 개발환경과 비슷한 프로젝트를 생성해보았다. entry, output, plugin설정 module설정 등등 직접 해보며 react application 개발환경을 완성했다. 사실 가장 큰 목표는 wasm과 react를 연동해보는것 이었다. CRA react라면 eject를 하거나 rewired를 설치하거나 여러가지 방법이 있겠지만, 아무래도 webpack을 이용하여 직접 설정한 프로젝트에서 연동해 보는게 좀더 욕심이 났기 때문에 webpack을 공부하고 react프로젝트를 세팅하는것도 공부해보았다. (본 포스팅은 CRA가 아닌 webpack, babel로 react개발환경을 직접 설정한 후 진행했습니다.) wasm 설정하..
sass는 css에서 조건분기 함수 등을 사용할 수 있도록 문법을 제공한다. sass확장자와 scss확장자 2가지가 있다. 각 확장자에 따라 작성하는 문법이 다르다. scss모듈을 사용할 수 있도록 webpack에 설정해볼것이다. 이를 위해 sass-loader, node-sass를 설치해야 된다. sass-loder node-sass yarn add sass-loader node-sass -D loader-chaning sass파일을 css파일로 컴파일 컴파일 된 css파일이 css-loader를 통해 build sass-loader가 먼저 작동 loader-chaning은 use[index1, index2, ..., indexN]배열의 index가 큰 loader부터 순서대로 진행된다. css 모듈 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nsgbL/btraMpPLNaD/Q0jHr7kWbTw9fu81ffxW2k/img.png)
url-loader는 file-loader와 출력의 형태가 다르다. file-loader는 파일을 그대로 출력해주는 역할을 한다면 url-loader는 파일을 data uri문자열형태로 변환해준다. url-loader 설정 yarn add url-loader -D webpack의 module에 loader를 설정한다. module.exports = { ..., module: { rules: [ ..., { test: /\.svg$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] } ] }, ... } svg파일에 대한 설정을 했다. options의 limit는 파일 크기의 제한을 두는 것이며, byte단위로 설정한다. 위에서는 8kb정도로 설정..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cc9FlW/btraJojokIc/DPHx29mkRbHqWuh0zXMebk/img.png)
모듈 내에서 import또는 require로 파일을 모듈로 읽어들이기 위한 loader이다. file loader는 build 시 webpack에서 설정된 Output 디렉토리로 파일을 복사한다. file loader 설정 yarn add file-loader -D webpack에서 image파일에 대한 설정을 하기위해 module의 rules에 새로운 원소를 추가해야 된다. module.exports = { ..., module: { rules: [ ..., { test: /\.(png|jpe?g|gif|tif?f|raw|bmp)$/i, use: [{ loader: 'file-loader', options: { name: '[contenthash].[ext]' } }] }, ... ] }, .... }..
https://doc.rust-lang.org/std/vec/struct.Vec.html std::vec::Vec - Rust doc.rust-lang.org Rust Vector Container 정리 - Vector는 메모리 상에 서로 이웃하도록 모든 값을 집어넣는 단일 데이터 구조 안에 하나 이상의 값을 저장. - Vector는 같은 타입의 값만을 저장. - index로 데이터에 접근이 가능하다. 1. Vector 생성자 - 다른 변수와 마찬가지로 let, let mut 키워드로 생성하며, 제너릭 타입을 입력한다. (여기서는 i32 사용) let mut vec: Vec = Vec::new(); let mut vec: Vec = vec![]; - 변수 선언시 데이터를 할당하여 초기화 할 수 있다. /..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/C8nqU/btrazLG2PnB/RfhVnh73vkbdDMvnPQNExk/img.png)
Webpack으로 설정한 소스코드 최적화에 관련된 설정을 Production mode(배포)에서만 진행될 수 있도록 분리 코드 최적화 설정 정보 https://kmj24.tistory.com/175 webpack 소스 코드 최적화 Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML -.. kmj24.tistory.com 분리를 통해 최적화 관련 설정은 배포할 때만 진행 되며 개발 과정에서는 수정 반영 시간이 단축되어 쾌적한 환경으로 개발이 가능해진다. 환경 별 설정 파일 분리 각 환경 별 (Dev, Prod) 설정을 구분..