자바스크립트에는 5가지 객체 생성 방법이 있다. 객체리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴은 직관적이고 간편하게 객체를 생성할 수 있는 생성 방식(표기법)이다. 하지만 객체 리터럴은 각각 하나의 객체만 생성하므로 아래 예시와 같이 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야하는 경우 매번 동일한 프로퍼티를 반복해서 작성해야하므로 비효율 적이다. const user = { name: 'kim', id: 'kimabc' } const user2 = { name: 'lee', id: 'mrlee' } 생성자 함수와 클래스 생성자 함수와 클래스는 프로퍼티 구조가 동일한 여러 개의 객체를 간편하게 생성할 수 있다. 생성자 함수 자바스크립트의 생..
프로젝트 개발환경을 세팅하면서 가장 먼저 설정하는 것이 ESLint와 Prettier이다. 다수의 프로젝트를 진행하면서 본인 역시 ESLint와 prettier를 설정하는 경험을 했지만, 제대로 된 이해 없이 구글링으로 나오는 코드들을 복붙하여 사용하였다. 본 포스팅은 ESLint와 Prettier 를 좀 더 깊이 있게 이해하여 활용능력을 높이고 Custom하여 사용할 수 있는 방법을 익히고자 작성하였다. ESLint와 Prettier은 무엇인가? ESLint는 linter로써 문법 상의 오류를 방지하고 일관된 코드 스타일로 코드가 작성될 수 있도록 도와주며 Prettier는 formatter로써 코드 스타일을 통일하고 교정하기 위해 사용한다. 다시 말해 "ESLint는 코드 퀄리티를 보장해주는 도구이며..
클로저란? 클로저란 함수와 렉시컬 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하고 생성된 이후에도 계속 접근이 가능한 것을 의미한다. 클로저를 이해하기 위한 사전 지식 1. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 자바스크립트 코드가 실행되면 자바스크립트 엔진은 콜스택에 전역 실행 컨텍스트를 담고, 코드를 한줄씩 읽어나가며 코드가 선언되었을때의 환경을 실행컨텍스트에 저장하게 된다. 이 과정은 생성 단계(Creation Phase) 와 실행 단계(Execution Phase) 를 거치면서 이루어지는데, 생성단계에서는 실행 컨텍스트를 생성하고 선언문 코드만 실행하여 환경 레코드(Environment Record)에 기록한..
콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. A와 B는 다음 날 오전 6시에 만나기로 약속하였다. 약속에 늦을까 불안한 마음에 A는 새벽에 수시로 깨어 시계를 확인했다. B는 5시에 알람을 맞춰두고 편히 자다가 알람을 듣고 일어났다. A의 경우 시계 함수의 제어권을 자신이 가지고 있고 시계는 A의 요청에 의해 그때그때 시간을 알려줄 뿐이다. B는 시계 함수에 시간을 요청하며 알람을 울리는 명령에 대한 제어권을 넘겨주었다고 할 수 있다. - 코어자바스크립트 발췌 콜백함수는 제어권과 관련이 깊다.함수의 실행시점이 우리가 호출하는 시점이 아니라 다른 Logic 혹은 method에 의해 결정된다면 그 함수는 콜백 함수라고 볼 수 있다. 비동기와 콜백 함수의 ..
자바스크립트에서의 this : 함수와 객체(메서드)를 구분할 수 있는 기능이다. cf) 다른 대부분의 객체지향 언어에서 this는 class로 생성한 instance 객체를 의미하지만, 자바스크립트에서는 어디서든 사용할 수 있어 함수와 객체(메서드)의 구분이 느슨하다. 자바스크립트에서 this는 기본적으로 실행컨텍스트가 생성될 때, 즉 함수를 호출할 때 결정된다. 1. 전역공간에서의 this 전역공간에서 선언한 변수 a에 1을 할당했는데, window.a 와 this.a 도 모두 1이 출력된다. 이는 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작하기 때문이다. 정확히는 "전역 변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다." 단, let 과 const 는 전역 변수를 ..
Execution Context ( 실행 컨텍스트) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 다르게 말하면 코드가 실행되기 위해 필요한 환경이라고 할 수 있다. 동일한 환경의 코드들을 실행할 때 필요한 환경정보들을 모아 컨텍스트를 구성하고 이를 Call Stack (콜 스택)에 쌓아올리고 최상위에 있는 컨텍스트와 관련된 코드들을 차례대로 실행하는 방식으로 전체 코드의 환경과 순서를 보장하게 된다. Call Stack은 LIFO ( Last In First Out), 즉 후입선출 방식으로 동작한다. 1. 실행 컨텍스트 동작 순서 최초에 전역 컨텍스트가 생성되고, 이 후 함수가 호출될 때마다 컨텍스트가 추가된다. 컨텍스트가 추가되면 VariableEnvironment, Lexi..
Promise 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구동할 때 API를 사용하여 서버에 데이터를 요청하고 받아온 데이터를 사용하여 화면을 출력하는데, 데이터를 다 받아오기 전에 화면에 데이터를 표시하려고 하면 빈 화면이나 오류가 발생하는데 이를 해결하기 위한 방법 중 하나가 프로미스이다. Promise 예제 코드 function getData(callback) { // new Promise() 추가 return new Promise(function(resolve, reject) { $.get('url 주소/products/1', function(response) { // 데이터를 받으면 resolve() 호출 resolve(res..
Callback은 다른 function이 실행된 뒤에 실행되는 function이다. 자바스크립에서 function은 객체이다. 이점 때문에 function은 다른 function들을 arguments로 가질 수 있다. 그리고 다른 function을 return할 수 있다. 다른 function들을 return하는 function을 higher-order functions라고 하고, argument가 되는 function들을 callback function이라 한다. Callback 함수가 왜 필요한가? Javascript는 event driven 언어이다. 이것은 다음 단계로 실행되기 전에 response를 기다리는 대신에 다른 event들을 listening하는 동안 계속해서 실행되는 것을 의미한다. ..
댓글 좋아요/삭제 기능 구현 인스타 클론 코딩 중 각 게시글의 댓글에 좋아요 추가/삭제 기능을 구현하였다. 화면 구조는 아래와 같고 각 댓글의 DOM 구조는 아래 코드와 같다. john.johnson what the heck 채우기 색이 없는 하트와 채우기 색이 빨간색인 2가지 svg 파일이 각각의 .likeBtn에 들어있고, 각각 하얀 하트는 display="inline-block", 빨간 하트는 display="none" 값을 주어 하얀 하트만 버튼에서 나오게 되어있다. 첫번째 방법 const likeBtn = document.querySelector('button'); const svgs = likeBtn.getElementsByTagName('svg'); likeBtn.addEventListene..
Mission. id, password 가 입력되면 로그인 버튼 활성화 id, password 가 다시 지워지면 로그인 버튼 비활성화 DOM요소 const inputId = document.querySelector('.loginId'); const inputPw = document.querySelector('.loginPw'); const loginBtn = document.querySelector('.loginBtn');첫번째 방법 inputPw.addEventListener('keydown', () => { if(inputId.value && inputPw.value) { loginBtn.disabled = false; loginBtn.styl..
