미리보기

웹 : http://more-client.s3-website.ap-northeast-2.amazonaws.com

레포:

• 클라 : https://github.com/Yoon1996/more_client
• 서버 : https://github.com/Yoon1996/more_server

개발 공부를 하기 전 제과제빵 업계에서 일을 했었습니다.
제과제빵 업계는 아직까지 아날로그식 시스템으로 일이 진행되고 있습니다.
그래서 레시피들을 낡은 노트가 아닌 컴퓨터나 모바일 화면으로 즉시 보고, 저장할 수 있으면 좋지 않을까 하고 제작하게 되었습니다.

공통

• github action을 이용한 CI/CD 구축.

서버

• express 를 이용한 백엔드 서버 구축 및 DB 구축.
• api 들을 유지, 보수에 용이하게 하기 위해 route 파일을 도메인별로 나눔.
• AWS의 인프라를 이용한 서버 구축(ec2, s3, RDS)
• MySQL 모델 관계 설정(relation) 을 활용한 북마크, 레시피의 재료(다수)를 추가
• ORM 라이브러리중 하나인 sequelize를 사용 하고 schema를 만듦.
• 사용자 인증을 하기 위한 middleware 구현.
• 회원이 아닌 사용자의 특정 동작을 방지하기 위한 guard 구현.
• 데이터베이스나 사용자의 인증 관리를 위한 파일들을 모듈화 시켜 재사용성과 유지 보수에 용이하게 util 폴더에 나눠서 관리.
• 중요한 정보들을 외부에 노출되지 않게 config폴더를 만들어 관리.
• mailSender를 이용한 이메일 인증
• bcrypt를 이용한 패스워드 생성
• googleOAuth2를 이용한 구글 소셜 로그인 구현
• getSignedUrl을 이용한 사진 저장, 수정 기능 구현

클라이언트

• 관점 지향 프로그래밍의 개념에 따라 template, layout, page 폴더 를 분리해 화면에서 표현되는 컴포넌트들을 효율적으로 관리.
• 파일들을 모듈화 시켜 재사용에 용이하게 util 폴더를 만들어 관리.
• 회원이 아닌 사용자의 사이트 접근을 방지 하기 위한 guard 구현.
• accessToken 을 로컬스토리지에 저장하는 방식으로 로그인 구현.
• redux 를 사용하여 글로벌 상태변화(로그인, 레시피 리스트 렌더링) 구현
• 자주 사용 되는 button 이나 input 을 컴포넌트화 하여 유지보수에 용이하게함.
• css의 custom properties 를 이용한 컬러시스템(palette) 구축.

프로젝트 후기

• 개인프로젝트로 진행을 하다 팀프로젝트로 변경을 하게 되면서 팀원과의 소통이 매우 중요하다는 것을 깨닫게 되었습니다.
• 디자이너분과 같이 일하게 되면서 UX/UI 디자인의 경험의 중요성을 더욱 때닫게 되었습니다.