🇰🇷 For Korean User: 한국어로 된 프로젝트 설명은 여기를 클릭해주세요.

• 🚀 Quick Start
• ✨ Introduction
  • Problem
  • Idea
• 👀 Demo
  • Mokcup Link
  • Live Website Link
• ⚙️ Main Feature
• 🪄 Tech Stack
  • Design
  • Front-end
  • Back-end
• 📝 Project Review
  • The most challenging parts
  • Areas of improvement
  • Blog Posts

1. Clone this repo: git clone https://github.com/hyeonahc/job-search-front.git
2. Move to the directory: cd <YOUR_PROJECT_NAME>.
3. Install packages: yarn install
4. Start project
   • in your localhost: yarn start
   • after build: yarn build then yarn start

Job Search is a small API where you can filter 3 options from the results page of Saramin. The filter options are the following:

1. Number of years since the company has been established
2. Revenue of the company
3. Number of employees

FYI, Saramin is one of the biggest Korean employment websites for job listings. You can think of it as Korean Indeed!

My team came up with the idea of adding more search filters to narrow down the job postings and show relevant result data on the table.

🔗 Click here to see the mockup on Behance

🔗 Click here to see the live website link on Netlify

1. Crawling: Crawled the job posting data from Saramin and displayed them on the table
2. Filtering: Added three options that filter the job posting data on the table

: Adobe XD

: React, Context API, React Table, Scss

: Java, Spring

🔗 Click here to see the back-end repository: job_search_back

Apr 17, 2022

1. Context API

   When I created projects with React, I’ve been using state only locally (within the same component). I managed the state globally using the context API library for the first time in which I struggled with applying context API to my project. I would like to practice this feature more and use Redux for my next project.

2. React Table

   I used React Table library to easily insert data into the table and added the pagination feature. The most challenging part was quickly picking up the right information. Also, I found that it took more time for me to learn how to use the new library. My next goal is to experience more new libraries.

3. Communication with back-end developers

   Throughout the project, I found it difficult to understand the back-end developer (Even though it was in my native language, Korean) There were some new terms and a situation I never experienced before. I learned that it’s important to understand the bigger picture, overall web development process, and to communicate with back-end developers as well as understand how the client side receives the data from the back end.

1. Add a .gitignore file at the beginning of the project

   I added a .gitignore file later in the project which led to including unnecessary files(cache, node_mdules) in the git history.

2. Make the meaningful commit

   The best practice is committing when a certain feature is built. That’s something I didn’t know. I committed whenever I felt like it, which led to messing up the commit history.

3. Keep the commit message convention

   I didn’t follow the common commit message convention which made it hard to figure out what the commit is about.

I studied the challenging parts of this project and wrote some blog posts. (Written in Korean 🇰🇷)

• [Git] How to Write Git Commit Message
• [Git] Common Prefix for Conventional Commits
• [Git] 4 Things to Avoid When You Use Git

• 🚀 프로젝트 실행하기
• ✨ 소개
  • 불편했던점
  • 아이디어
• 👀 데모
  • 목업 링크
  • 라이브 사이트 링크
• ⚙️ 주요 기능과 로직
• 🪄 기술 스택
  • 디자인
  • 프론트앤드
  • 백앤드
• 📝 프로젝트 리뷰
  • 프로젝트를 하면서 어려웠던 점
  • 프로젝트를 하면서 아쉬웠던 점
  • 아쉬웠던점을 보강하기 위해 공부한 내용

1. 리포 클론하기: git clone https://github.com/hyeonahc/job-search-front.git
2. 해당 디렉토리로 이동하기: cd <YOUR_PROJECT_NAME>.
3. 패키지 설치하기: yarn install
4. 프로젝트 실행하기
   • 사용자 로컬호스트: yarn start
   • 빌드후 사용: yarn build then yarn start

Job Search는 사람인 IT/개발 직업군 검색결과에서 세가지 필터링 옵션을 추가하여 테이블로 정리해주는 간단한 API입니다. 3가지 필터링 옵션은 다음과 같습니다:

1. 업력
2. 매출액
3. 회사사원수

사람인에서 구인정보를 검색할때 내가 선호하는 회사 조건을 필터링해주는 기능이 없어 불편함을 느꼈다.

구인정보에서 회사 업력, 매출액, 회사사원수 필터링 옵션을 추가해서 테이블로 정리해주면 어떨까?

🔗 Behance에서 목업 보러가기

🔗 Netlify로 배포한 라이브 사이트 보러가기

1. 크롤링: 사람인에서 IT/개발 직군의 회사 설립일, 매출액, 회사사원수 정보를 불러와 테이블에 보여준다
2. 필터링: 회사 설립일, 매출액, 회사사원수의 세부 검색 기능을 추가한다

: Adobe XD

: React, Context API, useTable, Scss

: Java, Spring

🔗  백엔드 리포지토리: job_search_back 보러가기

Apr 17, 2022

1. context API의 사용

   지금까지 리액트 프로젝트를 할때 state를 컴포넌트 내부에서만 사용하였다. 이번 프로젝트를 진행하면서 처음으로 context API를 사용하여 전역적으로 state를 관리해주었다. 아직 사용법에 익숙하지 않아 프로젝트에 적용하는데 많은 어려움이 있었다. 리액트에서 전역적으로 데이터를 처리하는 방법을 더 공부해보겠다. 다음 프로젝트에서 전역적으로 상태관리를 할때는 redux를 공부해 사용해보고 싶다.

2. React Table 라이브러리 사용

   공식문서와 유튜브 강의를 보며 React Table 사용법을 익히면서 프로젝트에 적용해보았다. 아직까지는 공식문서를 파악하는 속도가 느리고 새로운 라이브러리를 만났을때 사용법을 익히는데 오랜 시간이 걸린다. 새로운 라이브러리를 접하는 것을 두려워하지 않고 영어로 된 공식문서를 자주 접해야겠다.

3. 백엔드 개발자와의 소통문제

   프로젝트를 진행하면서 함께 작업을 했던 백엔드 개발자의 말을 이해하는데 어려움이 있었다. 이를 극복하기 위해 웹개발에 대한 전반적인 흐름을 이해하는 것이 중요하다고 느꼈다. 특히 프론트와 백엔드 사이에서 어떻게 데이터를 받아오는지에 대한 공부를 해 다음 프로젝트에서는 의사소통에 어려움을 줄이는 것을 목표로 삼겠다.

1. .gitignore 적용을 뒤늦게 했다

   GitHub에 올라오지 않아도될 cache, node_modules에 대한 변경 정보도 같이 커밋되어 commit history가 지저분해지는 결과를 초래했다.

2. 깃 커밋 메시지 컨벤션을 지켜주지 못했다

   깃 커밋 메세지에 대한 prefix, convention에 대한 사전 지식이 없어 기능별로 커밋을 하지 못했고 결과적으로 commit별로 내가 어떤 작업을 했는지 파악하기가 어려워졌다.

• [깃] 깃 커밋 메시지 컨벤션 (깃 메세지 작성법)
• [깃] 커밋 메세지 작성시 필요한 커밋 유형(prefix) 정리
• [깃] 깃 올바른 사용법 (안좋은 습관)