위스타그램 클론 프로젝트

1. 프로젝트 기간 및 적용 기술

• 1차 클론: 2021/04/19 ~ 2021/04/23(HTML, CSS, JavaScript)

• 2차 클론: 2021/04/26 ~ 2021/05/07(React, SCSS, Fetch API)

• 공통: Git, Github

2. 구현 기능

• 📚 로그인 페이지

  • 로그인 페이지 레이아웃 구현

  • id, pw 입력 시 로그인 버튼 활성화 기능

• 📚 메인 페이지

  • 메인페이지 레이아웃

  • 댓글 내용 입력 시 게시 버튼 활성화

  • 피드 댓글 입력후 게시 버튼 클릭, 혹은 엔터 누를 시 추가 기능

3. 프로젝트 후기

🖊 HTML, Javascript => React

• 개인적으로 Javascript보다는, React로 기능을 재구현할때 흥미가 많았다. 특히 html, JavaScript의 경우, 모든 태그를 일일히 나열했기에 전체적인 레이아웃 구현이 어지러웠다면, React는 재사용 가능한 component단위로 쪼개어 관리하는 것이 재미있었다. 또한 데이터를 전달하는 props, 해당 Component 상태를 나타내는 state를 사용하면서 새로운 것을 알아가는 재미를 더 붙일 수 있었다.

  
  

• React로 변환 후, component별 관리로 인해 유지보수 및 레이아웃 확인이 더욱 용이함을 직접 느낄 수 있었다.

🖊 CSS => SCSS

• 사실 나는 SCSS의 많은 기능을 사용하지는 않았다. 네스팅, mixin등의 기능을 통해 유용함을 느꼈으나, 뭔가 가독성이 떨어지는 느낌이 많이 들었기 때문이다.(직관적인걸 좋아하는 내 개인적인 주관이다) 물론 팀원들의 화려한 scss을 보고 많이 배웠지만 내 경우, React, 즉 JSX 문법을 익히는 것에 치중하다보니 신경을 못 쓴 것도 있으므로 이 부분에 대해서는 스스로 더욱 보완해야겠다고 생각했다.

  ✔ 가장 유용하게 생각되는 기능인 네스팅, mixin을 많이 사용했다.

🖊 Request, Response with Backend

• 백엔드와의 HTTP 통신으로 회원가입, 로그인 기능을 구현했는데 이때가 제일 재미있었다. 로그인 성공시 MESSAGE와 local storage에 저장할 정보가 담긴 token을 받아오면서 '와 이제 진짜 개발을 해보는 것 같다'라는 느낌을 강하게 받았다. (속으로 뿌듯...) 해당 기능을 실습하면서 프론트와 백 서로의 소통을 위해서, 서로에 대한 기초 지식이 꼭 필요하다는 것을 확실히 느꼈다.

  

🖊 Github PR, code review

• github를 사용하면서 가장 마음에 들었던 기능이다. 바로 팀원들끼리 작성한 코드를 서로 리뷰할 수 있다는 것이었다. 처음에는 볼품없는 내 코드를 보여주다보니 많이 창피했다. 하지만 서로 리뷰를 달아주는 과정에서 새로운 것도 많이 알아가고 내가 많이 부족한 점을 피드백 받을 수 있어서 굉장히 좋았다.

  
  ✔ 볼품없는 내 코드를 정성스럽게 리뷰해주신 팀원분들 및 연욱님께 감사하다.

4. 느낀점

• 이번 위스타그램 클론 프로젝트는 개인 결과물이 따로 나오기에 팀프로젝트? 라고 하기에는 약간 미흡한 면이 있으나, git, PR, CRA 초기세팅 등 협업에서의 필수 tool 및 기능들에 대해 자주 접하고 부딪힐 수 있어서 좋았다. 아래는 스스로 좀더 노력해야 할 점들을 적어봤다.

🙄 혼자 생각만 하지 말고 팀원들과 많이 얘기해볼 것

• 나는 개인적으로 내 업무나, 혹은 과제가 있을 때 혼자 하는 편이다. 타인에게 물어보지 않고, 전전긍긍해서라도 꼭 해내고야 말겠다는 집념? (어떻게 보면 고집...)이 있다. 때문에 '남에게 물어보지 않겠다'는 고집으로 임하다가 해결을 못했을 때 멘탈이 와르르 무너지는 편이다.(특히 코드카타 시간때 더 심했었음...)
  하지만 코드카타 포함 위스타그램 클론 프로젝트 기간중, 팀원들에게 모르는 것이 있을 때 물어보고 같이 해결하면서 나만 생각했던 자세를 바꿔야겠다는 생각이 많이 들었다. (괜히 집단지성이라는 말이 있는 것이 아니다!)

🤨 기능 구현에만 집중을 하지 말 것

• 위스타그램 클론 프로젝트를 할 때도, 마감 기한이 딱 정해진 것은 아니지만 동기들 속도, 혹은 시간에 쫒겨 기능 구현에만 너무 집중을 했었다.(그렇다고 해서 기능이 많은것도 아니다 ......😳)그러다보니 나중에 리팩토링을 하거나 코드를 다시 볼 때, 혹은 피어 리뷰를 할때 이해가 안가고 설명하기 애매한 부분이 좀 있었다. 생각없이 짰기 때문이다. 그러므로 항상 고민하고 해당 코드를 쓰는 이유에 대해서 다시 한번 생각하도록 하자.

😊 비교하지 말것, 부족함을 인정할 것, 부지런할 것

• 위코드를 시작하면서 첫 벨로그에 썼던 말처럼 급하지 않게 주변에 흔들리지 말고 나만의 페이스를 유지하는 것이 중요함을 다시금 깨달았다. (걱정이 걱정을 부른다고...!!!) 남과 비교할 시간에 코드 한줄이라도 더치고 더 부딪히면서 부족함을 깨닫자. 그리고 이를 꾸준히 채워갈 수 있도록, 부지런한 내가 되도록 더욱 노력하자.