만족

Treating warnings as errors because process.env.CI = true. ... Failed to compile Vercel로 deploy를 하던 중 위와 같은 에러 메시지가 뜨면서 배포에 실패했다. 해결법 해결법은 간단하다. 해당 프로젝트의 Setting-> Environment Variables 로 간 다음 NAME, VALUE에 각각 CI, false를 넣고 Add하면 된다.

satisfactoryplace.tistory.com/93?category=829221 [React] 프로덕션 최적화: 코드 스플리팅 create-react-app 으로 리액트 프로젝트를 생성했다면 프로젝트 빌드 시에 webpack을 이용해 많은 파일들을 큰 몇개의 덩어리로 합쳐준다. webpack은 SPA(Single Page Application)을 제작하기에 제격인 빌드 도.. satisfactoryplace.tistory.com 코드 스플리팅을 한 이후 이 에러를 만날 수 있다. https://cpsp.kr/players/ (v 1.0.2) ChunkLoadError: Loading chunk 3 failed. (error: https://cpsp.kr/static/js/3.62522664.chu..

새로운 프로젝트 시작 시 내가 반드시 포함하는 몇몇 모듈이 있어 공유해 본다. 모듈 설치는 npm install [모듈명] 또는 yarn add [모듈명] 위의 명령어를 이용해 한다. axios http request를 간편하게 만들어주는 모듈이다. classnames 조건부로 className이 변경될 경우 유용하게 사용할 수 있다. 예컨데, className={`${someCondition? 'positive': ''}`}를 classnames를 사용하면 className={classNames({positive: someCondition})} 처럼 쓸 수 있다. 조건부 className의 가짓수가 적을 때는 번거로워 보이지만 2~3개만 되어도 훨씬 편해진다. moment Date관련 로직을 간소화해주..

velog.io/@velopert/react-hooks#4-usereducer 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 velog.io 작성자분이 잘 정리해두셨기 때문에 위의 링크를 참조하면 좋다. 공식 문서에서 useState/useEffect/useRef 정도만 읽고 사용해봤는데, 이 밖의 유용한 hook도 많은 것 같다. 조만간 보고 프로젝트에 적용해 봐야지

http://test.com 에 배포하기로 했다고 해보자. npm run build (yarn build)로 빌드한 후, 서버에 업로드했을때 정상적으로 표시되는 것으로 보인다. 그런데 /가 아닌 다른 경로로 처음 접속하면 404 페이지가 보인다. 리액트 프로젝트를 빌드하면 html파일은 index.html하나뿐이기 때문에 /, /index.html이 아니면 다른 경로로 접속했을 때 index.html을 읽어올 수 없기 때문이다. 즉, 어떤 경로로 접속하더라도 index.html 파일을 읽을 수 있도록 apache설정을 조금 만져주어야 한다. Ubuntu 16.04, Apache 2.4.18을 기준으로 설명한다. sudo nano /etc/apache2/apache2.conf 설정파일을 열고 (nano 대..

오류 로깅이나, 버그 접수 시 사용중인 버전 정보 확인이 필요하다. 그래서 package.json을 임포트하여 version값을 뽑아오려 했으나 오류가 발생한다. package.json은 프로젝트 루트 위치(src보다 상위 레벨임)에 있기 때문에 임포트가 불가능하다. 따라서 다른 방법을 사용해야 한다. ... "scripts":{ "start": "node scripts/start.js", "build": "node scripts/build.js", ... } ... package.json의 scripts 값을 보면 다음처럼 되어 있을 것이다. 여기서 nodejs에 환경 변수를 넣어줄 것이다. ... "scripts":{ "start": "REACT_APP_VERSION=$npm_package_versi..

리액트로 개발 도중 에러가 발생하면 다음과 같은 화면을 볼 수 있다. 그런데 이건 개발 중일 때 보여지는 화면이고, 프로덕션에서 오류가 나면 아무것도 표시되지 않는다. 말 그대로 페이지가 백지가 되버린다. 당연히 사용자 경험상으로 좋지 않을 뿐더러, try-catch로 모든 컴포넌트의 로직을 감쌀 수도 없는 노릇이니 개발자로서도 에러가 어디서 어떻게 발생하는지 가늠하기도 어렵다. 이럴 때 Error Boundary를 사용하면 문제가 해결된다. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError..

HOC가 뭘까? A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. HOC는 리액트에서 컴포넌트 로직 재사용을 위해 사용하는 고급 기술입니다. HOC는 React API의 일부가 아니며, 단지 리액트의 집합 특성에..