[09] TIL 미니프로젝트 2일차 - (BE작업) 크롤링, 동적 라우팅, 로그인

[오늘의 회고]

 

1. 어려웠던 부분 :

 

① 파이썬 코드 자바스크립트로 바꾸기 + mongo db 저장 오류 

어제 잠들기 전에 파이썬으로 크롤링 구현을 시현해주신 다른 팀원분의 코드를 보고 다시 구현을 해보려 했다. 그러나 파이썬 언어는 공부해 본 적이 없어서 어떻게 크롤링으로 가져온 값들을 추출해서 몽고디비에 저장해야할지 몰라 오전 내내 구글링으로 애를 먹었다. 아무리 다른 언어라도 뭔가 구조는 비슷해보여서 배웠던 자바스크립트문으로 조금씩 하나씩 바꿔보았다. 한마디로 또 삽질을 시작했다. ^^ 그러다 성공을 하긴 했는데 이젠 몽고디비 계정이 문제였다 ! 뭐가 문제인지 데이터 저장이 안되서 뭔가 잘못된줄알고 몽고디비 아틀라스도 다시 폭파시키고 새로 팠다 .. 후 ^^ 새로 했더니 성공 ! 

 

② 메인페이지 크롤링 정보 추출해서 세부페이지로 옮기기

두번째 난관은 메인페이지에서 크롤링해서 가져온 경기박스를 클린하면 세부페이지로 이동시키고, 그 클릭된 박스 하나만 가져오는 작업이었다. 어제 큰 도움을 주신 신원님과 개발 매니저님이 몽고디비에 있는 '_id' 를 이용해 필요한 데이터만 추출해서 구현하라고 힌트를 주셨지만 아무리 구글링을 하고 글을 읽어봐도 잘 이해가 되질 않았다 ㅠ 그래서 결국 좀 더 쉬운 방법으로 구현을 하게 되었다. 은솔님이 처음부터 끝까지 도와주셨는데, 일단 크롤링을 함과 동시에 데이터마다 숫자를 값을 부여해서 사용하는 방법이이었다. 웹종강의 중 버킷리스트 작업과 비슷한 방법이었는데, 좀 더 다른 코드와 상수값이 필요했다. 

 

③ JWT 사용 토큰 페이지 mongodb 저장 오류

하 ~ 어찌 저찌 거의다 했는데, 이제 마지막으로 로그인 회원가입 데이터 암호화 처리 작업만 남았다. 이미 기술매니저님이 시현해 주시고 코드를 공유해주신 상태라 쉬울 줄 알았는데, 부트스와치에서 버튼을 가져와서 그런지 onclick함수를 버튼에 넣었을때 코드가 망가지는 것 같은 (?)  모양을 띄었다. 시간이 너무 늦어서 결국 고치지 못하고 잠들었는데, 만약 진짜 부트스트랩, 부스트와치에서 버튼을 가져온게 문제라면 다시 화면단을 직접 만드는 작업을 해야할 것 같다.

 

 

2. 느낀 점 : 산넘어 산이라고 오류의 연속이지만, 나만 그런게 아니라 다들 겪는 과정인 것 같다. 뭔가 전쟁터에 나간 동지같은 느낌 ㅋㅋ 그리고 너무 많은분들이 같이 고민하고 해결을 도와주려 해주셔서 감동했다. 나도 누군가에게 알려줄 수 있는 실력으로 성장하기를 ! 그리고 그날의 오류는 그때 그때 정리해서 기억하는게 좋을 것 같다. 시간이 없어서 일단 작업에만 몰두했더니 오류 스크린샷이 없어서 정리하기가 불편하다.

 

3. 새로 알게 된 내용 :

• from bson.objectid import ObjectId 사용법 ( 완전히 이해는 못했다. 다시 봐바야함 + find_ond() 참고
• 페이지이동 동시에 필요한 db만 추출해서 옮기는 방법

const param = window.location.search;
const paramData = new URLSearchParams(param)
const id = paramData.get('id')

+

url: '/show/detail?id=' + id,

• 오류가 생길땐 그냥 엎어버리자 ^^ - 몽고디비 새로 갈아엎고 다시 디비저장 잘 되는데, 그 과정까지 너무 고생했다.
• 작업 파일은 무조건 그때그때 깃헙이든 백업파일에 저장하자. ( 오늘 갑자기 라이브러리 중첩 오류로 심장 떨어질뻔함 )

 

4. 셀프칭찬 : 내가 할 수 있는 만큼 최선을 다하고 있는 것 같다. 대단한 작업물을 만들 수 있는 수준은 아니지만, 그래도 0부터 10까지 혼자 작업을 해 볼 수 있어서 좋은 성장의 한 주가 될 것 같다.  

 

5. 내일 할 일 : 로그인 회원가입 페이지 서버단 만들기, UI 손보기, 깃허브에 코드 업로드 ! , 어제 새로 알게 된 정보 블로그 정리

 

---

[오늘 공부한 부분]

 

1. 미니프로젝트 서버단 작업 : 크롤링, 데이터 저장, 특정 데이터 추출

2. 블로그에 정리해야할 부분 :

• 크롤링 코드 비교 ( 파이썬 vs 자바스크립트, select() 와 find() 차이 ) 
• mongoDB 콜렉션 안에 필요한 데이터만 추출해서 다른 html에 적용하는 법
• 부트스와치 사용법 (페이지 정리 + 복사해야할 코드 정리)
• 페이지 이동과 데이터 이동 동시에 하는 방법
• 오류 스크린샷 정리 
• from bson.objectid import ObjectId 라이브러리와 mongodb 라이브러리 사용시 나타나는 에러 (삭제할 때)
• 로그인 회원가입 데이터 저장 오류