게시글

JavaScript에서 String, Number 같은 원시타입은 값 그 자체가 복사되고 객체는 참조가 할당된다. 값 vs 참조가 타입에 따라 어떻게 결정되는지 변수 할당 예제 코드로 알아본다.

JavaScript는 하위 호환성(backwards compatibility)을 보장하는 언어다. babel 트랜스파일과 Promise.prototype.finally 예제로 보는 polyfill로 구형 엔진과의 간극을 메꾸는 방법을 알아본다.

TypeScript에서 dayjs 등 CommonJS 모듈 import 시 발생하는 TypeError: (0, xxx_1.default) is not a function 에러의 원인과 해결법. tsconfig의 esModuleInterop 설정과 import 구문 대안을 정리했다.

git hook 설정 시 발생하는 "The '.git/hooks/pre-commit' hook was ignored because it's not set as executable" 오류 해결법. chmod 실행 권한 부여, husky 사용 시 처리, 팀 공유 시 권한 커밋까지 정리했다.

Svelte에서 커스텀 버튼 컴포넌트를 만들 때 필요한 $$restProps로 나머지 속성을 하위 컴포넌트에 전달하는 방법과 createEventDispatcher의 dispatch로 on:click 커스텀 이벤트를 연결하는 방법을 정리한다.

Svelte 5 프로젝트를 sv CLI로 생성하고 TypeScript와 SMUI(Svelte Material UI)까지 설치하는 방법. 구버전 degit template 방식과의 차이도 함께 정리했다.

Golang에서 Singleton Pattern을 구현하는 방법을 알아본다. 패키지가 최초 import될 때 딱 한 번 자동 실행되는 init 함수를 활용해 하나의 객체만 생성하고 접근하게 하는 코드를 예제로 살펴본다.

Go에서 변수를 생성하고 할당하는 두 가지 방법인 var =와 :=(short assignment statement)의 차이를 알아보고, 이미 선언된 변수에 :=를 쓸 때 나는 재할당 에러와 여러 변수 선언 시의 예외를 살펴본다.

Homebrew로 Go(Golang) 버전을 최신으로 업데이트하는 방법. brew upgrade go부터 특정 버전 설치, Go 1.21+의 툴체인 자동 관리(GOTOOLCHAIN)까지 정리했다.

Cypress 를 이용해 React + TypeScript 환경에서 E2E 테스트를 하는 방법. npm install cypress 설치부터 cypress.json 의 baseUrl 설정, cy.visit 를 활용한 테스트 작성까지 다룬다.

@testing-library와 jest.mock을 활용한 React 페이지 렌더 테스트 방법을 알아본다. 라우터 컴포넌트를 Mock 처리해 App 컴포넌트 렌더 테스트 자체에 집중하는 예제를 다룬다.

테스트에서 실제 객체 대신 가짜를 만들어 사용하는 Mock의 개념을 알아보고, jest.fn()과 mockReturnValueOnce, mockReturnValue로 반환값을 지정하는 간단한 예제를 다룬다.

Golang의 종료 메소드 os.Exit()과 runtime.Goexit()의 차이를 알아본다. os.Exit은 defer 함수를 무시하고 즉시 종료하지만, Goexit은 deferred 함수를 모두 실행한 뒤 고루틴을 종료한다.

GitHub push 시 발생하는 "Support for password authentication was removed" 오류 해결법. GitHub CLI, Personal Access Token(PAT), SSH 세 가지 방법을 최신 기준으로 정리했다.

오픈소스나 Github Organization 저장소에 기여하기 위한 Fork 워크플로우. 원저장소 Fork 와 Clone, git remote add upstream, Pull Request 로 기여하는 과정을 다룬다.

Git 에 실수로 올린 .idea 폴더 같은 파일을 지우는 방법. .gitignore 에 추가하는 것만으로는 이미 올라간 파일이 지워지지 않으므로, git rm --cached 명령어로 원격저장소에서 제거하고 push 하는 과정을 정리했다.

IntelliJ 제품군에서 .http 파일로 Postman, Insomnia 없이 API 를 호출하는 방법. HTTP Request 파일 생성부터 GET, POST 호출 예제와 코드로 관리할 때의 장점을 소개한다.

go test 명령어는 현재 디렉토리의 테스트만 실행하고 하위 디렉토리는 확인하지 않는다. go test ./... 명령어로 GoLang 프로젝트 전체 테스트를 한 번에 돌리는 방법을 알아본다.

도커가 제공하는 네트워크 드라이버인 브리지, 호스트, 논(none), 컨테이너 네트워크를 알아본다. docker network create로 사용자 정의 브리지를 만들고 inspect, connect, disconnect 명령어 사용법을 정리했다.

도커가 컨테이너마다 호스트에 자동 생성하는 가상 네트워크 인터페이스 veth와, 이를 호스트의 eth0와 연결해 외부 통신을 가능하게 하는 docker0 브리지의 구조를 알아본다. 컨테이너 내부 IP 할당 방식도 함께 정리했다.

컨테이너를 삭제하면 변경된 데이터도 함께 사라지는 문제를 도커 볼륨(Volume)으로 해결한다. -v 옵션을 이용한 도커 볼륨 공유, --volumes-from 볼륨 컨테이너, 호스트 볼륨 공유 세 가지 데이터 영속화 방법을 정리했다.

docker run으로 mysql 데이터베이스 컨테이너와 워드프레스 웹 서버 컨테이너를 생성하고 --link 옵션으로 연동해 블로그 서비스를 구축한다. -d(Detached 모드), -e(환경변수) 옵션의 의미도 함께 정리했다.

Terraform 으로 AWS EC2 와 RDS 를 생성해본다. terraform init 부터 aws_instance, aws_db_instance 리소스 정의와 plan, apply, destroy 까지 실습 과정을 정리했다.

하시코프의 IaC 도구 Terraform 을 소개한다. 프로비저닝, 프로바이더, 리소스, HCL 등 기본 개념과 terraform plan, apply 명령어까지 인프라를 선언적인 코드로 관리하는 방법의 기초를 정리했다.

도커 컨테이너는 기본적으로 172.17.0.x 대역의 내부 IP를 할당받아 호스트 밖에서는 접근할 수 없다. docker run의 -p 옵션으로 호스트 포트와 컨테이너 포트를 바인딩해 아파치 웹서버를 외부에 노출하는 방법을 정리했다.

React, Vue와 달리 Svelte가 인라인 핸들러를 권장하는 이유를 알아본다. Virtual DOM 없이 컴파일되기에 메모리 불이익이 없고, 인라인 핸들러는 $$invalidate 코드로 변환되어 할당 연산자 없이도 데이터 갱신이 이루어진다.

docker run, pull, create, start, attach 명령어로 도커 컨테이너를 생성하고 내부로 접속하는 방법을 알아본다. docker ps로 컨테이너 목록을 확인하고 rm 명령어로 정지된 컨테이너를 삭제하는 기본 사용법을 정리했다.

도커 엔진의 핵심 단위인 이미지와 컨테이너의 개념을 정리했다. 저장소/이미지이름:태그로 구성되는 도커 이미지 이름 구조와, 이미지를 읽기 전용으로 사용하며 변경 사항만 컨테이너 계층에 저장하는 원리를 다룬다.

도커를 시작해야 하는 이유를 정리했다. 도커 이미지를 통한 개발·운영 환경 통합과 배포 편의성, 모놀리스와 마이크로서비스 아키텍처 비교, 쿠버네티스 같은 컨테이너 오케스트레이션 플랫폼까지 도커의 장점을 다룬다.

도커(Docker)는 리눅스 컨테이너 기반의 오픈 소스 가상화 플랫폼이다. 하이퍼바이저 기반 가상 머신과 도커 컨테이너의 차이, chroot·namespace·cgroup을 이용한 프로세스 단위 격리와 성능 이점을 정리했다.

Svelte each 블록에서 배열 항목 삭제 시 li 전체가 다시 렌더링되는 문제를 key를 지정해 변경된 요소만 렌더링하도록 개선하는 방법과, 값이 바뀔 때마다 내용을 파괴하고 재생성하는 Key 블록을 알아본다.

Svelte의 bind:this로 DOM 요소를 변수에 바인딩해 querySelector 없이 input에 포커스를 주는 방법과, 체크박스에 bind:group을 사용해 선택된 값들을 배열로 모으는 입력요소 바인딩을 예제로 알아본다.

Svelte의 style은 해당 컴포넌트 안에서만 유효하며, svelte-로 시작하는 Style Hash 클래스로 유효범위가 만들어진다. 전역 스타일이 필요할 때 :global 선택자를 쓰는 방법과 미사용 CSS가 번들에서 빠지는 점을 알아본다.

Svelte는 태스크가 끝난 뒤 화면이 갱신되므로 값 할당 직후 DOM을 읽으면 이전 값이 나온다. DOM 업데이트 완료 후 Promise를 반환하는 tick 함수를 await해서 갱신된 DOM에 접근하는 방법을 예제로 알아본다.

자바스크립트의 불변성(Immutability)과 가변성을 메모리 관점에서 정리했다. Number, String 같은 원시데이터는 불변이고 Object, Array 같은 객체데이터는 가변이라 참조를 공유하면 함께 변한다는 것을 예제로 살펴본다.

Bitwise NOT인 틸드(~) 연산자를 indexOf의 -1 반환값 처리에 활용하는 방법과, Math.floor()와 비슷하지만 음수에서 다르게 동작하는 double tilde(~~)를 예제로 알아본다.

Svelte 라이프사이클 중 onMount와 onDestroy를 토글 예제로 알아본다. onMount는 컴포넌트가 연결될 때, onDestroy는 해제 직전에 실행되며, onMount의 return 함수가 onDestroy 역할을 한다는 점도 다룬다.

자바스크립트 논리 연산자 &&를 if 조건문이나 삼항연산자 대신 사용해 조건이 참일 때만 함수를 실행하고 코드를 짧게 유지하는 방법을 예제 코드로 알아본다.

React와 TypeScript 환경에서 GraphQL의 useQuery로 데이터를 가져오는 방법과, 원하는 시점에 쿼리를 실행할 수 있는 useLazyQuery(lazyQuery) 사용법을 예제 코드로 알아본다.

react-router-dom의 useHistory Hook으로 pathname, search, state를 담아 페이지를 전환하고, useLocation Hook으로 전달된 값을 받는 방법을 React 예제 코드로 알아본다.

Go(Golang) API 프로젝트에 swaggo/swag으로 Swagger 문서를 붙이는 방법. swag CLI 설치부터 어노테이션 작성, swag init, Swagger UI 라우팅까지 단계별로 정리했다.

Docker로 Go(Golang) 개발환경 구축하기. air를 이용한 Hot Reload 설정, Dockerfile 작성, Apple Silicon(M1) 지원 현황까지 최신 기준으로 정리했다.

PostgreSQL 의 duplicate key value violates unique constraint 에러 해결법. 테이블 값과 Sequence Object 값이 어긋나 생기는 문제로, setval 로 시퀀스를 맞추면 해결된다.

PostgreSQL 실행 시 발생하는 The data directory contains an old postmaster.pid file 에러 해결법. Mac 에서 rm -f postmaster.pid 로 파일을 지우고 재시작하면 된다.

Golang에서 프로그램 실행 시 Argument를 받는 방법을 os.Args로 알아본다. go run과 go build 두 가지 실행 방식에서 인자를 넘기는 법과 첫 번째 인자의 차이를 예제로 살펴본다.

NestJS 의 Task Scheduling 을 알아본다. @nestjs/schedule 설치와 @Cron 데코레이터 사용법, SchedulerRegistry 로 CronJob 을 가져와 제어하는 방법을 정리했다.

Cron 표현식은 매일 7시, 30분마다 같은 반복 일정을 정규식처럼 나타내는 스케줄러 문법입니다. NestJS Task Scheduling 의 6자리 Cron 식 구조와 자주 쓰는 표현 예제, */30 과 30 의 차이를 정리했습니다.

Go 코드를 컴파일하는 방법을 알아본다. go run으로 소스를 실행하고 go build 명령어로 statically linked 실행 파일을 만들며, static linking 덕분에 외부 라이브러리 없이 실행 가능한 이유를 살펴본다.

macOS 업데이트 후 git 실행 시 발생하는 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) 오류 해결법. xcode-select --install부터 경로 초기화, 완전 재설치까지 단계별로 정리했다.

Golang으로 캘린더 관련 함수 패키지 go-times를 직접 만들어 배포해본 경험기. go mod로 모듈을 구성하고 go build와 go install 후 깃허브에 배포해 go get으로 받아 쓰는 과정을 정리했다.

Svelte의 on:click 이벤트 처리 방법과 once, preventDefault, stopPropagation, passive, capture, self 등 이벤트 modifier의 종류와 역할을 예제 코드와 함께 정리한다.

Svelte 튜토리얼의 Keyed each blocks 정리. each 블록에서 배열의 첫 항목을 삭제할 때 컴포넌트 초기화 값이 의도와 다르게 유지되는 이유와, (thing.id)처럼 key를 지정해 해결하는 방법을 예제로 설명한다.

Svelte의 반응형 선언 문법을 알아본다. count가 바뀔 때마다 doubled 같은 변수를 자동 갱신하고 조건문과 블록에도 쓸 수 있으며, 배열은 push가 아닌 할당(assignment)이 있어야 반응성이 동작한다는 점을 예제로 설명한다.

Github 저장소의 대표 언어가 JavaScript, CSS 등으로 잘못 표시될 때 바꾸는 방법. .gitattributes 파일에 linguist-detectable=false 를 지정해 원하지 않는 언어를 분석에서 제외하는 과정을 정리했다.

Svelte에서 컴포넌트를 import해 중첩 사용하는 방법을 알아본다. 부모의 스타일이 Nested 컴포넌트에는 적용되지 않는 점, 컴포넌트명은 대문자로 시작해야 하는 규칙, @html 사용 시 XSS 공격 위험에 주의해야 한다는 점을 정리한다.

Svelte 공식문서 번역: Svelte 3 릴리스 글 Truly reactive. 가상 DOM 없이 빌드 타임에 컴파일하는 방식과, this.set이나 훅 대신 할당만으로 반응성이 동작하도록 언어 차원으로 옮긴 Svelte 3의 설계를 소개한다.

Svelte 공식문서 번역: Virtual DOM is pure overhead. 가상 DOM이 빠르다는 밈의 유래와 diffing 비용, 불필요한 재계산 문제를 짚고, 빌드 타임에 변경 지점을 아는 Svelte 컴파일러의 방식을 설명한다.

React 컴포넌트 생명주기를 render() 함수를 중심으로 알아본다. constructor, componentDidMount, componentDidUpdate의 호출 순서와 setState로 State를 변경해야 리렌더링되는 이유를 정리했다.

Go 동시성의 핵심인 Channel에 대해 알아본다. make로 채널을 선언하고 goroutine과 함께 채널 연산자로 데이터를 주고받는 방법을 간단한 예제 코드로 살펴본다.

Go 구조체에 메소드를 추가하는 방법과 포인터 리시버를 알아본다. 생성자가 없는 Go에서 주소를 직접 리턴해 생성자를 대신하는 패턴과 errors.New로 에러를 미리 정의하는 방식을 예제로 살펴본다.

Class와 Object가 없는 Go에서 key-value 형태의 Map을 선언하는 방법과, 여러 타입의 필드를 가진 Structure(struct)를 정의하고 초기화하는 두 가지 방식을 예제 코드로 알아본다.

Go 언어에서 크기를 지정하는 Array 선언 방법과 크기 제한이 없는 Slice의 차이를 알아보고, append 함수로 슬라이스에 값을 추가하는 방법을 예제 코드로 살펴본다.

Go에는 forEach 없이 for문만 존재한다. range를 활용한 반복문 작성법과 if, switch문 안에서만 쓸 수 있는 변수를 선언하는 Go만의 조건문 문법을 예제 코드로 알아본다.

Go의 defer는 해당 라인에서 바로 실행되지 않고 스택에 쌓였다가 함수가 끝날 때 후입선출로 실행된다. defer 시점의 변수 값이 유지되는 이유와 for문 안 defer의 실행 순서를 예제로 알아본다.

Go 함수만의 특징들을 알아본다. 파라미터 타입 생략, 여러 값 반환, 가변 인자 받기, naked return, 함수 종료 후 실행되는 defer까지 Go의 유용한 함수 문법을 예제 코드로 살펴본다.

GraphQL 은 기본이 HTTP 통신이지만 PubSub 을 쓰면 WebSocket 도 가능하다. NestJS 에서 graphql-subscriptions 의 PubSub 을 Global Module 로 만들어 쓰는 방법을 정리했다.

Svelte 공식문서 번역: Write less code. 같은 컴포넌트를 React, Vue, Svelte로 구현해 코드량을 비교하고, bind:value 바인딩과 할당 연산자 상태 갱신 등 Svelte가 보일러플레이트를 줄이는 설계를 소개한다.

깊은 Depth를 가진 객체에 접근할 때마다 존재 여부를 일일이 체크하는 번거로움을 ES2020의 Optional Chaining(?.) 문법으로 간결하게 해결하는 방법을 알아본다.

parseInt('1')과 동일하게 동작하는 단항 더하기(+) 표현을 소개한다. 문자열을 숫자로 변환하는 두 방법의 브라우저별 속도 차이와 일부 연산 값이 다른 경우도 함께 살펴본다.

NestJS 의 ValidationPipe 로 DTO 유효성 검사를 자동화하는 방법. useGlobalPipes 전역 적용과 whitelist, forbidNonWhitelisted, transform 옵션의 의미를 정리했다.

TypeScript에서 실행 시점에 결정되는 동적 key에 접근하면 오류가 발생하는데, Index Signature로 Indexable 인터페이스를 정의해 해결하는 방법을 예제 코드로 알아본다.

Go 개발 환경 세팅 시 알아야 할 GO_PATH 디렉토리와 main 패키지 기본 구조, fmt 라이브러리 사용법을 알아보고, var와 const, short assignment statement로 변수와 상수를 선언하는 방법을 정리했다.

Go 언어를 배우기로 결심한 이유를 정리했다. 컴파일 언어의 빠른 속도, 타입을 강제하는 정적 언어, 동시성 지원, Garbage Collection, static linking 기본 지원 등 Golang의 장점들을 살펴본다.

데이터베이스에서 NULL 을 습관적으로 쓰는 것에 대한 고찰. NULL 은 값이 없는지 안 들어온 건지 오류인지 해석이 모호하고, 연산 결과도 NULL 이 되며 DBMS 마다 취급이 달라 가급적 지양하자는 생각을 정리했다.