profile
즐겁게 개발하자 쥬야호👻
post-thumbnail

transiton, transform

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

34분 전
·
0개의 댓글
post-thumbnail

Linux 명령어

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

6일 전
·
0개의 댓글
post-thumbnail

⚛︎ Framer Motion

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

2022년 6월 17일
·
0개의 댓글
post-thumbnail

⚛︎react-beautiful-dnd

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

2022년 6월 14일
·
0개의 댓글
post-thumbnail

⚛︎React Hook Form

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

2022년 6월 11일
·
0개의 댓글
post-thumbnail

⭐️ useEffect :)

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

2022년 6월 2일
·
0개의 댓글
post-thumbnail

CSS module(with.react)

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

2022년 5월 30일
·
0개의 댓글
post-thumbnail

styled-components

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

2022년 5월 30일
·
0개의 댓글
post-thumbnail

Webpack :)

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

2022년 5월 11일
·
0개의 댓글
post-thumbnail

⚛︎ React Component :)

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

2022년 5월 9일
·
0개의 댓글
post-thumbnail

Parcel-Bundler :)

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

2022년 4월 29일
·
0개의 댓글
post-thumbnail

Bootstrap :)

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

2022년 4월 28일
·
0개의 댓글
post-thumbnail

Sass, SCSS :)

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

2022년 4월 28일
·
0개의 댓글
post-thumbnail

📒Javascript Import, Export, Lodash :)

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

2022년 4월 25일
·
0개의 댓글
post-thumbnail

📒Javascript JSON :)

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

2022년 4월 25일
·
0개의 댓글
post-thumbnail

📒Javascript 이벤트 :)

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

2022년 4월 21일
·
0개의 댓글
post-thumbnail

📒Javascript DOM #02 :)

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

2022년 4월 17일
·
0개의 댓글
post-thumbnail

📒Javascript DOM #01 :)

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

2022년 4월 17일
·
0개의 댓글
post-thumbnail

📒Javascript 스프레드 문법, Rest 파라미터 :)

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

2022년 4월 9일
·
0개의 댓글
post-thumbnail

📒Javascript RegExp :)

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

2022년 4월 8일
·
0개의 댓글