인생은 효율성

CRA로 리액트 프로젝트를 생성하면 자동으로 환경변수 두 가지 development, production 가 적용된다. package.json의 스크립트에 환경변수에 따라 빌드를 할 수 있게 되어있는데 개발환경과 운영환경 말고 스테이징 환경도 필요하게 되어서 staging 을 추가하고 싶었다. 그래서 .env.staging 파일을 추가하고 빌드 스크립트도 아래와 같이 추가하였다. "scripts": { ... "build:staging": "REACT_APP_ENV=staging react-scripts build", ... }, 하지만 빌드를 하고 나면 환경변수가 스테이징 환경으로 적용되지 않았다. 문제 원인 CRA로 생성한 프로젝트는 기본적으로 development, production 두 가지밖에 ..

문제 상황 문자열을 줄바꿈을 해주고 싶을때가 있다. 문자열 자체에 정규식 개행문자를 추가했지만 JSX 안에서 보여줄 때, 줄바꿈이 먹히지 않는다. const str = '줄바꿈\n테스트'; 줄바꿈 html 태그인 을 넣어도 태그가 문자 그대로 출력된다. 해결방법 JSX안에서는 개행문자 \n 이 먹히지 않아서 일어나는 문제이다. 이럴때는 CSS에서 아래처럼 설정해준다. white-space: pre-line; * 참고로 여기서 줄바꿈 뿐 아니라 들여쓰기도 필요하다면 아래 옵션으로 설정해준다. white-space: pre-wrap; 공식 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading S..

package-lock.json파일이 깃 저장소에 항상 올라가 있어야 한다는 것은 알고 있었는데 이 파일이 왜 저장소에 있어야만 하냐는 이유를 물어보면 명확하게 설명을 할 수 없을 것 같아서 npm 공식 문서에 잘 정리되어 있길래 정리해보았다. package-lock.json 파일은? npm이 node_module를 수정하면 자동으로 반영되는 파일이다. 그래서 npm install을 하면 자동으로 생성되고 패키지 업데이트가 있었다면 파일 내용이 수정되어있는 걸 확인할 수 있다. 이 파일에는 npm을 통해 설치한 패키지들의 상세 내용이 기록되어있다. npm install을 하면 프로젝트 설정 파일인 package.json에 명시한 모듈을 설치하게 되고 package-lock.json 생성되며(node_mo..

["@babel/plugin-proposal-private-methods", { "loose": true }] 젠킨스 빌드를 돌리는데 빌드가 30분째 돌아가고 있는 것이다. 원래는 5분쯤이면 빌드 완료가 떴기 때문에 무엇이 문제인지 로그를 확인해봤다. Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties. 위와 같은 warni..

2022.04.29 - [React] - [React] CRA없이 프로젝트 세팅(Babel, Webpack, Polyfill) #1 [React] CRA없이 프로젝트 세팅(Babel, Webpack, Polyfill) #1: Babel 먼저 Babel, Webpack, Polyfill이 무엇인지 간략하게 알아보자. [Babel] 대부분의 브라우저가 ES6의 사양을 거의 모두 지원하는데 IE 11의 ES6 지원율은 상당히 낮은 편이다. 때문에 구형 브라우저에서 ES6의 bomoto.tistory.com Babel세팅에 이어서 Webpack과 Polyfill을 세팅해주자. 1. Webpack설치 아래 명령어를 사용하여 웹팩을 설치해준다. npm install --save-dev webpack webpack-..

먼저 Babel, Webpack, Polyfill이 무엇인지 간략하게 알아보자. [Babel] 대부분의 브라우저가 ES6의 사양을 거의 모두 지원하는데 IE 11의 ES6 지원율은 상당히 낮은 편이다. 때문에 구형 브라우저에서 ES6의 최신 사양으로 문제없이 동작시켜야 하는데 이때 ES5로 트랜스파일링 해주기 위해 Babel을 사용한다. [Webpack] 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링 하는 모듈 번들러다. [Polyfill] Babel을 사용하여 ES6 사양의 코드를 ES5로 트랜스파일링 해도 브라우저가 지원하지 않는 코드가 존재한다. 대표적 예시로 Promise는 ES5에 대체할 수 있는 기능이 아니기 때문에 트랜스파일링 되지 못하는데 이 때문에 ..

1. 프로젝트 폴더를 생성한 뒤 해당 경로로 이동한다. 2. 명령어를 이용해 package.json을 생성한다. npm init -y 3. 넥스트를 설치해준다. npm add next react react-dom 4. 타입스크립트를 설치해준다. npm add -D typescript @types/react @types/node 이 과정까지 완료하면 package.json의 디펜던시에 타입스크립트가 추가된다. 5. 프로젝트에 js로 되어있는 파일을 타입스크립트 파일로 변경해준다. index.js를 index.tsx로 변경해준 뒤 프로젝트를 실행하면 tsconfig.json파일이 생겨난다. + ESLint를 설정해주려면 터미널에서 프로젝트 경로로 이동한 뒤 eslint --init 위 명령어로 설정을 해준다..

리듀서에 delete 하는 액션을 추가로 정의했는데 위와 같은 에러 메시지가 떴다. 아무리 살펴봐도 타이핑은 제대로 되어있었고 전혀 에러 날 부분이 없는데 왜 자꾸 misspelled 했다는 에러가 뜨는 건지 이해가 안 되었다. (...) export const DELETE_EMAIL = "DELETE_EMAIL"; (...) export const deleteEmail = (data) => ({ type: types.DELETE_EMAIL, data, }); const emailReducer = (state = email, action) => { switch (action.type) { (...) case types.ADD_EMAIL: return [...state, action.data]; (...)..

리액트 안티 패턴 1. 프로퍼티를 사용한 상태 초기화 부모에서 받은 프로퍼티를 이용해 상태를 초기화했을 때의 문제점은 두 가지가 있다. 1. 정보 출처가 중복: props에서 받은 값을 state에 저장한 경우 핸들러를 이용해 state의 값을 변경했는데 이때 props에서 받은 값과 state에 저장된 값이 서로 달라지게 된다. 이때 어떤 값을 신뢰해야 하는지 100% 확신하기 어렵다. 2. 컴포넌트로 전달한 props가 변경되어도 상태가 업데이트되지 않음: 애플리케이션의 수명 주기 동안 프로퍼티의 값이 변경되더라도 자식 컴포넌트는 이미 초기화된 후이기 때문에 state는 초기화 시 저장한 값이다. 2. 상태 변경 setState를 사용하지 않고 값을 변경하면 컴포넌트를 다시 렌더링 하지 않는다. 예를..

리액트 Class형의 생명주기(lifecycle) ▶ componentDidMount() 컴포넌트가 DOM에 생성된 직후 호출 외부에서 데이터를 불러와야 한다면 이 단계에서 실행 ▶ shouldComponentUpdate() 성능 최적화를 위한 것 props와 state를 이전 값과 비교해서 갱신 작업을 건너뛰게 만들 수 있음(false반환) ▶ componentDidUpdate() 갱신이 일어난 직후 호출 DOM조작을 할 때 활용하면 좋음 setState()를 사용하게 된다면 무한 반복이 일어날 수 있기 때문에 주의 shouldComponentUpdate()가 false를 반환하면 호출되지 않음 ▶ componentWillUnmount() 컴포넌트가 제거되기 직전에 호출 타이머 제거, 네트워크 요청 취..