🙋‍♂️ 프로젝트 소개

class101(클래스101)은 자기계발 / 취미 공유 플랫폼 사이트에요. 선택한 이유는 화면의 UI가 깔끔했어요. 또한, 배운 이론으로 기능을 구현하기에 적합하다고 판단했어요. 저를 포함한 6명의 팀원들과 DEV101 사이트를 제작했어요. 소스코드와 영상 링크는 아래에 첨부할게요.

Github : https://github.com/MinseungJeon/13-DEV101-frontend
유뷰브 링크 : https://www.youtube.com/watch?v=VL2Rvn3d1os&feature=youtu.be

🗓 프로젝트 기간

2020.11.02 ~ 11.13 (11일)

👨‍👧‍👧 애정하는 팀원

FrontEnd (4명)

• 김보라
• 구현정
• 전민승(나)
• 함준호

BackEnd (2명)

• 김지훈
• 박현희

🎬 데모 영상

🎨 기술 스택

개발도구

• HTML, Styled-component
• JavaScript(ES6+)
• React, Hooks
• CRA

협업 도구

• Git & Github 는 개발자의 필수 도구!!
• Git Rebase 로 협업 경험!!
• Trello 로 전체적인 일정 관리와 팀원들의 작업 현황을 파악했어요.

🎨 내가 담당한 Page

로그인

소셜 로그인

데이터 및 정보 제공 시, 안전한 인증방법인 OAuth 2.0 개념을 적용하여 개인정보와 같은 민감하고 보안이 필요한 정보를 Access Token을 사용하여 데이터 전송을 했어요.
카카오 API 문서를 활용하여 Backend 팀원과 API 주고 받으며 커뮤니케이션을 하였고 fetch를 사용하여 body 부분에 Backend 팀원이 필요한 정보를 의사소통하여 보내주었을 때 짜릿했어요. 또한, JWT Localstorage에 저장하여 사용해서 서버에 데이터를 저장하는 방법을 체험했어요.

일반 로그인

fetch함수를 사용하여 backend 팀원에게 필요한 정보를 보내고 반대로 내가 필요한 API를 받아서 사용했어요.
팀원들과 axios도 연습삼아 적용하기를 회의로 정한 후, 새로운 기술을 적용해보며 fetch 방식에 비해 코드 작성이 간단하다는 것을 느꼈어요.
특히 axios는 데이터를 객체로 자동 변환 해주어 fetch처럼 stringify를 하지 않는 것이 마음에 들어 만족도가 높은 기술이었어요.

회원가입

회원가입시 유효성 검사를 자체적으로 처리했어요. 유효성 검사 조건을 최소한으로 간소하게 처리했어요. 하지만 실제로는 정규식을 활용하는 등 유효성 검사를 까다롭고 정확하게 할 필요가 있을 것 같아요.

Nav component

  const submitSearchBox = (e) => {
    console.log(inputValue);
    e.preventDefault();
    history.push(`searchPage?query=${inputValue}`);
  };

Nav component 검색창에 데이터를 Querystring으로 검색결과 페이지에 보내주었어요. 정말 짧고 간단한 코드였는데 저 당시에는 query에 대한 개념이 없어서 한참을 생각했던 기억이 나네요.
보내줄 데이터를 구체적으로 코드로 작성하면 된다는 것을 배웠어요.

🎨 좋았던 점

서로 비난하지 않았던 점! 데일 카네기의 말 중에 가장 좋아하는 말은 비난하지 말라는 말이다. 나는 이 말을 지키는 것을 굉장히 즐기고 재밌어해요.

Backend 팀원과 로그인 과정을 서로 맞춰보는 과정에서 통신이 잘 되었다가 안 되었다가 반복되었다. 나도 다른 페이지를 해야했고, Backend 팀원도 다른 Frontend 팀원과 맞춰봐야 했기 때문에 여유로운 상황은 아니었다.

하지만 에러의 과정 속에서 잘못된 부분을 자신의 코드에서 먼저 찾았고, 그 에러가 내 코드가 아닐지라도 서로 같이 배웠음에 웃으며 마무리했던 점이 정말 좋았어요.

🎨 아쉬운 점

Backend 팀원과 커뮤니케이션 과정에서 에러에 발생 했을 때, 팀원과의 사이좋음에 비하여 기술적인 지식이 부족하여 에러를 찾는 것에 어려움을 겪었다.

아직 개발 입문자에게는 당연한 문제이지만 그렇다고 당연하게 생각해서는 안될 것 같아 스스로에게 많이 아쉬웠어요.

구체적으로 카카오 로그인 API 문서를 열심히 읽은 것에 비하여 잘 소화하지는 못했어요. 욕심만큼 성장하는 개발자가 되기 위해서는 노력에 노력을 하는 개발자가 되고 싶어요.

앞으로 실무에서는 내가 의지할 곳은 공식문서라고 생각해요. 그래서 많은 문서를 읽고 적용해 보려는 연습을 토이 프로젝트를 통해서 할 생각이에요.

🎨 프로젝트 소감

1차 프로젝트처럼 프로젝트는 항상 그 순간 진도를 따라가기가 힘들었어요. 새로 배웠던 HOOKS, Styled-components를 배움과 동시에 적용하는 과정이 어려웠지만 정말 해보고 싶어서 재밌게 했어요.

실무에서도 새로운 기술을 적용하며 프로젝트를 진행할 것이라고 생각해요. 그래서 이 순간에 조금 더 현명하고 똑똑하게 기술을 습득하고 싶은 생각이에요.

맡은 임무를 책임감 있게 완성하려고 노력했어요. 그래도 아쉬움이 남았어요. 특히 Redux를 적용하려고 생각했지만 2주 내에 이론 학습과 동시에 프로젝트에 적용하기에는 생각만큼 속도가 나지 않아서 나중으로 미뤄 두었어요.

Redux를 여유되면 사용하기로 팀원들과 합의를 했기에 큰 피해는 발생하지는 않았어요. 하지만 개인적인 욕심에 비하여 더딘 속도에 스스로 반성을 하게되는 프로젝트였어요.

부족하지만 그래도 언제나 그랬듯이 끝나고 나면 발전하고 있다는 느낌이 드는 것이 개발을 지속할 수 있는 원동력 같아요.