인턴십 | crom innovation #1

[ 프로젝트 내용 ]

• 기존 보유한 가상자산 트레이딩 서비스를 웹 플랫폼 서비스로 개편 (내부 프로젝트)
• 서비스 고도화 진행 _ 현재 서비스 중인 “아비봇 플래티넘”과 빗썸에 공급하고 있는 “오토 트레이딩“ 서비스를 통합한 주문 분산 처리 시스템 개발
• HTML 코드 작성 및 퍼블리싱 완료 되어 있는 코드를 React 버전으로 개발

[ 기간 ]
21.11.29(월) - 21.12.23(목) / 약 4주

[ FE 기술 스택 ]
React JS, Styled Component, TypeScript, Redux

Week 1

Day 1

• 첫 출근
• 회사와 서비스에 대한 대략적인 개념 공유 (feat. 화면설계서 & 퍼블리싱 자료)
• 간단한 면접 (5-10분 내외)
• React 초기세팅

Day 2

• 기존 보유 코드 확인 (HTML & CSS)
• 업무 범위 확정
• 로그인 페이지 UI 작업 시작
• 네이버 API 활용한 소셜로그인 구현 (완료)
• 미팅 시간 확정 (매주 월요일 오후 3시 & 수요일 오전 11시 - 코드리뷰)

Blocker

• 소셜로그인을 처음으로 구현해보는거라 개념을 익히는 데에 꽤 오랜 시간이 걸렸다.
• 카카오 API와 다르게 state라는 개념을 클라이언트에서 제작하여 전달해줘야 했고, 보안과 관련된 부분이기 때문에 신경이 많이 쓰였다. 그래도 구글링을 통해 uuid (universally unique identifier / 범용 고유 식별자)라는 개념을 알게 되었고, 적용해볼 수 있었다.
• 오늘 가장 시간을 많이 잡아먹은 CORS error. 열심히 구글링해보니 이것도 카카오 API에서는 발생하지 않는 문제라고 한다. 이 부분에 대해서는 따로 디테일하게 정리하도록 한다. (해결하고 나서 행복해서 날아가는 줄 알았다..)
  About CORS error
• 퍼블리셔가 작업한 코드를 한 번도 본 적이 없어서, 해석하는데 꽤나 오랜 시간이 걸렸다. 아직도 갈 길이 멀지만 슬슬 다른 사람의 코드를 해석하는데 재미를 붙이고 있는 중.

Day 3

• 로그인 페이지 UI 구현 완료
• 로그인 페이지 merge (네이버 & 카카오 기능 포함)
• customReset과 기타 스타일링 적용 방식 GET!!!
• 닉네임 설정 페이지 UI 구현 완료
• children을 활용한 컴포넌트 재사용 구현 (POPUP)

코드를 보면 볼수록 건드리고 싶은 부분이 많아진다......

• 버튼 컴포넌트화하여 다양한 상황에서 사용할 수 있도록 구현
• 페이지 전반에서 공유되는 스타일theme.js로 정리하기
• mixin으로 설정할 내용 적용해보기
• 일부 버튼에만 공유되는 스타일은,,, 어떻게 깔끔하게 처리할 수 있을까?ㅠㅠㅠ

Day 4

• theme.js에 필요한 내용 기입
• margin값과 display=flex 등 중복 사용이 많은 값 mixin으로 처리
• 네이버 로그아웃 기능 구현
• 닉네임 설정 페이지 기능 구현
• 로그인 & 닉네임 설정 페이지 리팩토링

Blocker
오늘의 가장 큰 블로커는 총 3개..

• 네이버 로그아웃 : 공식 문서에 너무 불친절하게 되어 있어서 이것저것 해보다가 결국 내가 생각한 방법으로 해결!!! 확실히 실패나 돌아가는 걸 두려워하지 않고 이것저것 해보는게 중요한 것 같다. 오류를 마주하면서 알게되는게 더 많은 듯.
• 중복된 부분을 어디까지 컴포넌트화 시켜야 하는지에 대한 고민.
  비슷한 스타일의 버튼이 전범위에서 쓰여서 컴포넌트화 하려했으나, 생각보다 변경해야하는 스타일이 많아서 포기.. 각 컴포넌트에서 스타일을 상속시켜 사용하기로 결정하였다.
• git.... push & merge & pull을 반복적으로 하다보니 같은 부분에서 계속 conflict가 나서 문제가 뭘지 궁금했는데, local master branch에서 커밋이 남아있어서 그랬다고 한다. 문제가 되는 커밋 이전으로 reset하니 해결!

Good Point 👍🏻
어제 욕심냈던 부분을 최대한 반영하려고 노력하였고, 좋은 코드를 만들기 위해 최선을 다했다. 내 코드라서 그럴지 몰라도, 조금은 알아보기 쉬워졌다고 생각 :)
그리고 건드리고 싶다고 했던 4가지를 모두 적용시켰다!

한 주의 회고

위코드에 있을 때는 어딘가에 항상 답이 있었다. 위코드에서 제공하는 노션페이지, 바로 옆에서 우리를 봐주시는 멘토님들, 나보다 조금 더 많은 걸 알고 적용해 본 동기들. 하지만 기업협업을 나오니 내 곁에 동기들이 함께 하긴 하지만 스스로 해결해야 하는 부분이 훨씬 많았고, 내가 판단하고 결정해야 하는 상황이 대부분이라 더 많은 시간을 고민하는데 쓰게 되었던 것 같다.

하지만 그 과정에서 스스로의 기준과 판단력이 명확해져가는 걸 느꼈고, 하나의 오류를 해결하는데 훨씬 더 많은 시간이 필요하긴 하지만 전과 비교할 수 없는 큰 성취감을 느꼈다.