2025년도에 나에게 있었던 일들을 되돌아보며... 서론: 나의 첫 인턴 생활2025년 6월 23일, 나는 회사의 조직문화 문제를 해결하는 B2B SaaS 스타트업의 멤버로 입사를 하게 되었다. 직군은 Product Engineer였고 Product 전반에 기여하며 제품의 기획-개발-배포-운영까지 전부 담당하는 역할의 직군이었다. 입사 전까지 혼자 프론트개발만 해오던 나에게 ①백엔드, 인프라 등을 다루는 기술적인 성장과 ②소프트 스킬에 대한 성장, ③내 입김이 바로 제품에 닿는다는 기대감, 이 세가지 요소가 매력적이라 생각되어 지원했고 합격하여 인턴생활을 할 수 있었다. 입사전 내가 나에게 기대했던 모습은 고객들의 문제를 해결하기 위해 주도적으로 의견을 내고 제품에 반영하고 기여하며 더 많은 고객사를 확..

🔎서론이 글은 JavaScript 에서 코드가 실행될 때 어떤 일이 일어나는지에 대해 학습한 내용을 정리하여 담은 글입니다.주요 개념은 JavaScript의 실행 컨텍스트, Lexical Environment, Event Loop으로, 이 글의 전반적인 내용에서 다루고 있습니다. 설명의 모든 런타임 환경은 브라우저로 설정합니다.(Node.js가 아닙니다)🪜간단한 순서JavaScript의 실행순서를 코드와 결과로 나타내면 아래와 같습니다.본론에서는 싱글 스레드인 JavaScript에서 아래의 코드의 동작과정을 낱낱이 파헤쳐보려고 합니다.function printOne(){ console.log("1");}function printTwo(){ setTimeout(() => { console...

🐳 Dockerdocker는 왜 사용할까? 프로그램을 개발하는 것에 있어 어떤 장점을 지니게 해 줄까?라는 질문으로부터 시작한다.docker에는 많은 장점이 있지만 가장 중요하게 생각되는 건 docker의 기본 컨셉인 "이식성"이다. docker는 같은 환경을 제공하기 때문에 서로 다른 운영체제, 환경 설정, 옵션 등에 의존되지 않으며 항상 일관되게 프로그램을 설치, 운용할 수 있다. 예를 들어, 가장 대표적으로 Node.js 버전이 달라 생기는 문제를 해결할 수 있다. 그럼 Docker를 정의하자면 아래와 같다.컨테이너를 사용하여 각각의 프로그램을 분리된 환경에서 실행 및 관리할 수 있는 툴 📌 컨테이너컨테이너는 쉽게 말해 미니 컴퓨팅 환경을 말한다. 한 PC방에 있는 모든 컴퓨터들은 외형은 비..

5️⃣ 클래스 확장TypeScript의 클래스는 다른 클래스를 확장하거나 하위 클래스를 만드는 JavaScript 개념에 타입 검사를 추가한다. 즉, JavaScript에서의 클래스 + 타입검사가 TypeScript에서의 클래스 확장성에 대한 개념이다. 먼저 당연하게도 기본 클래스에 선언된 모든 메서드나 속성은 파생 클래스라고 불리는 하위 클래스에서 사용할 수 있다. class Teacher{ teach(){ console.log("Teaching"); }}class StudentTeacher extends Teacher{ learn(){ console.log("Learning"); }}const teacher = new StudentTeacher();tea..

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes.1️⃣ Vite환경에서의 Storybook과 Tailwindcss와의 충돌 아래의 환경에서 생긴 충돌입니다.Tailwindcss v.4.0.0Storybook/react-vite v.8.5.2 Vite 환경에서 처음 개발을 하던 도중 아래의 사진과 같은 에러가 나타났습니다.(25.02.26 시점입니다.)tailwindcss가 postcss 기반에서 vite플러그인으로 v.4.0.0부터 바뀌게 되면서 생긴 문제였습니다. 혼자 트러블 슈팅을 해봤지만 잘 안되었는데요. tailwindcss 버전을 다운버저닝 하려던..

🦩진행 환경storybook v8.x 를 사용했습니다.React with Vite 환경에서 진행했습니다.tailwindcss v4.x 을 프로젝트에서 사용합니다.마찬가지로 아래의 링크의 Get Started를 통해 환경 구성을 하였습니다.공식문서를 따라하고 학습한 후 간단하게 개념을 정리한 포스트입니다. Storybook: Frontend workshop for UI developmentStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and ..

🔍서론 ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있는 명료하고 새로운 문법을 제시하고 있다. 하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니다. 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다. Typescript가 지원하는 클래스는 ECMAScript 6의 클래스와 상당히 유사하지만 몇 가지 Typescript만의 고유한 확장 기능이 있다. 이 확장기능들을 아래에서 설명하고 있다.1️⃣클래스 메서드TypeScript는 독립함수(standalone function)을 이해하는 것과 동일한 방식으로 메서드를 이해한다.매개변수에 타입이나 기본값을 지정하지 않으면 a..

GitHub - Indigochi1d/IntroduceWith3Dweb: R3F로 구현한 Dancing Scroll Introduce 3D WebR3F로 구현한 Dancing Scroll Introduce 3D Web. Contribute to Indigochi1d/IntroduceWith3Dweb development by creating an account on GitHub.github.com 🔎서론위의 프로젝트를 R3F로 구현하면서 사용했던 Hooks들을 자세히 다뤄보려고 한다.다뤄볼 Hooks들은 아래와 같다.useThreeuseFrameuseGLTFuseAnimationsuseProgressuseScroll1️⃣useThree useThree | React Three FiberReact Thr..

3️⃣ 인터페이스 확장TypeScript는 인터페이스가 다른 인터페이스의 모든 멤버를 복사해서 선언할 수 있는 확장된 인터페이스를 허용한다.interface Book { page : number;}interface Novel extends Book { title : string}let myBook : Novel = { page : 100, title : "hello world"}console.log(myBook.page, myBook.title);3️⃣ - 1. 재정의된 속성파생 인터페이스는 다른 타입으로 속성을 다시 선언해 기본 인터페이스의 속성을 재정의하거나 대체할 수 있다.interface TsPractice{ name : string | null;}interface Ts..

🔍서론인터페이스는 연관된 이름으로 객체 형태를 설명하는 방법이다.인터페이스는 별칭으로 된 객체 타입과 여러면에서 유사하다. 하지만 일반적으로 ① 읽기 쉬운 오류 메시지② 빠른 컴파일러 성능③ 클래스와의 더 나은 상호 운용성3가지의 장점을 가진다.1️⃣타입 별칭 vs 인터페이스타입별칭type Poet = { born: number; name: string;}; 인터페이스interface Poet { born : number; name : string;}TypeScript의 할당 가능성 검사와 오류 메시지는 객체 타입 별칭에서의 경우와 거의 동일하다.하지만 인터페이스와 타입 별칭 사이에는 4가지 주요 차이점이 있다. ✨  4가지 차이점1️⃣ 인터페이스는 속성 증가를 위해 병합(merg..