digestify
- 주제명(가칭): digestify(미정)
- 정의: ‘나중에 보기’ 요약해주는 크롬 익스텐션.
- 선정이유:
1) 현대인들은 많은 양의 정보를 보다보니, ‘나중에 보기’ 목록만 쌓일 뿐, 이를 활용하지 못함. 그러나 현실적으로 이를 다 보기란 불가능
2) 여러 기술을 적용해볼 수 있다. 크롬 확장, 스크래핑, AI, 대시보드- MVP: 유튜브 동영상 및 뉴스, 블로그와 같은 텍스트 요약, 하이라이트 지정 및 공유, 대시보드 GPT 탑재
- 기술스택: python, api, next.js
평소 다양한 컨텐츠를 접하면서 보고 싶지만 클릭까지는 이어지지 않는다던가, 시간이 없어 다음에 본다고 하고 결국 까먹는 경우가 많았다.
또한, 어그로성이 짙은 컨텐츠를 다루어 잘못된 정보에 노출될 우려가 있는 것들에 대한 필터링이 없다는 점에 대해 늘 아쉬움이 있었다.
이러한 필요성에 의해 탄생한 아이디어가 바로 digestify(가명)이다.
팀 그라운드 룰
- 일요일은 휴일
- 사정 불문하고 최대한 주어진 task에 대한 책임감을 보이기
- 시간약속 지키기. 못지킬 것 같으면 연락하기
- 코어타임: 14:00 - 22:00 특별한 사정이 없다면 출근해있기
- 시간내로 못할 거 같으면 전파하기. 못하면 폴백 핸들러가 동작할 거임
- 답변하기 좋게 질문하기 + 질문은 질문한 사람이 답변을 받아서 QnA에 남기기
기본적이지만 꼭 지켜야하는 규칙을 서로 상의하에 정했다.
알고리즘
팀 내에서 알고리즘 문제 출제 및 풀이 담당을 맡았다.
팀 목표가 취업인 만큼 알고리즘은 결코 좌시될 수 없는 중요한 토픽이기에, 책임감을 가지고 열심히 해보려 한다.
매일 2문제씩 풀고 매주 토요일에 챌린지 문제 1문제를 풀기로 했다. 부담스러운 양은 아니지만 쌓이면 분명 도움이 될 것이다.
references
Glasp : YouTube Summary with ChatGPT & Claude | Chrome Extension
https://www.youtube.com/watch?v=ZklhZNftv0c&t=6s
highlighters : 카정
https://github.com/SY-Highlighters
next.js 공부
이커머스 홈페이지 풀스택(12H)
https://www.youtube.com/watch?v=06g6YJ6JCJU
Tailwind
clsx, twMerge : https://www.youtube.com/watch?v=re2JFITR7TI
drizzle ORM
https://www.youtube.com/watch?v=fDjZOZ1Hgf8&list=PLhnVDNT5zYN8PLdYddaU3jiZXeOyehhoU&index=1
web scrapping
Puppeteer : https://www.youtube.com/watch?v=uOF6RzKPutE
playwright :
useQuery
https://www.youtube.com/watch?v=yVsaCVEfPn4
https://www.youtube.com/watch?v=n-ddI9Lt7Xs
https://www.youtube.com/watch?v=VtWkSCZX0Ec&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=2
props로 넘겨주기hydrate(safe with SEO)useSuspenseQuery
크롬 익스텐션 구현
-
보완 중 : 유튜브 창을 스크롤 다운하면 새로운 동영상이 뜨는데 이 동영상들에게는 ‘D’ 버튼이 추가되지 않는 문제가 발생함
→ 보완 완료 : MutationObserver로 랜더링 감지해서 함수 호출함 -
보완 중 : 동영상마다 존재하는 icon이지만 그 동영상의 url을 보내야해서 clickEventListener를 매번 클릭마다 교체되도록 로직을 구성함. 다시 말해, 버튼은 여러개지만 1개의 이벤트리스너를 동작시키고 있음. 즉 모두 같은 버튼임. 그렇지만 url을 교체함으로써 다른 버튼처럼 동작시키고 있음. 이것이 최선인가?
-
보완 중 :
chrome storage API를 사용하면 현재 계정이digestify한 동영상의 url 목록을 저장하여 다음에 또 눌렀을 때 새로 요약을 하는 것이 아니라 기존에 저장된 데이터를 보여주거나 이미 있다는 신호를 보내도록 하는 것도 괜찮을 듯
- 크롬 익스텐션 -> 웹서버로 fetch
게시글 참조 : https://velog.io/@filo/nextjs-14-POST-method-with-google-extension
폴링, SSE, WebSocket
- 내가 digest 누른 동영상이 웹페이지에서 스피너를 돌며 가공중이라는 것을 표현해야 함
- 내가 팀 스페이스로 공유하기를 누른 동영상이 팀원들에게 보여져야 함
