프로젝트 개요
이미 서비스 중인 사이트를 clone하는 clone coding 프로젝트로
대상 사이트는 "https://www.wanted.co.kr/" 입니다.
- github : https://github.com/PARKJONGSUN88/wecode_project_3
- 구현된 페이지 동영상 : https://www.youtube.com/watch?v=3sZc05pvuCY
- 담당 부분 회고글 : https://velog.io/@jongsunpark88/projectW2me
clone coding
클론 프로젝트는 순수 개발시간의 극대화를 위해 기획이나 디자인 시간을 제외하기 위하여 진행하는 것으로 사이트의 구조나 소스만 참고하고 로직이나 구현방법은 직접 코딩하였습니다.
프로젝트의 공동 목표
- 다수가 함께 하는 작업으로 Team으로 개발하는 방법을 학습하고자 했습니다.
- 이를 위해 Trello라는 팀 planer를 사용하였고 1일 1회의 스탠딩 미팅을 진행하였습니다.
- git, github를 적극적으로 활용하여 실무처럼 개발하고자 하였습니다.
- 2주간의 1주에 한 스프린트로 진행하는 scrum 방식으로 프로젝트를 진행하였습니다.
프로젝트에 사용된 기술
프론트엔드: ReactJs, Styled Component, Hook, Redux
백엔드: Django, MySQL
배포 : AWS
소스관리: git, github
프로젝트에서의 담당
프론트엔드 3명, 백엔드 2명으로 구성되었으며
본인은 프론트엔드 개발자로써 참여하여
index, Nav, Footer, login modal, 이력서 페이지를 담당하였습니다.
프로젝트 구현
- 회원가입, 로그인(google소셜 로그인, 일반)
- index 및 Nav바
- 메인 페이지
- 메인 상세 페이지
- 이력서 페이지
1. index
- 사이트의 대문 페이지로 유저가 처음 진입시 보여주는 페이지
2. 회원가입, 로그인
- 로그인, 회원가입이 하나의 modal로 되어있으며 회원인지, 비회원인지 그리고 회원가입은 필요한지 등을 하는 연속적은 modal로 이어진다.
3. main
- 직군이나 직무에 따른 분류, 회사 정보등이 list로 나열되고 있는 메인 페이지이다.
4. detail
- 메인페이지에서 해당 회사로 클릭시 진입하는 detail페이지롤 각종 회사 정보나 유저가 좋아요, 또는 북마크 등을 하고 이력서를 등록하는 등의 기능이 있다.
5. 이력서 페이지
- 유저가 이력서를 새로 등록하거나 기존의 이력서를 불러오며 삭제, 갱신등을 할 수 있다.
프로젝트를 진행하며 개인적으로 학습하고자 한 것
리액트를 배우고 두번째로 진행한 클론 프로젝트였습니다.
또한 이번에는 class형이 아닌 함수형을 컴포넌트를 구성했으며
css나 sass가 아닌 styled component를 사용하였습니다. 또한 함수형 컴포넌트이므로 hook이 사용되었고 추가로 Redux를 사용해보고자 했습니다.
-
함수형 컴포넌트, 그리고 hook : 이번 프로젝트는 요즘 추세대로 함수형 컴포넌트로로 진행해보자 했습니다. 함수형이 클래스형보다 불필요하게 코드를 짜지않는 공식문서의 레퍼런스처럼 최대한 간결히 하고자 했습니다. 또한 함수형에서 state를 사용하게 해주는 hook도 당연히 함께 학습하여 사용하였습니다.
-
스타일 컴포넌트 : 스타일까지 컴포넌트화해서 쓰는 스타일 컴포넌트를 학습하였고 제대로 사용해보고자 하였습니다. 최대한 재사용이 가능한 부분은 컴포넌트화 하고 props를 이용하여 스타일 변화를 주어 '컴포넌트'답게 사용해보고자 했습니다.
-
Redux : 전역 상태(grobal state)관리가 가능하게 해주는 Redux를 학습하고 진행해보고자 했습니다. 리듀서의 switch,case문에서 정말 복잡한 로직은 아니더라도 global하게 사용되면 좋을만한 state는 store로 올려 진행하였습니다.
프로젝트를 마치며..
담당부분 코드에 대한 자세한 후기 : https://velog.io/@jongsunpark88/projectW2me
1차 프로젝트가 끝나고 어느정도 자신감이 붙었습니다.
그런데 막상 2차 프로젝트를 진행하려는데 모든게 변했습니다.
class컴포넌트는 function컴포넌트로 바뀌었고 css,sass는 아에 없어지고
스타일 컴포넌트가 들어왔습니다.
거기다 Hook까지 훅 들어왔습니다.. 뭐 redux는 말도 안하겠습니다.
프로젝트를 시작하려는 첫 3일... 정말 모든 것이 초기화된 기분이었습니다.
리엑트뿐 아니라 모든 것을 처음배운 기분이었습니다.
그러다 하나씩 하나씩 익숙해지고 깨우쳐지는 순간 함수형 컴포넌트와 스타일 컴포넌트의 효율성이 보였고
또한 누가 시키지 않아도 스스로가 "이건 store에서 관리하면 좋겠는데?"라는 생각으로 스스로 Redux를 적용시키고 있었습니다.
일주일 첫 스프린트가 지날쯤에는 만들어지는 것을 보며 즐겁게 작업할 수 있었습니다.
프론트엔드 개발자로써 화면에 하나씩 구현되는 것을 볼때면 너무나 기뻤습니다.
또한 제가 가장 좋아하는 기술인 REACT를 더욱 멋지게 배우니
정말 즐거운 프로젝트였습니다.
