Final Project 3일차 - 프로필 조회 및 수정 기능

📅 TIL #99




🔔 3일차


오늘 벌써 3일차구나.. 오늘은 정말 밥먹는 시간 빼고 아침10시부터 지금까지(현재 저녁 10시57분) 코딩만 했다.. 오늘 하루 정말 하얗게 태웠다..!!


아침에 일어나서 프로필 페이지 css 수정 하고, toggle 버튼 컴포넌트로 만들었다. 그리고 점심먹고 프로필 페이지 렌더링 시 유저의 데이터를 불러오는 것을 구현하고, 프로필 수정 페이지 들어가서 유저가 수정을 하면 다시 수정된 데이터를 불러오는 작업을 하였다.


2주차때는 서버분들이 API를 다 만들면 무작정 redux로 구현하고 안되면 어디서 막힌지 헷갈려 하고 그랬는데, 오늘은 전혀 달랐다.


먼저 컴포넌트에서 서버와 클라이언트가 연결 되는지부터 더미데이터로 확인을 하고 서버의 문제가 완벽히 없다는 것을 확인했을 때!! 그때 redux 작업에 들어갔다.


이렇게 하니 오늘 하루만에 2개의 페이지 분량 데이터 요청을 다 끝냈다!!


확실히 2주차때 깨달음을 얻고 오늘 비로소 성장했다는 것을 몸소 느꼈다 ㅜㅜㅜ 진짜 오늘 코딩하면서 너무너무 즐거웠다.


그래서 그런지 나도 모르게 밥먹는 시간 빼고 의자에서 일어난 적이 없었다는 것을.. 밤이 되고 나서 깨달았다 후..


오늘은 정말 코딩하는데 게임 같이 느껴졌고 아침부터 밤까지 코딩만 했지만 행복하게 보낸 하루였다! 매일 오늘만 같았으면 좋겠다아!!!!!




💪 오늘은 어떻게 프로젝트에 기여했나요?


stacks


눈 뜨자마자 구현한 기능이다. 다른 클라이언트분이랑 상의를 해서 css를 조금 더 수정해봐야한다.


먼저 기능부터 구현해보았다!





togglebutton


그 다음 토글 버튼을 만들었다. 처음 만들어봤는데 토글 버튼은 어렵지 않았던 것 같다. 금방 구현해냈다. 그리고 컴포넌트화로 만들어서 언제든 쓸 쑤 있게 따로 분리를 해놓았다.


그 다음 오늘 서버에 데이터 요청을 위해 store를 생성했다.

그리고 createAsyncThunk를 활용하여 데이터를 요청하고 createSlice를 활용하여 상태를 저장하고 Selector로 관리를 하였다.







🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?


음… 오늘은 정말 어처구니 없는 실수를 하였다.


.env 환경변수 파일에 서버의 주소를 저장하고 요청할 때마다 그 환경변수를 가져다가 썼는데, 오늘 서버 주소를 변경해서 요청하는 일이 생겨서 서버분이 보내주신 주소로 바꿨다.


주소를 보고 별로 안 길어서 그냥 타이핑했는데, 자꾸 CORS 에러가 터지는 것이다..


결국 팀원들을 의도치않게 강제 소환을 해버렸고, 다들 원인을 찾아주시려고 노력해주셨다.. ㅠㅠㅠ


그러다가 갑자기 내 컴퓨터만(?) CORS 에러가 나는 기이한 현상을 발견했다.


우여곡절 끝에 환경변수에 저장되어 있던 서버 주소중에 숫자 0을 적어야 하는데 알파벳 o을 적었던 것……………….


다음부터는 코드가 짧아도 복붙하자! 복붙을 습관화하자!







🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?


프로필 수정 페이지에서 토글 버튼을 통해 프로젝트 공개 여부 판단


스택 추가 후 데이터 저장 기능 구현