[오늘의 회고]

 

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 라이브러리 사용시 나타나는 에러 (삭제할 때)
  • 로그인 회원가입 데이터 저장 오류

 

'TIL (Today I Learned)' 카테고리의 다른 글

[11] TIL 알고리즘 시작  (2) 2022.11.19
[10] TIL 미니프로젝트 발표  (0) 2022.11.18
[08] TIL 미니프로젝트 시작  (2) 2022.11.15
[06] TIL Java 열거 타입, Git  (0) 2022.11.13
[05] TIL Java 참조 타입, 배열  (3) 2022.11.12

※ 기획서 - https://www.notion.so/2-1-Mini-Project-eb4f6367a5e74ccf891f2bf336e21112

① 주제 : 카타르 월드컵 일정/응원 ⚽

② 구현해야하는 기능

③ CSS

  1. head 폰트 :
  1. 세부 폰트 : https://fonts.google.com/specimen/Do+Hyeon?subset=korean
  2. bootswatch https://bootswatch.com/united/ (dark 버건디 색상 , secondary 그레이 색상 참고)
  3. 버건디 색상 번호 : #772953

④  page url

  • login.html
  • signup.html
  • main.html
  • main/name_of_match
  • review.html

 

1. 와이어 프레임 

<< 플로우 차트 >>
1. 로그인 페이지
2. 회원가입 페이지
3. 메인 페이지
4. 응원댓글 페이지 하단
5. 응원댓글 페이지 하단

 

2. 미니 프로젝트 화면단 

 

1. 로그인 페이지
2. 회원가입
3. 메인페이지
4. 댓글 페이지 (상단)
5. 댓글 페이지 (하단)

[오늘의 회고]

 

1. 어려웠던 부분 : 오늘부터 새로운 팀원들과 미니프로젝트가 시작되었다. 그런데 우리팀은 모두 극 초급자라 당황스러웠다. 나머지 팀원 분들은 늦게 합류하셔서 사전 프로젝트 경험도 없으시고, 나도 너무 부족해서 막막... 일단 기획안을 18시 까지 제출해야 했기 때문에 다른 사람들의 기획안을 참고하고 이전 사전프로젝트 기획안을 참고해서 노션페이지를 만들어 보았다.

 

와이어프레임을 만들기위해 피그마를 써보려다가 보다 직관적인 카카오 오븐앱을 사용해 구현했다. bootswatch를 사용해 화면단을 만들고 네이버 카타르 월드컵 페이지에서 크롤링을 시도했는데, 계속해서 실패했다. 저녁 8시 부터 하다가 중간에 기술매니저님도 도움을 주시려 하셨지만 결국 못하고, 새벽 한시가 넘어서까지 같은조 용문님이랑 낑낑대니까 지나가던 능력자 신원님이 화면공유를 하시며 도와주셨다. 체크아웃 하려고 시간을 보니까 이미 17시간이 지나고 있었다. 정말 극 피곤한 오늘... 그래도 크롤링 구현을 보고 자서 마음이 놓인다.

 

2. 느낀 점 : 오늘 여러모로 도와주신 같은 반 분들에게 너무 감사하다. 나도 내가 누군가를 도와줄 수 있다면, 도와주는 사람이 되야겠다! 부족한 만큼 꾸준히 열심히 하는 팀원이 되야겠다.

 

3. 새로 알게 된 내용 : 오늘은 와이어프레임을 만드는 오븐앱이라는 툴 사용법을 익혔다. 생각보다 사용이 쉬워서 다행히도 빨리 끝내고 화면단 작업을 할 수 있었다. 그리고 JWT토큰 세션을 통해 모호했던 원리를 좀 더 이해할 수 있었다. 마지막으로 크롤링을 어떻게 하는게 정석인지 큰 틀을 배울 수 있었다. 

 

4. 셀프칭찬 

  • 와이어프레임 시도해본 나 칭찬해
  • 화면단 만드는 속도 예전에 비하면 빨리 늘어난 나 칭찬해
  • 나도 부족한데 다른 팀원 가르쳐주는 나 칭찬해
  • 끝까지 사이트 바꿔가면서 크롤링이랑 사투한 나 칭찬해 
  • 잘했다 잘했어 
  • 근데 내일부터는 징징대지 말자.

 

5. 내일 할 일 : 서버단에 크롤링 구현하기, 크롤링 코드 공부하면서 주석달아서 블로그 업로드, JWT토큰 구현하기

 


[오늘 공부한 부분]

 

1. 미니프로젝트 기획 : (https://www.notion.so/2-1-Mini-Project-eb4f6367a5e74ccf891f2bf336e21112)

  - 와이어프레임 https://ovenapp.io/ 사용해서 만들기

2.  프로젝트 화면단 만들기

3. JWT 토큰 세션 (18:00-19:00)

4. 크롤링 삽질 + 같은 반 능력자님 도움으로 코드치는거 구경 :) 

 

 

https://leejincha.tistory.com/91

 

[01] 와이어프레임, 화면단

1. 와이어 프레임 기획서 - https://www.notion.so/2-1-Mini-Project-eb4f6367a5e74ccf891f2bf336e21112 2. 미니 프로젝트 화면단

leejincha.tistory.com

 

[오늘의 회고]

 

1. 어려웠던 부분 : git commit 되돌리기에서 amend 와 revert 부분이 헷갈렸다. 그리고 깃허브 프로필 테마설정이 마음처럼 되지 않아 결국 오늘은 포기했다. 마크다운 에디터인 MarkText도 사용해 보려고 했는데 자꾸 mac appstore에서 다운 받은 앱이 아니라며 오류가 생겨서 결국 깃허브 프로필을 꾸미지 못했다 ㅠ

 

2. 느낀 점 : 대부분의 프로그램들이 homebrew 주소를 복사해서 터미널 창으로 다운받게 되어있는데, 아직도 터미널창 사용이 너무나 어색하다. 터미널 창이 어떻게 해야 익숙해 질 수 있을지 알아봐야 겠다.

 

3. 새로 알게 된 내용 : 오시영 튜텨님의 github 3주차 강의 덕분에 깃허브 사용 꿀팁들을 많이 배울 수 있었다. 

  • 깃허브 인기 개발자 구독하기 - 코드 공부 + 좋은 프로젝트 구경
  • 트랜드나 기술 검색해서 정보 확인하기
  • 깃허브로 프로필을 만들고 프로젝트 관리해서 포트폴리오로 활용하기
  • 오픈소스 참여해보기 (기여)
  • 더 좋은 프로필을 만들기 위해 마크다운 사용법 익혀보기

 

4. 셀프칭찬 : 오늘 분명히 푹 쉬기만 하려고 했는데, 약속을 끝내고 저녁부터 공부한 나 칭찬한다. 쉬는 날도 무조건 나가서 콧바람을 넣어줘야하는 내가 지난 6일 동안 약속도 없이 공부만했다는 것이 놀랍다. 앞으로 익숙해 지겠지만, 하 ~ 정말 힘들었다 지난주. 오늘 만난 친구도 내 성향을 알기 때문에 내가 얼마나 답답해할지 알아줘서 고마웠다. 여튼 ! 벌써 11월 2주가 흘렀다. 이 기세라면 4개월 금방 갈 것 같은데, 집중하자 집중 ! 

 

5. 내일 할 일 : chap06 , git 3주차 나머지 부분 블로그정리, 그 후엔 9시 발제 들어보고 정하기 ! 

 


[오늘 공부한 부분]

 

https://leejincha.tistory.com/87

 

Github 연습 (Issue생성, 로컬 repoBranch 생성, PR, Merge)

다음 주 미니 프로젝트가 시작되기 전에 점검차 스터디 팀원들과 github협업 연습을 했다. 아직 깃허브로 협업하는 과정이 익숙하지 않아 명령어로 진행해야 하는 Terminal을 사용하지 않고 비교적

leejincha.tistory.com

https://leejincha.tistory.com/88

 

Git - PR(Pull Request, amend, revert, reset, stash)

PR (Pull Request) ① PR(Pull Request) 내 작업내역을 바로 merge 하지 않고, 참여하고 있는 프로젝트에 내 작업(branch)를 merge해달라고 요청하는 것. PR 메시지엔 항상 #이슈번호를 포함해 준다. 협업하는 사

leejincha.tistory.com

 

PR (Pull Request)

PR(Pull Request) 

  • 내 작업내역을 바로 merge 하지 않고, 참여하고 있는 프로젝트에 내 작업(branch)를 merge해달라고 요청하는 것. 
  • PR 메시지엔 항상 #이슈번호를 포함해 준다. 협업하는 사람들과 의사소통임을 기억하자 !
  • 내가 참여하고 싶은 오픈소스 프로젝트가 있다면 코드를 작성해서 PR을 보내볼 수도 있다. 내가 다른 사람 소스를 사용하는 것을 넘어서 프로젝트에 참여할 수 있게 되는 것!  ( Github repo 의 contribution 페이지에 기여한 사람들 정보를 적어두기도 한다. )
  • 내 컴퓨터에서 명령을 내려서 PR 을 하는 방법도 있지만, Github 페이지에서 PR 하는 것이 훨씬 직관적이므로 통상적으로, Github repo 페이지에서 PR 한다.

       + 오픈 소스 예시 : 주니어 개발자 채용 정보( https://github.com/jojoldu/junior-recruit-scheduler )

 

 

② 로컬 repo로 fetch(페치)후 pull 해오기

  • pull은 commit 내역을 가져와서 로컬 branch 에 commit 을 합친다면, fetch 는 연결되어있는 원격 repo 의 commit 내역을 가져만 온다. 원격 repo 의 commit 내역을 합치지 않고 보기만 할때 주로 사용한다.
  • PR 은 리뷰하는 과정을 통상적으로 포함한다. 아래와 같은 상황에서는 PR 후에도 추가적으로 commit을 해야할 경우가 있다.
    • 리뷰에서 추가 수정을 요청받거나
    • PR 을 그대로 merge한다고 했을 때 merge conflict 가 나는 것을 미리 고치기
    • 따라서 PR 이 완료되기 전까진 PR 요청을 한 로컬 브랜치를 삭제하지 않도록 한다 ! PR 이 반영되기 전 추가 commit을 해야한다면, 로컬 branch에서 commit 후 원격 branch에 push해서 변경된 내용을 반영한다.

 

fork(포크)

  • 원본 소스코드를 복사해서 새로운 독립적인 소프트웨어로 개발하는 것
  • 마치 어떤 문서를 복사해서 그 위에 내가 원하는대로 수정해서 사용하는 것과 비슷한다.
  • repository 의 사용권한이 다른 사람에게 있을 때, 예를 들면 많은 사람들이 참여하는 오픈소스처럼 내가 소유하고 있는 repo 가 아니더라도 프로젝트 제안할 때는 일단 프로젝트의 내용을 내 공간으로 가져와야 한다.
  • 원본 repo를 내 공간으로 fork 해 온 후 PR을 날린다.
  • 내가 merge 할 권한이 없으므로 repo 관리자의 merge pull request (PR merge하기) 를 기다려야 한다.

 

amend - 최신 commit 고치기

amend : 최신의 commit을 수정하는 것.  amend 로는 가장 최신의 commit 만 고칠 수 있다.

 

① push 전 amend

  • 아래 그림과 같이 file status 로 가서 오른쪽 하단의 옵션에서 마지막 커밋 수정을 클릭하면 된다.

 

② push 후 amend

  1. 상단 메뉴바 - sourcetree - Preference 에 들어간다.
  2. Advanced - force push 를 선택
  3. amend 를 해서 commit 메시지를 수정한다.
  4. 강제 푸시 옵션을 선택하고 푸시한다. 상단 push 를 누른 후 뜨는 창에 강제 푸시 옵션을 체크!

  • 강제 푸시 옵션꼭 필요할 때만 나 혼자만 작업하는 branch에서 사용해야한다.
  • 다른 사람이 내가 수정하려고 한 commit 을 pull 하지 않은 상태여야한다.
  • 그렇지 않으면 다른 사람의 작업내역이 모두 꼬이기 때문에 다른 사람들은 기존에 작업하던 프로젝트를 지우고 새롭게 프로젝트를 clone 해야하는 상황이 발생!
  • 일반적인 push 를 할 때는 강제푸시 옵션에 체크가 되어있지 않는지 꼭 확인하기 !

 

Revert, Reset

① Revert

  • 앞서 배운 amend로 되돌리기는 가장 최신의 commit 만 되돌릴 수 있다. 그리고 어떤 걸 되돌렸는지도 알 수 없다.
  • 다른 사람들과 같이 협업하고 있다면 어떤 내용이 되돌려졌는지 기록으로 남기는 것도 중요
  • 어떤 내용을 되돌렸는지 새로운 commit을 남기는 것revert(리버트) 라고 한다. 최신 commit 뿐만 아니라 이전에 했던 commit 도 revert 로 되돌릴 수 있다!
  • sourcetree 에서 되돌리고 싶은 commit 누르고 우클릭 - 커밋 되돌리기를 선택. 아래 같은 팝업창이 뜨면 확인/예 클릭.

 

 

② Reset

  • reset (리셋)은 commit 했던 작업내역을 말 그대로 리셋시키는 것
  • reset 에는 세 가지 모드가 있다.
    • soft : commit 들을 되돌리고 변경된 파일 작업 내역은 보존해서 파일 변경사항으로 보여준다. 이때 변경사항은 add 되지 않은 상태로 보인다.
    • mixed :commit 들을 되돌리고 변경된 파일 작업 내역은 보존해서 파일 변경사항으로 보여준다. 이때 변경사항은 add 된 상태로 보인다.
    • hard : commit 들을 되돌리고 그동안 작업했던 모든 것도 없애버린다. 즉, 작업내역을 복원할 수 없다.
  • 히스토리를 남기지 않고 변경하는 것이므로 강제 푸시를 해야한다. 그렇지 않으면 변경내역 이력이 남게 됨.
  • 꼭! 나 혼자 작업하는 branch 에서만 해야한다! 협업하는 브랜치에 작업을 하게 되면 다른 사람 작업내역이 꼬여버리는 대참사 !

 

Stash

  • stash 는 숨겨두거나 넣어둔다는 뜻 - 프로젝트의 변경사항을 임시적으로 보관해둘 때 사용
  • 예를 들면, 다른 branch 로 체크아웃 하는 경우 현재 branch 의 변경사항이 사라지게 된다. 아직 작업 중이라서 commit 하지 않고 변경사항만 보관해두고 싶을 때 commit 대신 stash 를 사용
  • commit 한 적이 없는 파일이라면 stash 하지 않아도 된다.

1. 스태시를 사용할 브랜치에 체크아웃 되었는지 확인

2. 파일 상태를 먼저 확인하고 나서 상단 메뉴바에서 스태시 클릭

3. 창이 뜨면 stash에 대한 설명을 적어준다. (나중에 어떤 내용을 임시 보관했는지 알 수 있도록 메시지를 잘 적어주기)

4. 스태시 버튼을 누르면 임시 보관 완료! 

5. 다시 임시 보관 내용을 꺼내고 싶을 때는 :  왼쪽 메뉴바에서 [치워두기] - [원하는 파일] 선택 후 우클릭하고 [스태시적용]을 눌러준다.

6. 만약 더 이상 임시 보관한 내용이 필요가 없다면 스태시 삭제를 눌러준다.

 

 

 

마지막으로 꼭! commit 을 되돌리는 작업은 나만 사용하는 branch 에서만 작업을 해야한다! 그렇지 않으면 다른 사람의 commit history 가 엉망이 될 수 있다. 기억하기 !!! 

+ Recent posts