프론트엔드

CRA 분석하기

CRA 분석 CRA는 리액트 개발환경을 명령어 한 줄로 만들어주는 편안한 도구이다. 그러나 config 설정을 변경하기 어렵고, 다양한 개발환경을 커버하기 위해서 좀 무거운 감이 있다. webpack.config.js target: ['browserlist'] target으로 webpack이 어떤 환경을 대상으로 할지 정할 수 있다. node 이면 node 환경, electron이면 electron 환경, browserlist는 browserlist-config에 설정된 환경 정보를 가져와서 타게팅한다. browserlist-config는 package.json의 browserslist 속성에 있다. "browserslist": { "production": [ ">0.2%", "not de..

나만의 react boilerplate 만들기 - (2) npx, 배포

기존에는 개발환경을 구성하기 위해서 react-boilerplate 리포지토리를 클론하고 .git파일을 삭제해야 했다. 너무 번거로운 작업이라 CRA처럼 npx fe-jhw-create-react-app 명령어 1줄 입력으로 개발환경 구성이 가능하게 만들었다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] 참고한 글: https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-npx 왜 npx? npx를 사용하면 최신버전 패키..

나만의 react boilerplate 만들기 - (1) 환경 설정

React Boilerplate FE 개발환경에 대해서 공부해보고, CRA에서 불필요한 부분은 덜어내고, 필요한 부분(ex: webpack-bundle-analyzer, MSW)을 추가하여 리액트 개발환경을 설정해봤다. https://github.com/fe-jhw/react-boilerplate 특징 zero-install: 클론 후 패키지 설치 없이 바로 사용할 수 있다. mocking: MSW가 포함되어 api들을 mocking해 사용할 수 있다. behavior-driven-test: react-testing-library를 활용한 유저 행동 기반 UI 테스팅 환경이 구성되어 있다. bundle-analyze: webpack-bundle-analyzer를 활용해 빌드시 번들 분석 정보를 확인할 수..

린트, Prettier 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(린트)를 듣고 정리해봤다. 린트 코드의 오류, 스타일을 점검하고 일부 수정한다. 포맷팅 ex) 들여쓰기, 코드 라인 최대 너비 코드 품질 ex) 전역변수 자제, 사용하지 않는 변수 쓰지 않기 환경 설정 .eslintrc.js 파일로 환경설정을 할 수 있다. // .eslintrc.js module.exports = { rules: { "no-unexpected-multiline": "error", }, } rules에 규칙들을 적용한다. 값은 "off", "warn", "error" 3가지이다. 규칙목록 규칙들 중 자동 수정이 가능한 것들이 있다. extends 바벨의 프리셋처럼 잘 설정해놓은 config들을 가져다 쓸 수 있다. // .eslintrc.js..

Babel 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(Babel)를 듣고 정리해봤다. 역할 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 브라우저에서 동작할 수 있도록 트랜스파일 한다. 동작 파싱 : 코드 -> AST(추상 구문 트리) 변환 : 실제로 코드를 변경 출력 바벨은 파싱과 출력을 담당한다. 변환 작업은 플러그인을 활용해 처리한다. 플러그인 코드를 변환하는 작업을 한다. 자주 사용하는 플러그인 plugin-transform-block-scoping : let,const -> var plugin-transform-arrow-functions : 화살표 함수 -> function plugin-transform-strict-mode : ..

Webpack 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(Webpack)를 듣고 정리해봤다. 역할 모든 브라우저에서 모듈 시스템을 지원하지 않기 때문에 브라우저에 상관없이 모듈을 사용하게 하기 위해 여러개의 파일을 하나의 파일로 합쳐주는 번들러인 Webpack이 등장했다. 설정하기 webpack.config.js 파일을 생성 후 기본 설정을 할 수 있다. const path = require("path") module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve("./dist"), }, } mode : 개발, 상용("production") 등의 모드..

?. - Optional chaining 연산자 / ?? - Null 병합 연산자

?. - Optional chaining 연산자 객체의 프로퍼티 접근을 편하게 해준다. const obj = { a = { b: 1 } } console.log(obj.b.c) // 에러 발생 console.log(obj.b?.c) // undefined JS는 선언되지 않은 객체의 프로퍼티를 참조하려고 하면 에러를 발생시킨다. 이를 ?.을 쓰지 않고 처리하면, if(obj === null) return undefined if(obj.b === null) return undefined return obj.b.c 이렇게 복잡하게 처리를 해야 한다. 이 때 ?.을 사용하면 obj.b?.c로 간결하게 참조할 수 있어 매우 유용하다. ?? - null 병합 연산자 왼쪽 피연산자가 null 또는 undefined..

Promise 일정 시간 초과시 대기 취소하고 에러 처리하기

배경 서버에 요청하고, 서버에 어떠한 문제가 생겨서 응답이 매우 늦게 오거나 오지 않으면 클라이언트에서 오래 기다려야 한다. 이러한 문제를 해결하기 위해서 특정 요청에 대한 응답이 일정 시간(ex: 1초) 내에 오지 않으면 서버에 문제가 있다고 간주하여 해당 작업을 종료하고 사용자가 다른 일을 할 수 있게 해야한다. 구현 Promsie.race(iterable) 를 활용하여 해당 작업을 구현할 수 있다. Promise.race(iterable) 는 인자로 받은 Promise들 중 제일 먼저 성공적으로 resolve 혹은 reject 된 Promsie를 반환한다. 즉 여기에 인자로 [request, handleTimeout] 이렇게 2개의 프로미스를 전달해서 request가 대기시간보다 늦게 resolve..