전체 글
-
[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를 재사용하기 위해 컴포넌트를 잘 만들어야한다고 ..
-
[JS] 콜백지옥에서 벗어나기Javascript 2024. 6. 2. 20:34
먼저 동기와 비동기에 대해서 알아보자. 동기란, 어떤 작업을 실행할 때 그 작업이 끝나고 다음 작업을 수행하는 방식을 의미한다. 이는 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다. 비동기란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다. 결국 비동기적이라는 말은 '동시에'라는 말과 비슷하다고 볼 수 있겠다.이는 작업의 시간을 절약할 수 있다.동기 방식으로 파일을 읽는다면 파일을 읽기 시작한 이후에 다음 코드를 실행하지 않고 파일이 읽혀지기를 기다린다. 반면에 비동기 방식으로 파일을 읽는다면 파일을 읽는 작업이 실행되는 동안 다른 작업을 수행할 수 있다...
-
[코드잇] 코드잇 후기!개발일기 2024. 5. 28. 16:21
SOPT 활동 진행 중 아주 좋은 기회가 왔습니다. 바로 코드잇과 관련된 것인데요. 많은 강의를 두 달 정도 무료로 들을 수 있는 기회였습니다. 저는 평소 자바스크립트에 관심이 많아, 전체 로드맵 중 자바스크립트 중급과정이 굉장히 끌리더라구요! 자바스크립트 중급 전체 커리큘럼은 아래와 같아요.(사진이 짤림;;) 저는 이중에서도 비동기 자바스크립트가 부족하다고 느껴 저 강의를 중점적으로 들었습니다. 제가 생각한 코드잇의 장점은 바로 '저렴한가격' & 질 높고 세세한 커리큘럼 이라고 생각합니다. 왜냐, 바로 멤버십이 2만원대에서 시작하기 때문이죠. 여러분들도 저렴한 가격으로 아주 좋은 커리큘럼을 경험해보시길 강력 추천드립니다.