크랩북 프로젝트 리뷰

나는 이걸 왜 하는가?

• 서버/클라이언트 통신을 경험하기 위해
• GIT 협업을 익히기 위해

기획의도

• 언젠가 읽으려고 열어둔 탭과 저장해둔 북마크는 쌓여가는데 정리가 안 되어 읽지 않는 문제를 해결하자
• 링크를 스크랩북처럼 간단한 메모와 해시태그로 꾸며주자
• 드래그앤드롭으로 간편히 관리할 수 있는 칸반보드 형태로 제공하자

프로젝트 결과물

• 크랩북 레포
• 

삽질의 과정

CORS 너어는 정말…

• 내가 맡은 해시태그 기반 추천사이트 제공기능은 다음과 같은 순서를 따른다.
  • 렌더링 시 서버에서 모든 링크들을 받아와 state 객체에 갱신한 이후, 모든 링크들의 hashtags를 받아 그 중 몇개를 랜덤하게 뽑아낸다.
  • 뽑아낸 hashtags를 서버에 보내 구글검색 쿼리스트링에 담은 검색 페이지 url을 만든다.
  • 검색결과 페이지를 스크래핑해서 그 중 하나의 링크를 랜덤으로 골라 제공한다.
• 렌더링하느라 서버 다녀왔는데 추천사이트 때문에 또 서버를 가? 그냥 클라이언트에서 바로 검색API를 찔러서 보여줄 수는 없을까?
  • 안 돼. 그럴 생각 없어. 돌아가.
  • 클라이언트에서 외부 API를 직접 찌르는 경우 API 서버와 origin이 다르기 때문에 에러가 난다.
• 해결하려면 두가지 방법이 있다.
  • 프록시 서버 써서 브라우저에서 에러 안나도록 해주기
  • 그냥 서버에서 처리하기
• 추천사이트 링크 하나 띄우는 데에 프록시서버까지 쓸 마음의 여유가 없었기 때문에 그냥 후자를 선택하고, 대신 렌더링 때 바로 추천사이트를 띄워 서버를 왔다갔다 하기보다는 추천사이트 클릭 시에만 해당 요청이 가도록 로직을 수정했다.

회고

• 감기 때문에 죽다 살아난 한 주였는데, 팀원들이 하드캐리해서 묻어갔다.
• 팀원 한 명이 링크 카드를 클래스로 만들어서 엄청 편리하게 했는데 충격적일 정도로 인상깊었다. 한 명이 잘 만들어놓으면 네 명이 편하다니…
• 웹스크래핑이 옛날에는 큰 과제였는데 이제 무섭지 않아져서 다행이다.