전체 글
-
자기소개서를 작성하는 나는 과연 나에 대해 잘 알고 있을까?개발일기 2025. 9. 21. 20:19
거울 앞에 선 기분요즘 매일 같이 자기소개서를 쓰고 있다. 매번 느끼는 거지만, 자기소개서는 단순한 글쓰기가 아니다.누군가에게 나를 설명하는 글을 쓰다 보면, 마치 낯선 사람 앞에 거울을 들이대고 “이게 나야”라고 말하는 기분이 든다.그런데 그 순간, 불현듯 이런 의문이 찾아온다. “나는 과연 나에 대해 잘 알고 있을까?”자기소개서가 어려운 이유자기소개서가 어려운 이유는 분명하다. 본질적으로 ‘남에게 보여주기 위한 글쓰기’ 이기 때문이다. 그러다 보니 진짜 나보다 ‘보여주고 싶은 나’를 더 고민하게 된다. 실패는 적절히 포장하고, 경험은 조금 더 화려하게 꾸민다.그러다 보면 헷갈린다. “지금 나는 나를 소개하고 있는 걸까, 아니면 누군가가 좋아할 법한 나를 연출하고 있는 걸까?”자기소개서는 그래서 늘 모..
-
[React] 늘어나는 props, 합성으로 해결해보자React 2025. 5. 4. 19:45
이번 우테코 미션은 바로 React Module 이다. 이 미션의 학습 목표는,모달을 만들고 npm에 배포해보는 것. 미션에서 얻어야 할 여러 경험이 있겠지만,그 중에서 나는 해결해야 할 문제를 아래와 같이 정의했다. 1. 사용자에게 모달 구조에 대한 자율성을 넘겨줄 수 있다.2. 사용자가 사용하기에 편리한 모달이어야 한다. 아래는 실제 미션 LMS 파일에 나와있는 예시이다. 생각해보자. 재사용에 용이한 모달 라이브러리를 만들어야 하는데, 저런 구조는 무조건 props가 늘어날 것 같다. 하지만 페어프로그래밍 특성 상, 일단 빠르게 구현해야했다. 초기 우리의 모달은 아래와 같은 인터페이스를 가졌다. export interface ModalProps extends PropsWithChild..
-
[JS] JavaScript 메서드를 설계 관점에서 파헤쳐보자.Javascript 2025. 4. 7. 21:29
Object.keys()는 되는데, 왜 obj.keys()는 안 되는 걸까? 우아한테크코스에서는 레벨이 끝날 때마다 레벨 인터뷰라는 시스템을 진행합니다.일종의 회고이자 모의 면접 같은 시간인데, 이 과정에서 시지프 코치가 제게 흥미로운 질문을 하나 던졌습니다.“조금 심화적인 질문일 수 있는데요. Object.keys()나 Object.create()는 바로 호출하는데, 왜 Array 관련 메서드는 Array.prototype.filter처럼 호출할까요? Object 메서드들은 static 메서드인 걸까요? JS의 설계 관점에서 생각해보면 좋을 것 같아요.”이 질문에 선뜻 대답하지 못했고, 저는 그 순간 JavaScript에 대한 깊은 이해가 부족하다는 걸 느꼈습니다. 그래서 이 글을 통해 그 이유를 스..
-
[JS] 바닐라 js로 useState를 만들어 보자Javascript 2025. 3. 23. 21:00
우테코에서 한달이 조금 넘는 동안 미션을 쭉 진행해오면서, JS로 상태를 어떻게 관리해야할지 고민이 많았다.그러던 중, 자연스레 왜 요즘 FE 개발자들은 React를 채택했고,그 안에서 왜 React는 useState라는 훅을 만들어 상태를 관리하게 했을까 궁금해졌다. '내가 직접 구현해보면 이해할 수 있지 않을까?' 생각했고, 자료를 찾던 중 평소 즐겨 읽던 '황준일님의 블로그(글 맨 아래 출처)'를 보게 되었다. 공부해보며 정말 많은 공부가 되었던 것 같다. 기존 미션이었던 자동차 경주나, 로또 추첨기에서의 상태 관리는 다음과 같았다. constructor 안에 상태를 담아두고, get으로 꺼내오는 관리었다. 미션의 규모가 작기도 했고, 복잡한 상태 관리는 없었다. 그렇지만 과연 이러한 방식이 최선일..
-
[React] ErrorBoundary가 이벤트 핸들러와 비동기적 코드를 감지하지 못하는 이유React 2025. 3. 15. 22:51
이 글은 ErrorBoundary의 기본적인 개념을 알고있다는 전제 하에 진행하겠습니다.(추후 에러바운더리 및 그 한계와 계층적 에러바운더리에 대한 글을 써보겠습니다.) ErrorBoundary가 잡을 수 있는 에러인지 아닌지 판단하는 기준은 ErrorBoundary 실행 컨텍스트 입니다.그 안에 있다면 잡을 수 있고, 그 안에 없다면 잡을 수 없습니다. 에러바운더리는 다음과 같은 에러를 포착하지 못합니다. 저는 지금까지 위와 같은 사항을 단순 암기했었는데요.현재 제가 지내고 있는 우아한 테크 코스의 코치인 시지프의 글을 보며 위 사항이 자바스크립트의 실행 컨텍스트를 알면 그럴 수 밖에 없다는 것을 알게되었습니다. 네 가지 사항 중 에러바운더리가 이벤트 핸들러와 비동기적 코드를 감지하지 못하는 이유에 ..
-
[JS] 클래스 상속과 프로토타입 체이닝Javascript 2025. 3. 2. 16:17
자바스크립트에서 클래스 상속과 프로토타입은 밀접하게 연결되어 있는 개념입니다.자바스크립트는 프로토타입 기반 언어이지만, ES6에서 클래스를 도입하여 더 직관적인 객체지향 프로그래밍 스타일을 제공합니다.하지만 클래스도 결국 프로토타입 기반 상속을 내부적으로 사용하므로, 클래스를 이해하려면 프로토타입의 개념을 잘 이해하는 것이 중요합니다. 이번 글에서는 자바스크립트의 클래스 상속과 프로토타입의 관계에 대해 알아보고자 합니다.자바스크립트에서의 상속자바스크립트는 프로토타입 기반 언어입니다. 즉, 자바스크립트의 객체는 다른 객체를 상속할 수 있는 구조를 가지고 있으며, 이를 통해 메서드나 속성을 공유할 수 있습니다. 자바스크립트의 상속은 클래스 기반 상속과 다르게 프로토타입 기반 상속을 사용합니다.프로토타입 기반..
-
[JS] 클래스 문법을 비스무리하게 구현해보자Javascript 2025. 2. 23. 16:09
처음 개발을 알려준 친구가 클래스 문법을 가르쳐 줬던 문구가 아직 생생합니다.'붕어빵을 먹고 싶을 때, 그냥 붕어빵 가게에 가서 먹으면 한 번 먹고 끝이지만, 직접 붕어빵 틀을 만들어서 먹는다면, 언제든 다시 먹고 싶을 때마다 먹을 수 있는데 이 것이 바로 클래스의 기초다.' 클래스는 객체지향에서 빠질 수 없는 개념입니다.또한 우리는 자바스크립트는 프로토타입 기반 언어와 객체지향 언어라고 불린다는 것을 들어보았을 겁니다. JS에는 클래스라는 개념은 없고 프로토타입이 존재합니다. 자바스크립트는 클래스 기반인가? X클래스 문법이 추가된 것이다 O 자 그럼, 클래스가 없을 때는 어떻게 구현했었는지 봅시다. Functionalconst Person = function (name, age) { con..
-
변경에 유연한 컴포넌트 설계React 2024. 6. 17. 20:04
우리는 귀에 딱지가 앉도록 듣는 말이 있습니다.‘컴포넌트를 잘 설계해야 한다.’ 컴포넌트 설계 기준이 뭔지 같이 한 번 살펴봅시다. 컴포넌트 설계…?설계의 뜻이 뭘까요? 음..컴포넌트를 ‘만든다’로 쉽게 생각해도 될 것 같아요. 컴포넌트 설계를 ‘잘’ 설계한다 = 컴포넌트를 ‘잘’ 만든다. ‘잘’ 그럼 컴포넌트를 잘 만든다는건 어떤 의미일까요? 컴포넌트를 잘 나누는 것일까요?그렇다면 컴포넌트를 나누는 이유는 뭘까요?재사용 가능하게 나눠야한다는 뜻일까요? 컴포넌트의 뜻부터 같이 알아보죠. 좀 더 개발적인 의미로 들어가볼까요? 리액트 공식문서를 살펴보니, UI를 구성하는 요소라고 하네요. 우리가 흔히 말하는 컴포넌트를 재사용한다는 의미가, 결국 UI를 재사용하기 위해 컴포넌트를 잘 만들어야한다고 ..