항해 11주차 WIL

이번주는 신기하게 한 일이 요일 단위로 딱딱 나뉜다.

그런데 다시 생각해보니, 그냥 문제가 해결될 때 까지 잠을 안 자서 그런 것 같기도 하다.

 

 

1. 월

마이페이지 API를 연결했다. GET이 처음이어서 헤맨 것도 있었지만, axios로 연결해서 데이터를 받아오는 것 자체는 그래도 어렵지 않았는데 가져온 데이터를 여기저기에 연결시켜주면서 문제가 계속 터졌었다.

마이페이지에 접속하면 제일 먼저 useEffect로 로그인한 유저 정보를 get해서 가져오고, 그럼 이제 그 유저 정보에서 해당 유저가 작성한 게시물, 프사 등의 정보 등을 빼와서 적절한 곳에 넣어줘야 하는데...

console.log(useSelector(state => state.profile.memberInfo.profileImage));

이렇게 불러오면 undefined가 되는데,

console.log(useSelector(state => state.profile.memberInfo));

이렇게 불러보면 또 멀쩡하게 잘 불러와지는 것이었다;

 

대체... 무엇이 문제인지 몰라서 한참 이것도 해보고 저것도 해봤다. 항해 1기인가 2기분 블로그에서 useSelector 문제라는 포스트를 보고 해당 포스트에서 말하는대로

console.log(useSelector(state = () => {return state.profile.memberInfo.profileImage}));

도 해봤는데 이것도 여전히 의미가 없었다.

 

어찌저찌하다 memberInfo까지는 잘 받아와지니 저기까지만 일단 props로 넘긴 다음, 저 데이터가 필요한 컴포넌트를 따로 빼서 거기에서 이제 memberInfo.profileImage로 불러와보자 생각했는데, 이 방법으로 해결됐다.

뭐야 이게 왜 되는거지? 싶어서 따로 뺀 컴포넌트 안에서 아예 처음부터 useSelector(state => state.profile.memberInfo.profileImage)를 불러와봤는데 이건 안됐다.

useSelector(state=>state.profile) 까지만 가져온 뒤 자식에서 나머지 profile.memberInfo.profileImage를 가져와봤는데 이건 잘 되는걸 보니 useSelector로 불러오는게 문제인가 싶긴 한데...

왜 그런건지 이유는 알 수 없지만 일단 문제는 없는 것 같으니 넘어가기로 했다. 찜찜하지만 해결!

 

다음은 프로필 수정. 무난하게 닉네임 바꾸기부터 시작했다. 이것 역시 연결 자체는 어렵지 않았다. 다만 내가 PATCH를 처음 써봐서... 처음에 내가 이해한건 GET인데 POST처럼 내려주는 값이 있는, 약간 겟과 포스트 사이 그 어드메에 있는 그런건가 싶어 그부분에서 조금 헤맸는데. 백에서 원래 그걸로 끝이라고, 더 내려주는 값은 없는게 정상이라고 해주셔서 아! 했다. 이건 뒷맛은 밍밍했지만 어쨌든 깔끔하게 해결.

 

이 기세로 sns url 수정을 건드려봤는데........... 이건 대체 어떻게 해야 로직을 짤 수 있을지 두시간을 고민해봐도 답이 안나와서 이날은 시간도 새벽 3시가 다 되어가고 일단 자러가기로 했다.

 

 

 

2. 화

전날 고민하던 sns url로 또 오전 2시간을 날리고, 할것도 많은데 일단 이건 치워두고 다른걸 하자 싶어 닉네임 수정과 관심분야 수정을 했다. 무난무난- 전에 있던 것들 적당히 재활용해서 코드 재배치하고 부족한 것 살짝만 채워넣으니 이건 금방 쉽게 됐다.

쉽게 끝났으니 다시 sns url을 뜯어보려고 하다가, 아직 내 마음이 이 벽을 넘어설 준비가 덜 돼서 프로필 이미지 수정으로 넘어갔다.

 

그리고 프로필 수정에서 또다시 알 수 없는 이유로 막혀버렸다...

분명히 이미지 올리는 것 까지는 잘 했다. input에 type은 file로 해주고 accept도 image로 했다. 백으로 보내는 것도 요청하신 대로 "content-type" : "multipart/formdata"로 보냈다. 문제 생길 이유가 없었다.

문제 생길 이유가 없는데 안되니까 더 미칠 것만 같았다!!!!!

같은 팀원분께도 물어보고, 안돼서 이미지 업로드 하신 다른 팀의 수강생들께도 물어봤는데 다들 도와주시다가 대체 뭐가 문제인지 모르겠다고 포기하셨다. 다른 사람들은 되는데 왜 나만 안되는건데... 안 될 이유가 없잖아...ㅠㅠ

진짜 이문제로만 6시간을 헤맸다. 다른 팀에서도 별다른 소득은 건지지 못하고 다시 팀에 돌아와서 좌절하고 있었는데, 팀원분께서 혹시 이미지 프리뷰를 보내고 있는것 아니냐는 말씀을 하셨다. 백에서 포스트맨 쓰실 때 보니까 파일 경로가 들어가던데, 경로를 보내야하는것 아니냐고... 세상에?????

확실히 내가 보내는건 콘솔창에서 눌러봐도 이미지가 나온다. 세에사앙에에에에... 설마 그 경로같지 않은게 이미지 경로였던건가 싶어 일단 시도나 해보자 하고 코드 몇줄 지웠더니 깔끔하게 해결됐다. 대앰... 인생 진짜 쉽지 않구나..........

 

그래도 어쨌든 성공한 기념으로 신나서 프로필 사진 마구 바꿔댔는데, 성공한지 3분도 안돼서 다시 에러가 뜨기 시작했다. 대체 왜??? 백 분들한테 너무 죄송해서 진짜 사라지고 싶었다. 그래서 문제 생긴 상황 : '거의 5초 간격으로 프로필 이미지를 2~3개 연달아 수정했다, 그리고 마지막으로 png 파일을 올렸는데 그 이후부터 에러가 뜨기 시작했다'를 말씀드렸는데, 백에서는 아무리 해도 나와 같은 문제가 생기질 않는거였다...

혹시 파일이 문제였을까 싶어서 내가 올려서 문제됐던 파일을 드려봤는데, 이것 역시 잘 올라갔다. 진짜 미치고 환장하겠거든요... 근데 그때 눈에 띈 것이, 내가 드린 파일은 분명히 파일명이 camera 1.png 였는데 백에서 포스트맨에 올린 파일은 camera_1.png였다.

그렇습니다. 저 공백이 문제였습니다...

어디는 공백 그대로 받아들이고, 어디는 공백을 %20으로 처리하는게 문제였다. 이걸 프론트에서 처리하자니 공백을 없애버리면 폼 형식이 무너져버려서 제대로 된 데이터를 넘길 수가 없었다. 만약 파일명에 공백이 있는 이미지파일이 들어온다면 백에서 공백을 자체 처리하기로 하고 상황 종료.

 

 

 

3. 수

다시 또 sns url. 또 오전 내내 고민하고, 당도 채우고 낮잠도 잠깐 자고 와서 최상의 컨디션으로 한참을 고민해도 이건 답이 나오질 않았다.

백에서 받는 필드는 5개인데, 디자이너분들은 url을 4개만 입력하도록 제한하셨다. 물론 저것만 문제는 아니고 url 폰트 색도 다르게 나타내야하고 슬라이스도 써야하고 그랬지만 이런것들은 부수적인 문제였고 백에서 정해준 필드 갯수와 다르게 사용해야한다는 것 이게 가장 큰 어려움이었다...

하지만 백과 디자이너분들에게 각각 따로따로 찾아가 각자가 이해할 수 있게 어떻게 잘 설명할지 생각하니 머리가 너무 복잡해져서 일단 이부분은 나중으로 넘기기로 했다. 일단 당장 중간평가에 sns url 수정하는건 없어도 괜찮으니깐...

그래서 팀원분 혹시 지금 어디 하고 계시는지, 뭔가 일 나눌건 없는지 여쭤보고, 메인화면에서 프로필 불러오는 api 작성해서 넣었다. 그다지 손갈게 별로 없어서 금방 끝났고 더는 할게 없어서 크롬 익스텐션 어떻게 만드는지 찾아보기 시작했다.

 

 

 

4. 목~금

크롬익스텐션은 돌아가는 방식이 조금 달라서 공식문서만으로는 빠른 시간 안에 이 방식을 이해하기가 조금 어려웠고, 인터넷에 돌아다니는 글들은 대부분 기본적인 html과 css에 맞춰져 있어서 cra를 하면 뭔가가 안 맞았다. 리액트가 어떻게 만들어진건지 뜯어볼 수 있으면 좋겠지만 그럴 시간은 없고... 이대로는 도저히 리액트로 크롬익스텐션 어떻게 만드는건지 빠른 시간 안에 알아내기가 힘들 것 같아서 온라인 강의들을 뒤져보기 시작했다. 그리고 운좋게 udemy에서 리액트와 타입스크립트를 활용해 크롬익스텐션 만드는 강좌가 있길래 당장 질렀다.

15000????? 이건 돈도 아냐 < 내 멱살 잡고 끌어줄 강의들에 백만원 가까이 돈 털어넣고 나니 점점 금전감각이 사라지고 있는 중

 

그래서 강의에서 시키는 대로 타이머 만드는 법 배우면서... 어찌저찌 크롬 익스텐션 만드는걸 배우긴 했다. 그리고 이제 크롬익스텐션 돌아가는걸 어느정도 알고 나니 문제들이 생겨나기 시작했다.

리프레쉬 토큰을 사용한다고 해도 어쨌거나 HttpOnly 쿠키를 사용하지 못하니까 보안은 약해질 수 밖에 없고... 그래도 로그인을 구글로 바꾸지 않는 이상 이것만이 유일한 답인 것 같아서 일단 리프레쉬 토큰을 빨리 구현해야겠다고 생각했다.

근데 팀원분께서 이미 리프레쉬 토큰 구현을 맡아서 하고 계셔서 나는 강제로 다시 크롬익스텐션을 들여다보게 됐다.

 

뭐 그 밖에 소소한 문제로는 나는 타입스크립트를 몰라서... 우리 프로젝트는 리액트만 쓰고 타입스크립트는 안 쓰는데, 어떻게 해야 이 강의에서 타입스크립트만 빼고 리액트만 적용할 수 있을까 고민해봐야 한다는 것 정도?

 

 

 

5. 뒤늦게 깨달은 깃헙오류

정확히는 깃헙 오류라기보단 내 실수지만... 맥북에 내 깃헙 정보를 입력할 때 이메일을 잘못 입력했었나보다. 분명히 프로젝트 시작부터 지금까지 깃헙에 계속해서 작업물 올리고 있었는데 깃헙엔 머지할 때 외엔 아예 기록이 되지 않고 있었다. 무엇보다 인사이트의 contributer엔 그냥 아무것도 찍히지 않고 있었다...

 

그래도 다른 팀의 수강생분이 알려주셔서 늦게나마 수정할 수 있었던게 정말 다행이다. 그분이 알려주지 않으셨다면 아마 항해 끝날때까지 몰랐을 것...

 

나도 받은 만큼은 꼭 베풀어야지. 모두에게 좋은 사람이 되진 못해도 내 사람에게만큼은 반드시 꼭 좋은 사람 되기.

 

 

 

6. 중간 발표!!!!!!!

세사엥에ㅔㅇ에에에엑 내가 너무나 사랑하는 ㅇㅅㅇ 튜터님이 와주셨다!!!!!!!!!!!

헉헉 튜터님 제가 얼마나 튜터님을 사랑하는지 모르시죠... 당연히 모르시겠지 나는 멀리서 바라보며 튜터님이 즉문즉답에 답 달아주시는게 얼마나 깔끔하고 간결하고 다정하고 친절하면서 더 많은 것들을 볼 수 있도록 제시해주시는지 하나하나 핥으며 지켜보기만 했을 뿐이니까... 튜터님 배경으로 해리포터 깔아놓으셨네요... 저도 배경이 바꾸고 싶어졌어요 하지만 발표장에서 바로 바꾸면 너무 티나니까 하루이틀 정도 텀 두고 티 안나게 슬쩍 갈아끼우려고요...

와 진짜 실시간으로 듣는 튜터님의 피드백은 더 날카롭고 더 섬세하고 더 다정하고... 만약 튜터님이 중간에 평가하러 와주신다는걸 항해 시작 전에 알았더라면 나는 무조건 스프링으로 갔을 것이다 내 적성 이런건 상관 없어 ㅅㅇ튜터님이 와주시는데 무려 ㅅㅇ튜터님이 내 코드를 봐주시는데..!!!!! 리액트 나는 왜 리액트인가요 하지만 내 코드 봐주신게 아니어도 너무 좋아 이렇게 생각 못한 곳에서 계를 타다니 감사합니다... 감사합니다... 내가 항해 들어오기 전에 너무 불안하고 답답해서 타로를 봤었는데 생각지 못한 큰 행운이 있을거라더니 그게 바로 이거였나 싶고... 그저 감사합니다...

하... 튜터님 마음에 안 드는 코드 보실 때 표정 변하시는 것도 마음에 드는 코드 보셨을 때 웃으시는 것도 하나하나 다 너무 좋다... 튜터님의 모든 표정 말투 말하신 내용... 전부 내 마음속에 저장...

 

하지만 ㅅㅇ튜터님에 대한 내 팬심이 너무 컸을 뿐 리액트 튜터님도 정말 엄청 좋은 분이셨다. 다정하고 말랑말랑하게 평가해주셨는데, 하나를 봐도 열을 아시는 것 같은 그런 느낌이었다고 해야하나. 수강생들이 말하지 않은 부분도 캐치해서 이런 의도셨을 것 같다거나 이런 어려움이 있으셨을 것 같다 등의 말씀을 해주셨는데 말 하나하나 들을때마다 점점 존경심이 솟아났다. 개인적으로 이런 사람이 되고 싶다. 조용하게 핵심을 보고 잘했다고 칭찬해주시면서 고칠 부분이나 개선할 부분들 말해주시는게 진짜... 이걸 뭐라고 하지 진짜 너무너무 좋았다. 같이 일하고 싶고, 옆에서 배우면서 기술도 기술이지만 성격적인 부분도 정말 배우고 싶은 그런 분이었다.

그런데 나중에 알고보니 배민 소속이셨네요 ^^... 같이 일하려면 배민 가야하는구나 ㅎㅎ;;; EZ하네;;;;

 

 

 

7. 너무너무 감사한 피드백

와악 리액트 튜터님께서 크롬 익스텐션 관련된 기술 블로그를 작성하신 분이었다는게 진짜 너무나 큰 행운이었다!!!!!

크롬 익스텐션에서 바로 로그인 요청을 보내고, 그렇게 받아온 토큰을 바로 또 크롬익스텐션에서 사용하려고 하니 문제가 되는거였다. 그런데 크롬익스텐션에서 버블드 웹페이지로 한번 더 요청을 보내 실제 버블드 프론트를 유저가 볼 필요는 없지만 작업 자체는 프론트에서 이루어지게 하면 해결되는 문제였다니... 세상에에에엑

진짜 이 솔루션 듣는 순간 머리가 팡!!! 터지는 느낌 들면서 막 희열이 느껴지고 막...막... 어우 세상에 이맛에 코딩하는구나 와 세상에...

 

물론 이걸 어떻게 구현해야할지는 또 한참 고민해봐야할테고 그 과정에서 또 다른 문제가 생길 수도 있겠지만... 일단 방법을 한가지 알았으니 이걸 토대로 해봐야겠다.

 

 

 

8. 피트스톱

중간평가 끝나고 저녁때 소소하게 참치를 먹고 왔다. 음... 녹는다 녹아

원래는 팀원분들과 같이 맥주타임도 가지려고 했었는데 어쩌다보니 시간이 잘못 전달됐었나보다... 프론트는 8시로 알고 있고 백은 7시반으로 알고 있었는데, 그래서인지 8시에 맥주 가져와서 보니 백 분들은 분위기가 그렇게 좋지가 못했다. 아니면 내가 모르는 다른게 있었다거나...

어쨌든 간단하게 맥주 좀 마시고, 중간발표 때 피드백으로 들었던 컴포넌트 폴더 구조를 비슷한 것들끼리 나눠서 묶어주는 작업만 하고 알람도 꺼버리고 간만에 일찍 잤다. 역시나 10시 넘었다고 잠이 바로 들진 않았지만 어쨌든 이날은 온전히 휴식을 취하기로 해서 그런지 눈감고 누워서 가만히 있는 것도 나쁘지 않았다. 그렇게 편안하게 누워서 조용히 고양이들 숨소리를 들으며 시간 흐르는걸 느끼다가 언제 잠들었는지도 모르게 잠이 들었다.

간만에 정말 꿀같은 휴식이었다.

 

 

 

이제 오늘 남은 시간 동안엔 일정 정리도 하고, 앞으로 계획 짚어보면서 조금만 더 쉬고, 오늘까지만 좀 더 쉬어야겠다. 그리고 오늘은 일찍 자러가고... 내일부터는 막판 스퍼트를 올려야지.

이번주 했던 것 처럼만 하면 된다. EZEZ