신규 프로젝트 대시 보드의 모든 것을 내가 맡게 되었다..!
면접 볼때 질문이 있냐는 말에,
“혹시 프론트엔드는 몇 명이니?”
“지금 면접보는 사람이 프론트 리드이고 너랑 프론트 리드 둘이야.. ” 라고 했다.
“혹시 그럼 나는 어떤 작업을 하게 돼?”
“신규 프로젝트의 대시보드를 프론트 리드랑 함께 할 꺼 야… ”
함 께 할 꺼 야… 가 아니고 내가 다 하게 되었다.
기존 웹사이트만 참고해서 UI, UX, Figma 없이 알아서 그냥 쓱쓱 그리면서 기능을 넣어야 하다보니, 라이브러리 사용 필수…!!!! MUI 사랑해요…!!
대신 색 조합을 잘 못해서 번뜩이는 버튼 색 덕분에 페이지가 살짝 촌스러워 보이는건 왜 일까… 이건 나중에 색 조언을 받아야겠다.
아무튼 모든 페이지의 대략적인 UI와 Modal 작업이 끝나고, date UI, rechart(그래프), react-intl(다국어) 제외… 다국어 처음 해 봄..!
로그인, 회원 가입, site selection, alert page, sensor page, main dashboard page기타 등등 순서에 맞춘 로직과 CRUD가 구현되어야 한다.
한 달도 채 안된 신입이기도 하지만, 상사 또한 다른 프로젝트를 하고 있기에 질문을 자주 하기가 참 눈치 보여서 왠만하면 Chatgpt 그리고 구글로 해결하려고 하지만…
하루 종일 붙잡고 있던 로그인 구현 중 난관한 문제점
- proxy middleware 적용하는 부분에 있어서 setupProxy를 설치 해야 하는데 chatgpt에게 물어보니, src 폴더 바깥쪽 root directory에 넣으라고 했다. -> 상사가 와서 src안에 넣으니 해결 되었고 드디어 constantApi.js에 있는 주소들을 읽어서 매칭하기 시작했음. 뭐지..!!!? chatgpt가 늘 정답은 아닌 듯! 유료 판이 아니여서 그런가? 아무튼, 주소 관련해서 CORS? 뭐시기 문제가 있어서 이렇게 해야 한다고 들었다.
상사가 참고하라고 보내줬던 http-proxy-middleware 문서
https://www.npmjs.com/package/http-proxy-middleware
상사가 보내준 axios 관련 문서
https://axios-http.com/docs/req_config
- Feature – Login – LoginForm.js와 authSlice.js 로 구성을 했는데, 자꾸 404 혹은 403 에러가 뜨는 거임 ㅠㅠ 403은 권한이 없다로 에러가 뜨고, 404는 주소 api의 문제 인 것 같았고 이건 아마 위의 1번 문제 때문에 그랬다. 덕분에 백 담당자랑 오랜만에 얘기도 하고, redux toolkit으로 로그인 하는 영상도 보면서 따라 쳐 보고, 결국 상사에게 조언을 구하니 이전 코드와 비슷하게 headers의 content-type을 넣으라고 했고, 나는 옛날 코드, 즉 react redux를 사용하며 thunk와 store 모든 것이 분리되어 있는 것에서, Redux toolkit을 사용한 새 프로젝트를 만들어 내야하는데, createAsyncThunk와 axios를 사용해서 response로 put으로 코드를 만들어 놓았지만 씨알도 먹히지 않아, 이전 코드 로그인 방식에 맞춰서 header양식을 지키고 put이 아닌, get하라고 했다. 왜 그런지는 모르겠지만 그렇게 만들어 놨으니 그렇게 해야 한다는 점. 로마에서는 로마의 법을 따르는 거쥬..?
- 무튼 get과 post도 달랐지만 결론의 거의 90퍼센트 다 되어가는 시점에서(느낌으로다가) 자꾸 뭐 에러 터지고 안 되서 드디어 집 가기 마지막에 진이 빠진 상태에서 상사를 불렀고, 상사가 10분만에 해결 함…!! 와 이래서 상사구나 했음. src폴더 안에 setupProxy 넣고 콘솔에 내가 보낸 매개변수를 하나 찍더니 아 너꺼는 뒤에 이거 하나 빼. 하더니 바로 로그인 200 뜨는 것이였음…!!!!
해결하고 가서 기분은 좋지만 느낀 점이 있다.
- 고민을 충분히 하되 하루를 넘기면 안 되고 상사를 부르자.
- chatGPT에 의존하지 말고 해당 문서를 좀 보자
- console에 많이 찍어보자..! 의문스러운거 다 찍어봐..! 뭘 보내고 받는지 명확하게 파악하자.
- network 읽을 때 header와 관련 탭들 모두 보자…!
이상, 오늘 하루의 한 달 짜리 비전공자 프론트엔드 생존 일기