DEV_달리자

useEffect란 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 됨 (기존 클래스형 컴포넌트에서만 사용 가능했었음) 작업 실행 기준 : 작업 = effect mount unmount update 기능 : 생명주기 메소드의 네가지 기능을 수행함 componentDidMount: mount된 직후 componentDidUpdate: 갱신이 일어난 직후 componentWillUnmount: 마운트 해제되어 제거되기 직전 getDerivedStateFromProps: 최초 마운트 시와 갱신 모두에서 render() 메서드를 호출하기 직전 💡 Mount | 마운트 '시작하다', '올라가다', '끼우다/고정시키다'의 의미가..

폴더 구조 Root/src/ 외에는 자유롭게 관리 아래 예시는 7-1 패턴 (상황에 맞게 파일들을 나누고 폴더를 쪼개 하나의 css로 컴파일하여 사용 /* 공식 문서에서의 이상적인 구조 */ scss/ | |– **abstracts/** | |– _variables.scss # Sass 변수 | |– _functions.scss # Sass 함수 | |– _mixins.scss # Sass 믹스인 | |– _placeholders.scss # Sass 플레이스홀더 | |– **base/** | |– _reset.scss # 리셋/정규화 | |– _typography.scss # 타이포그래피 규칙 | … # 기타. | |– **components/** | |– _buttons.scss # 버튼 | |– _..

전역 범위 변수 :root{ ... } 전역 범위의 변수를 만들기 위해 사용 :root { --main-color: #111111; --default-color: #111111; --hover-color: #595c60; --active-color: #2d2d2d; --disabled-color: #a0a0a0; --background-color: #f1f3f6; } 지역 범위 변수 지역 범위로 생성하려면 변수를 사용할 선택기 내부에 선언 여기서 잠깐! scss는 변수명의 하이픈(-)과 언더바(_)를 구분하지 않음, key_color = key-color $error-colors: ( 'default': $error-color, 'hover': #cb0837, 'active': #b8002c, 'disa..

사전 지식 CSS란 Cascading Style Sheets W3C에서 1996년 도입한 것, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기로 탄생하게 됨 사용자에게 문서를 표시하는 방법을 지원하는 규칙 기반 언어, 웹 표준 기술 중 하나 CSS Preprocessor란 EX) Sass, Scss, Less, Stylus CSS 전(예비)처리기, CSS가 동작하기 전에 사용하는 기능, (↔ 후처리기라는 개념도 존재함!) CSS가 고도화될 수록 커지는 불편함을 해결하면서도, 웹에서는 표준 CSS만 동작한다는 점에서 나온 방식 전처리기로 작성 → 웹에서 표준의 CSS로 컴파일 → 동작 SASS란? Sass는 Preprocessing으로 궁극적인 목적..

요약 Composition API가 들어오면서 데이터 선언, 함수 선언, 상태 관리 등의 변화 컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변화 없던 종류의 컴포넌트, 내부적인 성능 향상을 위한 변화 변화 요약 Composition API (→ 기본적으로 영향을 미치는 변경점!) 템플릿 생성 방식의 변화 data, method 작성 방식의 변화 Lifecycle hook 호출의 변화 computed 속성 사용 방법의 변화 props와 this 바인딩의 분리 emit과 this 바인딩의 분리 Suspended Component Fragment Portal 내부적인 변화 그 외.. 사전 지식 Composition API란? 컴포넌트 내 특정 기능의 코드를 유연하게 구성하여 사용할 수 있도록 Vue..

BEM의 기본 구조 및 장점 기본 구조 Block(”블록”, 구역), Element(요소), Modifier(”변경자”, 수식어) 컨벤션 사용 각각 --, __로 구분 기본적으로 ID를 사용하지 않으며, 오직 class만을 사용 '어떻게 보이느냐'가 아닌 '어떤 목적인가'에 따라 이름 지음 예시 에러 메시지를 띄우는 P 태그에는 .red가 아닌 .error라는 이름 block-name과 같이 하이픈 하나만 써서 해결 장점 class name 중복을 방지 직관적임 전체 DOM tree 구조를 다시 보지 않아도 됨 Block Element Modifier 각 개념 정리 Block (블록) : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트 (다른 곳에 여..

CSS 대표적 3가지 방법론 - OOCSS - BEM - SMACSS OOCSS Object Oriented CSS 객체 지향에 따라 고안된 설계 방식, 구조와 외형의 분리, 컨테이너와 내용의 분리 (1) 구조와 외형을 분리 구조: width, height, padding... 외형: color, border-color, font-color... tel email // css .btn{공통 스타일 정의} .common-skin{공통 스타일 정의} (2) 컨테이너와 내용을 분리 위치에 의존하지 않는 스타일 정의 어떤 태그라도 동일한 외형을 제공 어디에서나 재사용 가능한 클래스 기반 모듈 구축 ... ... .sub-title {font-size:16px} 장점 공통된 부분을 정의해서 재사용이 가능 구조적 ..

👉 기존 Velog에서 이전한 게시물입니다. JS Deep Dive에 대한 더 많은 게시글이 있어요. 이벤트 루프를 알기 위해서는 먼저 자바스크립트 엔진에 대해 알아야 한다. 알아보자!😏 자바스크립트 엔진 자바스크립트 언어는 자바스크립트 엔진이라는 녀석을 통해 실행된다! 자바스크립트 엔진을 간단하게... V8, SpiderMonkey, Webkit... 웹 브라우저 내부 또는 Node.js 안에 구성되어 있다. 자바스크립트 코드를 해석하고 실행하는 인터프리터 힙(Memory Heap)과 호출 스택(Call Stack)으로 이루어져 있다. 전통적으로는 인터프리터 방식으로 구현되지만, 특정한 방식으로 바이트코드로 JIT를 저장해놨다가 컴파일 할 수도 있다. 💡 인터프리터 vs 컴파일러 인터프리터 : 바로 해..

이번 시간에는 가볍게 문법과 개념에 대해 훑어보려 합니다! 주요 개념들을 문법과 함께 살펴보도록 하겠습니다.😎 Vue Instance 인스턴스는 Vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다. Vue Instance 생성자 생성자 함수를 사용하여 인스턴스를 생성하는 방법이다. new Vue({ // instance option properties }); Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등 옵션 속성을 포함할 수 있다. new Vue({ // instance option properties template: "", el: "", methods: {} // ... }); Vue Instance 라이프싸이클..

특수한 의미를 가진 기호의 사용 ^(캐럿) ^who who is who 소스 상에서 who부터 시작되는 소스를 검출한다. 즉, 캐럿 이하 문자열부터 시작되는 소스를 검출할 때 사용하는 것이 캐럿이다. $(달러) $who who is who 소스 상에서 who로 끝나는 소스를 검출한다. 즉, 달러 이하 문자열부터 끝나게 되는 소스를 검출할 때 사용하는 것이 달러이다. 응용 `^\$` \$123 $로 시작되는 소스를 검출하려면 이런식으로 역슬래시를 사용한다. 응용2 `^\\` \\123 역슬래시로 시작되는 소스를 검출하고 싶다면 마찬가지로 이런식으로 사용하면 된다. 기존 Velog에서 이전한 게시물입니다.