사진찍는 웹 개발자의 블로그

사람들의 꿈을 이어주는 코멘토에서 일하고 있습니다.

실무로 통하는 클린 코드(한빛미디어) 리뷰

25장, 200가지 이상의 예시로 이루어진 이 책은 백과사전 같은 느낌을 줍니다. 내용이 방대해 읽을 엄두는 안 나지만 컴퓨터 옆에 놓고 필요할 때마다 참고할 수 있는 든든한 동반자 같은 느낌을 줬습니다. 큰 업무를 작게 나누듯 패턴들을 한번에 이해하기 부담없는 작은 단위들로 나눠놨습니다. 그리고 대부분의 클린 코드 책이 Java코드를 예제로 사용했는데 …

2024-08-27

books

자바스크립트 리액트 디자인패턴(한빛미디어) 도서 리뷰

자바스크립트+리액트 디자인 패턴 자바스크립트+리액트 디자인 패턴은 최신 자바스크립트 디자인 패턴과 함께 리액트에서 적용할 수 있는 패턴까지 광범위하게 다룹니다. 디자인 패턴은 왜 디자인 패턴인가 이 책은 보통의 디자인 패턴 책들과 다르게 앞장에서 스스로 생각해 볼 거리들을 많이 던져줍니다. 1장에서는 디자인 패턴을 개념적으로 어떻게 정의하는지 설명합니다.…

2024-08-26

books

혼자 해도 프로처럼 잘 만드는 굿즈 제작 비법 리뷰

굿즈를 제작하려고 할 때 드는 막막함들이 있습니다. 스마트폰으로 업로드한 이미지를 PC로 봤을 때 색상이 왜 달라 보이는지 그 이유도 모르겠고, 마음먹고 제작하려는데 굿즈를 제작할 수 있다는 사이트들(인쇄소들)에 들어가보니 모르는 용어들의 나열이라 포기한 적이 있습니다. 굿즈제작비법 책에서는 굿즈를 만들려고 마음을 먹어봤지만 어려워서 힘들어하고 있는 사람…

2024-07-28

javascript

컨텐츠에 따라 높이가 자동으로 조절되는 textarea 구현하기

높이가 컨텐츠에 따라 조절되는 textarea는 다음과 같이 구현합니다. 원리는 다음과 같습니다. 사용자가 값을 입력할 때마다 height를 ‘auto’로 설정하여 scrollHeight가 컨텐츠 높이만큼 만듭니다. 그 scrollHeight값을 height에 반영합니다. 높이가 늘어나더라도 스크롤바가 생기지 않도록 overflow를 hidden으로 설정…

2024-07-13

react.js

ChatGPT랑 비슷한 File Input 컴포넌트 구현하고 react-hook-form에 연동하기(파일 누적 관리하기)

오늘은 ChatGPT에서 사용하는 파일 인풋을 유사하게 구현했습니다. ChatGPT에서는 파일을 입력할때마다 업로드를 하기 때문에 실제 처리 방식은 다르지만 파일들을 모아서 한번에 업로드 해야 한다고 가정했습니다. 즉, 여러 파일을 선택하고 폼에 누적해서 관리하는 기능을 구현했습니다. 아래에 ChatGPT의 인풋 컴포넌트를 가져왔습니다. ChatGPT 인…

2024-07-11

react.js

실전 예제로 알아보는 react hook form 사용법

안녕하세요. 요즘 실무에서 form을 다룰 때 react-hook-form library를 사용하고 있습니다. form의 input을 상태로 관리하면 상태가 바뀔 때마다 리렌더링이 발생해 불필요한 리렌더링이 많아집니다. react-hook-form을 사용하면 각 form을 독립적으로 관리할 수 있어서 다른 form의 리렌더링을 방지할 수 있습니다. 또한 …

2024-06-19

javascript

Javascript Nullish Coalescing Operator (??) 자바스크립트 연산자

개발을 하다보면 변수가 또는 일 때 기본값을 설정하는 경우가 많습니다. 이를 효과적으로 처리하기 위해 ECMAScript 2020(ES11)에서는 가 도입되었습니다. 이 글에서는 의 개념, 사용법, 그리고 활용 예시를 살펴보겠습니다. Nullish Coalescing Operator란? 는 JavaScript에서 변수가 또는 인 경우에만 오른쪽 피연산…

2024-06-12

books

Tidy First 리뷰

켄트 벡의 “Tidy First?”는 코드 정리를 언제, 왜, 어떻게 해야 하는지에 대한 가이드라인을 제시합니다. 굉장히 얇아서 내용을 컴팩트하게 다루고 그만큼 빠르게 적용해 볼 수 있는 장점이 있습니다. Part1에서는 코드 정리법을 다룹니다. 여러가지 방법을 제시하지만 저자가 강조하는 것은 “코드를 읽고 이해하는 데 드는 비용”이 높다는 것입니다. 그…

2024-05-26

vue.js

NavigationDuplicated Avoided navigation to current location - vue router 에러

이슈 NavigationDuplicated: Avoided navigation to current location: “abc” Tabs 컴포넌트로 페이지 이동을 하는데 이런 에러를 만났습니다. 탭을 빠르게 왔다갔다 하면 생겼는데요. vue router에서 현재 페이지와 같은 path로 를 하면 발생합니다. 현재 페이지에서 같은 경로의 페이지로 이동할 수 …

2024-05-23

books

읽기 쉬운 코드 도서 리뷰

읽기 쉬운 코드 읽기 쉬운 코드(로버트 C.마틴 / 길벗)는 “레스토랑 예약 시스템”을 통째로 구현하는 과정을 예시로 들어 시작부터 개선과정까지를 담았습니다. 그 과정에서 어떻게 하면 좋은 코드를 짤 수 있는지를 녹여냈습니다. 프론트엔드 개발자인 제가 이 책에서 인상깊었던 내용들을 몇 자 적어보려고 합니다. 처음부터 순서대로 저는 책을 읽을 때 관심이 가…

2024-05-13