개인프로젝트/CHAM

[CHAM] 후기

GitHub - TeTedo/react_project Contribute to TeTedo/react_project development by creating an account on GitHub. github.com 10.12 : 기획 10.13 ~ 10.21 : 개발 10.21 ~ 10.25 : 디버깅, ppt제작 10.25 ~ 10.28 : 서버 배포 처음에는 컴포넌트 하나를 만들더라도 재사용을 위한 고민을 많이하고 코드를 작성했다. 하지만 시간이 지날수록 다른페이지를 만들 시간이 없다고 느껴져 재사용의 고민을 많이 안했던것같다. 디버깅을 하면서 실수를 한 부분에서 비슷한 실수를 많이 한 것을 느꼈다. 이런 부분은 티스토리에 남겨두어 더욱더 신경써야겠다고 생각했다. 이 프로젝트를 하면서 렌더링에 대..

[CHAM] 서버 배포

aws에서 EC2를 이용해서 서버에 배포하려고 했다. 파일을 올리고 구글링하면서 sudo npm i 로 package들을 설치하고 npm start를 해봤는데 어느 순간부터 넘어가지 않고 렉이 걸렸다. 그 후 아래와 같은 오류가 떴다. 구글링을 해봐도 잘 안나왔다.. 그래서 인스턴스를 삭제하고 처음부터 해보면서 npm i 로 설치 해봤는데 됐다. 처음엔 서버를 통합해서 인스턴스 하나에 프론트와 백을 하려고 했지만 계속 오류가 나서 결국엔 인스턴스 두개로 프론트와 백을 나누기로 했다. 두개로 따로따로 나누고 경로설정도 다시 해줘서 배포가 잘 됬다.

[CHAM] git api 활용해서 issue 만들기

오가는길에 유튜브를 보다가 git api를 활용하여 issue를 생성하는 영상을 봤다. 나도 해보고 싶어서 따라하기로 했다. 1. git personal access token 받기 (1) 깃을 들어간다 (2) your profile에 들어간다 (3) 프로필 사진을 누른다. (4) 메뉴를 쭉 내리다 Developer settings에 들어간다 (5) personal access tokens 클릭 후 tokens를 클릭한다 (6) generate new token으로 새로 만들고 권한은 repo권한을 체크한다. (7) 토큰을 만들면 토큰 번호를 준다. 이 번호는 한번만 보여주므로 복사해서 딴데다가 적어놓는다. 토큰은 절대로 노출하면 안된다. 2. git api 활용(Octokit) 프론트, 백 둘다 코드를..

[CHAM] redux state Reference

리덕스에서 배열state를 가져와 map을 돌려 사용하려고 했다. 최신거부터 보여주기 위해 reverse를 하고 돌리는데 const productionState = useSelector((state) => state.productionData); 이 배열을 reverse 시키니까 참조한 메모리 값이 reverse되어버려 state의 배열도 바꿔버렸다. 이를 해결하기 위해 깊은복사를 이용했다. const productionData = [...productionState];

[CHAM] function 실행 오류

"Cannot update a component from inside the function body of a different component." 이 오류가 떴다.. 구글에 쳐보니 페이스북 깃허브에 issue칸에 설명이 되있었다. Bug: too hard to fix "Cannot update a component from inside the function body of a different component." · Issue #18178 · face Note: React 16.13.1 fixed some cases where this was overfiring. If upgrading React and ReactDOM to 16.13.1 doesn't fix the warning, read thi..

[CHAM] redux에서 지속적인 로그인 체크

나는 redux에 user_id를 받아와 저장후 이 값을 빼서 썼다. 하지만 어디선가 리렌더링 되면서 redux값을 초기화 시키고 redux에 있는 state값들을 비워버렸다. 어디서 이런 오류가 발생하는지 계속 찾아봤지만 찾지 못했다.. 그래서 로그인을 유지시키기 위해 setInterval로 로그인후 주기적으로 state값을 넣어주는 함수를 만들었다. 하지만 setInterval이 리렌더링 되면서 쌓이는 것같이 점점 더 빨라졌다. 생각을 하다가 state에 저장된 user_id 불러와서 useEffect(() => { dispatch(loginAction.loginCheck()); }, [user_id]); state의 user_id가 바뀔때마다 로그인을 체크를 하기로 했다.