요소의 전환(시작과 끝) 효과를 지정하는 단축 속성: 전환 효과를 사용할 속성 이름을 지정all: df, 모든 속성에 적용속성이름: 전환 효과를 사용할 속성 이름 명시: 전환 효과의 지속시간을 지정0s: 전환 효과 없음시간: 지속시간(s)을 지정: 전환 효과의 타이밍(

리누스 토발즈가 작성한 커널 혹은 GNU 프로젝트의 라이브러리와 도구가 포함된 운영 체제PC와 모바일, 서버, 임베디드 시스템 등 다양한 분야에서 활용운영체제의 커널과 사용자를 이어주는 소프트웨어Brian Fox가 작성한 유닉스 쉘다양한 운영체제에서 기본 쉘로 채택Pa

: animation을 쉽게 구현할 수 있음.📎 설치 npm i framer-motion📎 importimport {motion} from 'framer-motion'📎 규칙animate 적용할 요소를 <motion.div>로 작성📎 animate된 스타일

드래그앤 드롭 기능 구현해주는 라이브러리유저들이 무언가 재정렬하도록 도와줌.📎 설치npm i react-beautiful-dnd: 드래그앤드롭을 사용할 컴포넌트를 감싸는 태그: onDragEnd 필수 프롭; 유저가 드래그를 끝낸 시점에 불려지는 함수.우리가 어떤것을

: React Hook Form 라이브러리: 유효성 검증시에도 유용함.(vaildation)npm i react-hook-formex) <input {...register("toDo")} /> : register가 반환하는 객체를 input의 props로 전달함

👾 \`\`\`jsimport React, { useState } from "react";function Hello() { return Hello;}function App() { const showing, setShowing = useState(false); c

create-react-app에서 제공.컴포넌트에 대해 고유한 클래스와 고유한 버전의 스타일과 클래스를 생성css파일에 스타일을 작성하고 우리가 사용하는 컴포넌트로만 범위를 한정할 수 있음.css코드와 자바스크립트 파일을 분리하여 사용 가능함.Button.module.

npm install --save styled-components요소에 대한 메소드를 가지고 있음.styled.button(), styled.button\`\`처럼, 버튼은 styled객체의 메소드임!👉🏻 고유한 클래스 이름을 갖기 때문에, 여기서 설정한 스타일은

npm i webpack webpack-cli webpack-dev-server@next : webpack-cli랑 webpack-dev-server의 버전을 같게 맞춰주기 위해 @next를 붙여줌. 개발서버 오픈 script 부분에 "dev" : "webpack-d

render() 메서드를 정의해줘야 함.render() {return React.Element 반환 필수}📎 import📎 정의📎 사용상속받거나 확장하는것이 아닌 순수한 함수📎 import📎 정의1📎 정의2📎 사용

구성 없는 단순한 자동 번들링소/중형 프로젝트에 적합사용하는 파일들을 직접적으로 dist폴더로 삽입하는 것은 위험함. 그래서 dist폴더로 자동으로 넣어주는 패키지의 도움을 받음.: staticFiles옵션을 추가해 parcel-bundler가 복사해서 dist폴더로

Sass 변수 및 믹스인, 반응형 그리드 시스템, 사전 구축된 광범위한 구성 요소 및 강력한 JavaScript 플러그인을 제공하는 세계에서 가장 인기 있는 프론트 엔드 오픈 소스 툴킷인 Bootstrap으로 반응형 모바일 우선 사이트를 빠르게 디자인하고 사용자 정의하

CSS 전처리기(CSS Preprocessor)CSS와 호환이 잘되는 SCSS를 권장함. CSS에서 조상부모들을 중복으로 작성한것들을 축약시킴주로 사용하는 색상들을 변수로 할당해 재사용 간편해짐\-> (컴파일)Sass에서 //로 작성한 주석은 컴파일후에 사라지고 /\*

1. 가져오기, 내보내기 🔵 가져오기(import) > Named export: import시 가져올 함수에 {}를 감싸야 함 import로 가져온 함수에 별칭 지정하기 : as 👾#1 🔵 내보내기(export) > Default export : 함수에 이

자바스크립트의 객체 표기법: package.json파일을 자동으로 생성함string: ""만 사용 가능함!!!\-> 객체의 속성명에 ""을 사용함!!!undefined는 데이터로 사용할 수 없음!!!.json파일은 하나의 데이터가 된다!!!ex)import myDat

이벤트 >- 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 1. 이벤트 핸들러 등록 🔵 어트리뷰트 방식 > - 이벤트 핸들러 어트리뷰트 이름은 onClick과 같이 o

setter, getter모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML마크업을 취득하거나 변경함.요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML마크업을 문자열로 반환함!!!할당 시 요소 노드의 모든 자식 노드가 제거되고 HTML마크업이 파싱되어 요소 노드의

DOM은 HTML문서의 계층적 구조와 정보를 표현하며 이를 에어할 수 있는 API, 즉 프러포티와 메서드를 제공하는 트리자료구조다.인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환id를 갖는 HTML요소가 존재하지 않을 경우 null을 반환id

...은 하나로 뭉쳐져 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬.Array, String, Map, Set, DOM컬렉션(NodeList, HTMLCollection), arguments와 같이 for of문으로 순회할 수 있는 이터러블에 한정됨.

정규표현식 > 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어 문자열을 대상으로 패턴 매칭 기능을 제공함. 🔵 RegExp생성자 함수 > new RegExp(pattern,[, flags]) 🔵 RegExp 메서드 RegExp.prototy