안녕하신가요?
첫번째 프로젝트가 끝나고 얼마 안있어 두번째 프로젝트까지 끝이 났습니다.
이번 프로젝트는 저번과 똑같이 기존의 서비스를 모티브로 하되, 기획을 추가하여 진행하였습니다.
또한 다양한 라이브러리들을 사용해 완성도를 높이려 했습니다.

그러면 제 회고문을 보실까요?

---

1. 프로젝트 설명

1.1 - 프로젝트 의도

구인구직 플랫폼 wanted를 클론코딩
홈페이지 분석을 통해 기획을 변경할 수 있는 부분은 재기획/디자인 후 구현
특히 wanted+라는 구독 서비스를 더더욱 강조할 수 있는 방향으로 기획 수정

⌛️ 프로젝트 기간

2022.02.14 ~ 2022.02.25 (약 2주간)

1.2 - 팀 구성

이번엔 팀원 전체를 시켜서 실리콘밸리의 천재 프로그래머 그룹인 양 컨셉을 잡아보았다 😎

프론트엔드

needed Front-end Repository

• 곽승현 : 연봉 그래프, 구독 서비스, 회사 정보, Footer

• 장예지 : Navigation 바, 소셜 로그인, 회원가입

• 박무선 : 랜딩 페이지, 이력서 업로드

• 윤남주 : 채용 리스트, 채용 상세, 마이페이지, 프론트엔드 배포 (AWS EC2)

백엔드

needed Back-end Repository

• 김준영 : 소셜 로그인(OAuth 2.0), 마이페이지 정보 조회 및 수정, 채용 정보 리스트, 채용 정보 상세페이지, 회사 상세 페이지, 월간 구독 서비스, 직군별 연봉 데이터

• 김성수 : 이력서 파일 업로드 & 삭제, Soft Delete & 복구, 채용 공고 지원, 카테고리 리스트, 검색 기능

1.3 - 사용 기술 스택

프론트엔드

• HTML/CSS
• Javascript (ES6+)
• React

사용 라이브러리 / 외부 API

• styled-components
• axios
• recharts
• react-slick
• react-modal
• 카카오 로그인 / 맵

협업툴

• Trello
• Slack
• Notion

2. 완성물

[Youtube에서 전체 영상 보기]

내가 작업한 페이지의 경우 ✅ 표시!

2.1 - 랜딩페이지

• 여러 형태의 슬라이더 구현

2.2 - 로그인/회원가입

• 카카오 소셜 로그인 구현
• 로그인/회원가입 가능
• 카카오에서 받아오는 정보 : 프로필 사진, 이름(닉네임), 이메일 주소

✨ 회원가입 Flow

1. 카카오 로그인
2. needed DB에 있는 회원인지 대조
3. 아니라면 needed 회원가입 프로세스 시작
4. 휴대폰 번호 등의 정보 받음
5. 등록 완료

2.3 - needed + (월간 구독 서비스)

• ✨ 새로운 기획 : 주력으로 밀고자 하는 구독 서비스를 nav바에 적극 배치
  랜딩 페이지 - 새로운 디자인
• /landing : 구독되지 않은 사람들에게 보여지는 페이지
• /contents : 구독한 사람들에게 보여지는 페이지
• 카드 클릭 시 모달창 노출

2.4 - 채용 리스트 ✅

• 동적 라우팅 구현
• 카테고리/서브카테고리 필터링은 path parameter로
• 나라, 지역, 정렬순서 필터링은 query parameter로
• 모든 파라미터들은 백엔드 API 엔드포인트에 query parameter로 붙습니다
• 각 채용 공고 상세 페이지로 navigate

2.5 - 채용 상세 ✅

• 카카오맵 : 기업의 정확한 주소를 가지고 geocoder를 통해 카카오맵 상 정확한 좌표를 찾습니다
  드래그, 더블클릭, 스크롤확대 등은 false로 고정
• 공유하기 기능 : 클릭 시 클립보드에 주소 복사
• 최하단에 같은 카테고리의 다른 공고들 노출
• 지원하기 기능 : 로그인 시 개인정보 불러와 input에 자동 입력, 미리 업로드된 이력서를 불러와 선택하도록 함
  → 유효성검사 통과 후 활성화된 제출하기 버튼 클릭 시 지원 완료
  ✨ 재지원은 불가능하도록 막아놓음 (alert 발생)

2.6 - 회사 상세

• 회사 페이지
• 해당 회사에서 하고 있는 채용 공고들을 모두 볼 수 있음
• 회사의 이미지, 설명을 볼 수 있음

2.7 - 연봉 그래프

• recharts 사용 (그래프 값 = 난수)
• 카테고리 / 서브카테고리에 따라 다른 그래프가 보여짐
• 연차에 따라 다른 하이라이트
• 연봉 입력 시 평균 연봉과의 차이 계산

2.8 - 이력서 업로드

!

• 🔥 파일 업로드 기능 구현
• 업로드된 파일을 열람할 수 있음
• 채용 공고 페이지에서 불러와지며, 지원 시 사용되게 됨

2.9 - 마이페이지 ✅

• 나의 정보를 볼 수 있는 페이지
• ✨ 새로운 기획 : needed+를 개인정보 바로 밑에 추가하여 가시성 높임
  버튼 디자인 등을 새로 함
• 정보 변경 기능 : 휴대폰 번호, 직군, 직무, 경력, 연봉 입력/수정 가능
• 지원현황 열람 가능 : 지원하기를 하면 지원 완료에 카운트가 1 상승

2.10 - Nav, Footer

• ✨ 새로운 기획 : needed+ 탭 신설 → 노출도 높임

2.11 - AWS EC2를 통하여 프론트엔드 배포 ✅

여기에서 실제 웹을 이용하실 수 있습니다

3. 회고 / 느낀 점

3.1 - 반성 또 반성

더러운 코드를 만들었습니다...

나는 이상한 코드 습관이 있다.
첫번째는 일단 보여지는 것에 집착한다는 것이고, 두번째는 일단 빨리 쳐내는 식의 코딩을 좋아한다는 것이다.

나는 컴포넌트를 만들며 무조건 스타일까지 완벽하게 구현해야한다. 예쁘지 않으면 코딩을 하기가 싫다.
그리고 나는 그냥 삘받은 대로 계속 끊기지 않고 코딩하는 것을, 그리고 빨리 쳐내놓고 나중에 수정하는(척 말만하는 것)을 좋아한다.

이번에는 그런 습관들이 악영향을 주었다.
스타일에 너무 많은 시간을 허비하여 첫째주엔 거의 컴포넌트 제작만 하였고,
내 머리가 정리되지 않고 끊어야 했는데도 계속 코딩을 해서 덕지덕지 못생긴 코드를 만들어버렸다...

⬇️ 이 코드가 그저 채용 리스트 백엔드 API를 불러오는 코드라면 믿으시겠습니까?

useEffect(() => {
  const category = params.category && `category=${CATEGORY[params.category]}`;

  const subcategory =
    params.subcategory && `subcategory=${SUBCATEGORY[params.subcategory]}`;

  const country =
    searchParam('country', location.search) !== 'all'
      ? `country=${COUNTRY_EN_TO_KR[searchParam('country', location.search)]}`
      : undefined;

  const sort =
    searchParam('job_sort', location.search) === 'created_at'
      ? 'sort=created_at'
      : 'sort=-compensation';

  const locationQuery =
    searchParam('location', location.search) !== null &&
    searchParam('location', location.search) !== 'all'
      ? searchParam('location', location.search)
          .split(',')
          .map(x => `location=${LOCATION_EN_TO_KR[x]}`)
      : '';

  const finalQuery = [category, subcategory, country, sort, ...locationQuery]
    .filter(x => x !== undefined)
    .filter(x => !x.includes('undefined') && !x.includes('null'));

  axios.get(`${api.fetchRecruitments}?${finalQuery.join('&')}`).then(res => {
    setPositionsData(res.data.Recruitment);
  });
}, [params.category, params.subcategory, location.search]);

내가 아직 제대로 구조를 이해하고 있지 못하다고 느끼거나, 조금 더 멀리 떨어져서 생각할 시간이 필요하다고 판단되면
일단 끊고 더 제대로 생각해볼 시간을 갖는 것이 필수이다.

그리고 리팩토링!!!!!! 리팩토링 제발 하자!!!!!!
코딩하다가 "와 이거 리팩토링 어떻게 하지?", "이거 리팩토링 하기 겁나 싫다..." 라는 생각이 들면 그 코드는 이미 실패한거다.
코딩을 하면서 리팩토링 방향까지 감이 오도록 코드를 짜자!

백엔드는 나의 친구, 많이 대화하자

이번에는 훨씬 백엔드와 커뮤니케이션이 잘되었고, 통신도 문제없이 되어서, 스프린트 2주차에 별다른 힘듦 없이 잘 마칠 수 있었다.
하지만 그럼에도 사전에 더 대화를 했더라면 좋았을 것을...

(계속 채용 리스트 부분에 대해서 말해서 죄송하지만, 이번 프로젝트 내가 제일 아쉬운 컴포넌트라 그렇다)
⬇️ 대화를 했더라면 아래와 같은 뻘짓은 하지 않아도 되었을텐데...

// 쿼리와 렌더링 될 문자열, 그리고 백엔드에 요청보낼 문자열을 변환시켜주는 객체들입니다.

export const CATEGORY = {
  programming: 1,
  design: 2,
  education: 3,
  finance: 4,
  marketing: 5,
};

export const SUBCATEGORY = {
  frontend: 1,
  backend: 2,
  uiuxdesign: 3,
  branding: 4,
  foreignlang: 5,
  eduplan: 6,
  accounting: 7,
  financeplan: 8,
  contentsmarketer: 9,
  performancemarketer: 10,
};

export const COUNTRY_KR_TO_EN = {
  전세계: 'all',
  한국: 'kr',
  대만: 'tw',
};

export const COUNTRY_EN_TO_KR = {
  all: '전세계',
  kr: '한국',
  tw: '대만',
};

export const LOCATION_KR_TO_EN = {
  전세계: 'all',
  '한국 전체': 'all',
  '대만 전체': 'all',
  서울: 'seoul',
  광주: 'gwangju',
  타이페이시: 'taipei',
  타이둥현: 'taitung',
};

export const LOCATION_EN_TO_KR = {
  all: null,
  seoul: '서울',
  gwangju: '광주',
  taipei: '타이페이시',
  taitung: '타이둥현',
};

export const SORT_KR_TO_EN = {
  최신순: 'created_at',
  보상금순: 'compensation',
};

export const SORT_EN_TO_KR = {
  created_at: '최신순',
  compensation: '보상금순',
};

이 뭐하는 짓이야... 그냥 백엔드랑 다 한글로 맞췄으면 URI도 백엔드API도 렌더링할 문자열도 다 맞출 수 있었다...

그러니 더더 대화를 하자!
1주차에 걱정했던 것만큼 백엔드 통신이 어그러지지는 않았지만, 그래도!

3.2 - 개인적인 소감

또 좋은 팀원들을 만나, 좋은 프로젝트를 했다.
정말 솔직히 말하자면 중간에는 다 못 끝낼까봐, 그리고 다 못끝내서 다 끝난 내 페이지를 써먹지 못할까봐 걱정 많이 했다...

하지만 결과는... 계획한 것 모두 다 끝냈고! 우리는 시간 내에 프론트엔드 배포까지 했다! 🎉 🎉 🎉
심지어 끝에는 조금의 여유까지 있었다. 이건 정말 팀원들이 너무 함께 같이 잘해줘서 그런거야. 나 혼자 잘난다고 되는 일 하나도 없다.

나의 성격은 항상 조금은 신경질적이고, 꽤나 쓸데없는 걱정을 많이 하는 성격이었는데.
이번 프로젝트를 하며 걱정할 시간에 내 일을 하고, 남을 도와주는 것이 답이라는 것을 깨달았다.

걱정보다는 미래에 대한 기대를, 공허한 자만보다는 나에 대한 믿음을 가지자.
매 경험들을 지나며 조금씩 조금씩 무뎌지고, 차차 강해질 것이다.