즐겁게, 코드

뷰로 크롬 익스텐션을 만들 일이 생겨 구글링을 해봤는데, 생각보다 리소스가 훨씬 적어 놀랐습니다. 😂 그래서 제가 이전의 경험을 살려 간단하게 정리해봤습니다. 크롬 익스텐션에는 크게 두 가지 종류가 있는데, 브라우저의 새 탭을 익스텐션으로 대체하는 탭 타입과 아이콘을 클릭하면 익스텐션이 동작하는 팝업형 타입이 존재합니다. (사실 따로 부르는 명칭은 없습니다...) 크롬 익스텐션의 심장은 바로 manifest.json 파일입니다. { "manifest_version": 2, "version": "0.0.1", "browser_action": { "default_popup": "index.html", "default_title": "Open the popup" }, "short_name": "Popup", ..

강의 링크 : https://classroom.udacity.com/courses/ud884/ 웹 최적화 기법과 브라우저의 원리에 대한 괜찮은 강의가 하나 있어 공유해보고자 합니다! 바로 유다시티의 Website Performance Optimization 무료 강의인데요, 브라우저가 화면에 페이지를 렌더링하는 과정 및 페이지 반응속도를 향상시키기 위한 여러 기법들에 대해 배울 수 있습니다. Vue나 리액트 등 특정 기술에 한정된 내용이 아닌 어떻게 보면 개발자의 기본 소양과도 같은 "최적화" 기법에 대해 익히기 좋으실 듯 한데요, 간단한 맛보기 퀴즈를 하나 보여드리겠습니다. 사진의 세 렌더링 프로세스는 각자 다른 방식으로 자바스크립트를 불러온 결과물인데요, 각 보기가 어떤 방식으로 스크립트를 불러온 것..

Notion API로 데이터베이스 불러오기 0. 공식 문서 링크 포스트의 내용이 제대로 동작하지 않으면 한번 공식 문서를 탐험해 보세요! 오늘은 노션 데이터베이스 목록을 불러오는 방법을 소개해 보겠습니다. 아직은 노션 API가 베타 버전이라 그런지, 관련 포스팅이 거의 없어 이번 기회에 정리해보고자 합니다! # API 요청 형태 curl 'https://api.notion.com/v1/databases/"$데이터베이스 아이디"' \ -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \ -H 'Notion-Version: 2021-05-13' 1. Notion API Key 발급받기 노션 공식 API의 키는 https://www.notion.so/my-integration..

Next.js가 페이지를 생성하는 방법에는 static generation과 server-side rendering 방식이 있음은 알고 계실 것입니다. 이 중 static generation은 항상 정적인 데이터만을 다루는 것처럼 보일 수 있는데, 꼭 그렇지만은 않습니다. 오늘은 아마 많은 분들이 모르실 수 있는 Incremental Static Generation에 대해 다뤄 보겠습니다. Incremental Static Re-Generation (ISR) getStaticProps 함수를 활용한 static generation 방식은 언제나 빌드 시점 에 페이지를 생성하지만, ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성합니다. export asyn..

"프론트엔드 개발자라면 내 테마정도 한번은 만들어 봐야지" 라는 헛된 생각으로 시작한 Gatsby 블로그 프로젝트가 있는데요, 이 블로그에는 정말 정말 치명적인 문제가 하나 있습니다. 바로 매번 들어갈때마다 메인 아이콘 이미지들이 약 1 ~ 2초간 로드된다는 문제로, 얼핏 보면 대수롭지 않아 보이지만 매번 저렇게 1 ~ 2초간 블러 이미지를 보게되면 "왜 캐싱이 되지 않은거지?", "netlify 서버가 느려서 문제인가?" 등의 생각이 들면서 답답함이 밀려옵니다. 다만 오늘 우연히 원인을 발견해 개선할 수 있었고, 그 내용을 간단하게나마 기록으로 남겨보려 합니다. 🛠 이미지 최적화를 통한 로딩시간 개선 시도 먼저 이미지 최적화를 위해서는 PNG보다는 무손실 압축 포맷인 JPEG를 사용하는것이 효율적이지만..

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다. 오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다. type userType = { id: number; email: string; password: string; firstname: string; lastname: string; }; 여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다. 하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다. type userType = { id?: number; email?: string; password?: string; firstname?: st..

타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분인데요, 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 같은 특이한 타입들이 존재하기 때문입니다. const onChangeEmail = e => { setEmail(e.target.value); }; 위 코드의 이벤트 콜백 인자 e의 타입은 과연 무엇일까요? 아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any타입을 사용하시는 분도 많을 텐데요, 정확한 답은React.ChangeEvent입니다. 이걸 도대체 어떻게 알까 싶지만, 사실 여기에는 규칙이 하나 있습니다. 이벤트에도 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있음은 아실텐데요, 이 중에서 사용할 이벤..