크롬 익스텐션이 어떤 식으로 작동하는지를 먼저 알아볼 필요가 있다. 아래 공식 문서를 바탕으로 기본적인 내용을 훑고 개발에 착수하였다. https://developer.chrome.com/docs/extensions/mv3/getstarted/ Chrome Extensions getting started guides - Chrome Developers Overview of all Chrome Extensions getting started guides. developer.chrome.com # 크롬 익스텐션 구조 크롬에서 제공하는 가장 기본적인 파일 목록을 살펴보면 다음과 같다. 이 중 가장 기본이 되는 파일은 maifest.json으로 해당 파일이 root에 있어야만 익스텐션이 동작한다. 해당 파일을 ..
요즘 이것 저것을 공부하며 참 유튜브를 많이 본다. 하지만 내 신경을 거슬리게 하고 손가락을 귀찮게 하는 것이 하나 있었으니... 유튜브 화질이 계속 360p로 고정되어 매 동영상마다 화질 설정을 위해 무려 세 번이나 클릭을 해야 한다. 이것을 크롬 익스텐션을 이용해 해결할 수 있다는 검색 결과가 있었으나 가장 상위에 노출되는 익스텐션의 리뷰를 보니 아마도 불순한 의도가 심어져 있거나 유튜브측에서 이런 꼼수를 막아놓은 듯 하다. 고로 직접 만든다. # 1차 시도 1. response로부터 유튜브 영상의 화질 정보 리스트를 가져온다. 2. 그 중 가장 높은 화질로 재생되도록 query를 보내 최고 화질로 설정한다. 유튜브 화질 리스트 정보 유튜브의 선택 가능한 품질 정보는 하위 의 ytInitialPlay..
Next.js는 server-centric routing + client-side navigation 이다. sever-centric의 장점으로는 client가 route map을 필요로 하지 않으며, server는 server component로 route map을 대체할 수 있다는 것이다. 한편 client-side navigation은 SPA와 같은 동작을 가능케 하며, 새로운 route 접근 시 전체 페이지의 리로드 없이 URL 업데이트와 필요한 component의 re-render만 수행해 효율성을 가져갈 수 있고, client-side cache를 사용할 수 있다는 장점이 있다. # Link Component React component로 HTML element의 확장이다. route 간 cl..
# Pages and Layouts Next.js는 app routing convention에 정의된 이름을 가지는 파일들로 계층 구조를 형성한다. 그 중 가장 중요한 두 가지 요소는 page와 layout이다. page: 각 route에 unique해야하며 각 route subtree의 leaf이다. layout: 여러 페이지에 공유되며 navigation 시 layout의 state는 보존된다. root layout: 가장 윗단 layout, 즉 app 폴더 내 layout은 root layout이라 칭하며 항상 과 를 가져야 한다. Layout 컴포넌트는 Page 컴포넌트를 감싸고 있다. 실제로 app directory의 layout.tsx와 page.tsx를 다음과 같이 작성한 후 개발자 도구에서..
# Routing 라우팅은 request가 그것을 다루는 코드에 전송하는 메커니즘으로 정의된다. 즉, 네트워크 상에서 요청을 어떠한 경로로 보낼지 선택하는 프로세스이다. Next.js version 13부터는 React Server Components에 기반한 'App Router'를 사용하고 있다. 따라서 기본적으로 app directory 내부의 component는 React Server Component로 취급된다. (client component를 만들고자 할 때에는 'use client' 명령어를 사용해야 한다) Next.js에서 server component를 default로 사용하는 이유는 server infrastructure를 활용해 성능 향상을 도모할 수 있기 때문이다. 예를 들어 da..
# What is Next.js? React library를 기반으로 한 web application framework 다음과 같은 특징을 가짐 file-system based router client-side rendering & server-side rendering, static & dynamic rendering 지원 fetch() API를 통한 parallel and sequential data fetching, automatic deduping 둥 기능 지원 image, font, script optimization TypeScript, CSS, Tailwind CSS, SASS, CSS-in-JS 지원 # Prerequisites Node.js 설치: https://han-py.tistory..
