TIL

변수: 언제든 값을 바꿀 수 있는 공간, var, let 키워드를 사용한다.상수: 변하지 않는 수, const 키워드를 사용한다.Number: 숫자와 관련된 타입, 정수, 실수, NaN(숫자가 아님), Infinity(무한을 나타냄)String: 문자열 타입, '' 혹

브라우저 동작 원리 크게 보면 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. > 1. 클라이언트가 원하는 URL을 입력하면 서버로 URL에 해당되는 요청을 보낸다. 브라우저는 서

나는 평소 코딩 테스트 문제를 풀면서 자료구조와 알고리즘의 차이를 정확하게 무엇인지 생각해본 적이 없다. 그럼 둘의 차이는 무엇일까? 자료구조 > 메모리를 효율적으로 사용

웹사이트의 모습을 기술하기 위한 마크업 언어.프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 초기에는 html만으로 문서와 뼈대의 위치를 모두 정함문서에 대한 수정 사항이 발생했을 때 하나씩 수

this란? > 함수를 실행할 때 할당해주는 것으로 상황에 따라 가끔은 전역 객체, 가끔은 instance를 가르킵니다. instance: 클래스의 정의를 통해 만들어진 객체를 의미 예제를 통해서 살펴보자. 아래 코드는 오류가 발생한다. 오류가 발생하는 이유 위

이번 글에서는 명령형 프로그래밍과 선언형 프로그래밍의 차이를 알아보고,왜 선언적으로 프로그래밍을 작성해야 하는지 알아보도록 하자!"어떻게" 처리하는지에 대한 묘사일일이 다 서술해야 한다."무엇을" 원하는지에 대한 묘사무엇을 할 것이냐가 중요명령형 프로그래밍에 비해 간결

Cookie 쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부 다른 저장 방법에 비해 가장 오래된 방식 Cookie 사용법 각 쿠키는 ;로 구분되어있어 불러온 후 split 등으로 쪼개서 써야 한다. 유효기간을 넣

import export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 module-name 내에 export default로 내보내진 것을 가져온다. 보통 컴포넌트들을 이렇게 사용한다. module-name 내에서 export 된 모든 것을 모두 가

fetch api 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API XMLHTTPRequest를 대체한다. Promise 기반으로 동작한다. fetch api 사용법 fetch의 기본 응답 결과는 Response 객체이다. 따라서 json으로 바꾸거나 text

컨텐츠를 페이징 하는 기법 중 하나로,아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다.Facebook, Twitter, Instagram 등 SNS에서 주로 사용된다.구현 방식은 크게 두 가지가 있다.Window의 scrol

색상을 지정하지 않으면 글자 색상을 따른다. border는 자동적으로 container 글자의 색상을 따른다. 글자는 기본적으로 black이다. Float 요소들을 수평 정렬할 때 사용한다. Float를 사용할 때 주의해야 할 점 수평 정렬하는 요소만 clearf

position 요소의 위치 특성을 지정하는 속성 위치를 정한다기 보다 위치의 특성을 지정해서 top, bottom, left, right로 위치를 지정한다. absolute 조상 요소에 position 값을 지정해주지 않았다면 viewport를 기준으로 배치가 된다

transform 요소에 변환 효과를 적용한다. 2차원 또는 3차원 효과가 있다. transform-origin x축 y축을 통해 변환 효과에 대한 기준점을 명시한다. 기본값은 중앙(50% 50%)이다. perspective 3차원 효과를 줄 때 원근 효과를 적용한

다단 (multi-column) 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠의 텍스트를 단으로 구분하여 배치하는 방법을 말한다. column-count 몇 개의 단으로 배치할 것인지 설정한다. 기본값은 auto이고 auto는 곧 1이다. column-widt

Filter 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. 보통 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰인다. linear-gradient 색상을 정의하여 그라데이션을 지정한다. 주의해야 할 점은 background-color가 아닌 backgro

css에서도 변수를 선언하고 값을 할당할 수 있다. 선언은 --접두사를 붙여 선언하고 값을 사용할 때는 var() 내부에 변수를 작성한다. :root는 최상위 요소를 선택하는 가상 클래스 선택자이다. html 태그 선택자와 동일하지만 태그 선택자는 명시도가 1점, 가

@supports 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공한다. 이를 기능 쿼리(feature query)라고 부른다. 사용법 아래 예제는 현재 브라우저가 backdrop-filter: blur를 지

미디어 쿼리 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다. 사용법 기능을 작성할 땐 뒤에 세미콜론이 붙지 않는다. 타입의 기본값은 all이다. all

Sass(SCSS)란? CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 진다. Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, CSS에는 존재하지 않는 다양한 기능들을 가지고 있다.

주석 SCSS에는 두 가지 주석을 제공한다. 컴파일 된 결과에 그대로 출력된다. 컴파일 된 결과에 나타나지 않는다. 중첩(Nesting) .container를 중복해서 작성할 필요 없이 내부에 하위 요소를 바로 작성할 수 있다. &는 작성된 위치의 상위 선택자를

변수 변수는 기본적으로 $변수명: 값 으로 선언한다. 유효 범위는 블록 범위이다. global 플래그를 사용하면 유효 범위가 전역으로 변경된다. global 플래그를 이미 전역으로 선언된 변수에 사용하면 전역 변수를 덮어 쓸 수 있어서 주의해야한다. !defau

@mixin @mixin을 통해 재활용 할 스타일을 정의할 수 있다. @include 정의해 둔 스타일을 @include를 통해 사용할 수 있다. 함수처럼 매개변수 사용이 가능하다. 하지만 주의해야 할 점은 매개변수를 넘겨주지 않는 @include 문이 있을 경우

@extend 이미 스타일을 작성해놓은 선택자 이름을 명시하면 선택자가 가지고 있는 스타일이 확장 돼서 적용된다. 하지만 extend 규칙에는 선택자 폭발이라는 부작용이 있다. 중첩 문법으로 사용할 시 선택자도 같이 상속이 된다. 아래 예제를 보면 .box 선택자도

SCSS에서 함수도 마찬가지로 자바스크립트와 비슷하다. function과 return 키워드 앞에 @를 붙여야 한다. 처럼 ... 연산자도 사용 가능하다. 함수명 css에는 많은 함수들이 있다. (calc, url, rgba 등...) 또한 Sass에서 내장되어져

조건문 if와 else 앞에 @를 붙여서 사용할 수 있다. 조건 부분의 소괄호는 생략 가능하다. else if도 앞에 @를 붙이지만 if 앞에는 작성하지 않는다는 것을 기억하자. 반복문 @each List와 Map 데이터 모두 반복적으로 처리가 가능하다. ![](

먼저 터미널에서 scss 파일을 css로 컴파일 할 수 있게 해주는 패키지를 다운로드 한다. npm install -g sass scss 확장자를 가진 파일을 만든 후 scss 코드를 작성한다. 컴파일 명령어 sass 컴파일 할 폴더명:css 위 명령어를 입력하면

SCSS에서는 기본적으로 제공하는 내장 모듈들이 있다. 또한 모듈을 가져오지 않고 바로 사용할 수 있는 전역 함수들이 있다. darken($color, $amout) 색상을 어둡게 변경한다. lighten($color, $amout) 색상을 밝게 변경한다. sat

@debug console.log 처럼 메시지를 작성해서 출력할 수 있다. @warn 경고 메시지를 출력할 때 사용한다. @error error를 발생시켜 컴파일이 정상적으로 동작하지 않게 한다.

타입스크립트 자바스크립트에서는 모든 변수나 객체의 타입을 지정하지 않는다. 따라서 타입 에러가 발생하는 코드를 작성해도 런타임 이전에 알려주지 않는다. 하지만 타입스크립트는 타입 에러가 발생하는 코드를 작성시 즉시 에러를 표시한다. 이러한 장점은 버그를 예방하고 코드

타입 스크립트 프로젝트를 Parcel 번들러를 통해 구성 npm 프로젝트 생성 타입 스크립트와 parcel 설치 package.json에 dev와 build 명령어 추가 tsconfig.json 작성 Parcel을 사용하기 위해서 script에 type="mo

문자, 숫자, 불린 타입 객체 타입 배열 타입 함수 타입 Enum 타입 Void 타입 Tuple 타입 Never 타입 Any 타입 Unknown 타입 Union 타입 Intersection 타입

타입 추론(Inference) "추론" 이란, 어떠한 판단을 근거로 삼아 다른 판단을 이끌어 냄 1) 초기화된 변수 아래 코드는 현재 string 타입이 지정된 것을 볼 수 있다. 하지만 타입 추론을 통해 초기화 된 변수에서 이 변수는 string 타입이라는 걸 알

타입 단언(Assertion) "단언"이란 "주저하지 아니하고 딱 잘라 말함" 이라는 뜻을 갖고 있다. 타입 스크립트가 정확하게 알 수 없는 타입을 개발자가 알고 있을 때 해당 타입을 타입 스크립트한테 단언 해 줄수 있다. as, ! (Non-null 단언 연산자)

타입 가드 타입 추론이 가능한 특정 범위(scope) 안에서 타입을 보장 주로 typeof, instanceof, in을 사용 타입 단언을 사용하면 코드에서는 에러가 없지만 btn 요소가 정말 없으면 런타임 시 에러가 발생한다. 타입 가드를 사용하면 특정 범위 안에

interface type 뿐만 아니라 interface를 통해 타입을 선언할 수 있다. type과의 차이점 인터페이스는 할당 연산자가 없다. 중괄호를 통해 생성해야 한다. 현재 아래를 보면 interface로 UserI 타입을 선언했다. 하지만 UserI 타입인

함수의 명시적 this 타입 현재 this는 암시적으로 any 타입이기 때문에 오류를 발생시킨다. 타입 스크립트에서는 this에 대한 타입을 작성하고 함수의 첫번째 매개변수 자리에 this의 타입을 지정해줄 수 있다. 함수 오버로딩 다음 예제에서는 로직은 동일하

public public 접근 제어자를 가진 객체는 어디서나 자유롭게 사용이 가능하다. 기본적으로 접근 제어자를 작성하지 않으면 public이다. (생략 가능) protected 해당 클래스와 확장된 다른 클래스만 사용이 가능하다. 따라서 인스턴스로 조회가 불가능하다

추상 클래스와 인터페이스의 차이점 추상 클래스 추상 클래스를 선언할 때는 앞에 abstract 키워드를 붙인다. 메소드와 속성의 타입을 선언할 때도 abstract를 붙여야 한다. extends 키워드를 사용하여 확장한다. constructor 함수에 super 함수

함수에서 제네릭 사용하기 현재는 string 타입의 매개 변수밖에 받지 못한다. 다른 타입도 받게 하려면 함수 오버로딩을 사용하면 된다. 하지만 추가해야되는 타입이 늘어날 때마다 타입 선언부와 구현부가 복잡해진다. 이럴 때 제네릭 문법으로 훨씬 심플하게 작성할 수

조건부 타입 삼항 연산자의 조건부로 타입을 지정하는 것 MyType의 타입이 string, number면 boolean, 아니면 never 타입을 반환한다. 아래 예제를 살펴보면 string과 number는 boolean | null에 속하지 않아 그대로 해당 타입

타입 스크립트에서 외부 모듈을 설치하고 사용할 때 그대로 사용하면 에러가 발생한다. 현재 lodash라는 패키지를 설치하고 사용하려고 한다. 하지만 locash라는 모듈을 찾을 수 없다는 에러가 발생한다. 이 에러를 해결 할 방법은 두 가지가 있다. 1. 직접 타

동일하게 interface 앞에 export 키워드를 붙여서 내보낼 수 있다. 하지만 추후에 코드를 살펴볼 때 이 것이 타입인지 클래스인지 헷갈리는 경우가 종종 발생한다. 따라서 타입은 따로 가져오면서 앞에 type을 붙여주면 타입을 가져왔다는 것을 한 번에 알아차릴

compilerOptions: 자바스크립트로 변환할 때 어떤 옵션의 내용으로 어떻게 해석해서 변환할 것인지 지정한다. files: 타입 스크립트 파일로 변환할 파일을 파일 단위로 지정한다. exclude: 타입 스크립트 파일로 변환하지 않을, 제외 할 폴더 경로를 지

Partial: 모든 속성이 선택적으로 바뀐다. Required: 모든 속성이 필수적으로 바뀐다. Readonly: 모든 속성이 읽기 전용으로 바뀐다. Record: 첫번째로 전달한 유니온 타입이 객체 타입의 속성으로 작성되고, 두번째로 전달한 타입이 그 속성의

디렉티브란? > 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본 구조 CDN을 통해 Vue.js 스크립트를 가져오면 전역 객체 Vue를 사용할 수 있다.

Vue.js의 라이프 사이클 라이프 사이클 다뤄보기 beforeCreate는 Vue 애플리케이션이 생성되기 전이기 때문에 data를 사용할 수 없다. 또한 mounted를 제외한 라이프 사이클은 DOM과 연결되기 전이기 때문에 Element 요소를 찾을 수 없다.

v-once v-once 디렉티브를 지정하면 반응성을 갖지 않게 된다. 처음 데이터 한 번만 화면에 출력하고 데이터가 변경되어도 화면이 바뀌지 않는다. 변경할 필요가 없는 데이터에 사용하면 메모리를 절약할 수 있다. v-html 이중 중괄호 구문은 데이터를 text로

data 옵션을 함수로 반환해야 하는 이유 App은 컴포넌트이다. 따라서 재사용이 가능한데 여러 개의 Vue 애플리케이션을 만들 때 반응형 데이터들을 함수로 만들어서 반환하는 것이 아닌 참조형인 객체 데이터로 반환하게 되면 첫 번째 애플리케이션에서 데이터를 변경할 시

computed 아래 예제는 count * 2 라는 표현식이 4번 중복되어 실행되고 있다. 지금은 간단한 표현식이지만 복잡한 표현식일 경우 매우 비효율적이게 된다. 해당 표현식을 함수로 만들어도 함수가 4번 호출되는 건 마찬가지므로 역시 비효율적이다. 이럴 때 사용

클래스 바인딩 vue에서는 클래스 속성을 여러개 지정할 수 있다. 객체 리터럴을 통해 쉼표로 구분하여 key value 형태로 작성할 수 있다. key와 value가 이름이 같으면 축약할 수 있다. 아래 예제는 active 변수가 true면 active 클래스가

v-if v-if 디렉티브를 통해 조건부 렌더링을 할 수 있다. else if문은 v-else-if 디렉티브로 사용 else문은 v-else 디렉티브로 사용 해당 디렉티브에 전달되는 데이터가 truthy면 요소가 출력되고 falsy면 출력되지 않는다. 주의할 점은

배열 v-for을 통해서 요소를 반복해서 출력할 수 있다. 현재 항목의 인덱스를 두 번째 전달인자 옵션으로 제공한다. in 대신에 of를 구분자로 사용할 수 있다. JavaScript의 이터레이터 구문과 유사하다. 객체 객체의 속성을 반복 (value를 반복)

이벤트 청취 v-on 디렉티브는 @ 기호로 축약해서 사용이 가능하다. 핸들러 값은 다음 중 하나일 수 있다. 인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인 메서드 핸들러: 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로. 인라인 핸들러 인라인

단방향 데이터 바인딩 하나의 데이터가 한 쪽 방향으로만 영향을 미치는 것. 데이터가 화면에 영향을 미치는 건 가능하지만 화면에서 입력된 데이터가 실제 데이터를 업데이트 시킬 수 없다. 양방향 데이터 바인딩 하나의 데이터가 양쪽 방향으로 서로 영향을 미치는 것. inp

props: 상위 컴포넌트에서 자식 컴포넌트로 데이터 전달 $emit: 자식 컴포넌트에서 상위 컴포넌트로 데이터 전달 $emit에서 전달한 데이터는 상위 컴포넌트에서 이벤트 핸들러로 지정된 메소드에 첫 번째 인자로 전달된다. 만약 첫 번째 인자로 다른 매개변수를 전

Node.js 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임 환경 런타임 환경: 동작할 수 있는 환경 NPM(Node Packaged Manager) Node.js로 만들어진 package를 관리해주는 툴 Node.js를 다운로드 받으면 자동적으로 NPM도 받아진

node_modules에 받아온 vue 패키지에서 index.js를 살펴보면 commonJS 방식으로 모듈이 내보내기 된 것을 볼 수 있다. 따라서 vue를 가져올 때는 import * as Vue from "vue"로 가져와야 한다. (vue 패키지의 모든 것을

Webpack 사용해보기 프로젝트 초기화 webpack을 개발 의존성 패키지로 설치 webpack-cli는 webpack의 기능을 터미널에서 이용 가능하게 해주는 패키지다. package.json에 scripts 작성 루트 폴더에 webpack.config.js

개발 서버 구성하기 webpack-dev-server: 개발 용도로 서버를 구성해서 진행할 수 있다. package.json에 scripts 작성 터미널에 npm run dev를 입력하면 개발 서버가 열리는데 개발 서버는 코드를 변경하면 즉시 브라우저에 반영되는 장

린터(linter)란? 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린터는 대표적으로 Prettier와 ESlint가 있다. ESLint 적용하기 루트 폴더에 .eslintrc.

SFC 파일에 컴포넌트를 등록할 때는 2가지의 방법이 존재한다. 1. 전역 컴포넌트 등록 등록할 컴포넌트 생성 main.js에서 vue 애플케이션의 component 함수를 통해 전역 컴포넌트 등록 App.vue에서 사용 2. 지역 컴포넌트 등록 등록할 컴포넌트

하위 컴포넌트는 상위 컴포넌트에서 데이터를 받을 때 props를 통해서 전달받는다. 하지만 상위 컴포넌트에서 전달받은 데이터를 하위 컴포넌트에서 수정하려고 하면 에러가 발생한다. 그럼 전달받은 prop은 어떻게 수정을 할까? 첫번째로는 상위 컴포넌트에서 받은 데이

Non-Prop 속성 컴포넌트 non-prop 속성은 컴포넌트에 전달되지만, props나 emits에 정의된 특성을 지니고 있지 않은 속성 또는 이벤트 리스너를 의미한다. ex) class, style, id 등 이러한 속성들은 $attrs 프로퍼티를 통해 접근할 수

emits 상위 컴포넌트에서 prop을 전달하면 하위 컴포넌트는 $emit을 통해 전달받은 prop을 변경하는 커스텀 이벤트를 상위 컴포넌트에 전달함으로서 하위 컴포넌트에서도 prop을 변경할 수 있다. 이 때 emits이라는 옵션을 추가해서 명시적으로 커스텀 이벤트

컴포넌트 내부에 추가로 내용을 작성하려고 할 때 `` 태그를 사용한다. 컴포넌트 내부에 작성한 컨텐츠가 ``이라는 태그로 대체된다. 만약 컴포넌트 내부에 추가로 전달하는 내용이 없으면 slot 태그 사이에 있는 값으로 출력된다. 이것을 Fallback라고 한다. 다

동적 컴포넌트를 사용하려면 `` 태그를 사용한다. is 속성에 렌더링 할 컴포넌트의 이름을 명시한다. 이 때 컴포넌트가 변경될 때마다 새롭게 생성되고 해제하는 것을 볼 수 있다. 이는 전환비용이 높은 문제가 발생한다. 이러한 특성을 제한하려면 동적 컴포넌트를 ``

Refs DOM 내부에서 요소를 찾으려면 querySelector와 같은 메서드를 통해 찾을 수 있다. 하지만 이러한 작업은 해당 파일만이 아닌 HTML 구조를 모두 찾아야 하기 때문에 비효율적이다. ref 속성을 사용해서 해당 요소를 참조할 수 있다. 참조할 때는

플러그인 생성 및 등록 Vuejs에서 플러그인을 등록하면 vue 컴포넌트 내부에서 this라는 키워드로 접근할 수 있다. 플러그인을 생성하는 방법은 plugins 폴더를 생성 후 내부에 js 파일을 생성한다. export default로 내보내기를 작성하고 inst

믹스인을 사용하면 기본적인 구성들을 만들어놓고 필요에 따라 옵션들을 재사용할 수 있다. 믹스인의 특징을 살펴보자. 믹스인 등록은 mixins 옵션을 사용해서 배열로 지정한다. 컴포넌트와 믹스인의 데이터가 중복되면 컴포넌트가 우선시된다. 따라서 아래는 "Hello V

아래 에제는 modal 창을 구현한 예제이다. 하지만 현재 modal을 fixed로 사용했지만 만약 상위 요소에 transform이나 filter 등의 스타일 속성이 있으면 제대로 출력이 되지 않는다. 이럴 때 사용할 수 있는 VueJS의 기능이 Teleport이다

데이터를 상위 컴포넌트에서 후손 컴포넌트에게 전달하기 위해서는 중간에 전달하는 컴포넌트가 필요하다. App.vue -> Parent.vue -> Child.vue 하지만 자식의 자식의 자식의 자식... 컴포넌트에 데이터를 전달해야 한다면 이렇게 전달하는 것은 매우

상하위 관계 컴포넌트가 아닌 형제 컴포넌트에서 데이터를 주고받을 때는 어떤 방식으로 해야할까? Store 개념을 활용하여 State를 관리할 수 있다. store state 관리를 store 파일로 분류해서 중앙 집중화, 내부 로직들을 분류 예측 가능한 방식으로 st

Vue-Router 사용하기 vue-router 설치 src/routes/index.js 파일 생성 후 작성 main.js에 router 플러그인 적용 라우터 사용 `: 페이지 링크, ` 태그와 유사 ``: 페이지 렌더링 부분 $router: page에 대한 제어

Hash 도메인/#/~ 새로고침 해도 서버에 요청이 전송되지 않음 서버 setting이 없어도 페이지를 구분해서 만들어낼 수 있다. 하지만 하나의 페이지만 구성되고 주소에 불필요한 #이 존재 HTML5(History) 도메인 /~ 단점: 서버에 요청이 전송됨 허나 S

네비게이션 가드 Vue 라우터에서 페이지 전환을 제어하는 기능 이를 사용하여 사용자가 특정 URL로 이동할 때 라우터가 전환을 허용하거나 거부하도록 설정할 수 있다. > beforeEach: 라우터가 페이지를 렌더링하기 전에 실행되는 가장 일반적인 네비게이션 가드입니

최신 JS 문법(2015+)을 구형 JS로 변환하는 트랜스컴파일러프로젝트 초기화babel 설치package.json에서 scripts 설정플러그인 설치해당 플러그인이 개입해서 코드를 변환babel.config.json 파일 생성하고 플러그인을 통해 옵션을 세팅변환 실행

PostCSS란 - 후처리도구 (css를 확인하고 후에 처리)bable에서 플러그인을 설치한 것 처럼 마찬가지로 플러그인을 세팅해줘야 함대표적으로 Autoprefixer 등..Autoprefixer란?\-webket- -ms-등 공급업체 접두사를 자동으로 후처리해서 붙

interactjs 요소를 늘리고 줄일 수 있는 패키지 import 후 사용 contenteditable에 placeholder 추가하는 법 속성 선택자로 선택 후 가상 선택자 empty에 before를 생성 content에 attr함수로 placeholder 속성

Transition 애니메이션 전환 효과를 추가 특징은 css에 지정한 시간을 판단해서 전환을 실행 전환할 때 순간적으로 요소에 클래스를 삽입 Animate.css css 애니메이션 라이브러리 애니메이션 구조를 만들어 놓음 main.ts에서 import "anima

API를 호출할 때 숨겨야 할 내용들이 존재한다. 이 내용들은 서버를 통해 숨겨야 하는데 Netlify에서는 간단하게 사용할 수 있는 서버리스 함수가 존재한다. package.json의 scripts 작성 netlify.toml 파일 생성 후 작성 루트 경로에 f

CompositionAPI와 OptionsAPI의 차이점 ref, method, lifecycle ref: 동적 데이터 정의, 값이 아닌 참조 객체 따라서 값을 참조할 때는 value 속성으로 참조 method는 script 내부에 함수를 정의해서 사용 create

Pinia Vue의 상태관리 라이브러리로 State, Getters, Actions의 3가지 개념으로 동작한다. vuex의 Mutation이 사라지고 modules도 기본적인 구조이므로 관리하지 않아도 된다. 사용법 pinia 설치 main.ts에 pinia 등록

개발 환경 구성하기 프로젝트 생성 패키지 설치 eslint, prettier 설치 .eslintrc.json .prettierrc 라우터, pinia(상태관리 라이브러리) 설치 라우터, pinia 등록 라우터 생성 vercel 서버리스 함수 연결하기 p

리액트 프로젝트 시작하기 component에 props 전달하기 객체 비구조화 할당을 사용하면 좀 더 간단하게 작성할 수 있다. defaultProps를 정의 할 필요가 없다. 컴포넌트 내부에 작성한 요소를 전달하려면 children 속성을 이용할 수 있다. ch

React에서 CSS를 적용하는 방법은 크게 세 가지가 있다. 1. 스타일시트를 이용한 적용 2. 인라인 스타일 적용 3. CSS in JS 다양한 라이브러리들이 있지만 여기서는 emotion을 다룬다. 별도로 스타일시트 파일을 만들지 않아도 되고 중복되지 않는

useMemo 리렌더링을 최적화 하기 위해서 사용하는 훅 특정 계산을 수행하고 그 결과를 기억한다. 해당 연산의 결과가 변하지 않는 한 계산을 다시 실행하지 않는다. 컴포넌트도 함수이다. 컴포넌트가 렌더링 된다는 것은 함수가 호출된다는 것이다. 컴포넌트가 리렌더링

useCallback 재정의를 통한 리렌더링을 막기 위해 사용하는 훅 주로 이벤트 핸들러나 콜백 함수를 메모이제이션하는 데 사용된다. 함수를 메모이제이션하여 동일한 함수 인스턴스를 재사용하며, 이로 인해 불필요한 리렌더링이 발생하지 않도록 한다. 컴포넌트도 함수이다.

Custom Hook 자주 사용되는 상태 로직을 별도의 사용자 정의 훅으로 만들어서 사용하면 중복 코드를 제거할 수 있고, 편하게 사용이 가능하다. 기존 훅을 조합해서 사용이 가능하다. 예제 체크박스의 체크 여부를 감지하는 훅 마우스 over를 감지하는 훅 특

Storybook 설치 .storybook: 설정 파일들이 모여있는 폴더 stories: 등록된 story들 Storybook 실행 Box.stories.js 작성 argument의 타입을 지정하면 Storybook에서 값 지정 가능 Circle.stories

create-vite 모듈을 전역적으로 설치 프로젝트 생성 프로젝트 이동 종속성 모듈 설치 개발 서버 실행 스토리북 설치 스토리북 시작 emotion 설치 styled 설치