REACT
-
useEffect가 나를 열받게 했다Web/React 2022. 7. 15. 20:32
이번에 새로운 기능을 개발하면서 상태의 변화에 따른 side effect들을 처리해주기 위해 useEffect를 많이 사용하게 됐다. 기능의 생명 주기를 stage라는 단위로 구분했는데, 원래는 페이지 단위로 사용자의 행동을 구분하는 것이 보편적이겠지만 사실 페이지의 형태도 거의 비슷하고 로직만 약간씩 바뀌는 식이어서 굳이 페이지를 나눌 필요가 없겠다는 생각이었다. 그래서 사용자가 '이번 페이지에서 할 작업을 다 마쳤으니 다음 페이지로 넘어간다' 라는 의도로 '다음' 버튼을 누르면 동일한 페이지 내에서 stage만 바뀌고, stage의 변화에 따라 useEffect에서 여러 작업을 수행하는 방식으로 구현을 했다. useEffect(() => { if (stage === ‘first-stage’) { //..
-
웹팩으로 리액트 개발환경 구축하기Web/Build and Deploy 2021. 8. 18. 16:31
이번에 우아한테크코스에서 진행한 프로젝트의 개발환경을 처음 세팅할 때, 같은 팀 프론트엔드 크루와 함께 기준으로 삼았던 것은 바로 CRA였다. '우리가 CRA를 쓰던 때와 비슷하게, 아무런 불편함 없이 코딩할 수 있을 정도'로 세팅을 하자는 것. 그러면 그냥 CRA를 쓰면 되지, 왜 굳이 처음부터 세팅을 하느냐? CRA를 사용하면 불필요한 기능들까지 한 번에 딸려오기 때문에 가지치기 작업을 해줘야하는데, 그럴바에 차라리 직접 리액트 개발환경을 세팅하면서 공부를 해보자는 것이 공통된 의견이었다. 더불어 CRA를 사용하는 것이 불가능한 조건이었다는 건 비밀. ■ package.json 우선, 당연히 npm init을 통해 package.json을 만드는 것부터 시작된다. npm init 📦 웹팩(Webpac..