만족

새로운 프로젝트 시작 시 내가 반드시 포함하는 몇몇 모듈이 있어 공유해 본다. 모듈 설치는 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도 많은 것 같다. 조만간 보고 프로젝트에 적용해 봐야지

이미 다른 RecyclerView에 사용된 LayoutManager를 사용하려 할 때 발생하는 문제다 해결법은 그냥 각각 만들어서 주면 된다

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..

window.addEventListener('online', ()=>{ /*끊김->연결로 변경될 때 호출*/}); window.addEventListener('offline', ()=>{ /*연갤->끊김으로 변경될 때 호출*/}); window.navigator.onLine //true== connected, false == disconnected 몇몇 웹사이트는 네트워크 끊김/연결될 때 시각적으로 알려주던게 신기해서 한번 알아봤다.

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의 일부가 아니며, 단지 리액트의 집합 특성에..