소이의 개발이야기

서론웹 폰트는 사용자 경험에 직접 영향을 미칩니다. 큰 파일 크기는 LCP(Largest Contentful Paint) 같은 Core Web Vitals 지표를 악화시킵니다. 특히 한글 폰트는 영문 폰트보다 문자 수가 많아 파일 크기가 큽니다. 따라서 적절한 폰트 파일을 import하여 사용자 경험을 향상시켜야합니다.이 글에서는 브라우저 폰트에 대한 개념을 알아보고 Next.js + tailwind 프로젝트에 Pretendard 폰트를 적용하고 최적화한 경험을 다룹니다. 본론1. 폰트 포맷의 진화: woff vs woff2웹 폰트 포맷의 역사웹 폰트는 TTF/OTF, EOT(IE 전용), WOFF, WOFF2로 진화했습니다 WOFF2는 가장 높은 압축률로 더 작은 파일 크기를 가져 빠른 로딩 속도를 가..

안녕하세요!네이버 프런트엔드 개발자 모임(H26y & FE News) 에서 주관한 "[FE Ground] AI × Front-End: 코딩의 미래를 묻다." 밋업에 다녀왔습니다. 8월 29일 금요일 네이버 D2SF에서 열렸습니다.50명을 선발했는데 1200명 넘는 분이 지원해주셨다고 하네요. 이 밋업을 신청할때 제가 가지고 있었던 고민은 'AI를 사용해볼수록 AI를 어떻게 활용할지가 중요한 것 같은데, 주니어 개발자로서 AI는 가지지 못하는 개발자의 차별점은 무엇일까?' 였습니다. 이 내용을 지원동기에 녹여냈고 좋은 기회로 다양한 세션을 듣고 이 질문에 대한 답을 내릴 수 있었습니다. [식사 및 네트워킹]퇴근 후 바로 참석했는데, 식사를 제공해주셨습니다!서브웨이를 먹으면 같은 테이블에 앉으신 분들의 일..

카카오임팩트에서 진행하는 '테크포임팩트 LAB 2기' 에 참여하게 되었습니다.글또에서 테크포임팩트 모집 홍보글을 보게 되어, 서류와 커피챗 과정을 거쳐 LAB에 합류하게되었습니다. 7월 19일(토) 카카오 판교 아지트에서 킥오프가 열려 약 130명의 기술자와 사회혁신가가 모였습니다. 킥오프는 3가지 순서로 진행됐습니다.1. 테크포임팩트 소개테크포임팩트 LAB 은 카카오임팩트와 모두의연구소가 함께 진행하는 프로젝트로 약 5개월간 사회혁신가와 IT 전문가가 모여 세상의 변화를 돕는 기술을 만듭니다.테크포임팩트가 만들어내는 기술은 'Undone Science' 개념과 연관되어 있습니다.Undone Scince자금이 부족하거나, 미완성이거나, 일반적으로 무시되지만, 사회 운동이나 시민사회 조직들이 더 많은 연구..

서론input이나 textarea와 같이 텍스트 입력을 처리하는 HTML 요소로 한글을 입력할 때 원하는 대로 동작하지 않는 상황이 있습니다. 아래 vue로 작성된 예시를 보면 한글 입력시 문제가 발생합니다."ㅇ", "아", "안" 입력 중에는 `length`가 0이고, "안"이 완성되어야 `length`가 1이 됩니다. 영어를 입력하면 문제없이 입력된 글자수에 따라 length가 늘어나는 것을 볼 수 있습니다.왜 한글 입력시 'ㅇ' 만 입력해도 length가 1이 안되는 걸까요? 이번 글에서는 vue에서 IME(Input Method Editor) 조합 문자를 처리 방식을 분석하고, 한글 입력문제를 해결하기 위한 방안을 알아보겠습니다.본론먼저 이 문제가 vue의 문제인지, 아니면 브라우저에서 한글 입..

안녕하세요.오늘은 잘하는 개발자란 무엇인가에 대해 탐구해보려고 합니다. 잘하는 개발자에 대해 이야기해보기 이전에, 여러분은 개발자를 어떤 직업이라고 생각하시나요? 작년 TEO 컨퍼런스에 가서 “자신의 직업을 외계인에게 설명을 한다면 뭐라고 설명하실 건가요? 이를 그림으로 그려보세요." 라는 질문을 받았어요. 저는 제 그림을 디자이너의 그림, 기획자의 문서로 남아있는 추상적인 것을 구체적으로 사용자가 이용할 수 있는 무언가로 만들어내는 일을 하는 사람이라고 설명했어요. 컨퍼런스 현장에서 답을 내리는데는 오래 걸리지 않았습니다. 개발이라는 분야가 하는 일, 그 중 프론트엔드가 하는 일이 무엇인가를 평소에도 고민해왔기 때문입니다."왜 개발 분야를 선택했는지"는 질문은 철학과에서 복수전공을 시작하기로 결심한 ..

서론지난 글에 이어, 이번엔 노션 데이터베이스에서 가져온 음악 정보를 바탕으로 멜론에서 바로 실행할 수 있는 플레이리스트 링크를 자동으로 생성하는 방법을 소개합니다.노션 API로 데이터베이스를 연결하는 과정이 궁금하시면 이 글을 읽어주세요.노래 데이터베이스에는 이름, 앨범, 키워드, 멜론Id 속성이 있습니다. 멜론 Id란, 멜론 음원 사이트에서 각 곡에 부여된 고유 식별자입니다. 플레이리스트를 만들려면 이 Id가 필요해요. ( 같은 곡이어도 음원 사이트마다 Id는 달라요. )예를 들어, ONF의 "Beautiful Beautiful"의 멜론 ID는 33313442입니다. 아래는 해당 곡의 멜론 링크에서 Id를 확인하는 방법이에요. 기본적으로 노션 데이터베이스에서 데이터를 가져오면 다음과 같은 형식입니다...

서론현재 진행하는 사이드 프로젝트에서 정적인 데이터를 불러오는 기능이 필요했습니다.백엔드 개발자 없기에 데이터를 파일 내부에 JSON으로 관리할 수도 있었지만, 데이터 양이 많았고, 주기적으로 값을 업데이트해야 했습니다. 프로젝트 외부에서 데이터를 관리하는 방법을 찾던 중, 노션 api를 알게되었습니다.노션 api를 활용하면 노션에 있는 정보들을 불러올 수 있습니다. 노션을 데이터 저장소로 활용할 수 있는거죠.저는 노션에서 제공하는 api로 불러올 수 있는 옵션 중 데이터베이스를 연동해보기로 하였습니다.본론notion API 연동Notion Developer 페이지에서 원하는 워크스페이스를 등록하고 Notion Integration Token을 발급받습니다.데이터를 저장할 데이터베이스를 생성하고, 해당 ..

서론클라이언트에서 데이터를 저장하고 싶다면 우리는 브라우저 저장소를 사용합니다. 브라우저에서 어떤 저장소를 사용할지는 매우 중요합니다. 잘못된 저장소 선택으로 인해 성능 저하나 보안 문제(예: XSS, CSRF)가 발생할 수 있습니다.브라우저에서 사용하는 저장소는 3가지 입니다.쿠키(Cookie)세션 스토리지(Session Storage)로컬 스토리지(Local Storage)그럼, 상황에 맞는 적절한 저장소를 사용하기 위해 쿠키(Cookie)부터 특징을 살펴보겠습니다.본론쿠키(Cookie)쿠키는 만료 기한이 있는 키-값 저장소입니다.쿠키는 클라이언트 측에서 저장되는 작은 텍스트 파일입니다.서버로부터 전송된 쿠키는 웹 브라우저에 저장되며, 이후 해당 웹 사이트를 방문할 때마다 해당 쿠키는 서버로 전송됩니..

서론Vue3에서 개발을 하다 보면 nextTick 함수를 자주 사용하게 됩니다. 이 함수는 데이터 변경 후 DOM이 업데이트될 때까지 기다렸다가 특정 작업을 수행하게 해줍니다."브라우저는 정확히 언제, 어떤 순서로 HTML을 화면에 렌더링할까?", "왜 JavaScript는 DOM 업데이트를 기다려야 할까?" 이 질문들의 답을 다시 정리해 보고 싶었습니다.본론🌳 브라우저의 렌더링 과정브라우저가 웹 페이지를 로드하고 렌더링하는 과정은 크게 5단계로 이루어집니다.1) HTML 파싱과 DOM 트리 생성브라우저는 HTML 문서를 읽고 파싱하여 DOM(Document Object Model) 트리를 구축합니다. 이 과정은 HTML 태그를 위에서 아래로 순차적으로 처리하며, 중첩된 요소들은 트리 구조로 표현됩니다..

배경프로젝트에서 api 호출에 대한 에러 및 데이터를 효율적으로 관리하기 위해 TanStack Query를 도입했습니다. vue에서 TanStack을 사용하기 위한 기본 세팅과 useQuery에 대한 전역 에러 처리 과정에 대해 소개합니다.도입설치다음과 같은 명령어로 tanstack/vue-query를 설치합니다.npm i @tanstack/vue-querypnpm add @tanstack/vue-queryyarn add @tanstack/vue-query초기 세팅vue-query.ts 파일을 생성하고 VueQueryPlugin를 활용하여 초기 세팅을 진행합니다.import { VueQueryPlugin } from "@tanstack/vue-query";vueApp.use(VueQueryPlugin);..