https://jobsearchpage.jhdgo1225.repl.co/

1. 자기 소개

안녕하십니까, 대학교 1학년을 마치고 겨울방학부터 웹 개발자로 진로를 선택한 학생입니다. 대학교에서 프론트엔드 지식을 배우긴 했지만 본격적인 공부를 겨울방학부터 지금까지 하고 있습니다. 공부는 니코 선생님의 강의와 챌린지를 병행하면서 진행 중입니다.

2. 서비스 소개

저는 채용 리스트 페이지 구성을 직접 검색과 선택 검색으로 구분지었습니다. 직접 검색은 말 그대로 원하는 개발 분야와 관련된 채용 공고를 보고 싶을 때 검색어를 칠 수 있는 것이고 선택 검색은 디렉터리 모양을 클릭하면 여러분이 확인하고 싶은 개발 분야를 선택할 수 있는 것입니다. 제가 scrap한 채용 공고 사이트는 Stackoverflow, WeWorkRemote, RemoteOK 입니다. 검색을 하셨다면 각 채용 공고 사이트에서 추출한 데이터들(채용 공고 제목, 채용 공고 회사, 채용 공고 링크)을 확인하실 수 있고 각 사이트 별로 구분을 지어서 확인이 가능합니다. 검색 속도는 다른 분들이 한 것처럼 빠르게 할 수 있는 능력이 되지 않아서 니코 선생님과 함께 만들었을 때의 결과물과 똑같습니다.

3. 개발 과정 (어려웠던 점과 해결방법)

• HTML배치 및 클래스 작명

이 부분은 프로젝트를 만들 때 항상 고민되는 부분입니다.

하나의 document에서 제가 배치하고 싶은 요소들을 어떤 위치에 배치하고 margin, padding 간격을 어떻게 설정해야 디자인이 훌륭한 지를 꽤 고민을 하는 편입니다. 그 중에서 첫 페이지를 보시면 지구를 중심으로 웹 개발에 보편적으로 사용되는 언어들을 행성으로 표현해서 공전하고 있는 이미지가 있습니다. 'Welcome to Recruit List!' 바로 아래에 행성, 행성 궤도, 지구를 묶는 div 를 배치를 해봤는데 페이지의 왼쪽 아래로 예상치 못한 곳에 놓이게 됐습니다. 확인을 해봤는데 position 의 value를 absolute로 설정한 행성 궤도들의 right, bottom의 기본값의 절댓값이 0이 아닌 아주 큰 수로 설정 되어 있었습니다. 결국 일일이 right와 bottom 값을 조정해서 지금의 위치로 옮겼습니다.

class 작명은 BEM 규칙을 함께 활용해서 지어봤는데 해당 요소의 의미를 잘 살릴 수 있는 단어가 잘 안 떠올리고 영어가 잘 안 되는 사람으로써 이 부분에서 시간을 잡아 먹었습니다.

• 공전 애니메이션

이 행성들의 공전 과정을 어떻게 구현 시키느냐가 문제였습니다. 우선 css 만으로 시도를 해봤습니다. 각 궤도를 분리하고 각 궤도에 transform: rotateZ(360deg) 를 적용해서 실행을 해봤습니다. 궤도는 문제없이 회전은 되지만 문제는 궤도 상에 있는 행성들이 형태가 일그러지는 결과가 나타났습니다. 이 문제를 javascript로 해결해야 되는 부분인지 몇 시간을 고민해봤는데 사실 이 job scraper를 급하게 만들어서 제 역량 상 생략할 수밖에 없었습니다.

4. 앞으로 계획

급하게 만든 프로젝트이기 때문에 지금보다 더 재밌는 사이트를 만들지 못했습니다. 그래서 전 이 프로젝트를 계속해서 발전시킬 예정입니다. 자바스크립트로 공전을 한번 구현해 볼 것이고 검색 속도를 단축 시키고 특히 선택 검색 페이지에서 각 언어의 특성을 살려서 애니메이션을 넣어 줄 계획이 있습니다. 되게 많이 아쉽습니다 하하! 또한 지금까지 만든 프로젝트들을 반응형 웹 기능도 추가해서 멋지게 만들어보려고 합니다.

겨울방학에 진로를 확실히 설정한 덕분에 꽤 마음이 놓이고 제가 항상 개발공부를 할 때마다 살아있다는(?) 느낌을 받습니다. 제 목표의 끝은 풀스택 개발자이고요 몇 개월 간 프론트엔드 과정을 공부하고 이후 백엔드 공부를 해볼려고 합니다. 이 글을 읽으신 분들께 감사(?)하고요 디자인이나 코드 부분에 대해서 피드백 날려주시면 감사하겠습니다!