코딩 일기장

💡 Render props pattern 이란? render props는 코드의 재사용성을 높임과 동시에, 관심사의 분리를 이룰 수 있도록 만들어주는 패턴 render props란 props에 넘겨주는 값이 JSX요소를 반환하는 함수는 prop을 말한다. hello world} /> render 라는 prop에 JSX Element를 반환하는 함수를 넣어 사용한다. const Title = ({ render }) => render(); 예시 drawing dream 프로젝트에서 회원가입 시 입력 값에 대해 유효성 검사를 진행하였다. render props pattern을 적용하기 전 프로젝트의 구조 SignUp.js └ InputContainer.js ├ Input.js └ ValidContainer.j..

init npx create-react-app appname --template typescript electron tools Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인 Electron: 일렉트론 Electron-builder: 일렉트론을 실제 프로덕션 버전으로 빌드하기 위해 사용 concurrently: 동시에 여러 명령어를 사용하기 위해 사용 cross-env: 프로그램을 CLI활경에서 실행시킬 때 os에 관계 없이 환경변수를 설정할 수 있도록 하기 위해 사용 wait-on: HTTP 자원, PORT, FILE 등이 활성화 될 때 까지 기다려주는 cross platfrom npm i electron-is-dev npm i electron electron-builder co..

asset modules 는 로더를 추가로 구성하지 않아도 asset 파일 (폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 webpack 5 이전에는 raw-loader : 파일을 문자열로 가져올 때 url-loader : 파일을 data URI 형식으로 번들에 인라인 추가할 때 file-loader : 파일을 출력 디렉터리로 내보낼 때 로더를 사용하는 것이 일반적이었다. webpack 5에서는 이러한 로더를 대체하기 위해 asset module에 4개의 새로운 모듈 유형이 추가되었다. asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체) asset/inline : asset의 data URI를 내보낸다. (url-loader 대체) asset/sourc..

file-loader css 뿐만아니라 소스코드에 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader가 하는 일이다. src 경로에 bg.png파일을 추가하고 main.css에 body 부분을 다음과 같이 수정하고 빌드하면 body { background-image: url('./bg.png') } 전과 같이 module 에러가 뜨는 것을 확인할 수 있다. .png파일을 모듈로 인식하지 못하기 때문인데 file-loader를 install 하여 webpack.config.js에 추가해 보자 npm i file-loader webpack.config.js rules: [ ..., { test: /\.css$/, use:..

로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. js 뿐만아니라 css, image, font까지 모듈로 보기 때문에 import 구문을 사용하여 js 코드 안으로 가져올수 있다. 이것은 웹팩의 로더 덕분인데 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 URL 형식의 문자열로 변환한다. 또한 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 로더는 각 파일을 처리하기 위한 역할, 처리할 파일의 패턴을 명시하고 패턴에 걸리는 파일들은 use에 설정한 로더 함수가 돌도록 한다. ex) webpack.config.js const path = require('path'); module.exports = { ... module: { rules: [ { test: ..

배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것이다. ex) math.js function sum(a, b) { return a + b; } //전역 공간에 sum이 노출 app.js sum(1, 2); 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이를 공간에서 sum을 찾은 뒤 이 함수를 실행한다. 문제는 sum이 전역 공간에 노출된다는 것. 다른 파일에서도 sum이란 이름을 사용한다면 충돌한다. IIFE 방식의 모듈 IIFE(Immediately Invoked Function Expression, 즉시 실행 함..

프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다. js 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 바벨과 같은 도구의 도움 없이는 부족하다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요. Node.js 환경이 뒷받침 되어야 프론트엔드 개발환경을 만들 수 있다. 빌드 자동화 코딩 결과물을 브라우저에 바로 올리는 경우는 흔치 않다. 파일을 압축하고, 코드 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. N..

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다. TypeScript에서 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의한다. 컴파일러는 최한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); myObj는 label: string 이외의 값도 포함하고 있지만 label: string을 가..

타입 추론 타입스크립트는 자바스크립트 언어를 알고 있으며 대부분 경우 타입을 생성해 준다. 기본 타입 타입스크립트는 다양항 기본 타입을 제공한다. Boolean, Number, String, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 등 자세한 내용 https://www.typescriptlang.org/docs/handbook/2/everyday-types.html Documentation - Everyday Types The language primitives. www.typescriptlang.org 변수에 타입 설정 let str:string = 'hello world'; let num:number = 12345; let arr:..

TypeScript란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반면 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도도 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다. 자바스크립트 슈퍼셋 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유요한 자바..