사진찍는 웹 개발자의 블로그
- All
- javascript
- react.js
- books
- vue.js
- clerk
- mystory
- 생산성
- 트러블슈팅
- feedback
- culture
- 회고
- opensource
- supabase
- maker-log
- eslint
- growth
- test
- vscode
- nuxt
- pwa
- aws
- vue3
- excel
- vite
- prettier
- php
- tools
- TIL
- CI/CD
- Vue.js
- Backend
- Tools
- serverless
- Node.js
- Storybook
- OpenSource
- Husky
- Nuxt.js
- Github
컨텐츠에 따라 높이가 자동으로 조절되는 textarea 구현하기
높이가 컨텐츠에 따라 조절되는 textarea는 다음과 같이 구현합니다. 원리는 다음과 같습니다. 사용자가 값을 입력할 때마다 height를 ‘auto’로 설정하여 scrollHeight가 컨텐츠 높이만큼 만듭니다. 그 scrollHeight값을 height에 반영합니다. 높이가 늘어나더라도 스크롤바가 생기지 않도록 overflow를 hidden으로 설정…
ChatGPT랑 비슷한 File Input 컴포넌트 구현하고 react-hook-form에 연동하기(파일 누적 관리하기)
오늘은 ChatGPT에서 사용하는 파일 인풋을 유사하게 구현했습니다. ChatGPT에서는 파일을 입력할때마다 업로드를 하기 때문에 실제 처리 방식은 다르지만 파일들을 모아서 한번에 업로드 해야 한다고 가정했습니다. 즉, 여러 파일을 선택하고 폼에 누적해서 관리하는 기능을 구현했습니다. 아래에 ChatGPT의 인풋 컴포넌트를 가져왔습니다. ChatGPT 인…
실전 예제로 알아보는 react hook form 사용법
안녕하세요. 요즘 실무에서 form을 다룰 때 react-hook-form library를 사용하고 있습니다. form의 input을 상태로 관리하면 상태가 바뀔 때마다 리렌더링이 발생해 불필요한 리렌더링이 많아집니다. react-hook-form을 사용하면 각 form을 독립적으로 관리할 수 있어서 다른 form의 리렌더링을 방지할 수 있습니다. 또한 …
Javascript Nullish Coalescing Operator (??) 자바스크립트 연산자
개발을 하다보면 변수가 또는 일 때 기본값을 설정하는 경우가 많습니다. 이를 효과적으로 처리하기 위해 ECMAScript 2020(ES11)에서는 가 도입되었습니다. 이 글에서는 의 개념, 사용법, 그리고 활용 예시를 살펴보겠습니다. Nullish Coalescing Operator란? 는 JavaScript에서 변수가 또는 인 경우에만 오른쪽 피연산…
Tidy First 리뷰
켄트 벡의 “Tidy First?”는 코드 정리를 언제, 왜, 어떻게 해야 하는지에 대한 가이드라인을 제시합니다. 굉장히 얇아서 내용을 컴팩트하게 다루고 그만큼 빠르게 적용해 볼 수 있는 장점이 있습니다. Part1에서는 코드 정리법을 다룹니다. 여러가지 방법을 제시하지만 저자가 강조하는 것은 “코드를 읽고 이해하는 데 드는 비용”이 높다는 것입니다. 그…
NavigationDuplicated Avoided navigation to current location - vue router 에러
이슈 NavigationDuplicated: Avoided navigation to current location: “abc” Tabs 컴포넌트로 페이지 이동을 하는데 이런 에러를 만났습니다. 탭을 빠르게 왔다갔다 하면 생겼는데요. vue router에서 현재 페이지와 같은 path로 를 하면 발생합니다. 현재 페이지에서 같은 경로의 페이지로 이동할 수 …
읽기 쉬운 코드 도서 리뷰
읽기 쉬운 코드 읽기 쉬운 코드(로버트 C.마틴 / 길벗)는 “레스토랑 예약 시스템”을 통째로 구현하는 과정을 예시로 들어 시작부터 개선과정까지를 담았습니다. 그 과정에서 어떻게 하면 좋은 코드를 짤 수 있는지를 녹여냈습니다. 프론트엔드 개발자인 제가 이 책에서 인상깊었던 내용들을 몇 자 적어보려고 합니다. 처음부터 순서대로 저는 책을 읽을 때 관심이 가…
개발자 기술 면접 노트(한빛미디어) 도서 리뷰
개발자 기술 면접 노트 한빛미디어의 “개발자 기술 면접 노트”를 소개합니다. 18년 차 카카오 면접관을 맡고 계시는 저자가 취업 및 이직에 도움이 되는 가이드를 작성해주셨습니다. 내용은 크게 와 두 파트로 나뉩니다. 책을 읽다가 특히나 좋았던 부분 몇가지 소개해 드리겠습니다. 면접관의 입장에서 이 책을 추천한다면 면접관의 입장에서 서술한 부분이 많은 것…
Clerk를 사용해서 유저 정보 관리하기
Clerk Clerk라고 하는 유저 관리 플랫폼이 있습니다. 몇달 전에 뉴스레터에서 봤을 때는 이게 뭐지 싶었는데 요즘 듣고 있는 사이드 프로젝트 강의에서 사용했는데 번거로운 부분들을 많이 줄여줘서 재밌었습니다. 굉장히 직관적이고 편해서 제가 사용했던 컴포넌트들을 예시와 함께 소개합니다. SignInButton sign in page로 이동시키거나 mod…
AI 프로필을 팔기 시작한 개발자 이야기
Carat carat 홈페이지 출처: carat.im 인스타그램을 보다가 우연히 발견했던 Carat은 사진 필터앱이었습니다. 사람들이 색감이나 특수효과를 입혀 놓은 필터를 유저들이 구매할 수 있는 서비스였는데요. 취미로 인물사진을 찍던 저는 ‘나도 필터를 만들어볼까’하고 잠시 생각했었지만 색감에 자신이 없어 도전하지 않았었습니다. 그러다가 최근에 Cara…