[React]아토믹 디자인(Atomic Design) 패턴

디자인 패턴이란 프로그램 개발 과정에서 사용되는 설계 패턴을 정의한 것이다. React, Vue, Angular 등으로 프론트엔드 개발 시 컴포넌트 단위로 개발을 진행하는데, 컴포넌트를 어떻게 구성할 것인지에 대한 고민을 디자인 패턴이 해결해 줄 수 있다. 디자인 패턴 중 아토믹 디자인에 대해 알아보자! • 아토믹 디자인이란? 아토믹 디자인을 검색해보면 위의 사진이 가장 많이 나온다. 화학시간에 듣던 용어들이 나와서 처음엔 당황했다. 찾아보니 아토믹 디자인은 화학적 관점에서 영감을 얻어 탄생한 디자인 시스템이라고 한다. 가장 작은 단위인 원자부터 시작해서 페이지까지 컴포넌트를 5가지 단계로 나누는 방법이다. - ATOMS 디자인의 최소단위로 더 이상 분해할 수 없음 label, input, button,..

• format_list_bulleted React
• · 2023. 9. 21.
• textsms

[Vue.js] 뷰 라이프사이클(Vue LifeCycle)

• LifeCycle이란? 라이프사이클 = 생명주기 Vue에서 인스턴스가 생성되고 소멸까지의 과정을 라이프사이클이라 한다. Vue로 개발할 시, 컴포넌트를 많이 사용하는데 라이프사이클을 잘 알아두면 여러모로 활용할 수 있다. • LifeCycle 종류 1. 생성(Creation) 단계 - 인스턴스 생성 2. 장착(Mouting) 단계 - 인스턴스를 화면에 표시 3. 수정(Updating) 단계 - 인스턴스 내용 변경 4. 소멸(Destruction) 단계 - 인스턴스 소멸 각 단계별로 2가지의 속성이 있다.(총 8가지) • 생성(Creation) 단계 - beforeCreate 인스턴스가 생성되고 가장 먼저 실행된다. 이 단계에서는 data, method 속성이 정의되지 않았고, DOM에 등록되어 있지 ..

• format_list_bulleted Vue.js
• · 2023. 7. 28.
• textsms

[JS]JavaScript 화살표 함수

일반 함수와 화살표 함수 비교 // 일반 함수 function sum(a, b) { return a + b; } // 화살표 함수 let sum = (a, b) => { return a + b; } // 단순한 리턴문일 경우, 더 심플하게 표현 가능 let sum = (a, b) => a + b; ES6부터 화살표 함수(Arrow Function)이라는 문법이 추가되었다. => 기호를 사용해서 function 키워드 생략 가능! • 화살표 함수 문법 - 화살표 함수 선언 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 29.
• textsms

JavaScript Closure(+실행 컨텍스트와 스코프 체인을 곁들인..)

클로저를 이해하기 전, 알아야 될 내용이 많다,, 클로저만 봤다가 몇시간을 헤맨지 모르겠다 ㅎ • 실행 컨텍스트와 스코프 체인 메인은 클로저니까 간단하게만 이해해보자. - 실행 컨텍스트(Execution Context)우리가 작성한 코드가 실행되는 환경으로, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 글로벌 실행 컨텍스트(Global Execution Context)코드가 실행되기 전 생성되는 것(전역 실행 컨텍스트)모든 스크립트 코드는 전역 실행 컨텍스트 안에서 실행됨프로그램에 단 한개만 존재하고, 실행 컨텍스트의 기본함수 실행 컨텍스트 (Function Execution Context)전역 실행 컨텍스트가 생성된 후, 함수가 실행될 때마다 새로운 실행 컨텍스트가 작성됨함수 내에 존재하는 코드로..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 29.
• textsms

JavaScript this

JavaScript에서 this는 다른 언어와 다르게 동작함 다른 언어에서는 일반적으로 this는 자신을 가리키는 참조 변수로 사용됨 JavaScript에서는 this에 바인딩되는 객체는 한가지가 아니라 함수 호출 방식에 따라 달라짐 대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됨 -> this가 사용된 함수가 어디서 어떻게 실행되었는지가 중요!! 누가 this를 불렀는지를 알면 조금 쉬울지도..? 브라우저의 콘솔 창에 this를 호출하면 이런 실행 결과가 나온다 window 객체가 브라우저의 전역 객체이기 때문! - this 바인딩 규칙 함수 실행 시 전역객체(window) 할당 메소드 호출 시 메소드를 소유하고 있는 해당 객체 할당 객체 생성 시 생성된 객체 할당 • 전역에서 사용..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 28.
• textsms

JavaScript 동작원리

자바스크립트에 대해 깊게 공부하기 위해서는 자바스크립트의 동작원리를 알아야한다. 기본적으로 단일 스레드여서 비동기 작업이 불가능할 것 같지만 전혀 아니다! 그 이유에 대해 알아보자. • JavaScript 엔진 JavaScript 파일은 컴퓨터가 해석할 수 없으므로 브라우저의 JavaScript 엔진이 해석해준다. 이 때, memory heap과 call stack을 사용해서 JavaScript를 기계어로 변환해준다. - Memory Heap? 메모리 할당이 일어나는 곳 변수, 함수, 객체 등 모든 메모리 할당은 여기서 발생함 - Call Stack? call = function 호출 stack = 쌓이는 곳(Last In First Out) 즉, 함수 호출이 쌓이는 곳으로 call stack을 통해 어..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 27.
• textsms