본문 바로가기

전체 글

 (117)
컴포넌트 (클래스형 vs 함수형) 컴포넌트란?HTML 요소를 반환하는 JavaScript 함수 또는 클래스UI를 구성하는 독립적이고 재사용 가능한 코드 조각 컴포넌트의 핵심 개념1. props (속성)부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식읽기 전용이며 컴포넌트 내부에서 변경할 수 없다.function Child(props) { return {props.message};}function Parent() { return ;} 2. state (상태)컴포넌트 내부에서 관리되는 데이터함수형 컴포넌트에서는 useState 훅을 사용해 관리한다.function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} ..
Debounce and Throttle 디바운스와 스로틀짧은 시간 간격으로 연속해서 발생하는 이벤트(ex. scroll, resize, input, mousemove 등) 에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.디바운스와 스로틀은 연속해서 발생하는 이벤트를 그룹화해서 코드의 성능을 최적화하는 프로그래밍 기법으로 타이머 함수를 사용해 구현된다. Debounce(디바운스)function debounce(func, delay) { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, ..
아이콘 플러그인 & 아이콘 직접 만들기 피그마에서 SVG 형식의 아이콘을 사용하기위해 피그마 플러그인들을 몇가지 사용해보았고, 원하는 아이콘이 없을땐 직접 만들어보았다. 피그마 아이콘 플러그인Google material design icons원하는 아이콘들을 검색해서 찾을 수 있다. 아이콘 종류가 많다고 느낌프로 플랜으로 구입해야 제한 없이 사용할 수 있는 것 같다.(적용하다가 중간에 구매하라고 알림이 뜸..) Material Symbols원하는 아이콘들을 검색해서 찾을 수 있다.종류가 많지는 않은 것 같은데 크게 부족함은 없는 듯?아직 리밋 제한은 안걸렸는데 한도가 있을진 모르겠다.  아이콘 직접 만들기플러그인에서 원하는 아이콘이 제한이 있어서 직접 만들어보았다. ① 24 x 24 사이즈의 빈 프레임 생성 ② 선을 이용해서 원하는 아이콘 그..
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..

티스토리툴바