사진찍는 웹 개발자의 블로그
- All
- css
- maker-log
- books
- javascript
- react.js
- vue.js
- clerk
- mystory
- 생산성
- 트러블슈팅
- feedback
- culture
- 회고
- opensource
- supabase
- 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를 감싸는 div에 여백이 생겨버리는 이유
개발을 하다가 단순히 textarea 하나만을 감싸는 div의 높이가 textarea보다 더 큰 문제가 있었는데 개발자도구로 요리보고 저리봐도 원인을 찾지 못했다. 마치 투명한 뭔가가 사이에 끼어 있는 것 같았는데 이 답답함을 말로 형용할 수 없었다. 이걸 뭐라고 검색해야 할지조차 몰라서 영원한 친구 ChatGPT에게 물어보고 실마리를 찾을 수 있었다. …
마무리가 약한 나의 마무리
서울국제도서전에 다녀왔던 적이 있다. 많은 부스가 있었지만 커다란 벽에 자기만 알고 있는 동네 서점을 소개하는 공간이 있었다. 지금은 사라진 곳도 있고 엄청 큰 서점도 있고 아주 다양한 서점을 담고 있는 포스트잇들이 붙어 있었다. 지금은 사라졌지만 어릴적 아버지가 운영했다는 서점도 있었고 친구들과의 추억이 담긴 서점도 있었다. 서울국제도서전에 다녀왔던 적…
그림으로 이해하는 서버 구조와 기술 리뷰 - 길벗
정말 쉬운 네트워크 책 이 책은 정말 쉽습니다. 복잡한 개념을 시각적으로 쉽게 이해할 수 있도록 돕는 213개의 그림과 17개의 표를 활용합니다. 어려운 용어나 전문적인 설명을 최소화하고, 대신 일상적인 비유와 실용적인 예시를 통해 서버의 역할, 운영체제, 네트워크 장비의 기능을 설명합니다. 예를 들어, TCP/IP 모델을 설명할 때, 각 계층의 기능을 …
두부의 캐릭터 드로잉 리뷰 with 프로크리에이트 - 한빛미디어
“두부의 캐릭터 드로잉 with 프로크리에이트”는 프로크리에이트를 활용한 캐릭터 드로잉 기법을 다룬 책입니다. 이 책은 디지털 드로잉을 처음 시작하는 사람들을 위해 프로크리에이트의 기초부터 나만의 캐릭터와 굿즈를 만드는 방법까지 단계별로 설명하고 있습니다. 취미로 귀엽고 아기자기한 캐릭터를 그려보고 싶으신 분들에게 추천하는 책입니다. 책의 후반부에는 만든…
실무로 통하는 클린 코드(한빛미디어) 리뷰
25장, 200가지 이상의 예시로 이루어진 이 책은 백과사전 같은 느낌을 줍니다. 내용이 방대해 읽을 엄두는 안 나지만 컴퓨터 옆에 놓고 필요할 때마다 참고할 수 있는 든든한 동반자 같은 느낌을 줬습니다. 큰 업무를 작게 나누듯 패턴들을 한번에 이해하기 부담없는 작은 단위들로 나눠놨습니다. 그리고 대부분의 클린 코드 책이 Java코드를 예제로 사용했는데 …
자바스크립트 리액트 디자인패턴(한빛미디어) 도서 리뷰
자바스크립트+리액트 디자인 패턴 자바스크립트+리액트 디자인 패턴은 최신 자바스크립트 디자인 패턴과 함께 리액트에서 적용할 수 있는 패턴까지 광범위하게 다룹니다. 디자인 패턴은 왜 디자인 패턴인가 이 책은 보통의 디자인 패턴 책들과 다르게 앞장에서 스스로 생각해 볼 거리들을 많이 던져줍니다. 1장에서는 디자인 패턴을 개념적으로 어떻게 정의하는지 설명합니다.…
혼자 해도 프로처럼 잘 만드는 굿즈 제작 비법 리뷰
굿즈를 제작하려고 할 때 드는 막막함들이 있습니다. 스마트폰으로 업로드한 이미지를 PC로 봤을 때 색상이 왜 달라 보이는지 그 이유도 모르겠고, 마음먹고 제작하려는데 굿즈를 제작할 수 있다는 사이트들(인쇄소들)에 들어가보니 모르는 용어들의 나열이라 포기한 적이 있습니다. 굿즈제작비법 책에서는 굿즈를 만들려고 마음을 먹어봤지만 어려워서 힘들어하고 있는 사람…
컨텐츠에 따라 높이가 자동으로 조절되는 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의 리렌더링을 방지할 수 있습니다. 또한 …