JayGo 개발 연습장

this는 함수 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다(모던 자바스크립트 딥다이브 p343). 이는 다른 클래스 기반 객체 지향 언어들의 this가 반드시 생성된 인스턴스를 가리키는 것과는 많은 차이가 있다. 함수가 호출되는 방식에 따라 동적으로 결정되기 때문에 유연하다는 장점은 있지만, this의 바인딩을 예측하기 어렵다는 문제가 있다.자바스크립트의 this 바인딩은 어떠한 경우에서도 일반 함수에서는 전역, 메서드에서는 호출된 객체, 생성자 함수에서는 인스턴스를 가리킨다. 이렇게만 생각하면 어렵지 않은 것 같지만, 사실 사용된 시점의 함수(또는 메서드)가 세 개 상황 중 어떤 상황에 해당하는지를 추론하는 건 생각보다 어려운 일이다.그래서, 그런 상황들 중 몇 가지를..

Date 객체란자바스크립트는 날짜 형식의 데이터를 처리하기 위한 Date 객체를 별도로 제공한다. Date는 자바스크립트에서 기본 제공하는 빌트인 객체로, Object, Array, String, Number 처럼 생성자(new Date())로 사용된다. Date 생성자로 생성한 값의 타입은 객체다.const date = new Date();console.log(date, typeof date) // Fri Nov 15 2024 17:20:49 GMT+0900 (한국 표준시) 'object'new Date()를 사용하면 Date 객체가 생성되는 시점의 시간을 기준으로 값이 할당된다(사용자 컴퓨터의 기본 로컬 타임존이 그대로 적용된다). 이 값은 정적이며, 시간의 흐름에 따라 값이 계속 변하진 않는다(생..

form 태그에 이는 여러 기능들을 찾아보면서 사용해 봤다. 사용하면서 유용하다고 생각하게 된 몇 가지 기능들이 있어 내용 정리해 둔다.reset()로그인, 회원가입처럼 하나의 form 태그 안에 여러 input 창들이 있을 경우 submit 이벤트 후 창을 초기화하기 위해 모든 input 창들을 하나씩 선택해 ''으로 초기화해줘야 한다(form 태그의 기본 동작은 input에 들어온 값들을 바로 비워주는 것이지만, 로직 처리를 위해 e.preventDefault()를 사용한 상황을 가정한다). submit 위의 예제에서 form 태그가 속성으로 가지고 있는 ..

토이 프로젝트PRIMARY라는 가제의 토이 프로젝트를 진행했다.결혼 후 생활에 대해 '이렇게 할 것 같다'라고 생각되는 것들을 심리 테스트 문항으로 만들어서 '나만의 결혼 생활 유형'을 알려주는 서비스다.간단하지만 실제 사용자를 만들어볼 만한 아이디어인 것 같아서 바로 실행했고, 한 60% 정도 완료됐다.큰 틀은 다 잡았고, 이제 UI 조금만 더 손보고, 반응형 처리하고, 라우팅 해서 배포하면 끝이다. 한 이틀 정도만 더 시간 투자하면 잘 끝낼 수 있을 것 같다.확실히 유저가 있는 서비스를 생각하니 기획적으로 고민이 많이 됐다. 그래서, 개발에 쓴 시간보단 기획적인 부분을 다듬는 데 쓴 시간이 좀 더 많은 것 같다.그리고, 일단 돌아가는 서비스로 출시를 해보는 걸 목표로 하다 보니 코드 퀄리티가 많이 떨..

자바스크립트에 대해 공부할수록 너무나 많은 개념이 '엔진이 이와 같이 처리해 준다'라는 짧은 설명으로 끝나버리는 것을 보게 됐다. 처음 공부하는 입장에서 이 내용이 잘 와닿지가 않았다. 아마도 엔진이 뭔지에 대한 개념이 부족해서가 아닐까 생각했다. 그래서 자바스크립트 엔진에 대해 몇 가지 찾아본 내용을 기록해 둔다.고수준 언어와 저수준 언어컴퓨터는 전기 신호로 모든 데이터를 표현한다. 그리고 전기로 어떠한 값을 표현할 수 있는 방법은 전기를 흐르게 하거나, 흐르지 않게 하는, 두 가지 방법이 유일하다. 그리고, 실제로 컴퓨터는 모든 데이터를 1과 0으로만 표현한다. 전기를 흘려보내서 1을, 전기의 흐름을 끊어서 0을 표현하는 것이다.그렇다 보니, 컴퓨터에게는 숫자 1과 0으로만 이루어진 코드가 가장 친숙..

실행 컨텍스트의 구성 요소실행 컨텍스트는 자바스크립트 코드가 동작을 관리하고, 코드 실행을 위해 필요한 환경(스코프, this 등)과 데이터 상태 정보를 관리하는 자바스크립트 엔진의 동작 메커니즘이다. 실행 컨텍스트는 자바스크립트의 동작을 관리하는 핵심적인 역할을 하며 스코프 체인, 호이스팅, this, 변수 관리(메모리 관리), 클로저 등 중요한 개념을 이해하는 배경이 된다.실행 컨텍스트는 작성된 코드 평가 시 생성되며, 콜 스택에 선입선출(FIFO; First In, First Out) 방식으로 공간을 할당하여 스코프를 관리한다. 실행 컨텍스트의 메모리 점유 방식에 대해선 포스트에 기록해뒀다.이번 포스트에선 실행 컨텍스트의 구성 요소들에 대해 조금 더 알아보려고 한다. 먼저, 실행 컨텍스트는 렉시컬 ..

실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드를 실행하기 위해 필요한 다양한 환경 정보와 데이터들의 상태를 관리하기 위한 자바스크립트 엔진의 동작 메커니즘이다. 자바스크립트로 작성된 모든 코드는 자바스크립트 엔진에서 관리하는 '실행 컨텍스트'를 통해서만 동작할 수 있고, 그런 의미에서 실행 컨텍스트를 제대로 알아야지만 자바스크립트의 핵심적인 개념들(호이스팅, 클로저, 스코프 체인 등)을 제대로 이해할 수 있다.가장 먼저 실행 컨텍스트에 대한 이해를 방해했던 요인 중 하나가 바로 '실행 컨텍스트에 대한 정의'였다. 많은 자료에서 실행 컨텍스트를 '코드 실행을 위한 환경 정보들을 모아놓은 객체'라고 표현한다. 여기서 '객체'라는 표현이 처음 공부할 때 참 많은 오해를 불러일으켰다. 대표적으론 '자바스크립..

프로퍼티는 메서드인 프로퍼티와 메서드가 아닌 프로퍼티로 구분할 수 있다(포스트 참고). 메서드인 프로퍼티는 값으로 동작 가능한 함수를 갖고, 메서드가 아닌 프로퍼티는 그 이외의 값을 갖는다. 메서드인 프로퍼티도 프로퍼티이지만, 메서드가 아닌 프로퍼티와의 구분을 위해 보통 '메서드'라고 부른다.데이터 프로퍼티와 접근자 프로퍼티프로퍼티를 나누는 구분은 또 있다. 바로, 데이터 프로퍼티와 접근자 프로퍼티다. 둘에 대해서 한번 살펴보자.데이터 프로퍼티일반적으로 사용하는 객체의 프로퍼티들이 데이터 프로퍼티다. 어떠한 값이 오든 상관없이, 프로퍼티 키와 값으로 구성된 모든 프로퍼티는 데이터 프로퍼티다.function Person(name, age, marriage, hobby, address) { this.nam..

Javascipt의 거의 모든 것은 객체다(원시 타입 데이터를 제외한 모든 값은 객체다). 그래서, 객체에 대해 잘 이해하는 게 중요하다. 객체는 프로퍼티(Property; 속성)와 어트리뷰트(Attribute; 값)로 구성되는데, 한번 자세히 살펴보자.객체와 프로퍼티객체는 여러 데이터의 묶음으로, 키(Key)를 통해 값(Value)에 접근하도록 도와주는 자료구조이다. 프로퍼티는 객체 내부에 정의된 어떠한 속성으로, 데이터 프로퍼티와 접근자 프로퍼티로 구분된다. 그리고, 특정 프로퍼티가 갖는 속성(메타 데이터)을 어트리뷰트(Attribute)라고 부른다. 어트리뷰트는 데이터 프로퍼티와 접근자 프로퍼티에 따라 각각 다르게 생성되며, 각각에 대해서는 별도의 포스트에 조금 더 자세히 남겨놓았다.그러면, 객체..

얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)JavaScript의 데이터 타입은 크게 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 나눌 수 있다. 원시 타입은 확보된 스택 메모리에 값을 직접 저장하지만, 참조 타입은 값을 힙 영역에 저장하고, 스택에는 데이터가 저장된 힙 메모리 영역의 첫 주소값이 저장된다. 값을 스택에 직접 저장하는지 참조할 주소를 저장하는지에 따라 차이가 있으며, 그 차이로 인해 데이터 복제 방법에서 차이가 생긴다(원시 타입과 참조 타입 참고).원시 타입 데이터는 변수로 데이터를 복제하면 값이 저장된 동일한 메모리 주소를 가리킨다. 원시 타입의 값은 불변이기 때문에 복제한 변수에 다른 값을 재할당하면 가리키던 메모리 공간에 ..