배포 페이지

https://jobscrapper.wolfye.repl.co/

1.자기소개

본격적으로 공부하고 있는 건 작년 7~8월부터 지금까지 쭉 공부하고 있는데요. 노매드 코더 사이트에서 로드맵을 따라 쭉 달리고 있습니다. 현재는 리액트 강의를 모두 듣고 있었고 얼마 전 원티드에서 프런트 앤드 개발자들을 모아서 가르치는 이벤트가 있었는데 선생님이 훌륭한 덕분에 합격해서 현재 진행 중에 있습니다!

2.기능

1.검색창에 영어만 칠 수 있게 자바스크립트 설정했습니다.

스택오버플로우에는 한글로 검색을 하면 검색 결과가 없어 오류가 나는 것을 방지하였습니다.

2.Flask 를 이용해 로그인 기능을 만들었습니다.

직업 검색에 의미가 있진 않지만 사이트에 애정을 담아서 연습하는 겸 만들어 보았습니다.

3.원하는 사이트 별로 혹은 모든 사이트의 검색 결과를 볼 수 있습니다.

input type="checkbox"를 통해 어떤 사이트에서 검색할지 site란 name으로 args로 보내주어 사이트별로 검색할 수 있게 하였고 db [word+site] = jobs를 통해 데이터베이스 또한 각각 관리해 주었습니다. 그리고 checkbox를 한 개씩 설정할 수 있도록 자바스크립트로 설정해주었습니다.

4.검색 결과에 회사의 로고 이미지를 볼 수 있습니다.

검색 결과에 회사의 SO 사이트에만 있는 회사 이미지를 보내주었고 Indeed 사이트에는 회사 이미지가 없어서 투명 PNG 이미지를 보내주었습니다.

5.python random 모듈을 이용해서 랜덤 rgb, 랜덤 좋아요 숫자, 랜덤 조회수를 보내주었습니다.

python에서 색도 랜덤으로 보낼 수 있나 했는데 random 모듈을 통해서 해결이 가능했고 좀 더 실제 같은 사이트를 만들기 위해 다른 요소들을 랜덤 값으로 보내주었습니다.

6.로딩 진행 상황을 사용자에게 알려주었습니다.

검색을 하다 보면 처음 사이트를 이용하는 사용자에게는 검색되고 있는 중인지 헷갈릴 것 같아 로딩 창을 구현해야겠다고 생각하게 되었습니다. 구현 방법은 setInterval을 이용해 진짜 진행상황이 아닌 가짜 진행 상황을 보여주었습니다.

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

리액트를 사용하다가 flask를 통해 html , css , javascript 를 사용하려다가 보니 header을 만들어서 search, home 템플릿 두 군데에 복사를 해야 해서 여간 귀찮은 게 아녔는데요. 해결 방법은.. 그냥 막일로 양쪽 모두 작업하면서 한 군데 바뀌면 서둘러서 다른 템플릿에도 붙여 넣기를 해주었습니다.

그리고 현재 WSL2 환경에서 작업을 하는데 처음에 VS 코드에서 작업을 하려고 모듈들을 깔려고 하였으나 제 pip가 망가져버려서 2~3시간을 pip 라이브러리가 설치되는 경로를 바꾸어보려고 노력만 하다가 편한 repl에서 작업하기로 결정했었습니다.

4.앞으로 계획

제 최종적인 꿈은 프런트, 백앤드를 모두 잘하는 개발자이고 디자이너인 여자 친구와 함께 창업을 해보고 싶은 꿈을 가지고 있습니다. 단기적인 목표는 프런트 앤드 리액트 개발자로 취직을 하는 것이지만 너무 마음이 급해서 아무 회사나 가기보다는 좀 더 제 능력을 인정받거나 배울 수 있는 회사에 취직하려고 합니다. 회사 취직 후에 결혼과 창업 모두 계획하려고 합니다

이렇게 좋은 콘테스트를 열어주셔서 감사합니다. 열심히 하게 되어서 공부도 더 잘 된 것 같습니다!