Hack Shopping Mall

⚙️ 주제

• 리버싱 및 게임보안 공부한 경험으로 주제 선정 (게임 메모리 분석, 게임 해킹툴 분석)
• 첫 프로젝트라 흥미 있는 주제면 재밌게 할 것 같아서 선정
• 콘서트 티켓구매와 비슷한 로직 (콘서트->티켓구매 == 상품->코드구매)

⚙️ 서버

• AWS: http://ec2-3-37-89-106.ap-northeast-2.compute.amazonaws.com
• 접속 에러 시 크롬으로 접속
• 관리자ID: rolfson.ashley@example.com 비밀번호: password
• 회원가입 시 입력한 ID로 메일인증 필요

⚙️ 주요 기능

구매자

회원가입, 메일인증



계정찾기



로그인



충전 (입금, 상품권)



구매하기, 상세보기



내역 (충전, 구매)



즐겨찾기, 검색

판매자

상품CURD



관리 (판매, My상품)

관리자

승인 (충전, 판매권환)

⚙️ Key summary

• 프론트는 Vue+Bootstrap Unify Template, 백엔드는 Laravel 이용 => Unify Template

• 처음에는 기획, 기능 위주로 구현

• 이후 핵심 기능 TDD로 다시 구현(Code Coverage 100%, Refactoring) => TDD Repositoriy

⚙️ Backend architecture

이 프로젝트는 유데미강의(Vue, Laravel 기초 배움)와, 라라벨로 배우는 실전 PHP 웹 프로그래밍 등 공부 후 2021.01월에 첫 프로젝트로 만들었지만, 현재 READEME 작성 일 2021.04.19 3개월이 지났으니, 현재 다시 만들 경우 비교하여 소개하겠습니다.

당시 생각해보면 백엔드는 복잡한 로직이 없었기 때문에 빠르게 만들었고 기획, 프론트에서 시간이 오래 걸렸습니다. 이후 구매, 상품CURD 구현을 TDD로 다시 만들었습니다.

• Routes, Controllers, Endpoints

  • 기존
    • 공부한 강의 코드 본 후 비슷하게 이름 정함
    • Routes/Endpoints 구조에 대한 중요성을 몰랐음
  • 현재
    • 네이밍 신중하게 할 것 같음
    • Cruddy by Design 본 후 고민해봄

• 테스트

  • 기존
    • Postman으로 API 테스트
    • 새로운 기능추가 후 다른 API도 테스트하게 됨
    • API 테스트에 많은 시간 투자
  • 현재
    • 테스트코드로 API 테스트
    • 클린코드에 대한 관심 증가
    • Test Driven Laravel 본 후 기본적인 TDD 작성 방법, 외부라이브러리 인터페이스 작성, 의존성주입 배움
    • Facebook Clone with Laravel, TDD, Vue & Tailwind CSS 본 후 TDD로 작은 기능 부터 하나씩 추가는 방법 배움

• JSON 구조

  • 기존
    • JSON 구조 생각 안함
    • 메세지, Response Code 생각 안함
  • 현재
    • jsonapi.org 참고하여 구조에 신경씀
    • 라라벨 컬렉션을 사용하여 데이터 쉽게 처리

• 기획, 이슈관리, 문서화

  • 기존
    • 간단한 기획 후 코딩하면서 설계
    • 이슈는 Text Editor에 작성
    • 문서화 하지 않음
  • 현재
    • 페이지마다 정확한 데이터, 디자인 설계 후 코딩
    • 이슈관리는 GitHub 이슈트래커 사용함
    • github 하나로 1인 개발 워크플로우 완성하기: 실전 편 참고해서 간단한 프로젝트 하는 중
    • Commit 메세지 정확하게 작성
    • Swagger 사용해서 API 문서화

• 데이터베이스

  • 기존
    • 기획과 마찬가지로 코딩하면서 설계
  • 현재
    • 필요한 기능 정확하게 기획 후 설계 -> 코딩
    • 데이터베이스 구조 훔쳐보기 1탄 - 넷플릭스 본 후 데이터베이스 설계와 사용자 맞춤 정보를 위해 여러 가지 데이터를 저장한다는 것을 배움

⚙️ Frontend architecture

프론트는 3개월 전과 크게 달라진 건 없고, vuex 사용만 해봤습니다. 현재 다시 만들면 vuex 사용과 bootstrap 대신 tailwind 배워서 적용해 볼 것 같아요.

• 힘들었던 내용
  • Bootstrap Template에서 masonry-wall 사용 에러가 떠서 vue.js vue-masonry-wall 사용
  • Bootstrap Template은 jQuery인데, 이를 vue.js로 사용하는데 에러가 있어서 힘들었습니다.
  • JWT인증 및 SNS 로그인 프론트에서 처리 부분

⚙️ 느낀점

• 공부하면 할수록 진짜 많이 부족한 것을 느꼈지만, 반대로 앞으로 배울 것이 많다는 것이 설레고 앞으로가 기대된다.
• 지금처럼 계속 배우는 자세로 임하다 보면 2~3년 후에는 더 성장한 개발자가 될 수 있을 것 같다.
• 현재 진짜 기본기 정도 배운 것 같다. 이를 바탕으로 실무에 빠르게 적응하려고 노력할 것이다.
• 현재 중요하다고 느낀 점은 크게 두 가지인 것 같고, 열심히 할 것이다.
  • 첫 번째 도메인 관련 지식이나 비지니스 로직.
  • 두 번째 이를 코드로 옮기기 위한 능력. (예를 들어 배열이나 컬렉션 이용하여 복잡한 로직 해결능력)

⚙️ 향후 방향

• 현재는 얇지만 넓게 공부, 입사 후 얇은 지식의 기반으로 깊게 공부
• Backend architecture를 모두 신경 써서 기존프로젝트보다 더 크게 만들기
• 입사 후 클린코드와 라라벨 컬렉션 공부에 집중
• 또 AWS 운영이나, 성능 관련된 Redis, ElasticSearch 등을 배워서 적용
• 꾸준히 다른 사람 코드나 강의 보기