SUWEE의 서재는 국내 최대 독서 플랫폼 밀리의서재를 바탕으로 개발한 프로젝트 입니다.

SUWEE의 서재 Front-End GitHub
SUWEE의 서재 Back-End GitHub

Project OverView📔

드디어 위코드에서 2차 프로젝트가 끝이났다. 1차 프로젝트도 너무 좋았지만, 이번 2차 프로젝트도 더할나위 없이 만족스러웠던 결과물이 나왔다.
평소 밀리의 서재 구독자이기도 하지만 밀리의 서재를 볼때마다 아기자기한 색감과 심플하고 깔끔한 UI가 시선을 사로 잡았고, 2차 프로젝트 발표 전까지만해도 밀리의 서재가 이번 프로젝트의 목표가 될거라는 확신이 있었다.
그리고 그 확신은 현실이 되었다.
거기에 + 멤버 구성원들까지 너무나도 대 만족이었다. 단 한번도 서로의 불화 없이 서로를 케어하며 믿으며 그렇기에 기대 이상의 성공적인 결과물이 나온게 아닌가 싶다.
이번 결과물에선 리액트 HOOK을 도입하여 진행되어 더욱 리액트를 심도 있게 다뤄본 작품이다.

• 프로젝트 기간 :2020년 11월 30일 ~ 2020년 12월 11일(12일)
• 프로젝트 인원 : Front-End 3명 / Back-End 3명

적용 기술🔥

Front-End

• HTML
• CSS
• JavaScript ES6+
• React (CRA, Router, Hooks)
• Redux
• Styled Component
• Kakao API (for social login)
• IMPort API (for online payment)
• AOS (library)
• Slick (library)
• Git,GitHub

Back-End

• Python, Django web framework
• MySQL
• Unit Test
• Google Books APIs
• AWS
• Github rebase

구현 사항💬

Front-End

• 세원(본인) : Sign-In 페이지,Sign-Up 페이지, Payment 페이지, Landing 페이지
• 지혜 : Nav,Footer, Main 페이지, MyBooks 페이지
• 주민 : BookDetails 페이지, E-book viewer

구현한 기능

⚡︎ 표시는 본인이 구현한 기능

access token를 이용한 로그인(+카카오), 회원가입, 로그아웃 기능 및 유효성 검사⚡︎
카카오 API를 이용한 소셜 로그인⚡︎
Twilio API를 이용한 문자 인증 기능 ⚡︎
IMPort API를 이용한 카카오페이 결제 기능 ⚡︎
AOS library를 이용한 렌딩 페이지 애니메이션 구현⚡︎
정기 구독 버튼으로 결제 페이지 이동 기능⚡︎
Nav바 로그인,로그아웃 버튼 기능(버튼 누름과 동시에 토큰 삭제 기능)⚡︎
사용자 댓글 추가 기능, 좋아요 기능⚡︎
query string을 통해 filtering된 data 서버로부터 받아오기
map 메소드를 통해, 카테고리 페이지 전체의 데이터(텍스트, 이미지 등)를 받아 화면 구성하기
도서 상세 페이지에서 책 담으면, 사용자 내서재에 담기는 기능
책 뷰어 기능
query string url 을 사용한 상세페이지 연결 구현
상세페이지의 레이아웃 구현
제품 키워드 검색 기능 구현
높은가격순, 낮은가격순 ordering 기능
slick slider로 슬라이드 배너 구현
장바구니 기능
카테고리 분류 기능

기억에 남는 코드💻

1) 컴포넌트 재사용

정말 내가 짜놓고도 보기 부끄러운 코드이다.
프로젝트를 진행하면서 하나라도 더 기능을 구현하려는 나머지 이쁜 코드가 아닌 지저분한 코드로 도배를 해놨었다.
저게 무슨 기능이냐면 아래 영상과 같다.

결제 기능을 구현하면서 결제수단을 클릭했을때 setState로 토글 기능을 만들면서 결제 박스를 4개나 만들고 그에 따른 함수도 각각 만들어서 구현했다.
정상적으로 작동을 잘 했고 나는 저 리뷰를 받을때 까지만해도 내가 얼마나 미련하게 짰는지 알수 없었다.
그리고 저 리뷰를 받는 순간 내가 짠 모든 코드들이 얼마나 지저분하고 정말 초짜스러운지 느꼈다.
저거 뿐만 저렇게 짰겠는가? 아니었다. 저 리뷰를 보고 다 리팩토링에 들어갔고 리팩토링 결과 아래와 같이 달라졌다.

onClick 함수도 하나로 통일 시켰고 결제수단 박스도 4개 였던걸 반으로 줄였다.
저걸 정말 내 생각과 내 힘으로 리팩토링 시켰단 사실에 너무 기뻤다.(이게 뭐라고...)

기존에 짜여져있는 코드를 리팩토링 한다는건 처음 코드를 짜는거보다 더 어려운 부분일수도 있다는걸 이번에 느꼈다.

2) 컴포넌트 재사용

위 사진도 처음에 보여드린 리뷰를 받고 원래는 InputBox를 각각 다른 컴포넌트로 만들었으나 하나로 합친 형태이다. 리팩토링 작업이 오래걸렸지만 너무나도 성취가 큰 작업이었다.

결과 화면🌠

1. Landing 페이지
1차때는 못해봤던 애니메이션 기능을 넣어 사람들 눈에 확 띄게 하는 작품을 만들고 싶었다.

2. 결제 페이지
2차 프로젝트때 너무너무 기억에 남는 작업물들이 있는데 바로,

• 카카오톡 소셜로그인
• 회원가입 문자인증
• 카카오페이 결제기능
  이 3가지이다.

API 하나 붙이기도 힘든데 3개씩이나 붙이다니... 나중에 스스로가 보면 엄청 비웃겠지만 현상태에 나로써, 1차 프로젝트때 query도 간신히 써봤던 나로써는 장족의 발전이다.

3. 회원가입 페이지
1차 프로젝트때는 메인 홈페이지 작업만하여 API를 붙이고 백엔드와 통신이 제일 많은 기능을 구현해 보고 싶었다.
validation, 랜덤 함수를 돌려 필명을 재미있게 만든게 인상깊었다.

4. 카카오 소셜 로그인
위에서 말한 작업물들중에 하나 카카오톡 소셜로그인 멘토님들이 처음엔 어려울거라 겁을 주었지만
프로젝트를 시작하고 3일만에 구현했다는건 안 비밀😊 자랑보다는 내 스스로가 "나도 할 수 있구나"라고 긍정적인 마음을 갖게 해준 이유중에 하나이다.(자랑 맞나..?)

5. 로그인-메인페이지

로그인 하여 메인으로 넘어가는 기능을 구현하였다.

6. BookDetail 페이지
이 부분은 내가 맡은 페이지는 아니지만 내가 맡은 일이 생각보다 빨리 끝나고 댓글 추가 기능,좋아요 기능만 도와주었다. 역시 우리팀 잘해❤️

7. 메인 - 내서재 페이지
메인 홈페이지에서 최근 추가순,제목순,저자순,발행순을 클릭하면 query 문으로 백엔드랑 통신하여 정보를 받아와서 뿌려주는 기능을 하였다.

Project Review

반성할 점

얼른 쳐내야해 얼른...

다른 사람들도 그랬든 무작정 할당량을 채우기위해 달리기 일수였다. 2주가 안되는 시간 동안 더욱 많은 양과 1차때 보다 더 퀄리티가 좋아야 한다는 부담감, 심지어 2차때는 다른 세션과 배우는것도 많고, 설상가상 코로나로 인해 다같이 모이지도 못해 1차 때보다 환경이 열악했다. 그랬기에 뒤는 안보고 정말 앞만 보고 달렸다.

그렇다고 계속 앞으로 달리는건 의미가 없다.
미래를 위한 코드, 나를 위한 코드, 진짜 중요한건 내가 얼마나 생각하고 이쁘게 코드를 짜는가이다.

나도 알았다. 이 뜻을 하지만 머리는 아는데 마음이 알지 못했다.
그리고 나는 프로젝트가 끝나기 이틀 전날 이 의미를 느꼈다.
앞서 말했던 리팩토링 리뷰를 보며 정말 내 자신이 너무 부끄러웠다.
그렇기에 이제는 절대 안그럴거라 생각하고 행동할 것이다.

칭찬할 점

찾고 찾고 또 찾는 능동적인 자세

나는 밖에서 회사생활을 5년동안 하고 왔다. 처음 회사를 다닐 신입사원때 선배한테 따끔하게 혼났었던 적이 있다.
하나부터 열까지 모르면 찾아보지도 않고 선배한테 달려가는 내 모습을 보며 천사라고 소문난 선배가 나를 꾸짖었고, 매번 정신교육을 시켜주셨다.

내가 무엇을 모르는가? 모르면 어떻게 찾아야 하는가? 그럼에도 불구하고 모르면 어떤 시도를 해봐야 하는가?

이 방식을 계속 연구해왔고 되도록이면 스스로 해결하려는 자세를 배워나왔다. 그 경험이 실제 여기서도 반영 되어 멘토님들에게 물어보기전 내가 할 수있는 액션은 다 취해보고, 내 힘으로 안되는 일이 있을때 그제서야 물어보러 갔다. 하지만 지금 생각해보면 정말 git 빼고는 별로 없었던거 같다.
그리고 느꼈다. 스스로 능동적으로 찾아 해결 하는 모습이 나의 무기가 되었다는것을

나는 생각한다. 고로 나는 존재한다.

데카르트가 제시한 유명한 논리를 인용했다. 엄청 거창한것은 아니지만 정말 매일 아침,점심,저녁,자기전 내가 무엇을 하고있는지 어떻게 진행하여야 하는지,백엔드와의 소통은 어떻게 해야하는지 메모장에 적어가면서 일에 전념했다. 생각이 계속 깨어있다보니 저절로 잠도 쪼개고 잠을 많이 자진 못했어도 늦잠을 자본적이 없다.

백엔드랑 소통을 할때도 계속 생각하고 소통했다. 데이터가 어떤 형식으로 넘어오는지, 키값은 어떻게 되는지, GET,POST 어떻게 어떤 값들을 전달해줘야 하는지 등 중요한 내용들을 백엔드에 적극적으로 물어봤다. 빠르고 정확한 의사소통 덕분에 작업 초반부터 백엔드와의 연결을 고려하여 작업을 할 수 있었던 것 같다. 매일 아침 스탠드업 미팅을 통해 프론트, 백의 진행상황을 공유했고, 속도를 맞추어 작업 방향을 그려나갔다.

마지막으로 하고싶은 말(회고)👄

아무도 못했던 애니메이션 효과 그걸 해낸 사람 나야나 나야나

밀리의 서재는 랜딩페이지의 애니메이션 부분이 나의 눈을 사로잡았다.
그 어느 누구도 하지 않았던 애니메이션 부분을 해내고자 눈에 불을 켰다.
하지만 한 페이지도 아닌 한 부분의 애니메이션을 구현하는데 이틀이나 걸렸고, 라이브러리를 커스텀한다는게 쉽지 않다는걸 느꼈다.
정해진 형식의 태그를 사용하여야 CSS 속성이 먹혔는데 그러질 않아서 힘들었던 찰나, 문득 머리속에 스쳐간부분이 태그 전체를 감싸는 태그를 스타일컴포넌트로 감싸서 입혀볼까?
어떻게보면 너무나 당연한 생각일수도 있겠지만 미리 정해진 라이브러리의 태그들을 쉽사리 바꾼다는건 쉽지 않았다.
뭔가 단순하면서도 전혀 생각지도 못했던 부분이 답이 될때가 가장 허무하지만 기분이 가장 좋은거 같다.
결론은 어려웠던 커스텀 부분이 막힘없이 풀려 나갔고 완성도있는 작품이 생겼다.
이렇게 어려운 작업을 하나 하나 정면으로 돌파할때마다 사고의 스킬도 늘어나는거 같아 너무 좋았다.

겁먹지 말고 일단 부딪혀봐

다들 처음해보는 API 작업 (소셜 로그인,결제작업)을 해야한다는 생각에 지레 겁 먹었다.
본인또한 그랬다. 하지만 겁먹어서 피하면 내 한계는 거기까지다.
그렇기에 어려운 짐은 다 내가 가지고 간다는 마음으로 작업에 임했지만, 너무나도 다행히 든든한 백엔드분이 계셨기에 API 작업하는데 큰 문제가 없었다.

백엔드분과의 캐미가 너무나 잘 맞았고, 할 수 있다는 자신감은 집요함으로 바뀌고, 결국엔 우리 기수들중에 누구보다 먼저 API를 붙일수 있었다.

여러분과 함께해서 너무 행복했습니다.❤️

우선 우리 팀원 분들에게 감사의 말을 전하고 싶다.

우리의 믿음직스럽고 리더쉽이 넘치는 PM수희님,
맡은 자리에서 묵묵히 자기가 맡은 일을 다 하시며 허점이 없는 든든한 백엔드 승진님,
서로를 보다듬어주고 우리를 잘 챙겨주시던 현석님,
항상 칭찬을 아끼지 않고 좋은 말로 기운 넘치는 에너지를 주입 시켜주는 지혜님,
우리의 에너자이저 보고만 있어도 활력이 넘치게 만드는 귀염둥이 주민님

여러분이 있어서 기대 이상으로 좋은 결과물이 나올수 있었습니다.
잊지 않을게요 SUWEE의 서재
다음에도 더욱 성장해서 또 같이 일할 수 있는 기회가 있었으면 좋겠습니다 :)