본문 바로가기

분류 전체보기

 (114)
arguments vs rest parameter arguments함수에 전달된 모든 인수를 포함하는 유사 배열 객체인덱스로 접근할 수 있고 length 속성을 가지지만, 실제 배열이 아니므로 배열 메서드(map, filter 등)는 사용할 수 없다.Array.from() 이나 spread 연산자를 사용해 배열로 변환 가능var args = Array.from(arguments);var args = [...arguments]; 일반함수와 화살표함수에서의 arguments■ 일반함수(함수 선언문)에서의 argumentsarguments 객체를 통해 함수에 전달된 모든 인수에 접근할 수 있다.매개변수를 명시적으로 선언하지 않아도 사용할 수 있다.일반 함수(함수 선언문 및 함수 표현식)에서 사용 가능function example() { console.log..
레이어, 프레임, 섹션, 페이지 캠프 기간 동안 프로젝트 기획, 협업 할 때 항상 사용했던 피그마.. 사실 캠프를 시작하면서 처음 접하게 되었는데 팀원 중에는 퍼블리싱 경험이 있거나 이미 툴을 사용해봤던 분들이 많았어서 그저 그분들이 하시는 걸 쳐다보고 이것저것 눌러보기만 했었다.최종때는 디자이너분들이 만들어주신 시안을 Dev mode 로 보면서 똑같이 구현하는 것만 했지, 제대로 다룰 줄 몰랐다.그래서 시간적 여유가 있을때 별도로 공부하고 싶었기 때문에 공부한 것들을 정리할 겸 하나씩 기록해보고자 한다.  레이어그래픽을 만들 때 Z축으로 층을 쌓은 앞과 뒤의 개념레이어의 순서로 앞, 뒤 표현을 할 수 있다.단축키cmd + [  , cmd + ]한칸 뒤로가기 , 한칸 앞으로 가기cmd + option + [  , cmd + option..
이벤트 루프와 실행 컨텍스트 이벤트 루프와 실행 컨텍스트는 함께 작동하여 자바스크립트의 동기 및 비동기 작업을 효율적으로 관리하고, 코드의 실행 흐름을 제어한다. 이벤트 루프자바스크립트의 비동기 작업을 관리하는 메커니즘콜 스택이 비어있는지 지속적으로 확인하고 태스크 큐에 있는 작업을 하나하나 콜 스택으로 이동시키는 역할을 한다.실행 컨텍스트이벤트가 실행되는 환경을 관리하고, 콜 스택에 쌓여서 동기 작업을 순차적으로 처리한다. 이벤트 루프의 작동방식코드 실행 시작전역 실행 컨텍스트가 생성되어 콜 스택에 푸시되고이벤트 루프가 시작되어 콜 스택을 모니터링 한다.동기 코드 실행코드가 순차적으로 실행되며, 함수 호출 시 새로운 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.각 실행 컨텍스트는 자신의 변수 환경, 스코프 체인, this 바인딩을..
클래스(class) 클래스와 인스턴스클래스어떤 사물의 공통 속성을 모아 정의한 추상적인 개념객체를 만들기 위한 "설계도" 또는 "템플릿"ES6 도입, 기존 프로토타입 기반 상속을 보다 명확하고 쉽게 사용할 수 있게 해줌인스턴스클래스의 속성을 지니는 객체 클래스의 특징constructor, 인스턴스 메서드,  staticclass Person { // 생성자 메서드 constructor(name) { this.name = name; } // 인스턴스 메서드 sayHello() { console.log(`안녕하세요, ${this.name}입니다.`); } // 정적 메서드 static create(name) { return new Person(name); }}//..
프로토타입(prototype) 프로토타입프로토타입은 객체가 가진 기본 속성과 메서드를 정의하는 객체로써 객체간의 상속을 구현하는데 사용된다.모든 자바스크립트 객체는 다른 객체로부터 속성과 메서드를 상속받을 수 있는 숨겨진 링크(프로토타입 체인)를 가지고 있다. 프로토타입의 구조와 개념어떤 생성자 함수(constructor)를 new 연산자와 함께 호출하면 constructor에서 정의된 내용을 바탕으로 새로운 instance가 생성된다.이때 instance에는 __proto__라는 constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여된다.// Constructor : 함수 객체이며, prototype 프로퍼티를 가짐function Person(name) { this.name = name;}// p..
클로저 클로저함수가 자신이 생성될 때의 환경(스코프)을 기억하고 그 환경의 변수 함수 등에 접근할 수 있게 해주는 특성내부 함수에서 외부 함수의 변수에 접근할 수 있다.외부 함수의 실행이 끝난 후에도 내부 함수는 외부 함수의 변수를 기억한다.function outerFunction() { let outerVariable = '외부 변수'; function innerFunction() { console.log(outerVariable); // 외부 함수의 변수에 접근 가능 } return innerFunction;}const closure = outerFunction();closure(); // '외부 변수' 출력  내부함수를 외부로 전달하는 방법1. 함수 반환..
콜백함수 콜백함수다른 함수에 인자로 전달되어 특정 시점에 호출되는 함수함수 호출, 인자, 실행 시점에 대한 제어권을 다른 함수에게 위임한다.비동기적인 작업을 처리하는데 주로 사용된다.Ajax 요청 : 웹 애플리케이션에서 서버로부터 데이터를 비동기적으로 가져올 때 사용타이머 : setTimeout이나 setInterval과 같은 타이머 함수에서 지정된 시간 후에 실행될 코드를 콜백함수로 전달이벤트 핸들링 : DOM 요소의 이벤트 처리파일 읽기 / 쓰기 : Node.js에서 파일 시스템 작업을 수행할 때 사용함수의 동작을 동적으로 변경 제어권 위임1. 호출시점콜백함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.function setTimer(callback) { setTimeout(..
this this자바스크립트에서의 this 는 현재 실행중인 컨텍스트(객체)를 참조하는 키워드로 함수나 메서드가 호출되는 방식에 따라 그 참조값이 달라진다. this 의 동작 방식1. 전역 범위에서의 thisconsole.log(this === window); // 브라우저 환경 - true전역 범위에서 this 는 전역 객체를 가리킨다.브라우저 - window / Node.js - global 2. 일반 함수 호출function showThis() { console.log(this);}showThis(); // window or global일반함수에서 this 는 기본적으로 전역 객체를 참조한다.메서드의 내부함수에서도 동일함strict 모드에서는 undefined 3. 메서드 호출const obj = {..

티스토리툴바