드리프트의 뉴 코딩 이야기

TypeScript로 클래스가 아닌 것 상속하기기존 클래스 방식원래 JavaScript에는 클래스가 없었고, 생성자 함수로 클래스를 구현했었죠. 현재의 class 문법도 사실은 약간의 차이만 있을 뿐, 옛날 방식의 설탕 문법(syntax sugar)입니다. TypeScript에서도 일부 타입을 조금 속이면 이 방법으로 클래스를 만들 수 있습니다.const Foo: { new (greeting?: string): Foo;} = function (this: Foo, greeting?: string) { this.greeting = greeting || "Hello";} as any;Foo.prototype.greet = function () { console.log(`${this.greeting}, w..

TypeScript의 불편함을 해결하는 @total-typescript/ts-reset 도입하기TypeScript의 문제점TypeScript의 타입 시스템은 강력하지만, 의도한 타입을 제대로 추론하지 못하는 경우가 종종 있습니다. 이런 상황에서는 어쩔 수 없이 any 타입이나 타입 단언(type assertion)을 사용하게 되는데, 이는 타입 안전성을 잃게 만들어 원래 컴파일 에러로 발견되어야 할 문제가 실행 시 에러로 이어질 수 있습니다. 컴파일 에러는 개발 시점에서 바로 수정할 수 있지만, 실행 시 에러는 실제 운영 환경에서 큰 문제를 일으킬 수 있기 때문에 반드시 피하고 싶을 것입니다.any 타입과 타입 단언의 문제점any 타입: 모든 타입을 허용하므로 잘못된 타입 사용으로 인한 에러를 놓칠 수 ..

reduce로 날짜별 정보 배열 만들기 안녕하세요!이번 글에서는 reduce를 사용해 날짜별로 데이터를 그룹화하는 방법을 알아보려고 합니다. 개인적으로 reduce를 자주 사용하지 않았었는데, 최근 업무에서 이 기능을 활용할 일이 생겨서 그 경험을 정리해 보았습니다. 목표이번 작업에서는 캘린더 UI에서 날짜별로 아코디언 방식으로 데이터를 펼치는 기능을 구현해야 했습니다.API로부터 받은 데이터는 아래와 같이 날짜별 정보를 담고 있는 리스트 형식이었는데요:// 기본 데이터const baseData = [ { startedAt: "2024-10-30T10:00:00+09:00", rooms: { id: "1", }, }, { startedAt: "2024-10-30T11:..

실무에서 바로 쓸 수 있는 TypeScript 타입 8선이번 글에서는 실무에서 바로 적용할 수 있는 TypeScript의 주요 타입들을 소개합니다. 가능한 한 실용적인 예시를 사용해 설명을 진행할 건데요, React를 전제로 하고 있으니 참고해 주세요. TypeScript 초보자분들에게도 도움이 될 수 있는 내용들이니 끝까지 함께 보시죠.1. 템플릿 리터럴 타입템플릿 리터럴 타입은 타입 안전성을 유지하면서도 문자열 조작을 할 수 있는 강력한 기능입니다. 예시리터럴 타입을 사용해 문자열을 정의하면, 전달된 값이 number 타입임을 타입 시스템이 보장해줍니다.const requestExternalApi = async ({ data,}: { data: { offset: `${number}` l..

Go 언어의 reflect 패키지: 첫걸음부터 실전 활용까지Go 언어를 사용하면서 reflect 패키지에 대해 어려움을 느끼는 분들이 많을 것 같은데요. 저도 처음에는 잘 사용하지 않았는데, encoding/json과 같은 패키지를 이용해 Excel에 데이터를 입출력하는 기능을 구현하면서 어느 정도 이해하게 되었답니다. 여기서는 최소한의 코드로 reflect 패키지를 간단히 설명해보겠습니다. reflect 패키지란?reflect 패키지는 런타임에 반사를 구현하여 프로그램이 임의의 타입을 가진 객체를 조작할 수 있게 해줍니다. 일반적으로는 정적 타입 interface{}의 값을 받아 해당 값의 동적 타입 정보를 추출하는 데 사용되는데요. TypeOf를 호출하면 Type을 반환하고, ValueOf를 호출하면..

macOS에서 숨겨진 터미널 명령어들: 생산성을 높여줄 필수 도구macOS에는 터미널을 통해 사용할 수 있는 다양한 명령어들이 내장되어 있습니다. 이 명령어들은 개발자들이나 고급 사용자들에게 매우 유용한 도구인데요, 단순히 파일을 열거나 복사하는 것부터 시스템 성능을 모니터링하거나 네트워크 속도를 테스트하는 것까지 다양한 작업을 가능하게 합니다. 이번 글에서는 macOS에서 사용할 수 있는 유용한 터미널 명령어들을 살펴보며, 실제로 어떻게 활용할 수 있는지 알아보겠습니다. 1. Keychain에서 비밀번호를 가져오기: securitymacOS의 Keychain은 비밀번호와 인증 정보를 안전하게 저장하는 기능을 제공하는데요, 이를 터미널에서 security 명령어를 통해 프로그래밍적으로 접근할 수 있습니다..

C, C++, 그리고 C#의 차이점: 무엇이 다른가요?프로그래밍 언어는 수많은 종류가 있지만, 그 중에서도 C, C++, 그리고 C#은 매우 유명한 언어들이죠. 이들은 이름이 비슷하지만, 그 목적과 동작 방식은 크게 다릅니다. 이번 글에서는 각 언어의 특징과 차이점을 살펴보면서, 어떤 상황에서 어떤 언어를 사용하는 것이 적합한지 알아보겠습니다. 1. C: 프로그래밍 언어의 기초C는 1970년대에 개발된 고전적인 프로그래밍 언어로, 컴퓨터 과학 역사에서 매우 중요한 위치를 차지합니다. 이 언어는 낮은 수준의 프로그래밍을 가능하게 하며, 하드웨어와 직접 상호작용할 수 있어 운영체제나 임베디드 시스템에서 많이 사용됩니다. C는 절차적 언어로, 프로그램이 순차적으로 실행되는 방식으로 구성됩니다. 이 말은, 개발..

GitHub Actions를 활용한 CI/CD 파이프라인 구축 및 Docker Compose 자동 배포이 글의 목적이번 글에서는 GitHub Actions를 사용하여 CI/CD 파이프라인을 구축하고, Docker Compose를 통해 자동으로 애플리케이션을 배포하는 방법을 알아보겠습니다. Next.js(프론트엔드)와 Express.js(백엔드), 그리고 PostgreSQL을 포함한 풀스택 애플리케이션을 Docker Compose로 관리하면서, 이를 GitHub Actions을 통해 자동화 배포하는 과정을 설명합니다. 지난 시간 글을 참고하시면 됩니다. https://mynewcodings.tistory.com/172 Docker로 Next.js와 Express.js 개발 환경 완벽 구축 및 배포하기Doc..

Docker로 Next.js와 Express.js 개발 환경 완벽 구축 및 배포하기이 글의 목적이번 글에서는 Docker를 활용해 Next.js(프론트엔드)와 Express.js(백엔드)로 구성된 풀스택 개발 환경을 구축하고, 이를 최종적으로 프로덕션 환경에 배포하는 방법을 안내합니다. PostgreSQL을 데이터베이스로 포함하여 실전 개발 및 배포 환경을 구성하는 과정을 단계별로 설명할 예정입니다.전제 지식이 글을 이해하려면 다음 기초 지식이 필요합니다:Git의 기본적인 사용법 (clone, commit, push 등)Docker의 기본 개념Node.js 기본 지식터미널 명령어 사용그럼 이제 본격적으로 환경을 구축하고, 배포하는 방법을 알아볼까요?환경 구축의 흐름프로젝트 구성Git 서브모듈 설정Dock..

자바스크립트 얕은 복사 vs 깊은 복사, 완벽 정리!자바스크립트에서 객체를 복사할 때, "얕은 복사(Shallow Copy)"와 "깊은 복사(Deep Copy)"라는 용어를 자주 접하게 됩니다. 이 두 가지 복사 방식의 차이점을 제대로 이해하지 못하면, 예상치 못한 버그를 만날 수도 있는데요. 이 글에서는 얕은 복사와 깊은 복사의 차이점을 쉬운 예시를 통해 명확하게 설명하고, 각 방식의 장단점과 사용 시 주의할 점까지 꼼꼼하게 알려드리겠습니다. 얕은 복사(Shallow Copy), 겉핥기식 복사?얕은 복사는 원본 객체의 최상위 속성 값만 복사합니다. 즉, 객체 내부에 중첩된 객체나 배열은 참조(Reference)만 복사됩니다. 얕은 복사 예시:const original = { name: "Alice",..