돌아보며

짧다면 짧고, 길다면 길게 느껴질 수 있던 시간이 끝났습니다.

저는 지난 2주의 시간이 상당히 빨리 지나갔다는 생각이 더 강한 것 같습니다.

아무래도 인생 첫 협업이었기에 그랬던 것 같습니다.

돌아보면 별 일 없기도 했고, 별 일 없기도 한 것 같습니다.

많은 것을 배운 것 같기도 하고, 아닌가 싶기도 합니다.

덧없다가도 그렇지 않다가도 참 오락가락하는게 꽤나 복합적인 감정이구나 생각이 드네요.

ES6 문법도 꽤 사용해보고, 다양한 로직을 작성해보기도 했습니다.

React를 어느덧 한 달 가량 사용했지만 여전히 어렵긴 합니다.

또 발표에서도 말했지만 팀 소통에 문제가 있기도 했고, 해결하기도 했습니다.

많은 일이 있었음에도 시간이 빠르게 느껴지는 이유는 제가 아직 2주 동안 얻은 것들을 일상에서 실천하기 어렵기 때문에 그런 것 같습니다.

그러나 이번 시리즈는 기술적인 부분을 돌아보는 부분으로 나눠보겠습니다.

위코드 한 달 후기에서 스스로를 좀 더 돌아볼 예정이니까요.

Tech

1차 프로젝트는 class component를 활용해서 하나의 시스템을 그대로 따라 구현해보는 클론 프로젝트였습니다.

선정한 곳은 밀키트 판매 사이트인 COOKIT 입니다.

제가 맡은 부분은 3 페이지이고, 랜딩, 로그인, 회원가입 정도를 맡았습니다.

추가로 장바구니 페이지까지 만들어보긴 했는데, 아쉽게도 80%정도 완성해서 추후 리팩토링 때 완성이 될 것 같습니다.

2주동안 코드를 많이 짰나? 돌아보면 그건 아니었다고 생각합니다.

다만, 기존에 인스타그램 클론에 비해 코드의 질이 향상되었는지 고민해본다면 그건 확실히 맞다고 답할 수 있습니다.

처음으로 공용 컴포넌트를 분리해보고, 로직이 포함되었을 때 어떻게 추상화할지 고민하는 과정이 생각보다 쉽지 않았습니다.

오늘 글에서 코드를 다룰까 했는데 분량의 문제로 이번 글에서는 다루지 않겠습니다.

다음 리팩토링에서는 꼭 다뤄보겠습니다.

랜딩페이지 중점

RESTful API

무엇보다도 랜딩은 다양한 API 요청을 한 곳에 모아두는 곳입니다.

배너의 이미지 데이터, 맛별 필터가 적용된 데이터, 실시간 판매순 데이터 등의 API 요청이 있었습니다.

전부 GET method 를 활용한 RESTful API(+ query parameters)를 활용했고, fetch도 별 문제는 없었습니다.

imageSlider

5일 정도를 투자했으며, Refactoring만 해도 4~5번 넘게 진행했던 파트입니다.

React 스럽게 공용 컴포넌트화를 진행했고, css animation을 입력받은 이미지의 사이즈를 기준으로 어떻게 변경할 수 있는지, 그리고 이미지를 무한히 회전시킬 수 있는 방법에는 어떤 것들이 있는지 중점을 두었습니다.

그 외에도 어떻게 버튼을 제어할 수 있을 것이며, 어떤 메서드를 활용해야 내부 렌더 문제를 원활히 해결할 수 있을지도 고민했던 것 같습니다.

답은 createRef()와 CDU 였습니다.

createRef()를 변수공간으로 사용할 수 있다는 것을 처음 알았던 것 같습니다.

공식문서를 잘 읽어봐도 DOM에 접근하는 방법 등으로 집중되어 있긴 합니다.

무한 슬라이드를 위한 로직을 4개 정도 고민했었는데, 유일하게 성공한 로직은 많이 사용하는 fake 이미지를 섞어넣고 펼친 뒤 translate 하는 방식이었습니다.

선배님들이 왜 그런 방법을 사용했는지 실제 체감해보니, 실험을 조금 뒤로 미루고, 기한에 맞춘 개발을 하는 방식도 꼭 고려해야겠다고 생각했습니다.

학생 신분에서야 이것저것 다 도전하는거지 이게 실무였다고 생각하면 올바른 개발 시간 투자였던 것 같지 않습니다.

애초에 라이브러리를 사용하면 커스터마이징 제약은 약간 있더라도 개발 시간을 1 / 5 정도로 잡을 수 있었지 않을까 합니다.

countDownTimer

Date() 객체 활용의 정수가 아니었을까? 생각이 듭니다.

년, 월, 일, 분, 초 전부 다 사용해야 했기 때문에 변수 선언만 해도 로직의 3 / 4 정도를 넘어섭니다.

덕분에 Date() 객체에 대한 이해도가 상승했고, 밀리초 단위의 계산을 어떤게 변환할지도 감을 잡았습니다.

이것도 momentum이라는 라이브러리를 사용하면...

무엇보다 class component 내에서 렌더를 줄이기 위한 방법이 무엇일지, 그리고 state를 변경하기에 계층간 렌더 전파를 어떻게 막을지 고민해야 했습니다.

또한 CDU에 해당 timer 초기화 함수가 존재할 경우 render 지옥, 콘솔창 폭파가 되는 것을 확인할수도 있었습니다.

set / clear, setInterval 중첩 꼭 기억하자

로그인 / 회원가입 / 장바구니

POST, GET, PATCH, header, JWT

fetch를 사용하는데 있어서 위 세 페이지는 각각 약간씩 다릅니다.

먼저, SignUp / 회원가입의 경우

계정을 생성하는 validation과 단순한 POST 요청 한 번으로 해결할 수 있습니다.

이후 Login / 로그인으로 넘어가 JWT를 발급받기 위한 인증을 거쳐야 합니다.

이것 또한 POST 요청과 string 형태의 JSON data를 이용합니다.

CORS? what the...

장바구니의 경우 발급받은 JWT로 모든 작업에 대한 인가를 요청해야 하는데, 이 때 key 입력 실수로 그만 CORS err. 가 발생하는 것을 보았습니다.

다른 페이지에서 key값을 잘못 입력하는 경우는 body의 key 이기 때문에 CORS err 를 겪을 일이 없습니다.

그러나 장바구니는 header 내 JWT value의 key를 잘못 입력한 것이기 때문에 브라우저는 CORS err를 출력합니다.

이 사실을 지금은 아니까 key를 잘못 입력했구나! 하고 넘기는 것이지, 당시에는 CORS에 대해 따로 공부하며 하나씩 적용해보았던 기억이 있습니다.

ACCESS_CONTROL_ALLOW_ORIGIN 등... 삽질 열심히 해봤습니다.

로컬에서는 CORS err 를 마주할 일이 서버가 없는 상태에서의 바닐라 개발 정도가 있습니다.

그것도 현재는 VS code live server, node-express 조합으로 해결할 수 있으니 앞으로 CORS err를 마주하는 것은 그것과 사뭇 다른 얘기인지라 긴장해야겠습니다.

무튼 기술적으로 이런 일들이 있었습니다.

결과?

결과는 학생 입장에서는 성공적이지만, 아무래도 기술적 부분에서는 미흡한 부분이 많습니다.

또한 기능이 많지 않음에도 2주의 시간이나 걸렸다는 점은 분명 마음에 걸리기 마련입니다.

그런데 저는 꽤 후련합니다.

좋은 팀원들과 행복하게 개발도 했고, 중간에 싸우고 화해도 하고, 오히려 사람냄새 가득한 팀이었다고 생각합니다.

완성도 높은 페이지를 만든게 아닌데도 이상하게 나쁘지 않습니다.

합리화인가...?

확실히 다음에 리팩토링 할 때에는 꼭 더 성장해서 후다닥 해치우고 술자리를 가져야겠습니다.

코로나 때문에 팀원들 모두와 함께 술자리도 제대로 갖지 못한게 가장 많이 마음에 남네요.

꼭 4단계가 해결되면, 사석에서 다시 만나야겠습니다.

즐거웠습니다! GGUGIT!

• 용량 문제로 gif 파일이 깨진 상태로 올라가네요. 결과는 추후 유튜브 링크로 올리도록 하겠습니다.

• 혹은 github repo 내의 gif 파일을 참고해주세요!