useEffect 는 컴포넌트의 라이프사이클을 함수형 컴포넌트 내에서 조절할 수 있도록 제공되는 react hook 중 하나이며, 실제 react 로 컴포넌트를 구현하는 과정에서 아주 유용하고 자주 사용되는 hook 이라고 할 수 있다. 매 컴포넌트가 랜더링 될 때마다 필요한 sideEffect 를 다룬다던지(서버와의 통신), state 나 props 의 변화로 인한 다른 요소의 업데이트가 필요한 경우, 실제 컴포넌트가 unmounting 될 때의 상황에서 useEffect 는 필수적으로 활용되곤 한다. 그치만 실제 작업을 해보다보면 알겠지만, 이것저것 기능을 추가하고 서로 연계를 하다보면 어느새 컴포넌트 내 useEffect 가 너무 과다하게 사용하고 있는것은 아닌가 의문이 들 때가 있다. 필요해서 사..
새벽 늦게까지 작업을 하다가 이제 마무리하려고 mysql workbench 내에서 실험적으로 저장하였던 데이터들을 삭제하던 도중 갑자기 workbench 의 연결이 끊키게 되었다. 다시 restart 를 해보려고 하니 위와 같은 오류가 발생하였다. PID 파일이 업데이트 되기 전에 서버가 종료되었다는 의미인데. 뭔가 급작스럽게 종료가 되면서 발생한 문제가 아닌가 싶다. 근데 난 mysql server 를 종료한 적이 없는데... 맥북의 문제인가 싶긴 하다. (뽑기를 잘못한것을 최근에서 느끼고있다!) 다음날 오전까지 계속해서 오류에 대한 해결책들을 나름 적용시켜보았지만, 해결되지 않았고 그동안 좀 이리저리 mysql 를 건든적이 있어서 이참에 과감하게 mysql 를 다시 삭제하고 설치하기로 마음을 먹었다...
프로젝트를 진행하는 도중 form 제출 후 결과 페이지까지 구현하다 보니, 로그인이나 회원가입, 그리고 결과창이나 제출 시 버튼들이 제각각의 스타일을 지니고 있다는것을 인지하게 되었다. 비슷한 버튼들은 하나의 재사용 컴포넌트를 사용하는 것이 아니라 각각의 버튼을 각각의 컴포넌트에서 styled-component 로 동일한 스타일을 적용한 뒤 사용하고 있었다. 앞으로도 페이지나 다른 컴포넌트에서 버튼이 사용되게 될 때를 대비하여 버튼을 포함한 여러 element 들을 재사용 가능할 수 있도록 작성해야겠다고 생각이 들어서 따로 Button.tsx 를 생성하여 구현하기 시작했다. 이렇게 버튼을 생성하여 구현을 이어나가다 로그인 페이지에서 Sign In, Create Account 버튼과 아래 Google lo..
이전 포스팅에서 redux를 간단하면서 의사코드 수준을 구현하면서 설명한적이 있다. 매번 리덕스를 사용할 때마다 action, dispatch, reducer 등등 용어부터 햇갈리면서 그 흐름 역시 파악하기 쉽지 않았는데, 구현 경험을 토대로 좀 더 리덕스에 가까워진 느낌을 받았었다. 이후 리덕스의 사용 시간을 점차 늘려나가면서 코드적으로도 익숙해지고 있는 중이다. 리덕스를 구현해보면서 느낄 수 있었던 점 중 또 하나는 리덕스는 동기적인 흐름이라는 점이다. dispatch 를 통해 실행된 reducer 는 순수함수이기에 동기적이다. 즉, 상태값에 대한 예상된 결과값을 도출하기가 쉽다는 장점이 있다. 하지만 서버와의 연결 등 비동기적으로 상태값을 변경해야할 상황이 많이 있다. 아무리 좋은 원격 상태관리이념..
여전히 천천히 사이드 프로젝트를 진행중이다. 뭔가 진행사항이 빠르지 않아서 조금씩 조급해지곤 한다. 그럼에도 진행하면서 얻었거나 고심하게된 부분들에 대해서 포스팅을 같이 진행하는 것이 현재 진행중인 프로젝트를 다시 한번 되짚어볼 수 있을 거라 생각해 오늘도 포스팅을 해보려한다. 이번 포스팅은 로그인 이후 실제로 사용하게 될 페이지들에 대한 전체적인 레이아웃을 작업하는 과정이다. 아무래도 특정한 디자인 시트를 가지고 작업하는 것이 아니기 때문에, 각 페이지마다 배치를 고려하여야 하고 많은 레퍼런스도 참고해야하는 번거로움이 생긴다. 우선 어떤 기능들이 사용될 것이며 어떠한 서비스를 제공하고 싶은지에 대해서 생각해보자 사이드 프로젝트의 컨셉은 우리가 사용하는 옷장을 디지털로 옮기자이며 사용하는 유저는 손쉽게 ..
함수형 컴포넌트를 사용하다보면, useState 를 통한 상태변화를 동기적으로 처리하고 싶을 때가 있다. 예를 들면 우선 데이터를 받아와 상태를 변경하고, 이 변경된 상태를 props 로 다른 컴포넌트에 넘겨준다던지, 상태변화과정을 순차적으로 진행해서 연결시키고자 할때 등등이 있다. 그리고 이러한 의도로 코드를 작성하였다가, 제대로 작성하지 않은 경우를 맞이하게 되는데, useState 는 비동기적으로 작동하기 때문이다. 직관적으로 상태가 변화하고, 그 변화된 상태 데이터를 컴포넌트에 반영하는것이 이해과정에서 편하지만, useState 가 비동기적으로 작동되어야 하는 이유가 있다. 실제 리엑트 공식문서에서도 동기적 사용을 위한 메서드를 제공하긴 하지만, 거의 절대적으로 이를 사용하지 말라고 경고한다. 그..
redux 는 간단한 로직에서 출발했다고 하는데... 리엑트 를 한번 간략하게 구현해보았으니, 이번에는 리덕스를 구현해보는 경험을 가져보고자 하였다. 구현이라고 해봤자 아주 간략하게 이러한 원리와 흐름으로 리덕스가 구현되었구나 정도를 파악하고자 하는것이고, 앞으로 리덕스를 사용함에 있어 리덕스의 flow 를 이해할 수 있지 않을까 하는 기대감이 있다. 실제로 리덕스는 npm trend 에서 알 수 있듯이 아직 많은 사람들이 사용하고있는 대표적인 상태관리 라이브러리이다. 이 외 recoil, mobx 등 많은 상태관리 라이브러리도 그 시작점은 리덕스라 해도 무관할 것 같다. 길어지는 코드가 싫지만 그래도 Redux를 사용했던 이유 처음 리덕스를 사용할 때, 외부에 store 를 생성하고, 거기에 또 dis..
훅을 사용할 때는 두 가지 규칙을 준수하여야 한다 리엑트의 훅은 자바스크립트 함수이다. 저번에 리엑트를 간략하게 구현하였을 때, 마지막으로 useState 에 대해서 구현을 했으며, 자바스크립트의 클로져 성질을 활용했다는 것을 알 수 있었다. 자바스크립트의 함수라면 굳이 규칙이 필요할까. 어째서 리엑트 개발팀은 두 가지 규칙을 두었으며, 이러한 규칙을 강제하기 위해 linter 플러그인을 제공하는 것일까 하며 궁금증이 생겼고, 조사해본 자료를 토대로 포스팅을 해보고자 한다. 2 가지 hook 의 규칙 리엑트 공식문서에서 언급하고 있는 hook 의 규칙은 크게 2가지이다. 1. 오직 React 함수 내에서 Hook 을 호출해야 한다. 사실 이 부분은 얼추 이해가 되는부분이었다. 즉 함수 컴포넌트 내부에서 ..
