taetaeo / daechwita

Firebase + Express + React + Node.js 자기소개서 관리 사이트

DAECHWITA

Intro

개인의 자기소개서 관리 플랫폼, 취업 준비할 때, 많은 취준생들이 적게는 수 십장 많이는 수 백장의 입사지원을 하게 됩니다. 또한, 매번 자기소개서를 쓰다보면 비슷한 내용의 자기소개서를 관리하지 않아 새롭게 써야할 상황이 벌어지기도 합니다. 이때, 개인의 자기소개서를 관리해주고, 개인의 지원현황을 관리하는 플랫폼이 있으면 좋겠다는 생각으로 이 프로젝트를 진행하게 되었습니다.

Open Graph Image

주요 기능

• 자기소개서 관리하기 : 개인의 자기소개서를 작성할 수 있습니다. 작성할 때, 임시저장 버튼을 통해 작성 도중에 저장을 하고, 확인버튼을 통해 출간을 할 수 있습니다. 또한, 기업의 로고 이미지를 첨부할 수 있습니다.
• 자기소개서 목록 : 작성한 자기소개서의 목록을 볼 수 있습니다. 첨부한 이미지와 테그 (ex. 장단점, 자기소개, 지원동기 등) 이 카드에 보여지도록 합니다.
• 자기소개서 검색 : 작성한 자기소개서를 검색하여 원하는 자기소개서를 찾을 수 있습니다.
• 입사 지원 현황 : 서류전형, 면접전형(1차), 면접전형(2차) , 최종합격 등의 Drag & Drop 으로 나의 입사 지원 현황을 관리할 수 있습니다.
• 데이터 분석 : 지원한 입사지원현황과 자기소개서를 분석하여 가장 많이 쓴 자소서 유형과 지원한 직무 등을 차트로 볼 수 있습니다.
• 그 밖의 기능 : 면접페이지에서는 면접을 대비하기 위해 면접 질문을 입력하면 TTS를 통해 음성이 출력됩니다.
• 6월까지 면접의 기능에 대해 면접 리스트를 보관하고, 미리 입력하면 시간대별 선택을 통해 출력 되도록 구현할 에정입니다.

🔎 프로젝트 살펴보기

프로젝트 실행

프로젝트의 client, server 디렉토리에서 아래 커맨드를 각각 실행 (단, Firebase는 개인의 SDK를 사용하여야 합니다. )

npm install
npm run start

주요 기술

• React.js : 웹 UI 라이브러리
• React-Query : Server 상태 관리
• React-Dnd : 입사 지원 현황의 데이터를 Drag & Drop을 위해 사용
• Firebase : 데이터 베이스를 위해 Storage, auth를 사용
• TypeScript : 정적 타입 사용 및 코드 에러 검출
• Axios : HTTP 비동기 통신을 위하여 사용
• Emotion : 초기 로드 속도를 높이고 커스텀 스타일을 적용하기 위해 사용
• apexcharts : 보여질 데이터의 시각화를 위해 사용 (Treemap, bar, donut 차트 등 사용)

🔗 Link

• 웹 사이트
• API 명세서
• 프론트엔드 레포
• 백엔드 레포
• 프로젝트 정리 및 후기

🛠 Architecture

구현 영상

로그인

입사지원현황 페이지

드래그앤드랍

자기소개 페이지

자기소개서 작성 - 임시저장

자기소개서 작성 - 출간 및 이미지 업로드

자기소개 페이지 - 검색

반응형

daechwita's Issues

임시저장 기능

페이지에 들어갈 시, POST를 통해 이루어지고
임시 저장 버튼의 기능 구현은 PUT을 통해서 이루어지도록 하고 있다.

여기서 문제가.. 이미지에 대해서 초기에는 POST를 통해 보내고 firebase의 storage의 url을 저장하도록 하는데, 이미지가 바뀔 시에 다시 이미지를 POST를 하고 url을 바꿔주게 된다.

그러면 처음에 POST한 이미지에 대해 불필요한 데이터가 쌓이는 문제가 발생...

Same-Site 이슈

해결

• get 요청이 올 때, cookie 파싱을 통해 보안키를 사용하여 응답 cookie 객체에 저장

app.use(cookieParser(process.env.COOKIE_SECRET)); // 

구현 Image & video

구현 결과

반응

responsive.mp4

POST - 자기소개서 작성

PUT - 자기소개서 수정

DELTE - 자기소개서 삭제

GET - 입사 지원현황 조회

POST - 입사지원현황 작성

PUT - 입사지원현황 수정

DELETE - 입사지원현황 삭제

GET - 전체 차트 조회

GET - 개인 차트 조회

로그인

입사지원현

드드래그앤드랍

임시글

임시글

검색

자기소개 페이지

반응형

이미지 업로드

useLocalStorage 새로고침 시 동기화 문제

https://velog.io/@taetae-5/React-18-%EC%97%90%EC%84%9C-useLocalStorage-%EA%B5%AC%ED%98%84

React DND 참고

React-dnd

핵심은 Drug & Drop

1. useDrag

const [Collected Props, DragSource Ref,  DragPreview Ref] = useDrag(spec, deps)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DragSource Ref : 드래그 소스에 대한 커넥터 기능으로 DOM의 드래그 가능한 부분에 연결되어야 합니다.

5. DragPreview Ref: 드래그 프리뷰용 커넥터 기능으로 DOM의 미리보기 부분에 첨부될 수 있습니다.

2. useDrop

const [collectedProps, DropTarget Ref] = useDrop(specArg, deps?)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DropTarget Ref : 놓기 대상에 대한 커넥터 기능입니다. DOM의 놓기 대상 부분에 연결되어야 합니다.

보통 사용

const [collectedProps, drop] = useDrop(() => ({accept}))

1. accept: 지정한 유형에 대해서 드래그 소스를 반응하도록 함.
2. drop(item, monitor)? : 호환되는 항목이 대상에 떨어질 때 호출
3. collect : 구성 요소에 삽입하기 위해 반환할 props의 일반 개체를 반환해야 합니다.

참고

React Dnd 공식문서 : https://react-dnd.github.io/react-dnd/docs/api/use-drag