만족

리덕스는 대표적인 상태 관리 라이브러리다. 리액트에서는 여러 컴포넌트가 동시에 사용하는 state를 props를 이용해 하위 컴포넌트로 계속해서 전달하는 대신 하나의 스토어에서 관리하게 되어 생산성을 높이는데 주로 사용된다. 잠깐 설명을 하고 가자면, 리액트는 FLUX아키텍쳐를 채택하여 컴포넌트 간 데이터 흐름은 항상 상위 컴포넌트에서 하위 컴포넌트로 흐르게끔 강제한다. 그러나 때때로 A Component에서 B Component로 데이터를 넘겨줘야만 할 때가 있는데, 이 규칙을 따르려면 불필요한 래핑을 진행하거나 사용할 데이터를 Parent Component로 옮긴 후, props로 보내주는 방식을 채택해야 한다. 컴포넌트간 관계가 소규모라면 어렵지 않지만, 매우 복잡하게 얽혀있는 관계라면 꽤 번거롭고..

hook을 사용하다가 발생하는 에러다. 무슨 에러인지 잘 모르겠지만, 콘솔에 찍힌 에러를 따라가보면 다음과 같은 메시지를 확인할 수 있다. 즉 useEffect의 마지막 인자(deps)부분이 array가 아니라서 발생하는 에러다. 이런 식으로 deps에 array가 아닌 string이 주어진 상태이므로 이렇게 배열로 바꿔주면 해결된다.

현재까지 배포 과정은 다음과 같았다. 1. yarn build 입력 후 빌드 대기2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사 터미널에 yarn build후, 다른 창으로 이동하여 작업을 이어나가야 한다는 점이 매끄럽지 못하다고 느꼈기 때문에 다른 방법을 알아보기로 했다. 가능하면 터미널에서 build했으니, 터미널에서 배포까지 끝내고 싶어 검색하던 도중 scp 명령어에 대해 알게 되었다. scp란 무엇인가scp란 secure copy의 약자로써, 원격으로 파일의 카피를 할 수 있게 해주는 명령어이다. 어떻게 사용하는가MAC이나 Linux계열의 OS사용자면 그냥 터미널을 열면 되고Windows사용자는 PowerShell을 사용해야 한다. 사용 포맷은 다음과 같다. scp [OPT..

React component 자신이 가진 상태값은 state라고 하고, setState를 이용해서 그 상태값을 변화시킨다. 그런데, this.setState()는 state를 비동기적으로 변화시킨다. 즉, this.setState() 라인이 호출되고 다음 라인으로 넘어갔을 때, this.state의 값은 바뀌었을 수도, 바뀌지 않았을 수도 있다는 말이다. 위의 코드를 보면, 실행되고 난 다음에는 this.state.value의 값이 101로 찍힐 것 같지만 실제로는 2가 나온다. (물론 다른 값이 나올 수도 있다) 왜 그럴까? setState()는 즉각적으로 상태를 업데이트하지 않고, Promise를 이용해 비동기적으로 상태를 변화시키기 때문이다. (Promise에 대해서 잘 모른다면, 다음 글을 참고하..

create-react-app 으로 리액트 프로젝트를 생성했다면 프로젝트 빌드 시에 webpack을 이용해 많은 파일들을 큰 몇개의 덩어리로 합쳐준다. webpack은 SPA(Single Page Application)을 제작하기에 제격인 빌드 도구이다. SPA의 장점은 첫 로드 후(청크를 한번에 다운로드) 추가적인 로드가 없어서 사용자에게 웹이 아니라, 마치 하나의 앱을 설치한 것 처럼 부드러운 환경을 제공할 수 있으나, 첫 로드가 오래 걸린다는 단점이 있고, 번들링 시에 파일 크기에 오버헤드가 존재한다. (실제로 Hello world를 출력하기만 하는 프로젝트를 빌드해도 100KB단위로 프로덕션이 만들어진다) 프로젝트가 작은 경우에는 그대로 프로덕션을 제공해도 로딩이 조금 더 걸리는 수준에 그치지만 ..

오늘 약 5개월동안 진행한 프로젝트에서 사용하지 않는 라이브러리 제거를 진행했다. 웹 사이트 퍼포먼스 측정 결과, 특히 사이트 로딩 속도에서 매우 처참한 결과가 나왔기 때문이다. 한번에 모든 페이지를 로드하기 때문에 초기 로드에 비교적 많은 시간이 필요한 SPA의 치명적인 단점이 굳이 필요하지 않은 의존성들과 함께 존재하면 빌드의 결과물인 청크 사이즈의 비대로 인해 로딩 시간이 더더욱 길어지게 된다. 나는 개발 초기에 사용이 간편한 부트스트랩을 사용하다가 디자인 수정 작업을 거치면서 부트스트랩보다는 material-ui가 더 적합하다는 것을 깨달았다. 그러나 이미 많은 컴포넌트들에 부트스트랩이 들러붙어 있어서 상당히 손대기 어려웠다. 대부분의 편집기나 IDE에 존재하는 Find in Path 기능을 이용..

Routing을 위해 component에 컴포넌트를 집어넣을 때, 보통은 아랫쪽처럼 하지만 뭔갈 더 집어넣어서 라우팅하기 위해 위와 같은 방법으로 컴포넌트를 만든 후, 리턴하게끔 해서 사용했었다. 그런데, 위의 방법은 문제가 있다. 아래쪽 방법으로 사용하면, 이 컴포넌트의 부모 컴포넌트가 업데이트되어도 Lol쪽은 언마운트되지 않지만, 위쪽 방법으로 사용하면 기존에 있던 와 새로 리턴되는 를 다른 인스턴스로 판단하여, 기존의 를 언마운트하고, 새로운 를 마운트한다. 간단히 말해서, 부모 컴포넌트가 업데이트 될 때마다 라우트의 컴포넌트를 새로 만든다는 뜻이다. 만약 위와 같은 방법을 사용한다면, 해당 컴포넌트의 업데이트 관련 라이프사이클을 만져주는 식으로 의도하지 않는 언마운트/마운트를 막아주어야 한다. 안..