From 72cea177c2374a3a09a281747305f6ee06bb2f0f Mon Sep 17 00:00:00 2001 From: eunbeann Date: Mon, 20 May 2024 00:07:43 +0900 Subject: [PATCH] [ chore ] edit the Title --- Algorithm/EdgeCase.md | 2 +- Algorithm/GCD.md | 2 +- Algorithm/Hash.md | 6 +- CS/BrowserRender.md | 4 +- CS/Cookie,Session,Token.md | 4 +- CS/GETvsPOST.md | 2 + CS/TDD, BDD.md | 2 + CSS/img-center-align.md | 12 +- CSS/margin-collapsing.md | 20 +- ETC/Aline.md | 9 +- ETC/SPA_MPA_CSR_SSR.md | 2 + Error/createStore_strikethrough.md | 2 + GIT/GitFlow.md | 2 + GIT/commitConventions.md | 20 +- GIT/specificCommit.md | 4 +- HTML/buttonType.md | 2 + JAVA/Annotation.md | 2 + ...355\231\225\354\236\245for\353\254\270.md" | 2 + JS/Array.prototype.map().md | 11 +- JS/JSX.md | 8 +- JS/Math.Floor,ParseInt.md | 6 + JS/NaN===NaN.md | 66 +++---- JS/Object.md | 18 +- JS/arrowfunction.md | 17 +- JS/let, const, var.md | 2 + JS/map.md | 183 ++++++++++-------- JS/short-circuit_evaluation.md | 2 + JS/window.location.href=sms.md | 2 + Next/getServerSideProps.md | 5 +- React/Axios.md | 20 +- React/FullCalendar-Google.md | 23 ++- React/Jest.md | 20 +- React/React-Hooks.md | 130 ++++++------- React/React-Slick.md | 39 ++-- React/Recoil.md | 18 +- React/SPA.md | 42 ++-- React/State.md | 17 +- React/TDD.md | 11 +- React/UseNavigation.md | 2 + React/Virtual-DOM.md | 44 ++--- TS/TS-Base.md | 2 + TS/TS-Omit.md | 5 +- TS/TS.d.ts.md | 6 +- TS/TSXvsTS.md | 2 +- TS/TypeSctipt.md | 5 +- Web/XSS.md | 4 +- 46 files changed, 444 insertions(+), 365 deletions(-) diff --git a/Algorithm/EdgeCase.md b/Algorithm/EdgeCase.md index c5f653a..a1d7ff9 100644 --- a/Algorithm/EdgeCase.md +++ b/Algorithm/EdgeCase.md @@ -1,4 +1,4 @@ -### 엣지 케이스 (edge case) +# 엣지 케이스 (edge case) - 하나의 매개변수 값이 극단적인 최대값 또는 최소값이여서 로직에 문제가 발생할 수 있는 경우 - 알고리즘이 처리하는 데이터의 값이 알고리즘 특성에 따른 일정한 범위를 넘을 경우에 발생하는 문제를 가리킴 diff --git a/Algorithm/GCD.md b/Algorithm/GCD.md index f0f8276..478d4e6 100644 --- a/Algorithm/GCD.md +++ b/Algorithm/GCD.md @@ -1,4 +1,4 @@ -### 유클리드 알고리즘 +# 유클리드 알고리즘 - 주어진 두 수 사이에 존재하는 최대공약수 (GCD\*)를 구하는 알고리즘 diff --git a/Algorithm/Hash.md b/Algorithm/Hash.md index e17aeae..ce9a7bb 100644 --- a/Algorithm/Hash.md +++ b/Algorithm/Hash.md @@ -1,6 +1,8 @@ -//HTTPS://YOUTU.BE/ZFL29YDL9D8 +# 해시(Hash) + +### 1. 해시 개념 -# 1. 해시 개념 +//HTTPS://YOUTU.BE/ZFL29YDL9D8 ### key:value의 형태를 갖는 자료 구조 diff --git a/CS/BrowserRender.md b/CS/BrowserRender.md index b98e3c5..b54e23d 100644 --- a/CS/BrowserRender.md +++ b/CS/BrowserRender.md @@ -1,4 +1,6 @@ -## 브라우저 +# 브라우저 렌더링 + +# 브라우저 - Chrome, Safari, Firefox, Internet Explorer - MDN : 웹에서 페이지를 찾아 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하느 ㄴ프로그램 diff --git a/CS/Cookie,Session,Token.md b/CS/Cookie,Session,Token.md index 413848d..c0f11bd 100644 --- a/CS/Cookie,Session,Token.md +++ b/CS/Cookie,Session,Token.md @@ -1,4 +1,6 @@ -### 쿠키 +# 쿠키 세션 토큰 + +## 쿠키 - 쿠키를 이용해 서버는 브라우저에 데이터를 넣을 수 있음 - 이용자를 기억하기 위해서 diff --git a/CS/GETvsPOST.md b/CS/GETvsPOST.md index bdac3e8..3931b69 100644 --- a/CS/GETvsPOST.md +++ b/CS/GETvsPOST.md @@ -1,3 +1,5 @@ +# GET과 POST + ## GET - 클라이언트 서버에서 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드 diff --git a/CS/TDD, BDD.md b/CS/TDD, BDD.md index 05944bb..7789c2d 100644 --- a/CS/TDD, BDD.md +++ b/CS/TDD, BDD.md @@ -1,3 +1,5 @@ +# TDD,BDD + ### TDD - 테스트 주도 개발 diff --git a/CSS/img-center-align.md b/CSS/img-center-align.md index 83c82eb..80bee33 100644 --- a/CSS/img-center-align.md +++ b/CSS/img-center-align.md @@ -1,13 +1,15 @@ +# 이미지 중앙정렬 + ## CSS에서 이미지 중앙 정렬하기 1. 이미지를 block 요소로 만들고 margin 값으로 중앙 정렬하기 ```css img { - display:block; - margin-left:auto; - margin-right:auto; -} + display: block; + margin-left: auto; + margin-right: auto; +} ``` -1. 이미지 상위 요소에 text-align 속성 적용 \ No newline at end of file +1. 이미지 상위 요소에 text-align 속성 적용 diff --git a/CSS/margin-collapsing.md b/CSS/margin-collapsing.md index cdcf3b4..57525ca 100644 --- a/CSS/margin-collapsing.md +++ b/CSS/margin-collapsing.md @@ -1,3 +1,5 @@ +# 마진 상쇄 + ## 박스의 기본 ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/212869d7-af21-4dc1-b218-5769bced87f9/Untitled.png) @@ -10,17 +12,15 @@ ## 마진 상쇄 발생 상황 - 인접한 형제 박스 간 상하 마진이 겹치는 경우 - - 큰 마진 값 하나만 적용되며, 동일한 마진을 가지는 경우 동일한 값을 한 번만 갖게 됨 + - 큰 마진 값 하나만 적용되며, 동일한 마진을 가지는 경우 동일한 값을 한 번만 갖게 됨 - 빈 요소(height == 0)의 상하 마진이 겹치는 경우 - - 위 아래의 경계가 없으므로 본인의 상단 마진 값과 하단 마진 값 중 더 큰 값으로 상쇄함. + - 위 아래의 경계가 없으므로 본인의 상단 마진 값과 하단 마진 값 중 더 큰 값으로 상쇄함. - 부모 박스와 첫 번째 자식 박스의 상단 마진이 겹치는 경우 - - 브라우저는 부모 바그와 자식 박스 강의 경계를 그 사이의 border / padding / inline 콘텐츠 유무로 판단 - - inline 콘텐츠가 없거나, 명시적인 padding, border 값을 주지 않은 경우 마진이 겹침 - - 자식 요소의 마진 크기와 관계 없이 상쇄된 마진은 부모 박스 바깥으로만 렌더링 - - ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/45ca46ba-8535-430e-b122-bb20f1ce12c3/Untitled.png) - - - 위와 같은 방법으로 padding 혹은 border 값을 주어 벽을 만들어주면 의도대로 자식 요소 배치 가능 + - 브라우저는 부모 바그와 자식 박스 강의 경계를 그 사이의 border / padding / inline 콘텐츠 유무로 판단 + - inline 콘텐츠가 없거나, 명시적인 padding, border 값을 주지 않은 경우 마진이 겹침 + - 자식 요소의 마진 크기와 관계 없이 상쇄된 마진은 부모 박스 바깥으로만 렌더링 + ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/45ca46ba-8535-430e-b122-bb20f1ce12c3/Untitled.png) + - 위와 같은 방법으로 padding 혹은 border 값을 주어 벽을 만들어주면 의도대로 자식 요소 배치 가능 ## 마진 상쇄 규칙 @@ -33,4 +33,4 @@ 1. position : absolute인 경우 2. float:left/right인 경우 (clear되지 않은 상태) 3. display:flex 일 때 내부 flexbox item -4. display:grid일 때 내부 grid item \ No newline at end of file +4. display:grid일 때 내부 grid item diff --git a/ETC/Aline.md b/ETC/Aline.md index 7b6a802..b26510f 100644 --- a/ETC/Aline.md +++ b/ETC/Aline.md @@ -1,11 +1,4 @@ - +# 리액트에서 불변성 지키기
리액트에서 불변성 지키기 diff --git a/ETC/SPA_MPA_CSR_SSR.md b/ETC/SPA_MPA_CSR_SSR.md index 2e95952..06b3342 100644 --- a/ETC/SPA_MPA_CSR_SSR.md +++ b/ETC/SPA_MPA_CSR_SSR.md @@ -1,3 +1,5 @@ +# SPA_MPA_CSR_SSR + ### SPA ↔ MPA (Single Page Application) ↔ (Multi Page Application) diff --git a/Error/createStore_strikethrough.md b/Error/createStore_strikethrough.md index b50e0ca..bb3f08e 100644 --- a/Error/createStore_strikethrough.md +++ b/Error/createStore_strikethrough.md @@ -1,3 +1,5 @@ +# createStore_strikethrough + ## 에러 코드 ### Console diff --git a/GIT/GitFlow.md b/GIT/GitFlow.md index 44e3219..ce7be71 100644 --- a/GIT/GitFlow.md +++ b/GIT/GitFlow.md @@ -1,3 +1,5 @@ +# Git Flow + ## Git flow - GitFlow는 feature 브랜치와 여러 기본 (primary) 브랜치를 사용하는 대안적인 git 브랜치 모델 diff --git a/GIT/commitConventions.md b/GIT/commitConventions.md index 1abda83..09cb1dc 100644 --- a/GIT/commitConventions.md +++ b/GIT/commitConventions.md @@ -1,3 +1,5 @@ +# 커밋 컨벤션 + ## 커밋 메시지 형식 ```powershell @@ -65,16 +67,14 @@ The and fields are mandatory, the () field is optional. - **모든 주요 변경 내역 (Breaking changes)** - 다음과 같이 하단에 언급되어야 함 - - 변경점(description of the change) - - 변경 사유 (justification) - - 마이그레이션 지시 (migration instructions) + - 변경점(description of the change) + - 변경 사유 (justification) + - 마이그레이션 지시 (migration instructions) - 해결된 이슈 (Referencing issues) - - 해결된 이슈는 커밋 메시지 하단에 `Closes #<이슈번호>`와 같이 기록되어야 함 - - 해결된 이슈가 여러개인 경우 다음과 같이 작성 - - `Closes #123, #245, #992` - Closes 대신 Fixes 를 사용하기도 함 (Angular 9 규약) - + - 해결된 이슈는 커밋 메시지 하단에 `Closes #<이슈번호>`와 같이 기록되어야 함 + - 해결된 이슈가 여러개인 경우 다음과 같이 작성 + `Closes #123, #245, #992` + Closes 대신 Fixes 를 사용하기도 함 (Angular 9 규약) ```powershell feat($browser): onUrlChange event (popstate/hashchange/polling) @@ -159,4 +159,4 @@ scope: { } The removed `inject` wasn't generaly useful for directives so there should be no code using it. -``` \ No newline at end of file +``` diff --git a/GIT/specificCommit.md b/GIT/specificCommit.md index e7cd3ae..b86cccb 100644 --- a/GIT/specificCommit.md +++ b/GIT/specificCommit.md @@ -1,3 +1,5 @@ +# git reset --hard + 일반적인 방식으로 git clone을 하면 기본값은 가장 최신 버전 특정 버전의 커밋을 받아야하는 경우가 생겨서 찾아보았다 @@ -20,4 +22,4 @@ git log ```jsx git reset --hard -``` \ No newline at end of file +``` diff --git a/HTML/buttonType.md b/HTML/buttonType.md index b759ea3..0a4256d 100644 --- a/HTML/buttonType.md +++ b/HTML/buttonType.md @@ -1,3 +1,5 @@ +# Button Type + ## 개념 - button은 총 3가지의 type 속성을 가짐 diff --git a/JAVA/Annotation.md b/JAVA/Annotation.md index db20fcf..b037abd 100644 --- a/JAVA/Annotation.md +++ b/JAVA/Annotation.md @@ -1,3 +1,5 @@ +# Annotation + - 주석이라는 의미를 가지며 소스 코드 사이에 @ 기호를 붙여서 사용 - 기존 주석과 의미는 유사하지만 코드 작성 여부에서 차이가 있다. - JDK 1.5 버전 이상에서 사용 가능 diff --git "a/JAVA/\355\231\225\354\236\245for\353\254\270.md" "b/JAVA/\355\231\225\354\236\245for\353\254\270.md" index af7a883..b236fcb 100644 --- "a/JAVA/\355\231\225\354\236\245for\353\254\270.md" +++ "b/JAVA/\355\231\225\354\236\245for\353\254\270.md" @@ -1,3 +1,5 @@ +# 확장 For 문 + ### 일반 for 문 ```java diff --git a/JS/Array.prototype.map().md b/JS/Array.prototype.map().md index 2ea7f76..cf6212d 100644 --- a/JS/Array.prototype.map().md +++ b/JS/Array.prototype.map().md @@ -1,3 +1,5 @@ +# Array.prototype.map() + ## 개념 - map() 메서드는 @@ -58,7 +60,8 @@ - **간단한 예제 1** 배열에 들어있는 숫자들의 제곱근을 구해 새로운 배열 만들기 - ```jsx + + ````jsx var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); @@ -66,9 +69,12 @@ // numbers는 그대로 [1, 4, 9] ``` + ```` + - **간단한 예제 2** index 가 짝수인 값들만 객체 배열에서 뽑아내기 - ```jsx + + ````jsx const data = [ {id: 0, name: '홍길동', age: 10}, {id: 1, name: '강호동', age: 20}, @@ -88,6 +94,7 @@ //{id: 2, name: '유재석', age: 30} //{id: 4, name: '장채연', age: 50} ``` + ```` ## 참고 링크 diff --git a/JS/JSX.md b/JS/JSX.md index c2b0eb2..2c87b41 100644 --- a/JS/JSX.md +++ b/JS/JSX.md @@ -1,16 +1,16 @@ +# JSX + 🔗[https://ko.reactjs.org/docs/introducing-jsx.html](https://ko.reactjs.org/docs/introducing-jsx.html) - 기능적인 큰 차이는 없음 - JSX는 리액트 엘리먼트를 생성 -# JSX - javascript에 xml을 추가한 확장형 문법 빌드시에는 Babel에 의해 JS로 변환된다. ```jsx -const element =

Hello, world!

+const element =

Hello, world!

; ``` JS를 확장한 문법인 JSX. @@ -31,4 +31,4 @@ document.getElementById('root') ); 출처: https://gocoder.tistory.com/2219 [고코더 IT Express] -``` \ No newline at end of file +``` diff --git a/JS/Math.Floor,ParseInt.md b/JS/Math.Floor,ParseInt.md index 02dc796..2d06f45 100644 --- a/JS/Math.Floor,ParseInt.md +++ b/JS/Math.Floor,ParseInt.md @@ -1,4 +1,7 @@ +# Math.Floor,ParseInt + - 두 메서드가 양수일 경우 ⇒ 내림한 결과 + ```jsx a = Math.floor("18.34"); // 18 b = Math.floor("72.78"); // 72 @@ -6,7 +9,9 @@ a2 = parseInt("18.34"); // 12 b2 = parseInt("72.78"); // 56 ``` + - 두 메서드 **음수일 경우** ⇒ 차이 발생 + ```jsx c = Math.floor("-18.34"); // -19 d = Math.floor("-72.78"); // -73 @@ -14,6 +19,7 @@ c2 = parseInt("-18.34"); // -18 d2 = parseInt("-72.78"); // -72 ``` + - Math.floor : 소수 첫째 자리에서 양수일 때 처럼 **내림** - parseInt : 올림 → 소수점을 버려 **올림한** 값이 나옴 diff --git a/JS/NaN===NaN.md b/JS/NaN===NaN.md index 5974e36..4561313 100644 --- a/JS/NaN===NaN.md +++ b/JS/NaN===NaN.md @@ -1,12 +1,12 @@ -# **Why “NaN === NaN” is False?** +# Why “NaN === NaN” is False? - NaN은 특별한 값을 가지고 있어서, NaN과 NaN은 동등 비교(===)를 하면 항상 false를 반환. - 이는 NaN이 "숫자가 아님"을 나타내는 특수한 값이지만, 실제로는 값이 정의되어 있지 않은 상태이기 때문!!!! - **다른 어떤 값과도 (자기 자신 포함) 같지 않기 때문임.** - 이 동작은 부동 소수점 산술을 위한 IEEE 754 표준의 결과입니다. 이 표준은 `NaN`을 정의하며, - 이는 **정의되지 않거나 나타낼 수 없는 수학적 작업의 결과를 나타내는 특수한 값** + 이는 **정의되지 않거나 나타낼 수 없는 수학적 작업의 결과를 나타내는 특수한 값** - `NaN`은 "숫자가 아님"을 의미하지만, 실제로는 JavaScript에서 특정 값으로 반환될 수 있는 특정 값이다. - **예를 들어** 0을 0으로 나누거나 잘못된 숫자를 구문 분석하려고 시도하는 경우 `NaN`이 반환될 수 있음. + **예를 들어** 0을 0으로 나누거나 잘못된 숫자를 구문 분석하려고 시도하는 경우 `NaN`이 반환될 수 있음. - `NaN`은 특정한 숫자 값이 아니기 때문에, `===` 연산자를 사용하여 자기 자신을 비롯한 어떤 값과도 비교할 수 없음 @@ -16,51 +16,49 @@ ## **NaN 여부 확인을 위해 isNaN() 을 써야하는 상황?** 1. **사용자 입력 값의 유효성 검사** - 1. 사용자로부터 입력받은 값이 숫자인지 아닌지를 확인하여 유효성을 검사함 + 1. 사용자로부터 입력받은 값이 숫자인지 아닌지를 확인하여 유효성을 검사함 2. **계산 결과의 유효성 검사** - 1. 계산 결과가 숫자인지 아닌지를 확인하여 유효성을 검사하는 데 사용됨 + 1. 계산 결과가 숫자인지 아닌지를 확인하여 유효성을 검사하는 데 사용됨 3. **데이터 처리** - 1. 데이터를 처리하는 도중에 유효하지 않은 값을 처리하는 데 사용 - 1. **문자열을 숫자로 변환할 때 생기는 오류 처리** - 1. parseInt(), praseFloat() 함수를 이용해서 문자열을 순자로 변환할 수 있지만 변환 결과가 NaN일 경우 - - ```jsx - let num = parseInt("Hello World"); - if(isNaN(num) { - console.log("문자열을 숫자로 반환할 수 없습니다."); - } - ``` - - 2. **수학적 계산에서 NaN 값이 생성될 수 있는 경우** - 1. 0으로 나누거나, Infinity를 0으로 나누는 수학적 계산을 수행하는 경우. - - ```jsx - let result = 10/0; - if(isNaN(result)) { - console.log("0으로 나누어 계산할 수 없습니다."); - } - ``` - + 1. 데이터를 처리하는 도중에 유효하지 않은 값을 처리하는 데 사용 + 1. **문자열을 숫자로 변환할 때 생기는 오류 처리** + 1. parseInt(), praseFloat() 함수를 이용해서 문자열을 순자로 변환할 수 있지만 변환 결과가 NaN일 경우 + + ```jsx + let num = parseInt("Hello World"); + if(isNaN(num) { + console.log("문자열을 숫자로 반환할 수 없습니다."); + } + ``` + 2. **수학적 계산에서 NaN 값이 생성될 수 있는 경우** + 1. 0으로 나누거나, Infinity를 0으로 나누는 수학적 계산을 수행하는 경우. + + ```jsx + let result = 10 / 0; + if (isNaN(result)) { + console.log("0으로 나누어 계산할 수 없습니다."); + } + ``` ## **===Number나 ===float, ===int 대신 isNaN()을 쓰는 이유?** -**`===Number`** 나 **`===float`**, **`===int`** 와 같은 비교 연산자는 +**`===Number`** 나 **`===float`**, **`===int`** 와 같은 비교 연산자는 특정 타입의 값을 확인하기 위해 사용 됨. - 하지만 **`isNaN()`** 함수는 값이 **`NaN`** 인지 여부를 확인하기 위해 사용 +하지만 **`isNaN()`** 함수는 값이 **`NaN`** 인지 여부를 확인하기 위해 사용 - 또한, JavaScript에서는 몇 가지 유형의 값들이 서로 상호작용할 때, 예기치 않은 결과를 일으킬 수 있음 +또한, JavaScript에서는 몇 가지 유형의 값들이 서로 상호작용할 때, 예기치 않은 결과를 일으킬 수 있음 - 예를 들어, **`NaN === NaN`** 비교 연산의 결과는 **`false`** +예를 들어, **`NaN === NaN`** 비교 연산의 결과는 **`false`** -숫자가 아닌 값들에 대해서도 예상되는 결과를 얻기 위해서 **`isNaN()`** 함수를 쓴다! +숫자가 아닌 값들에 대해서도 예상되는 결과를 얻기 위해서 **`isNaN()`** 함수를 쓴다! - **`isNaN()`** 함수는 숫자인지 여부를 확인하기 위해 사용되며, 다양한 유형의 값들에 대해서도 정확한 결과를 얻을 수 있다. 그러므로, 값이 **`NaN`** 인지 여부를 확인하기 위해서는 **`isNaN()`** 함수를 사용해야한다. +**`isNaN()`** 함수는 숫자인지 여부를 확인하기 위해 사용되며, 다양한 유형의 값들에 대해서도 정확한 결과를 얻을 수 있다. 그러므로, 값이 **`NaN`** 인지 여부를 확인하기 위해서는 **`isNaN()`** 함수를 사용해야한다. ## **숫자가 아니면 다 NaN인 거 아니야?** - 부동 소수점 방식에서는 "NaN(Not a Number)"이라는 값이 존재함. - NaN은 숫자가 아님을 나타내는 값으로, 예를 들어 0으로 나누거나 0을 곱하면 NaN이 된다. + NaN은 숫자가 아님을 나타내는 값으로, 예를 들어 0으로 나누거나 0을 곱하면 NaN이 된다. - 하지만 모든 비숫자 값이 NaN은 아닙니다. - 예를 들어 `Infinity(양의 무한대)`와 `-Infinity(음의 무한대)`는 숫자이며, 또한 `null`, `undefined` 등의 값도 NaN은 아님!!!!!! + 예를 들어 `Infinity(양의 무한대)`와 `-Infinity(음의 무한대)`는 숫자이며, 또한 `null`, `undefined` 등의 값도 NaN은 아님!!!!!! - 따라서 부동 소수점 방식에서는 NaN 외에도 Infinity, -Infinity 등의 특수한 값을 가질 수 있다. diff --git a/JS/Object.md b/JS/Object.md index d42af99..604154e 100644 --- a/JS/Object.md +++ b/JS/Object.md @@ -1,3 +1,5 @@ +# Object 객체 + ### Object 객체 1. 객체 중괄호로 작성 @@ -6,18 +8,18 @@ ```jsx const superman = { - name:'clark', - age : 33, -} + name: "clark", + age: 33, +}; ``` ### 접근하기 1. 접근 (점, 대괄호 사용) - 1. superman.name //’ clark’ - 2. superman[’age’] //33 + 1. superman.name //’ clark’ + 2. superman[’age’] //33 2. 추가 (점, 대괄호 사용) - 1. superman.gender =’male’; - 2. superman[’hairColor’] = ‘black’; + 1. superman.gender =’male’; + 2. superman[’hairColor’] = ‘black’; 3. 삭제 (delete 키워드 사용) - 1. delete superman.hairColor; + 1. delete superman.hairColor; diff --git a/JS/arrowfunction.md b/JS/arrowfunction.md index 0e35f61..814befa 100644 --- a/JS/arrowfunction.md +++ b/JS/arrowfunction.md @@ -1,16 +1,17 @@ -## 화살표 함수(arrow function) 기본 +# arrow function +## 화살표 함수(arrow function) 기본 - 함수표현식보다 단순하고 간결한 문법으로 함수 만들기 ```jsx -let sum = function(a, b) { - return a + b; -} +let sum = function (a, b) { + return a + b; +}; ``` ```jsx -let sum = (a,b) => a+b; +let sum = (a, b) => a + b; ``` 두 함수는 동일한 기능을 수행함. @@ -20,10 +21,10 @@ let sum = (a,b) => a+b; 1. 인수가 하나만 있다면 인수를 감싸는 괄호 생략 가능. (코드 길이 더 줄이기 가능 ! ) ```jsx -let double = n => n * 2; +let double = (n) => n * 2; // let double = function(n) { return n * 2 }과 거의 동일합니다. -alert( double(3) ); // 6 +alert(double(3)); // 6 ``` 1. 인수가 하나도 없을 경우 괄호 비우기 가능 / 생략은 불가능 @@ -32,4 +33,4 @@ alert( double(3) ); // 6 let sayHi = () => alert("안녕하세요!"); sayHi(); -``` \ No newline at end of file +``` diff --git a/JS/let, const, var.md b/JS/let, const, var.md index d55621d..2cd2df6 100644 --- a/JS/let, const, var.md +++ b/JS/let, const, var.md @@ -1,3 +1,5 @@ +# let; var; const; + ## JS의 변수 선언 방식인 `var`, `let`, `const`의 차이점 ### 1. 변수 선언 방식 diff --git a/JS/map.md b/JS/map.md index 2bf9ed1..b8ca667 100644 --- a/JS/map.md +++ b/JS/map.md @@ -1,97 +1,110 @@ -- JS에서 Map 쓰기 - # Map - - 키-값 쌍과 키의 원래 삽입 순서를 기억함. - - 모든 값은 키 or 값으로 사용될 수 있음. - ### 설명 - 1. Map에서는 오직 **`단 하나의 키`**만 존재 [ map 집합의 유일성 ] - 2. Map 객체는 키-값 쌍으로 반복 됨. for…of 루프는 각 반복에 대해 [key, value]로 이루어진 멤버가 2개인 배열을 반환함. - 3. 반복은 삽입한 순서대로 발생 - 1. set() 메서드로 맵에 처음 삽입한 각각의 키-값쌍 순서와 대응 됨. - 1. set이 호출되었을 때 맵에서 해당 키가 없었을 경우 - 4. Map의 명세는 “평균적으로 집합 내 요소의 수에 따라 하위 선형인 접근 시간을 제공하는” 맵을 구현해야 함 - 1. 복잡성이 O(N)보다 더 나은 경우 내부적으로 해시 테이블 (O(1) 룩업), 검색 트리 (O(log(N)) 룩업) - ### 인스턴스 메서드 - `.clear()` - - map 객체에서 모든 키-값 쌍을 제거 함. +# Map + +- 키-값 쌍과 키의 원래 삽입 순서를 기억함. +- 모든 값은 키 or 값으로 사용될 수 있음. + +### 설명 + +1. Map에서는 오직 **`단 하나의 키`**만 존재 [ map 집합의 유일성 ] +2. Map 객체는 키-값 쌍으로 반복 됨. for…of 루프는 각 반복에 대해 [key, value]로 이루어진 멤버가 2개인 배열을 반환함. +3. 반복은 삽입한 순서대로 발생 + 1. set() 메서드로 맵에 처음 삽입한 각각의 키-값쌍 순서와 대응 됨. + 1. set이 호출되었을 때 맵에서 해당 키가 없었을 경우 +4. Map의 명세는 “평균적으로 집합 내 요소의 수에 따라 하위 선형인 접근 시간을 제공하는” 맵을 구현해야 함 + 1. 복잡성이 O(N)보다 더 나은 경우 내부적으로 해시 테이블 (O(1) 룩업), 검색 트리 (O(log(N)) 룩업) + +### 인스턴스 메서드 + +`.clear()` + +- map 객체에서 모든 키-값 쌍을 제거 함. `.delete()` - - map 객체에 - 해당 요소가 존재하며, 삭제되었을 경우 ⇒ true - 해당 요소가 존재하지 않는 경우 ⇒ false +- map 객체에 + 해당 요소가 존재하며, 삭제되었을 경우 ⇒ true + 해당 요소가 존재하지 않는 경우 ⇒ false `.get()` - - 주어진 키에 해당하는 값을 반환하거나, 값이 없다면 ⇒ undefined +- 주어진 키에 해당하는 값을 반환하거나, 값이 없다면 ⇒ undefined `.has()` - - 주어진 키에 연관된 값이 Map 객체에 존재는지 여부를 불리언으로 반환 +- 주어진 키에 연관된 값이 Map 객체에 존재는지 여부를 불리언으로 반환 `.set()` - - Map 객체에서 전달된 키의 값을 설정 함. - Map 객체를 반환함. +- Map 객체에서 전달된 키의 값을 설정 함. + Map 객체를 반환함. . `[@@iterator]()` - - 반복 가능 프로토콜을 구현하여 전개 구문과 for…of 루프 같은 반복이 필요한 대부분의 구문에서 맵을 사용하게 함. - ```jsx - const map1 = new Map(); +- 반복 가능 프로토콜을 구현하여 전개 구문과 for…of 루프 같은 반복이 필요한 대부분의 구문에서 맵을 사용하게 함. - map1.set("0", "foo"); - map1.set(1, "bar"); +```jsx +const map1 = new Map(); - const iterator1 = map1[Symbol.iterator](); +map1.set("0", "foo"); +map1.set(1, "bar"); - for (const item of iterator1) { - console.log(item); - } - // Expected output: Array ["0", "foo"] - // Expected output: Array [1, "bar"] - ``` - `.keys()` - - Map은 객체에 삽입된 순서에 따라 각 요소의 키를 포함하는 새로운 반복자를 반환 +const iterator1 = map1[Symbol.iterator](); + +for (const item of iterator1) { + console.log(item); +} +// Expected output: Array ["0", "foo"] +// Expected output: Array [1, "bar"] +``` + +`.keys()` + +- Map은 객체에 삽입된 순서에 따라 각 요소의 키를 포함하는 새로운 반복자를 반환 `.values()` - - Map 객체에 삽입된 순서에 따라 각 요소의 값을 포함하는 새로운 반복자를 반환 +- Map 객체에 삽입된 순서에 따라 각 요소의 값을 포함하는 새로운 반복자를 반환 `.entries()` - - Map 객체에 삽입된 순서에 따라 [key, value] 두 개의 멤버 배열을 포함하는 새로운 반복자를 반환함. +- Map 객체에 삽입된 순서에 따라 [key, value] 두 개의 멤버 배열을 포함하는 새로운 반복자를 반환함. `.forEach` - - `Map` 객체에 존재하는 각 키-값 쌍에 대해 삽입 순서대로 `**callbackFn**`을 한 번씩 호출함. - - 만약 `forEach` 호출 시 `thisArgs` 매개변수가 있다면 각 콜백의 `this` 값으로 사용 됨 - ### 예제!! - - Map 객체 사용하기 - ```jsx - const myMap = new Map(); - - const keyString = "a string"; - const keyObj = {}; - const keyFunc = function () {}; - - // 값 설정 - myMap.set(keyString, "value associated with 'a string'"); - myMap.set(keyObj, "value associated with keyObj"); - myMap.set(keyFunc, "value associated with keyFunc"); - - console.log(myMap.size); // 3 - - // 값 불러오기 - console.log(myMap.get(keyString)); // "value associated with 'a string'" - console.log(myMap.get(keyObj)); // "value associated with keyObj" - console.log(myMap.get(keyFunc)); // "value associated with keyFunc" - - console.log(myMap.get("a string")); // "value associated with 'a string'", 왜냐하면 keyString === 'a string' - console.log(myMap.get({})); // undefined, 왜냐하면 keyObj !== {} - console.log(myMap.get(function () {})); // undefined, 왜냐하면 keyFunc !== function () {} - ``` - - 배열 객체와의 관계 - ```jsx - const kvArray = [ - ["key1", "value1"], - ["key2", "value2"], - ]; - - // Use the regular Map constructor to transform a 2D key-value Array into a map - const myMap = new Map(kvArray); - console.log(myMap.get("key1")); // "value1" - - // Use Array.from() to transform a map into a 2D key-value Array - console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray - - // A succinct way to do the same, using the spread syntax - console.log([...myMap]); - - // Or use the keys() or values() iterators, and convert them to an array - console.log(Array.from(myMap.keys())); // ["key1", "key2"] - ``` +- `Map` 객체에 존재하는 각 키-값 쌍에 대해 삽입 순서대로 `**callbackFn**`을 한 번씩 호출함. +- 만약 `forEach` 호출 시 `thisArgs` 매개변수가 있다면 각 콜백의 `this` 값으로 사용 됨 + +### 예제!! + +- Map 객체 사용하기 + + ```jsx + const myMap = new Map(); + + const keyString = "a string"; + const keyObj = {}; + const keyFunc = function () {}; + + // 값 설정 + myMap.set(keyString, "value associated with 'a string'"); + myMap.set(keyObj, "value associated with keyObj"); + myMap.set(keyFunc, "value associated with keyFunc"); + + console.log(myMap.size); // 3 + + // 값 불러오기 + console.log(myMap.get(keyString)); // "value associated with 'a string'" + console.log(myMap.get(keyObj)); // "value associated with keyObj" + console.log(myMap.get(keyFunc)); // "value associated with keyFunc" + + console.log(myMap.get("a string")); // "value associated with 'a string'", 왜냐하면 keyString === 'a string' + console.log(myMap.get({})); // undefined, 왜냐하면 keyObj !== {} + console.log(myMap.get(function () {})); // undefined, 왜냐하면 keyFunc !== function () {} + ``` + +- 배열 객체와의 관계 + + ```jsx + const kvArray = [ + ["key1", "value1"], + ["key2", "value2"], + ]; + + // Use the regular Map constructor to transform a 2D key-value Array into a map + const myMap = new Map(kvArray); + console.log(myMap.get("key1")); // "value1" + + // Use Array.from() to transform a map into a 2D key-value Array + console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray + + // A succinct way to do the same, using the spread syntax + console.log([...myMap]); + + // Or use the keys() or values() iterators, and convert them to an array + console.log(Array.from(myMap.keys())); // ["key1", "key2"] + ``` diff --git a/JS/short-circuit_evaluation.md b/JS/short-circuit_evaluation.md index c07712d..43ea9c3 100644 --- a/JS/short-circuit_evaluation.md +++ b/JS/short-circuit_evaluation.md @@ -1,3 +1,5 @@ +# 단축 평가 + ### 단축 평가 (short-circuit evaluation) - 특정 변수에서 값이 제대로 주어졌을 때만 그 값을 조회하고, 그렇지 않을 때에는 undefined를 반환하게 하려면? diff --git a/JS/window.location.href=sms.md b/JS/window.location.href=sms.md index 8a0e884..dce3f64 100644 --- a/JS/window.location.href=sms.md +++ b/JS/window.location.href=sms.md @@ -1,3 +1,5 @@ +# window.location.href=sms + ```jsx window.location.href = sms:?body=${encodeURIComponent("hi")}; diff --git a/Next/getServerSideProps.md b/Next/getServerSideProps.md index 917ffe0..7b57ede 100644 --- a/Next/getServerSideProps.md +++ b/Next/getServerSideProps.md @@ -1,8 +1,10 @@ +# getServerSideProps + ## 개념 - Next.js에서 제공하는 서버사이드렌더링을 위한 함수 - 페이지 요청 때마다 서버 쪽에서 실행되어 외부 데이터를 가져옴 -⇒ 해당 데이터를 페이지의 props로 전달함. + ⇒ 해당 데이터를 페이지의 props로 전달함. **[ 특징 ]** @@ -56,4 +58,5 @@ export default function Page() { - 페이지의 props로 전달 ## 참고 링크 + diff --git a/React/Axios.md b/React/Axios.md index ee3bacc..2d33fe5 100644 --- a/React/Axios.md +++ b/React/Axios.md @@ -1,3 +1,5 @@ +# Axios란 무엇인가? + ## Axios란 무엇인가? - 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 @@ -18,7 +20,7 @@ npm install axios --save 정보 받아오기 ```jsx -axios.get('경로') +axios.get("경로"); ``` ## Axios를 인스턴스화하기 @@ -30,17 +32,17 @@ axios.get('경로') ## Axios 인스턴스 만드는 순서 - 인스턴스를 생성할 폴더 파일 생성 - - src 폴더 안에 api 폴더 생성 후 axios.js / requests.js 만들기 + - src 폴더 안에 api 폴더 생성 후 axios.js / requests.js 만들기 ```jsx -import axios from 'axios'; +import axios from "axios"; const instance = axios.create({ - baseURL : "http://api.themoivedb.org/3", - params : { - api_key: 'key 값', - language:"ko-KR", - }, + baseURL: "http://api.themoivedb.org/3", + params: { + api_key: "key 값", + language: "ko-KR", + }, }); export default instance; @@ -64,4 +66,4 @@ const request = { export default request; ``` -- 디오리진, 리액트 5주차 수업 \ No newline at end of file +- 디오리진, 리액트 5주차 수업 diff --git a/React/FullCalendar-Google.md b/React/FullCalendar-Google.md index 5328717..e200a3c 100644 --- a/React/FullCalendar-Google.md +++ b/React/FullCalendar-Google.md @@ -1,10 +1,12 @@ +# FullCalendar + 기본 구글 API보다 UI가 깔끔한 FullCalendar! 일정을 간편하게 불러오고 싶어서 구글 연동 방법을 사용하기로 함 처음에 오래 헤맸는데 생각보다 쉬워서 나 같은 사람이 시간 낭비 하지 않길 바라며 기록한다. -!! 공식 문서 잘되어 있으니까 제대로 확인하기 !! +!! 공식 문서 잘되어 있으니까 제대로 확인하기 !! 우선 캘린더 설치 @@ -40,15 +42,16 @@ fullcalendar react 공식 문서의 예시 구글 연동을 위해서는 - 사전 작업 - - Google dev 페이지에서 API key 발급 받기 - - 구글 캘린더 설정 바꿔주기 + - Google dev 페이지에서 API key 발급 받기 + - 구글 캘린더 설정 바꿔주기 - 코드 내에서 - - `@fullcalendar/google-calendar` 설치, import 해주기 - - `plugins={[dayGridPlugin, googleCalendarPlugin]}` 플러그인에 추가 - - `googleCalendarApiKey={apiKey} - events={{ - googleCalendarId: 'ds.likelion@gmail.com', - }}` + + - `@fullcalendar/google-calendar` 설치, import 해주기 + - `plugins={[dayGridPlugin, googleCalendarPlugin]}` 플러그인에 추가 + - `googleCalendarApiKey={apiKey} + events={{ + googleCalendarId: 'ds.likelion@gmail.com', + }}` apikey랑 캘린더 아이디 추기 - 연동완료! @@ -84,4 +87,4 @@ export default function Calendarpg() { ``` - 각 요소는 공식 문서의 API를 참고해서 바꿀 수 있다. -- \ No newline at end of file +- diff --git a/React/Jest.md b/React/Jest.md index 0a047b8..5b3bd1f 100644 --- a/React/Jest.md +++ b/React/Jest.md @@ -1,14 +1,14 @@ -## Jest +# Jest - react-testing library와 함께 사용 되는 것 ⇒ 이 둘로 웹 테스팅 - - 얘가 렌더링 해주고 렌더링 된 걸 jest로 테스트함 + - 얘가 렌더링 해주고 렌더링 된 걸 jest로 테스트함 - 테스팅 프레임 워크 - 최소한의 설정으로 동작해 test case를 만들어 코드가 잘 돌아가는 지를 확인 함 - create-react-app으로 설치시 자동 설치됨 - 만약 다르게 설치했다면 - 1. Jest 라이브러리 설치 `npm install jest —save-dev` - 2. Test 스크립트 변경 “test” : “jest” or “jest —watchAll” - 3. 테스트 작성할 폴더 및 파일 기본 구조 생성 + 1. Jest 라이브러리 설치 `npm install jest —save-dev` + 2. Test 스크립트 변경 “test” : “jest” or “jest —watchAll” + 3. 테스트 작성할 폴더 및 파일 기본 구조 생성 - 테스팅 파일을 jest가 찾아줌!!! > 파일이름에 .test. / .spec. / .tests. / 가 있으면 테스트를 위한 파일임을 인지하고 테스트 해줌 ## Jest 파일 구조 + 사용법 @@ -23,17 +23,17 @@ it === test - argument (name, fn) - 어떤 관련 테스트를 그룹화하는 블록 만들기 - - 비슷한 테스트들이 describe 하나에 들어가서 그룹화됨 + - 비슷한 테스트들이 describe 하나에 들어가서 그룹화됨 ### “it” === test - argument (name fn, timeout) - 개별 테스트를 수행하는 곳, 각 테스트를 작은 문장처럼 설명 - - + - - 테스트 내부에 expect/matcher 존재 - - expect : 값 테스트 할 때 마다 사용 되며, 혼자 거의 안쓰고 matcher와 함께 사용 - - matcher : 다른 방법으로 갑을 테스트하기 위해 matcher 사용 + - expect : 값 테스트 할 때 마다 사용 되며, 혼자 거의 안쓰고 matcher와 함께 사용 + - matcher : 다른 방법으로 갑을 테스트하기 위해 matcher 사용 ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1185eb29-2fc8-45bf-b7e1-d276c1035f67/Untitled.png) -- toBe를 not.toBe로 진행해도 됨. → 이 경우 4가 아닌 값을 넣어야지 PASS \ No newline at end of file +- toBe를 not.toBe로 진행해도 됨. → 이 경우 4가 아닌 값을 넣어야지 PASS diff --git a/React/React-Hooks.md b/React/React-Hooks.md index 777329b..ad001f8 100644 --- a/React/React-Hooks.md +++ b/React/React-Hooks.md @@ -1,4 +1,4 @@ -## React Hooks +# React Hooks - class 없이 state 사용할 수 있는 기능 @@ -7,46 +7,44 @@ 1. 기술은 언제나 문제점을 해결하기 위해 발전 2. 원래 React는 Class Component를 사용, React Hooks는 Functional Component를 사용하기 때문에 그 부분을 우선적으로 비교함 3. React Component - 1. Class Componenet (클래스 컴포넌트) - - ```jsx - import React, { Component } from 'react' - - export default class Hello extends Component { - render() { - return ( -
- hello my friends! -
- ) - } - } - ``` - - 1. 더 많은 기능 제공 - 2. 더 긴 코드 양 - 3. 더 복잡한 코드 - 4. 더딘 성능 - - 1. Functional Component (함수형 컴포넌트) - - ```jsx - import React form 'react' - - export default function Hello() { - return ( -
- hello my friends! -
- ) - } - ``` - - 1. 더 적은 기능 제공 - 2. 짧은 코드 양 - 3. 더 심플한 코드 - 4. 더 빠른 성능 - 2. + + 1. Class Componenet (클래스 컴포넌트) + + ```jsx + import React, { Component } from "react"; + + export default class Hello extends Component { + render() { + return
hello my friends!
; + } + } + ``` + + 1. 더 많은 기능 제공 + 2. 더 긴 코드 양 + 3. 더 복잡한 코드 + 4. 더딘 성능 + + 5. Functional Component (함수형 컴포넌트) + + ```jsx + import React form 'react' + + export default function Hello() { + return ( +
+ hello my friends! +
+ ) + } + ``` + + 1. 더 적은 기능 제공 + 2. 짧은 코드 양 + 3. 더 심플한 코드 + 4. 더 빠른 성능 + + 6. ### 함수형에서는 사용 못하는 클래스 컴포넌트 기능 @@ -63,8 +61,8 @@ ### 리액트 16.8 Hooks 업데이트로 변경되어 사용 가능 - 함수형 컴포넌트에서도 생명 주기 사용 가능 - - 데이터 가져오기 - - 컴포넌트 시작과 동시에 API 호출하기 등 + - 데이터 가져오기 + - 컴포넌트 시작과 동시에 API 호출하기 등 ```jsx import React, { Component } from 'react' @@ -97,26 +95,21 @@ render() { ``` ```jsx -import React, { useEffect, useState } from 'react' -import Axios from 'axios' +import React, { useEffect, useState } from "react"; +import Axios from "axios"; export default function Hello() { -//[getter, setter] - const [Name, setName] = useState("") -//useState 괄호안 -> name의 초기값 -// setName이라는 setter 이용해 Name state 업데이트 - useEffect(() => { - Axios.get('/api/user/name') - .then(response => { - setName(response.data.name) - }) -}, []) - -return ( -
- My name is {Name} -
- ) + //[getter, setter] + const [Name, setName] = useState(""); + //useState 괄호안 -> name의 초기값 + // setName이라는 setter 이용해 Name state 업데이트 + useEffect(() => { + Axios.get("/api/user/name").then((response) => { + setName(response.data.name); + }); + }, []); + + return
My name is {Name}
; } ``` @@ -126,7 +119,7 @@ return ( // 일반 클래스 컴포넌트에서 생명주기 사용하는 부분 componentDidMount() { - //컴포넌트가 마운트 되면 updateLists 함수를 호출 + //컴포넌트가 마운트 되면 updateLists 함수를 호출 this.updateLists(this.props.id) } ComponentDidUpdate(prevProps) { @@ -150,17 +143,16 @@ updateLists = (id) => { // React Hooks를 이용한 생명주기 이용 useEffect(() => { - fetchLists(id) - .then((repos) => { - setRepos(repos) - }) -}, [id]) + fetchLists(id).then((repos) => { + setRepos(repos); + }); +}, [id]); // 하나씩 안해주고 한꺼번해 해도 됨 ``` - 선명하게 코드가 간결해짐 - - classComponent 에서는 생명주기 이용시 componentDIdMount와 ComponentDidUpdate 그리고 compoenentWillUnmount 이렇게 다르게 처리를 해주지만 리액트 HOok사용시 useEffect안에ㅓ 모든 처리가 가능하기 때문 + - classComponent 에서는 생명주기 이용시 componentDIdMount와 ComponentDidUpdate 그리고 compoenentWillUnmount 이렇게 다르게 처리를 해주지만 리액트 HOok사용시 useEffect안에ㅓ 모든 처리가 가능하기 때문 ### Hooks를 통해 ··· @@ -198,4 +190,4 @@ render() { ) } } -``` \ No newline at end of file +``` diff --git a/React/React-Slick.md b/React/React-Slick.md index 9ab0c4b..be9ffec 100644 --- a/React/React-Slick.md +++ b/React/React-Slick.md @@ -1,10 +1,12 @@ +# react-slick + - SBC 구현하면서 사용했던 기능인 슬라이드 배너 애니메이션이라고 백날천날 검색했더니 마땅한 검색 결과가 안나와서 당황했었다. 배너 슬라이더라고 검색했더니 바로 발견! -우리나라에서 흔히 슬라이더라고 부르고 정식 용어로는 캐로셀(Carousel)이라고 한다. +우리나라에서 흔히 슬라이더라고 부르고 정식 용어로는 캐로셀(Carousel)이라고 한다. 직접 구현하는 방법 VS 라이브러리 사용 @@ -21,30 +23,29 @@ ### React-Slick 시작하기 - 라이브러리 설치하기 - - 터미널에서 npm / yarn을 이용해 설치해준다. + - 터미널에서 npm / yarn을 이용해 설치해준다. ``` -//npm +//npm npm install react-slick --save //yarn yarn add react-slick ``` -> + react-slick@0.28.0 -added 7 packages ~ -> +> - react-slick@0.28.0 +> added 7 packages ~ 위와 같은 문장이 뜨면 설치 완료! - 라이브러리 설치 후 CSS 도 설치해주자 - - 동일하게 터미널에서 설치 + - 동일하게 터미널에서 설치 ``` npm install slick-carousel --save ``` -하단 코드는 기본 예시이다. +하단 코드는 기본 예시이다. ``` import React, { Component } from "react"; @@ -98,7 +99,7 @@ CSS import 후 확인하면 아래와 같은 모양의 캐러셀 완성! ``` const settings = { - dots: true, + dots: true, infinite: true, speed: 500, slidesToShow: 1, @@ -107,23 +108,23 @@ CSS import 후 확인하면 아래와 같은 모양의 캐러셀 완성! ``` - dots - - 캐러셀 하단 현재 위치를 보여주는 버튼 false 값을 주면 invisible 상태가 된다. + - 캐러셀 하단 현재 위치를 보여주는 버튼 false 값을 주면 invisible 상태가 된다. - infinite - - 컨텐츠가 끝까지 갔을 경우 그냥 가만히 있을지, 처음으로 돌아와 반복할지를 결정한다. + - 컨텐츠가 끝까지 갔을 경우 그냥 가만히 있을지, 처음으로 돌아와 반복할지를 결정한다. - speed - - 슬라이더가 넘어가는 속도, 단위는 ms로 기본 설정인 500은 0.5초를 의미한다. + - 슬라이더가 넘어가는 속도, 단위는 ms로 기본 설정인 500은 0.5초를 의미한다. - slidesToShow - - 한 번에 보여줄 컨텐츠 + - 한 번에 보여줄 컨텐츠 - slidesToScroll - - 한 번에 넘어가는 컨텐츠 + - 한 번에 넘어가는 컨텐츠 위 까지는 기본 제공 옵션이지만 캐러셀을 커스터마이징하기 위해 사용하면 좋은 옵션들도 있다 - autoplay - - true/false의 값을 가지며 true값을 받을 시 자동으로 컨텐츠가 넘어간다. - - default 값은 false + - true/false의 값을 가지며 true값을 받을 시 자동으로 컨텐츠가 넘어간다. + - default 값은 false - autoplaySpped - - int 값을 가지며 autoplay를 지정해주었으므로 자동으로 넘어가는 시간도 조정 가능하다 - - default 값은 3000 (0.3초) + - int 값을 가지며 autoplay를 지정해주었으므로 자동으로 넘어가는 시간도 조정 가능하다 + - default 값은 3000 (0.3초) -외에도 다양한 옵션 설정이 가능하며 자세한 사항은 공식 문서 내 API 탭에서 확인 가능하다. \ No newline at end of file +외에도 다양한 옵션 설정이 가능하며 자세한 사항은 공식 문서 내 API 탭에서 확인 가능하다. diff --git a/React/Recoil.md b/React/Recoil.md index f00effc..84c0211 100644 --- a/React/Recoil.md +++ b/React/Recoil.md @@ -1,3 +1,5 @@ +# Recoail +