D'story

Day38 한 일

• 상세한 내막을 잘은 모르지만 백엔드에서는 비교적 우리보다 빠르게 작업을 마쳤고, 배포까지 끝낸 상태에서 우리가 끝내기를 기다리고 있었다. 그게 저녁 나절이었나. 벌써 기억이 가물하지만 어떤 이유에선지 앞으로 해야 할 작업들을 가볍게 생각한 나는 큰코를 다치고야 말았다. 처음 하는 일이었지만 다행히 큰 어려움 없이 JWT 토큰을 쿠키에 저장하는 데 성공했고, 게시글 작성 여부를 판단하기 위해 사용자를 구별하는 정보가 추가적으로 필요해서 회원가입과 동시에 자동으로 부여되는 사용자의 고유번호를 따로 보관해야 했다. 하지만 일전에 적었듯이 리액트스럽지 못하게 페이지 이동을 강제하는 새로고침을 넣은 상황에서, 바로 그 새로고침 때문에 기껏 보존해둔 state 데이터가 매번 모조리 날아가게 되어 어려움을 겪었다. login을 마치면 쿠키에 토큰이 저장되고 리덕스에 사용자 정보가 들어가는데, login이 끝남과 동시에 메인 페이지로 이동시키는 새로고침이 발생해 정보가 깨끗하게 증발해버리고 마는 것이었다. 이 문제로 인해 몇 시간을 구글링하고 머리 싸맨 끝에 동환님이 id가 데이터에 들어간 것이 확인된 후 history.push('/') 하게 만드는 식으로 해결했다. 이게 가장 완벽하고 적절한 해결책이라고 할 수는 없겠지만 새벽 3시에 내릴 수 있었던 최선의 선택이었음은 분명해 보인다.

오늘 한 일

• 늦게 잔 것치고는 제때 일어나 늦지 않게 출석했다. 자정까지 과제를 제출해야 하는 날이었는데 자꾸만 새로이 발견되는 오류들과, 후딱 해치워버리고 싶지만 의외로 사람을 끝까지 물고 늘어지는 자잘한 문제들에 온종일 시달렸다. 우리가 고전하느라 백엔드에서는 마냥 손놓고 기다려야 할 뿐이어서 마음이 무거웠다. 실력이 부족한 내가 원망스러운 날이었다ㅠㅠ.. 깃은 왜 그렇게 안 도와주는지 푸시 대상인 파일을 처리해주지 않아 어이없게 누락되고, 결국에는 로컬 저장소를 밀어버리고 다시 통째로 클론해오고 하는 일이 빈번했다. 그래, 이러지 않으면 마지막 날이 아니지.
• 그래도 완성하고 나니 (비록 그 후에도 몇 번이나 수정->재빌드->재배포 반복) 뿌듯했다. 사실 안 그래도 되지만 괜히 완전한 주소로 남겨놓고 싶어 도메인도 새로 구입해서 달았다. 원래 자정까지 배포한 후 제출하는 게 과제였지만 다행이라고 해야 할지, 제출 링크의 DB에 뭔가 문제가 생겼다고 해서 내일 아침으로 미뤄졌다. 그 덕에 조금 더 여유롭게 마무리했고, 나름대로 훈훈하게 마무리를 지었다. 도메인은 http://dev-moim.shop/
• 과제 제출로 일찍(?) 끝난 기념으로 해산 후 객체 지향 프로그래밍에 관한 유튜브 영상을 3편 정도 봤다. 아직 코딩과 프로그래밍에 대해 모르는 게 너무 많다.

내일 할 일

• 과제 제출 확인 후 코드 리뷰를 하고 깃헙 저장소를 정비하고 다른 팀의 과제를 구경한다.
• 내일은 드디어 클론코딩 주간의 시작이다. 내가 뭘 안다고 벌써 클론코딩을 하는 건지, 말도 안되고 당황스럽기 그지없지만 하다 보면 또 하게 되는 것 아닐까. 다만 팀에 조금이라도 더 도움이 되는 사람이 되고 싶다.

오늘 한 일

• 어제 TIL을 쓰고 아침 7시에 잠들었다. 새벽에 가짜 데이터를 넣어놓은 json 파일 때문에 터진 오류를 해결하다가 결국 데이터 구조 문제에 봉착해서 포기하고 잤지만, 어쨌든 늦게 잔 후폭풍은 지대했다.. 출근도 1시간이나 늦었고ㅠㅠ 오전에는 게더가 터져 버려서 줌에서 간신히 미팅을 진행했고, 새벽에 맞닥뜨린 문제를 공유했다. 지금 생각해보니 API URL이 사이트 주소와 전혀 상관없다는 걸 어제 배웠었는데... 머리가 잘 돌아가지 않아서 그걸 다시 떠올리지 못하고 다시 비슷한 질문을 했던 것 같다. 아무튼 데이터 구조는 API 리스트에 적힌 거 말고는 당연하게도 새삼 혼자 고민하고 말고 할 게 없다는 것!
• 점심 나절에 백엔드에서 서버를 배포했고, 우리의 컴포넌트를 서버에 연결했다. 연결하고 나니 위에서 고민했던 그 문제는 처음부터 없었던 것과 다름없는 상태가 되었다. API 리스트의 데이터 구조 그대로를 적용한 백엔드의 서버에 직접 연결한 거니까, 적혀 있는 대로 불러오기만 하면 되는 거였다. 그리고 나 혼자 진행하는 프로젝트에서 파이어베이스를 붙이고 거기서 데이터를 끌어오는 것보다 axios로 서버에서 데이터를 가져오는 게 코드도 짧고 여러 모로 훨씬 수월했다.
• 전체 게시글의 정보는 메인 페이지에서 받고, 그 메인 페이지의 게시글을 클릭하면 해당 게시글 정보를 상세 페이지에 props로 넘기면서 상세 페이지가 렌더링 된다. 하지만 상세 페이지의 링크를 타고 직접 접속해버리면 메인 페이지를 거치지 않으므로 props가 undefined 되어 게시글 내용을 불러올 수 없다. 이 점을 보완하기 위해 props가 없는 경우 상세 페이지 자체적으로 서버에 연결해 데이터를 가져오는 코드를 짰다.
• 상세 페이지에서 불러온 댓글을 수정하고 삭제하는 코드를 짰다. 그런데 주특기 기본 주간 과제와 마찬가지로 페이지를 새로고침 해야만 변경된 데이터가 적용되었다. 새로고침 하는 함수를 넣자니 전체 화면이 반짝거리는 게 마땅찮고, 또 컴포넌트를 기본으로 하는 리액트의 사용 취지에도 맞지 않는 것 같아 고민이 된다. 저번 과제 때는 이걸 해결하지 못해서, 글을 작성해서 등록하고 나면 팝업창을 띄워서 메인 페이지로 이동하는 버튼을 누르게끔 만들었었다. ...일단은 더 좋은 방법을 찾을 때까지는 부모 컴포넌트의 window.location.reload();로 버텨보기로. 나는야 리액트바보

내일 할 일

• 로그인, 회원가입 페이지를 서버와 연결하고, 로그인 여부에 따라서 구현되는 화면 구성을 분기한다.
• 상세 페이지의 신청하기 버튼을 누르면 해당 사용자의 정보를 서버로 넘길 수 있도록 한다.

오늘 한 일

• 오늘 TIL에 올릴 내용 많다고 아까(?) 밤 9시쯤 회의할 때 다같이 얘기했었는데 시간이 이쯤 되고 보니 하루종일 뭘 했는지 벌써 가물가물하다. TIL에 올려야지, 했던 내용 중 하나는 API URL에 대한 것이었다. 프론트가 백 없이 작업할 때에는 API 요청 없이 파이어베이스에 연동해서 직접 데이터베이스를 만지다 보니, 우리가 주로 보는 '주소'란 것은 주소창에 들어가는 말 그대로의 주소뿐이었다. 하지만 API URL은 서버에 요청할 때 사용하는 주소이므로 클라이언트단에서 보여지는 주소창 주소와는 전혀 상관없는 것이었다. 난 그걸 몰랐다ㅎ.ㅎ... 백에 무지한 프론트... axios를 쓰면서도, 심지어 거기에 API URL을 적어 넣으면서도, 나는 그걸 몰랐다. 그냥 생각해 본 적도 없었다고 말하는 게 적당할 것 같다. 관심 범위 밖의 일이었다, 지금까지는. (Thanks to 하영님!)
• 오늘은 손가락 움직임이 더뎌서 한 것도 별로 없었는데 오류는 역대급으로 많이 봤다. 그래도 이제는 그새 조금 익숙해졌다고 오류 뜨는 대로 바로바로 해결할 수 있는 것들이 생겼고, 또 반대로 자주 봐도 여전히 해결책을 모르겠는 것들도 있다. 리덕스와 axios를 만지면서 컴포넌트에 데이터를 주입하려는데 변수를 이렇게 저렇게 설정해봐도, 콘솔에 아무리 찍어봐도 내가 원하는 데이터를 불러오지 못하는 상황도 있었다. 오류 속에 갇혀 있다가 이대로 질식할 것 같아서(ㅋㅋㅋ) 결국 헬프를 쳤고 너무 허망하게도 일이 간단히 해결되고 말았다. 나의 몇 시간 고민을 무색하게 만든 간단한 방법이었다. props로 넘긴 데이터에 또 props라는 이름을 붙인 바람에, 그 데이터를 가져다 쓰기 위해서는 앞에 props.props.를 붙여야만 했다... 이걸 캐치 못한 내가 원망스러우면서도, 어쨌든 해결되어서 기분은 좋았다. (Thanks to 동환님!)
• 자정을 넘겨서 아까 한 2시쯤, 대충 만든 가짜 데이터 json 파일을 mock api를 사용해서 서버로 돌린 다음 연결하려고 하는데, 적절하다고 생각한 URL을 넣어도 브라우저에는 자꾸 { } 이렇게 빈 중괄호만 떴다. 보통 코드를 짤 때 자신 없는 부분에서는 한 줄 한 줄 콘솔에 다 찍어보는 나로서는 당황스러운 상황이었다. 데이터가 없는 경로를 찍은 것도 아닌데 어떻게 아무것도 안 뜰까? 구글링을 해도 속시원한 답변을 찾을 수가 없었다. 시간도 늦어서 누구한테 물어보기도 애매했는데 마침 요즘 어쩌다 보면 밤 시간에 자주 마주치게 되는 지혁님이 눈에 띄었다. 매우 바쁘셨을 테지만 그때 나는 너무 절망하고 있었다. 나는 프론트와 백 사이에 약속해 놓은 API URL을 타고 들어가는 게 아니라면 데이터를 받아오지 못한다고 생각하고 있었는데, 그 경로에 들어갈 수가 없다면 그 부분을 포함하는 좀 더 넓은 범위의 데이터를 받아온 후 잘라서 사용해보라고 하셨다. 그렇게 해도 되는 건지 안 그래도 궁금했는데 먼저 그렇게 말씀해주셔서 다행이었다. (Thanks to 지혁님!) 그런데 문제는, 그걸 해결하고 나니 다시 (나는) 알 수 없는 이유로 404 에러가 떴다....^^ 오늘은 그만 좀 하자 제발....

내일 할 일

• 점심 때쯤 시범 배포를 해보기로 했는데, 내가 하고 있는 일에 진전이 없어 어떻게 될지 모르겠다.. 내일, 아니 오늘은 이따가 백에 데이터 샘플(?)을 한번 요청해봐야겠다. 혹시라도 지금 내가 가지고 있는 json 파일보다 접근성이 좋을지도 모르는 일이니까? 주시는 데이터가 뭐든 간에 지금 내가 처한 것보다는 나은 환경을 만들어 줄 것 같다ㅠㅠ
• json 파일의 데이터 구조는 우리가 애초에 사용하던 임시의 것이었는데 그걸로 하다 보니 실제 서버 연결 때 문제가 많을 것 같아 다시 바꿨다. 바꾼 파일에 대해서 공유해야 한다.
• CSS 기능적 부분에 약간의 수정이 필요하다.
• 로그인, 회원가입 페이지 뷰를 확정해야 한다.

오늘 한 일

• 아침에는 프론트와 백이 각자 진행상황을 공유했다. 좀 더 밝은 분위기의 디자인이었으면 좋겠다는 얘기가 나왔고, 스파르타코딩클럽 컨셉으로 가는 것도 괜찮은 것 같다는 얘기도 나왔다. 그래서 우리는 스파르타코딩클럽의 대표 색상인 진한 분홍색을 주로 사용해서 CSS를 꾸며 나갔고 헤더의 로고도, 푸터 스타일도, 헤더에서 메뉴에 나타나는 hover 효과도 비슷하게 구현했다.
• 오후에는 아직은 사용해보지 않은 axios 가이드를 잠깐 살펴보았고, 리액트 기초 가이드를 찾아서 읽어봤다. 쉽게 넘어가는 부분이 이제는 그래도 많아졌지만, 그럼에도 아직 '아 이게 그래서 이런 거였구나' 하게 되는 대목이 있었다. 예를 들면 JSX 안에서의 주석 처리와 열린 태그 안에서의 주석 처리 모양새가 다르다는 것?
• 내일은 쉬는 날이니 오늘은 오후에 회의를 한번 더 진행했다. 거의 완성된 CSS를 공유하고, 피드백을 받았다. 피드백의 내용에 따라 로고나 버튼 배치 같은 것들을 부분적으로 수정했다.

내일 할 일

• 내일은 마음 편하게 쉴 것이다. 항해를 시작하고 나서 처음 있는, 스스로 아무런 과제도 주지 않는 일요일이다. 마음이 내킨다면 코딩 관련 책을 조금 읽어볼까 싶다.

오늘 한 일

• 미니 프로젝트 주간이 시작되었다. 이제 온종일 강의 듣고 공부하는 시간은 끝났다. 프로젝트를 하면서 틈틈이 찾는 자료들로 충분히 공부가 될지는 다소 의문스럽다. 어찌 됐든 함께 프로젝트를 진행할 우리 조에는 프론트엔드가 나까지 2명, node.js를 다루는 백엔드가 3명 있다. 아이디어 회의를 진행해서 스터디처럼 소모임을 구성하기 위해 게시글을 올리는 페이지를 만들기로 했다. 다함께 miro에서 와이어프레임을 짜고, 노션으로 api 리스트를 작성한 후 S.A를 제출했다. 서로 뭘 알고 있는지 잘 모르는 프론트와 백의 첫 회의란 그야말로 우당탕탕이었다. 그리고 서로의 지식을 공유할 때마다 진심으로 신기해하곤 했다.
• 프론트엔드끼리 버튼, 인풋, 그리드, 텍스트 같은 기초 단위부터 헤더, 푸터 및 메인 페이지, 상세 페이지 등 페이지 단위의 컴포넌트까지 세분화하여 분배했고 각자 코드를 작성하고 깃헙에 올렸다. 나중에 깃헙 리드미에 넣을 내용은 리덕스를 붙일 때부터 정리하고, 그 전에 작성하는 단순 UI 이외의 코드들에 대해서는 주석을 상세히 남기기로 했다.
• 나는 페이지 단위 컴포넌트에서는 목록에서 게시글을 클릭하면 나올 상세 페이지를 맡았는데, 상세 페이지에 들어갈 내용이 많기도 했지만 만들어 놓은 기초 단위 컴포넌트들만 가지고 구성하려니 여백이나 사이즈 같은 것들, 또는 배치 방식이 상이해 자꾸만 시행착오를 겪었다. 뷰포트를 기준으로 한 단위를 사용하지 않으면 브라우저 크기를 줄였을 때 보기 싫을 정도로 시각적 삑사리가 났다. 반응형 웹페이지란 모든 걸 픽셀 단위로만 작성하던 나에게는 가장 힘든 일이 아닐 수 없었다.. 오늘은 일찍 잘 수 있을 줄 알았는데 지금 보니 여전히 비슷한 시각이다. 그래도 다행히 마치기 전에 어느 정도 윤곽을 잡았다.

내일 할 일

• 백엔드와의 회의에 참여해 지금까지의 진행 상황을 공유하고 앞으로의 남은 일정을 재확인한다.
• 로그인 페이지, 회원가입 페이지 작성을 그대로 진행한다고 하면 내일 추가로 완성해본다.
• 전체적인 UI 디자인을 고려해 본다.
• JWT와 AXIOS에 대해 찾아본다.