Nodemon 사용 방법 nodemon은 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작한다. 즉 개발자 입장에서 재시작 없이 코드를 자동 반영 할 수 있다 nodemon 설치 yarn add nodemon nodemon 설정 root 디렉터리에 nodemon.json을 만들고, 아래 스크립트를 입력한다. { "watch": ["src"], "ext": "ts,json", "ignore": ["src/dev.ts"], "exec": "ts-node -r tsconfig-paths/register ./src/index.ts", "env": { "PORT": "4000" } } exec : 실제 실행 명령어 ext : 파일 변경을 감지할 확장자 ig..
2023/01
Cross-env는 무엇인가 cross-env는 환경 변수를 설정하는 도구입니다. 이 도구의 주요 목적은 운영 체제 간의 환경 변수 설정에 대한 일관성을 제공하는 것입니다. 다양한 플랫폼에서 실행되는 Node.js 프로젝트의 경우, cross-env는 환경 변수를 설정하는 데 도움이 됩니다. 예를 들어, Windows와 macOS, Linux에서 실행되는 프로젝트에서 동일한 환경 변수를 사용할 수 있도록 합니다. Cross-env 설치 방법 yarn add cross-env { "scripts": { "local": "cross-env NODE_ENV=local nodemon", "dev": "cross-env NODE_ENV=development nodemon", "prod": "cross-env NO..
문제 상황 Box 컴포넌트 출력은 되는데 Each child in a list should hava a unique “key” prop. 에러가 발생 했다 해결 방안 해결 방안은 단순하다. li 컴포너트에서 unique한 키 값을 원하는데 아래 코드로 생성할 경우 unique한 키 값이 없다. 아래와 같이 들어오는 데이터의 index 등으로 key 값을 만들면 문제 해결! {products.map((value, index) => { return {value.brand}; })}
React(리액트)란 2011년 페이스 북에 의해 만들어졌다. 2013년들어 페이스북이 리액트가 오픈 소스화 되고, 시간이 흐르면 리액트 네이티브도 오픈소스가 되었다 또한 componecnt-centric approach에 개발자들이 열광하기 시작하며 요즘은 모르는 사람을 찾기 어렵다 왜 리액트를 사용해야 하나 리액트는 유연하다! 리액트 하나 배우면 여러 플랫폼에 걸쳐서 인터페이스를 개발 할 수 있다. 또한 리액트는 컴포넌트 기반 웹 개발을 목적으로 만들어 졌기 때문에 리액트 컴포넌트는 무엇이든 될 수 있다. 리액트가 유명해지며 생태계가 넓어진 것도 한 몫하였다! 뜨거운 커뮤니티 커뮤니티가 활성화 되어 있고, 많은 사람들이 쓰다보니까 레퍼런스나 관련 라이브러리 등이 많다 레퍼런스 freeCodeCamp
Recoil은 뭘까 Recoil은 리액트 전용 상태 관리 라이브러리이다. 2020년 5월에 페이스북에서 출시된 나름 최신 툴이다 이전의 전역 상태관리 라이브러리들이 문제가 있었던 것은 아닌데 리액트 전용이 아닌점에서 Recoil에 밀린 듯하다 그 예시를 들자면 아래와 같다 복잡합 Boiler Plate 초기 세팅이 요구된다 비동기 데이터에 추가 리소스가 요구 된다. Recoil은 왜 쓸까? 전역 상태의 설정/정의가 매우 쉽다 Recoil이 지원하는 hooks로 get/set 하기 때문에 리액트 문법과 매우 유사하다 Boiler Plate 양이 현저히 적다 yarn add recoil 실습 일단 recoil 디렉터리를 만들고, state.jsx를 만들고 아래 코드를 입력한다. // atom, selecto..
인트로 Vite는 프랑스어로 빠르다는 것을 의미한다. 빠르고 간결한 모덥 웹 프로젝트 개발을 목적으로 탄생한 빌드 도구이다. 핵심 컨셉은 두가지 이다. 네이티브 ES Module을 넘어 다양한 기능을 제공한다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 최적화된 정적 리소스들을 배포할 수 있게끔 하고, 미리 정의된 설정을 제공한다. 왜 Vite를 사용해야 할까? 브라우저에서 ES Modules를 지원하기 전가지, javascript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 개발자들은 그래서 어쩔 수 없이 우회적인 방법인 번들링을 사용할 수 밖에 없었다. 모듈화된 소스 코드를 브라우저에서 실행 할 수 있게 파일로 한데 묶어 연결해주는 작업을 걸쳐야 했단 것이다. 하지만 애..
Yarn은 패키지 관리자이다. Node.js 런타임 환경을 위해 페이스북이 만들었다. npm 패키지 관리자의 대안으로 대형 코드의 일관성, 보안, 성능 문제를 해결하고자 개발되었다. 설치 Node.js 16.10 버전 이후부터는 Corepack으로 yarn을 설치 할 수 있다 맥북 기준으로 corepack을 설치하고, corepack enable을 하면 된다 brew install corepack corepack enable yarn init -2 여기가지하면 yarn으로 프로젝트 초기화까지 완료되었다 특징 yarn은 npm의 대항마로 나왔으니 npm과 비교해볼까 한다 패키지 설치 방식 yarn은 병렬 설치 npm은 직렬 설치 설치 방식에 기인해서 yarn의 패키지 다운로드 속도는 매우 빠르다. 보안 n..
문제 JSON 형식의 파일에서 정해진 조건으로 데이터를 출력하는 문제이다 const users = [ { "name": "하윤", "gender": "female", "age": 23, "birth": "2000-3-25" }, { "name": "예준", "gender": "male", "age": 24, "birth": "1999-4-4" }, { "name": "도윤", "gender": "female", "age": 22, "birth": "2001-5-12" }, { "name": "민준", "gender": "male", "age": 24, "birth": "1999-4-14" }, { "name": "서준", "gender": "male", "age": 23, "birth": "2000-10..
VScode 플러그인을 마구잡이로 깔다보니 지저분해서 모두 지우고 다시 설치하는 겸에 포스팅한다 설치 방법은 간단하다. VScode extension에 들어가서 Prettier 검색 후 설치하면 된다 나의 경우, 2가지만 설정하고 바로 사용하고 있다. MAC 기준으로 command + , 또는 설정에 들어간다. format on save 파일 저장 시 자동으로 포맷터가 실행 된다. 코드가 지저분해졌다 싶을 때 한 번씩 저장과 포맷팅을 동시에 할 수 있어서 애용 중이다 Default formatter를 Prettier로 설정
블록 암호화 k 비트의 블록 단위로 암호화 된다 k=64이면, 메세지를 64 비트의 블록들로 쪼개어 각 블록을 독립적으로 암호화 k 비트 블록의 평문을 k비트 블록의 암호문으로 대응 일대일 사상 각각의 입력에 대해서 서로 다른 출력을 얻게 된다 하나의 사상은 가능한 모든 입력의 순열이다 3 비트로 표현하니 8개의 입력이 가능하고, 일대일 사상을 하기 때문에 순열로 암호화 된다 des, 3des, aes 등이 블록 암호화 방식 미리 정의된 테이블을 사용하지 않고, 각 화살표에 대응되는 함수들을 사용한다 비트열을 키로 사용한다 알고리즘의 키는 알고리즘 내부에서 특정 미니 테이블의 사상과 순열을 결정 한다 테이블 기반 암호화 = 현실성 없는 전략 매우 안전한 대칭키 암호화 방법 k가 커지면 입력 블록에 대한 ..
