Javascript
-
[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으로 꺼내오는 관리었다. 미션의 규모가 작기도 했고, 복잡한 상태 관리는 없었다. 그렇지만 과연 이러한 방식이 최선일..
-
[JS] 클래스 상속과 프로토타입 체이닝Javascript 2025. 3. 2. 16:17
자바스크립트에서 클래스 상속과 프로토타입은 밀접하게 연결되어 있는 개념입니다.자바스크립트는 프로토타입 기반 언어이지만, ES6에서 클래스를 도입하여 더 직관적인 객체지향 프로그래밍 스타일을 제공합니다.하지만 클래스도 결국 프로토타입 기반 상속을 내부적으로 사용하므로, 클래스를 이해하려면 프로토타입의 개념을 잘 이해하는 것이 중요합니다. 이번 글에서는 자바스크립트의 클래스 상속과 프로토타입의 관계에 대해 알아보고자 합니다.자바스크립트에서의 상속자바스크립트는 프로토타입 기반 언어입니다. 즉, 자바스크립트의 객체는 다른 객체를 상속할 수 있는 구조를 가지고 있으며, 이를 통해 메서드나 속성을 공유할 수 있습니다. 자바스크립트의 상속은 클래스 기반 상속과 다르게 프로토타입 기반 상속을 사용합니다.프로토타입 기반..
-
[JS] 클래스 문법을 비스무리하게 구현해보자Javascript 2025. 2. 23. 16:09
처음 개발을 알려준 친구가 클래스 문법을 가르쳐 줬던 문구가 아직 생생합니다.'붕어빵을 먹고 싶을 때, 그냥 붕어빵 가게에 가서 먹으면 한 번 먹고 끝이지만, 직접 붕어빵 틀을 만들어서 먹는다면, 언제든 다시 먹고 싶을 때마다 먹을 수 있는데 이 것이 바로 클래스의 기초다.' 클래스는 객체지향에서 빠질 수 없는 개념입니다.또한 우리는 자바스크립트는 프로토타입 기반 언어와 객체지향 언어라고 불린다는 것을 들어보았을 겁니다. JS에는 클래스라는 개념은 없고 프로토타입이 존재합니다. 자바스크립트는 클래스 기반인가? X클래스 문법이 추가된 것이다 O 자 그럼, 클래스가 없을 때는 어떻게 구현했었는지 봅시다. Functionalconst Person = function (name, age) { con..
-
[JS] 콜백지옥에서 벗어나기Javascript 2024. 6. 2. 20:34
먼저 동기와 비동기에 대해서 알아보자. 동기란, 어떤 작업을 실행할 때 그 작업이 끝나고 다음 작업을 수행하는 방식을 의미한다. 이는 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다. 비동기란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다. 결국 비동기적이라는 말은 '동시에'라는 말과 비슷하다고 볼 수 있겠다.이는 작업의 시간을 절약할 수 있다.동기 방식으로 파일을 읽는다면 파일을 읽기 시작한 이후에 다음 코드를 실행하지 않고 파일이 읽혀지기를 기다린다. 반면에 비동기 방식으로 파일을 읽는다면 파일을 읽는 작업이 실행되는 동안 다른 작업을 수행할 수 있다...
-
NOW SOPT 자바스크립트 과제 중 타입이 string이었던 이슈Javascript 2024. 5. 12. 12:55
안녕하세요 여러분. 이번 주제는 string입니다! 자바스크립트 deep dive에 string 편을 읽던 중, 지난 자바스크립트 과제(쇼핑몰과 장바구니)에서 상품의 id의 값을 비교하여해당 상품을 localStorage에 저장하거나 삭제하는 기능을 구현할 때 product의 id와 로컬스토리지에서 가져온 product의 id의 타입이 달라 꽤 오랜 시간 고생했는데요. 초기에 작성한 코드를 같이 보시죠.//초기 코드removeProduct(productId) { this.cartList = this.cartList.filter( (item) => item.id !== productId ); } 아무 로직이 동작하지 않아서 멘붕했습니다. 아무리 봐도 로직상 문제가 없었거든요... 같이..
-
[JS] 배열 메서드들의 올바른 역할Javascript 2024. 5. 5. 17:04
forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다.filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다.map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map은 "변환" 하는 의미를 갖고 있기 때문에, 각 요소를 변환하는 경우(a * N 등)에 적합하다.reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(redu..
-
[JS]함수 선언문 vs 표현식Javascript 2024. 4. 21. 22:05
**함수 선언문 function 선언문() { 로직 } **함수 표현식 const 표현식 = function () { 로직 } 함수 선언문은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않음. => 함수 선언문은 어디서든 호출이 가능하고, 표현식은 함수를 만든 후 그 아래에서만 호출이 가능하다. 그럼 함수 선언문이 더 자유롭고 좋은거 아닌가? 그러나, 선언문의 우선순위가 가장 높기 때문에 선언문이 너무 많다면 선언문을 모으는 데에 많은 시간을 소비하게 되어 실행코드의 순위가 뒤로 밀리게 되고 실행 시간이 길어질 수 있기 때문에 적당히 사용하는 것이 중요하다고 한다. 그래서 어떤게 더 좋다는건데? 정답은..... 그런거 없다! 그러나! 함수 표현식을 지향하는 곳들이 있다 ! 예를들어 에..