js
-
[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. 5. 5. 17:04
forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다.filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다.map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map은 "변환" 하는 의미를 갖고 있기 때문에, 각 요소를 변환하는 경우(a * N 등)에 적합하다.reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(redu..
-
localStorage & sessionStorageJavascript 2024. 4. 19. 14:56
우선, 로컬스토리지와 세션스토리지는 익히 들어보았지만, 웹 스토리지란 단어를 처음 들어봤다. 웹 스토리지란 그래서 뭘까?? 웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다고 한다. HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키에 그 정보를 저장했지만, 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해주고, 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다고 한다. 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 웹 스토리지라는 개념 안에 로컬..
-
[JS]변수, 표현식과 문, 데이터타입, 타입 변환 - 타입 변환이 필요할 때Javascript 2024. 4. 14. 13:50
변수 메모리 공간에 값을 식별할 수 있는 고유한 이름을 '변수 이름' = 식별자 변수에 저장된 값을 변수 값 변수에 값을 저장하는 것을 할당 변수에 저장된 값을 읽어 들이는 것을 참조 console.log(score) // undefined var score; // 변수 선언문 첫 줄에서 참조에러가 발생해야 하는데 undefined가 발생하는 이유는 호이스팅 때문! 표현식과 문 **문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위 토큰이란 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 문에는 표현식인 문과 표현식이 아닌 문이 있다. 표현식인 문은 값으로 평가될 수 있는 문이고, 표현식이 아닌 문은 그렇지 않은 문이다. 예를 들어, 변수 선언문은 표현식이 아니다. 할당문은..
-
모던 리액트 Deep Dive - 리액트 개발을 위해 꼭 알아야 할 JSReact 2024. 2. 12. 18:32
1. 자바스크립트의 데이터 타입 1) 원시 타입 - boolean 0, -0, 0n, 0x0n은 부호나 소수점 유무에 상관없이 falsy한 값 NaN은 Number타입 - null type of null === 'object' // true? typeof로 null을 확인했을 때 해당 타입이 아닌 object가 반환. 명시적으로 비어 있음을 나타내는 값 - undefined 선언됐지만 할당되지 않은 값. - number - string 백틱을 사용해서 표현한 문자열을 템플릿 리터럴이라고 함. 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있음. - symbol 심볼은 심볼함수를 이용해서만 만들 수 있음. - bigint number가 다룰 수 있는 숫자 크기의 제한을 극복하기..