From b9c336e69241481fe05a0109153bad9f2344a16c Mon Sep 17 00:00:00 2001 From: scl2589 Date: Sat, 21 Aug 2021 23:56:13 +0900 Subject: [PATCH 01/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20axios.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 87 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 0e408595d..345d5248a 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -51,6 +51,93 @@ new Vue({ 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드입니다. 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됩니다. +### .then + +HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 처리할 수 있습니다. + +### .catch + +`.catch()` 를 통해 오류를 처리합니다. 오류를 처리하는 방법에는 `response`와 `request`로 나뉩니다. + +```javascript +axios.get('/hello') { + catch(function (error) { + if (error.response) { + // 요청이 성공적으로 이루어졌지만, 서버가 200번대 이외의 다른 상태코드로 응답을 한 경우를 말합니다. + console.log(error.response); + } else if (error.request) { + // 요청이 성공적으로 이루어졌으나 응답을 받지 못한 경우를 뜻합니다. + console.log(error.request); + } + }); + +} +``` + +위 코드에서 `error.response` 는 요청이 제대로 이루어지고, 서버로부터 응답을 받았으나 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 response가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. + +또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, request는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 request가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. + +## 액시오스 HTTP 요청 메소드 종류 + +액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. + +자주 쓰이는 메소드는 get, post, patch, delete입니다. + +### **axios.get(url[, config])** + +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더, 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. + +```javascript +axios.get('통신할 서버주소') + .then(res => { + console.log(res); + }) + .catch(err) => { + console.log(err); + }); +``` + +### **axios.post(url[, data[, config]])** + +새로운 값이나 데이터를 추가할 때 사용하는 메소드입니다. 데이터와 함께 보내 새로운 값을 입력합니다. + +```javascript +axios.post('통신할 서버주소', { 추가할 데이터 }) + .then(res => { + console.log(res) + }) +``` + +### **axios.delete(url[, config])** + +특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. + +```javascript +axios.delete('통신할 서버주소') + .then(res => { + console.log(res) + }) +``` + +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. + +--- + +이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. + +**axios.request(config)** + +**axios.head(url[, config])** + +**axios.options(url[, config])** + +**axios.patch(url[, data[, config]])** + +###### + ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. \ No newline at end of file From 8267bff5f9b0b9f79f4d724c19f436c21f72bc6f Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Thu, 26 Aug 2021 17:43:12 +0900 Subject: [PATCH 02/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20axios=20http=20method=20=EC=84=A4=EB=AA=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 345d5248a..2b057640b 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -74,19 +74,19 @@ axios.get('/hello') { } ``` -위 코드에서 `error.response` 는 요청이 제대로 이루어지고, 서버로부터 응답을 받았으나 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 response가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. +위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. -또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, request는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 request가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. +또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. ## 액시오스 HTTP 요청 메소드 종류 액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. -자주 쓰이는 메소드는 get, post, patch, delete입니다. +자주 쓰이는 메소드는 get, post, put, delete입니다. ### **axios.get(url[, config])** -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더, 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript axios.get('통신할 서버주소') @@ -109,6 +109,17 @@ axios.post('통신할 서버주소', { 추가할 데이터 }) }) ``` +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. + +```javascript +axios.put('통신할 서버주소', { 변경할 데이터 }) + .then(res => { + console.log(res) + }) +``` + ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. @@ -120,10 +131,6 @@ axios.delete('통신할 서버주소') }) ``` -### **axios.put(url[, data[, config]])** - -특정 데이터를 수정할 때 요청하는 메소드입니다. - --- 이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. @@ -132,11 +139,15 @@ axios.delete('통신할 서버주소') **axios.head(url[, config])** +- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. + **axios.options(url[, config])** -**axios.patch(url[, data[, config]])** +- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. + +**axios.patch(url[, data[, config]])** -###### +- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. ## 기타 액시오스 API From e76bcc399b258934548213c0fd3837f981480309 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Sat, 28 Aug 2021 10:04:29 +0900 Subject: [PATCH 03/19] =?UTF-8?q?[doc]=20put=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20Config=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 109 +++++++++++++++++++++++++++++++++------------- 1 file changed, 78 insertions(+), 31 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 2b057640b..03458027b 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -51,6 +51,8 @@ new Vue({ 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드입니다. 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됩니다. +## 액시오스 응답 제어 + ### .then HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 처리할 수 있습니다. @@ -80,44 +82,30 @@ axios.get('/hello') { ## 액시오스 HTTP 요청 메소드 종류 -액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. - -자주 쓰이는 메소드는 get, post, put, delete입니다. +액시오스에서 자주 사용되는 HTTP 요청 메소드를 알아보겠습니다. ### **axios.get(url[, config])** -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 파라미터 `config` 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript axios.get('통신할 서버주소') - .then(res => { - console.log(res); - }) - .catch(err) => { - console.log(err); - }); ``` ### **axios.post(url[, data[, config]])** -새로운 값이나 데이터를 추가할 때 사용하는 메소드입니다. 데이터와 함께 보내 새로운 값을 입력합니다. +서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. ```javascript axios.post('통신할 서버주소', { 추가할 데이터 }) - .then(res => { - console.log(res) - }) ``` ### **axios.put(url[, data[, config]])** -특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. 멱등성 (idempotent)을 가져 `put`을 한 번 보내는 결괏값과 `put`을 여러 번 연속으로 보내는 결과값이 동일합니다. ```javascript axios.put('통신할 서버주소', { 변경할 데이터 }) - .then(res => { - console.log(res) - }) ``` ### **axios.delete(url[, config])** @@ -126,29 +114,88 @@ axios.put('통신할 서버주소', { 변경할 데이터 }) ```javascript axios.delete('통신할 서버주소') - .then(res => { - console.log(res) - }) ``` ---- +## 액시오스 HTTP 요청 Config 옵션 + +액시오스 요청을 할 때는 config 설정이 가능합니다. 이 중 필수적인 설정은 url뿐입니다. + +### url + +`url`은 액시오스 요청에 사용될 서버의 URL을 말합니다. + +```javascript +url: '/book' +``` + +### method + +`method`는 요청을 할 때 사용할 요청 메소드입니다. `method`의 기본값은 get 입니다. + +```javascript +method: 'get' +``` + +### baseURL + +URL이 절대경로가 아닌 이상, URL 앞에 `baseURL`이 추가됩니다. 액시오스 인스턴스에 `baseURL`을 설정하여 상대경로(relative URL)를 전달하는 방법이 더 편리할 수 있습니다. + +```javascript +baseURL: `https://도메인.com/api/` +``` + +### headers -이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. +헤더를 수정해서 보내야 한다면 `headers`를 사용하면 됩니다. -**axios.request(config)** +```javascript + headers: {'X-Requested-With': 'XMLHttpRequest'} +``` + +### params + +`params`는 요청과 함께 보낼 URL 파라미터를 말하며 오브젝트 (object)나 [URLSearchParams 오브젝트](https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams)로 이루어져야 합니다. `params`가 널(null)이거나 undefined인 경우, URL에 렌더링되지 않습니다. + +```javascript +params: { + ID: 13579 +} +``` + +### data + +`data`는 요청 본문(body)에 포함되어 보내질 데이터를 말합니다. `data`는 'PUT', 'POST', 'DELETE', 그리고 'PATCH' 액시오스 요청 메소드에 적용이 가능합니다. -**axios.head(url[, config])** +```javascript +data: { + firstName: 'Christine' +}, + +// 아래의 data config 설정은 POST 메소드에서만 사용이 가능합니다. +data: 'Age=26&City=New York' +``` + +### timeout + +`timeout`은 요청 시간이 초가되기까지의 시간을 밀리초(millisecond)로 지정합니다. 요청이 `timeout`에 지정된 시간보다 오래 걸리면 요청이 중단됩니다. + +```javascript +timeout: 5000 +``` -- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. +### responseType -**axios.options(url[, config])** +`responseType`은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 'arraybuffer', 'document', 'json', 'text', 'stream'이 가능합니다. json이 기본값입니다. -- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. +```javascript +responseType: 'json' +``` -**axios.patch(url[, data[, config]])** +### 기타 액시오스 요청 Config -- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. +Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. ## 기타 액시오스 API -기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. \ No newline at end of file +기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. + From a36ece3eb75a95d7f1b84cf5287d878818ba0d68 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:19:36 +0900 Subject: [PATCH 04/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20=EC=98=88=EC=8B=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 03458027b..a397900a1 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -76,6 +76,7 @@ axios.get('/hello') { } ``` +<<<<<<< HEAD 위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. 또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. @@ -89,15 +90,15 @@ axios.get('/hello') { 서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 파라미터 `config` 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript -axios.get('통신할 서버주소') +axios.get('users/1') ``` -### **axios.post(url[, data[, config]])** +### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. ```javascript -axios.post('통신할 서버주소', { 추가할 데이터 }) +axios.post('/books', { title: '1984' }) ``` ### **axios.put(url[, data[, config]])** @@ -105,7 +106,7 @@ axios.post('통신할 서버주소', { 추가할 데이터 }) 특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. 멱등성 (idempotent)을 가져 `put`을 한 번 보내는 결괏값과 `put`을 여러 번 연속으로 보내는 결과값이 동일합니다. ```javascript -axios.put('통신할 서버주소', { 변경할 데이터 }) +axios.put('users/2', { name: 'Iron Man' }) ``` ### **axios.delete(url[, config])** @@ -113,7 +114,7 @@ axios.put('통신할 서버주소', { 변경할 데이터 }) 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. ```javascript -axios.delete('통신할 서버주소') +axios.delete('books/3') ``` ## 액시오스 HTTP 요청 Config 옵션 @@ -125,7 +126,7 @@ axios.delete('통신할 서버주소') `url`은 액시오스 요청에 사용될 서버의 URL을 말합니다. ```javascript -url: '/book' +url: '/books' ``` ### method @@ -198,4 +199,3 @@ Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. - From cec490bf73d24ed7772f46c95e3a3c8405a9d651 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:21:42 +0900 Subject: [PATCH 05/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index a397900a1..e83d89a3c 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -76,7 +76,6 @@ axios.get('/hello') { } ``` -<<<<<<< HEAD 위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. 또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. @@ -96,6 +95,15 @@ axios.get('users/1') ### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. +======= +액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. + +자주 쓰이는 메소드는 get, post, put, delete입니다. + +### **axios.get(url[, config])** + +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +>>>>>>> 79a9e24 ([설명 추가] axios http method 설명 추가 ) ```javascript axios.post('/books', { title: '1984' }) @@ -109,6 +117,17 @@ axios.post('/books', { title: '1984' }) axios.put('users/2', { name: 'Iron Man' }) ``` +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. + +```javascript +axios.put('통신할 서버주소', { 변경할 데이터 }) + .then(res => { + console.log(res) + }) +``` + ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. @@ -152,7 +171,6 @@ baseURL: `https://도메인.com/api/` ```javascript headers: {'X-Requested-With': 'XMLHttpRequest'} ``` - ### params `params`는 요청과 함께 보낼 URL 파라미터를 말하며 오브젝트 (object)나 [URLSearchParams 오브젝트](https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams)로 이루어져야 합니다. `params`가 널(null)이거나 undefined인 경우, URL에 렌더링되지 않습니다. @@ -196,6 +214,16 @@ responseType: 'json' Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. +- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. + +**axios.options(url[, config])** + +- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. + +**axios.patch(url[, data[, config]])** + +- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. + ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. From 89a789a96ad2d5171574df776fe9809bde0a3a0c Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:47:24 +0900 Subject: [PATCH 06/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20.catch=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index e83d89a3c..12e3a266c 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -59,26 +59,22 @@ HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 ### .catch -`.catch()` 를 통해 오류를 처리합니다. 오류를 처리하는 방법에는 `response`와 `request`로 나뉩니다. +`.catch()` 를 통해 오류를 처리합니다. `error` 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다. ```javascript axios.get('/hello') { catch(function (error) { if (error.response) { - // 요청이 성공적으로 이루어졌지만, 서버가 200번대 이외의 다른 상태코드로 응답을 한 경우를 말합니다. - console.log(error.response); - } else if (error.request) { - // 요청이 성공적으로 이루어졌으나 응답을 받지 못한 경우를 뜻합니다. - console.log(error.request); + console.log(error.response.status); + console.log(error.response.headers); } }); - } ``` -위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. +위와 같이 `.catch`에서 받아오는 `error` 객체를 통해 `error.response.status` 응답 상태코드와 `error.response.headers` 응답 헤더 정보를 파악할 수 있습니다. -또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. +기타 에러 처리 방법은 [axios 에러 처리 문서](https://axios-http.com/docs/handling_errors)를 참고합니다. ## 액시오스 HTTP 요청 메소드 종류 @@ -95,15 +91,6 @@ axios.get('users/1') ### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. -======= -액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. - -자주 쓰이는 메소드는 get, post, put, delete입니다. - -### **axios.get(url[, config])** - -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ->>>>>>> 79a9e24 ([설명 추가] axios http method 설명 추가 ) ```javascript axios.post('/books', { title: '1984' }) @@ -117,17 +104,6 @@ axios.post('/books', { title: '1984' }) axios.put('users/2', { name: 'Iron Man' }) ``` -### **axios.put(url[, data[, config]])** - -특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. - -```javascript -axios.put('통신할 서버주소', { 변경할 데이터 }) - .then(res => { - console.log(res) - }) -``` - ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. From 0ff59b31cdb29a146cb57848701bb650a50a8204 Mon Sep 17 00:00:00 2001 From: scl2589 Date: Sat, 21 Aug 2021 23:56:13 +0900 Subject: [PATCH 07/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20axios.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 87 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 0e408595d..345d5248a 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -51,6 +51,93 @@ new Vue({ 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드입니다. 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됩니다. +### .then + +HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 처리할 수 있습니다. + +### .catch + +`.catch()` 를 통해 오류를 처리합니다. 오류를 처리하는 방법에는 `response`와 `request`로 나뉩니다. + +```javascript +axios.get('/hello') { + catch(function (error) { + if (error.response) { + // 요청이 성공적으로 이루어졌지만, 서버가 200번대 이외의 다른 상태코드로 응답을 한 경우를 말합니다. + console.log(error.response); + } else if (error.request) { + // 요청이 성공적으로 이루어졌으나 응답을 받지 못한 경우를 뜻합니다. + console.log(error.request); + } + }); + +} +``` + +위 코드에서 `error.response` 는 요청이 제대로 이루어지고, 서버로부터 응답을 받았으나 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 response가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. + +또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, request는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 request가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. + +## 액시오스 HTTP 요청 메소드 종류 + +액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. + +자주 쓰이는 메소드는 get, post, patch, delete입니다. + +### **axios.get(url[, config])** + +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더, 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. + +```javascript +axios.get('통신할 서버주소') + .then(res => { + console.log(res); + }) + .catch(err) => { + console.log(err); + }); +``` + +### **axios.post(url[, data[, config]])** + +새로운 값이나 데이터를 추가할 때 사용하는 메소드입니다. 데이터와 함께 보내 새로운 값을 입력합니다. + +```javascript +axios.post('통신할 서버주소', { 추가할 데이터 }) + .then(res => { + console.log(res) + }) +``` + +### **axios.delete(url[, config])** + +특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. + +```javascript +axios.delete('통신할 서버주소') + .then(res => { + console.log(res) + }) +``` + +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. + +--- + +이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. + +**axios.request(config)** + +**axios.head(url[, config])** + +**axios.options(url[, config])** + +**axios.patch(url[, data[, config]])** + +###### + ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. \ No newline at end of file From ddb0deab10c7078b4a1160bc82fb65934af4fdf2 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Thu, 26 Aug 2021 17:43:12 +0900 Subject: [PATCH 08/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20axios=20http=20method=20=EC=84=A4=EB=AA=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 345d5248a..2b057640b 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -74,19 +74,19 @@ axios.get('/hello') { } ``` -위 코드에서 `error.response` 는 요청이 제대로 이루어지고, 서버로부터 응답을 받았으나 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 response가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. +위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. -또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, request는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 request가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. +또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. ## 액시오스 HTTP 요청 메소드 종류 액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. -자주 쓰이는 메소드는 get, post, patch, delete입니다. +자주 쓰이는 메소드는 get, post, put, delete입니다. ### **axios.get(url[, config])** -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더, 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript axios.get('통신할 서버주소') @@ -109,6 +109,17 @@ axios.post('통신할 서버주소', { 추가할 데이터 }) }) ``` +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. + +```javascript +axios.put('통신할 서버주소', { 변경할 데이터 }) + .then(res => { + console.log(res) + }) +``` + ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. @@ -120,10 +131,6 @@ axios.delete('통신할 서버주소') }) ``` -### **axios.put(url[, data[, config]])** - -특정 데이터를 수정할 때 요청하는 메소드입니다. - --- 이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. @@ -132,11 +139,15 @@ axios.delete('통신할 서버주소') **axios.head(url[, config])** +- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. + **axios.options(url[, config])** -**axios.patch(url[, data[, config]])** +- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. + +**axios.patch(url[, data[, config]])** -###### +- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. ## 기타 액시오스 API From ff795620efc2c4fd56275f2fea14465cce76fe7d Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Sat, 28 Aug 2021 10:04:29 +0900 Subject: [PATCH 09/19] =?UTF-8?q?[doc]=20put=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20Config=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 109 +++++++++++++++++++++++++++++++++------------- 1 file changed, 78 insertions(+), 31 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 2b057640b..03458027b 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -51,6 +51,8 @@ new Vue({ 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드입니다. 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됩니다. +## 액시오스 응답 제어 + ### .then HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 처리할 수 있습니다. @@ -80,44 +82,30 @@ axios.get('/hello') { ## 액시오스 HTTP 요청 메소드 종류 -액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. - -자주 쓰이는 메소드는 get, post, put, delete입니다. +액시오스에서 자주 사용되는 HTTP 요청 메소드를 알아보겠습니다. ### **axios.get(url[, config])** -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 파라미터 `config` 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript axios.get('통신할 서버주소') - .then(res => { - console.log(res); - }) - .catch(err) => { - console.log(err); - }); ``` ### **axios.post(url[, data[, config]])** -새로운 값이나 데이터를 추가할 때 사용하는 메소드입니다. 데이터와 함께 보내 새로운 값을 입력합니다. +서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. ```javascript axios.post('통신할 서버주소', { 추가할 데이터 }) - .then(res => { - console.log(res) - }) ``` ### **axios.put(url[, data[, config]])** -특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. 멱등성 (idempotent)을 가져 `put`을 한 번 보내는 결괏값과 `put`을 여러 번 연속으로 보내는 결과값이 동일합니다. ```javascript axios.put('통신할 서버주소', { 변경할 데이터 }) - .then(res => { - console.log(res) - }) ``` ### **axios.delete(url[, config])** @@ -126,29 +114,88 @@ axios.put('통신할 서버주소', { 변경할 데이터 }) ```javascript axios.delete('통신할 서버주소') - .then(res => { - console.log(res) - }) ``` ---- +## 액시오스 HTTP 요청 Config 옵션 + +액시오스 요청을 할 때는 config 설정이 가능합니다. 이 중 필수적인 설정은 url뿐입니다. + +### url + +`url`은 액시오스 요청에 사용될 서버의 URL을 말합니다. + +```javascript +url: '/book' +``` + +### method + +`method`는 요청을 할 때 사용할 요청 메소드입니다. `method`의 기본값은 get 입니다. + +```javascript +method: 'get' +``` + +### baseURL + +URL이 절대경로가 아닌 이상, URL 앞에 `baseURL`이 추가됩니다. 액시오스 인스턴스에 `baseURL`을 설정하여 상대경로(relative URL)를 전달하는 방법이 더 편리할 수 있습니다. + +```javascript +baseURL: `https://도메인.com/api/` +``` + +### headers -이외에도 아래와 같은 HTTP 요청 메소드를 사용할 수 있습니다. +헤더를 수정해서 보내야 한다면 `headers`를 사용하면 됩니다. -**axios.request(config)** +```javascript + headers: {'X-Requested-With': 'XMLHttpRequest'} +``` + +### params + +`params`는 요청과 함께 보낼 URL 파라미터를 말하며 오브젝트 (object)나 [URLSearchParams 오브젝트](https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams)로 이루어져야 합니다. `params`가 널(null)이거나 undefined인 경우, URL에 렌더링되지 않습니다. + +```javascript +params: { + ID: 13579 +} +``` + +### data + +`data`는 요청 본문(body)에 포함되어 보내질 데이터를 말합니다. `data`는 'PUT', 'POST', 'DELETE', 그리고 'PATCH' 액시오스 요청 메소드에 적용이 가능합니다. -**axios.head(url[, config])** +```javascript +data: { + firstName: 'Christine' +}, + +// 아래의 data config 설정은 POST 메소드에서만 사용이 가능합니다. +data: 'Age=26&City=New York' +``` + +### timeout + +`timeout`은 요청 시간이 초가되기까지의 시간을 밀리초(millisecond)로 지정합니다. 요청이 `timeout`에 지정된 시간보다 오래 걸리면 요청이 중단됩니다. + +```javascript +timeout: 5000 +``` -- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. +### responseType -**axios.options(url[, config])** +`responseType`은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 'arraybuffer', 'document', 'json', 'text', 'stream'이 가능합니다. json이 기본값입니다. -- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. +```javascript +responseType: 'json' +``` -**axios.patch(url[, data[, config]])** +### 기타 액시오스 요청 Config -- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. +Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. ## 기타 액시오스 API -기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. \ No newline at end of file +기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. + From b2ed4edf347e4a6675c172480144f91918d58457 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:19:36 +0900 Subject: [PATCH 10/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20=EC=98=88=EC=8B=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 03458027b..a397900a1 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -76,6 +76,7 @@ axios.get('/hello') { } ``` +<<<<<<< HEAD 위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. 또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. @@ -89,15 +90,15 @@ axios.get('/hello') { 서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 파라미터 `config` 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ```javascript -axios.get('통신할 서버주소') +axios.get('users/1') ``` -### **axios.post(url[, data[, config]])** +### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. ```javascript -axios.post('통신할 서버주소', { 추가할 데이터 }) +axios.post('/books', { title: '1984' }) ``` ### **axios.put(url[, data[, config]])** @@ -105,7 +106,7 @@ axios.post('통신할 서버주소', { 추가할 데이터 }) 특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. 멱등성 (idempotent)을 가져 `put`을 한 번 보내는 결괏값과 `put`을 여러 번 연속으로 보내는 결과값이 동일합니다. ```javascript -axios.put('통신할 서버주소', { 변경할 데이터 }) +axios.put('users/2', { name: 'Iron Man' }) ``` ### **axios.delete(url[, config])** @@ -113,7 +114,7 @@ axios.put('통신할 서버주소', { 변경할 데이터 }) 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. ```javascript -axios.delete('통신할 서버주소') +axios.delete('books/3') ``` ## 액시오스 HTTP 요청 Config 옵션 @@ -125,7 +126,7 @@ axios.delete('통신할 서버주소') `url`은 액시오스 요청에 사용될 서버의 URL을 말합니다. ```javascript -url: '/book' +url: '/books' ``` ### method @@ -198,4 +199,3 @@ Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. - From d1bcc7860ebfac59d208430299699a0839d800c5 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:21:42 +0900 Subject: [PATCH 11/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index a397900a1..e83d89a3c 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -76,7 +76,6 @@ axios.get('/hello') { } ``` -<<<<<<< HEAD 위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. 또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. @@ -96,6 +95,15 @@ axios.get('users/1') ### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. +======= +액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. + +자주 쓰이는 메소드는 get, post, put, delete입니다. + +### **axios.get(url[, config])** + +서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +>>>>>>> 79a9e24 ([설명 추가] axios http method 설명 추가 ) ```javascript axios.post('/books', { title: '1984' }) @@ -109,6 +117,17 @@ axios.post('/books', { title: '1984' }) axios.put('users/2', { name: 'Iron Man' }) ``` +### **axios.put(url[, data[, config]])** + +특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. + +```javascript +axios.put('통신할 서버주소', { 변경할 데이터 }) + .then(res => { + console.log(res) + }) +``` + ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. @@ -152,7 +171,6 @@ baseURL: `https://도메인.com/api/` ```javascript headers: {'X-Requested-With': 'XMLHttpRequest'} ``` - ### params `params`는 요청과 함께 보낼 URL 파라미터를 말하며 오브젝트 (object)나 [URLSearchParams 오브젝트](https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams)로 이루어져야 합니다. `params`가 널(null)이거나 undefined인 경우, URL에 렌더링되지 않습니다. @@ -196,6 +214,16 @@ responseType: 'json' Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. +- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. + +**axios.options(url[, config])** + +- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. + +**axios.patch(url[, data[, config]])** + +- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. + ## 기타 액시오스 API 기타 액시오스 관련 예제와 API는 [액시오스 문서](https://github.com/axios/axios#example)를 참고합니다. From e496566e12e795f2818a3b5a28bcb247c33ae800 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Wed, 1 Sep 2021 21:47:24 +0900 Subject: [PATCH 12/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20.catch=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index e83d89a3c..12e3a266c 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -59,26 +59,22 @@ HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 ### .catch -`.catch()` 를 통해 오류를 처리합니다. 오류를 처리하는 방법에는 `response`와 `request`로 나뉩니다. +`.catch()` 를 통해 오류를 처리합니다. `error` 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다. ```javascript axios.get('/hello') { catch(function (error) { if (error.response) { - // 요청이 성공적으로 이루어졌지만, 서버가 200번대 이외의 다른 상태코드로 응답을 한 경우를 말합니다. - console.log(error.response); - } else if (error.request) { - // 요청이 성공적으로 이루어졌으나 응답을 받지 못한 경우를 뜻합니다. - console.log(error.request); + console.log(error.response.status); + console.log(error.response.headers); } }); - } ``` -위 코드에서 `error.response` 는 요청이 제대로 이루어지고 서버로부터 응답을 받았으나, 200번대가 아닌 다른 상태 코드로 응답을 받은 경우를 뜻합니다. 만약 `response`가 `undefined` 일 경우, 서버의 응답을 받기 전, 에러가 발생했다는 것을 뜻합니다. +위와 같이 `.catch`에서 받아오는 `error` 객체를 통해 `error.response.status` 응답 상태코드와 `error.response.headers` 응답 헤더 정보를 파악할 수 있습니다. -또한, `error.request`는 요청이 이루어졌으나, 응답을 받지 못한 경우를 뜻합니다. 즉, `request`는 `undefined` 상태로 이어지다, 서버에 성공적으로 요청이 이루어지면, 값이 설정됩니다. 만약 `request`가 `undefined` 라고 나타나면, 서버에 요청을 보내기도 전에 클라이언트 측에서 에러가 발생했다는 것을 뜻합니다. +기타 에러 처리 방법은 [axios 에러 처리 문서](https://axios-http.com/docs/handling_errors)를 참고합니다. ## 액시오스 HTTP 요청 메소드 종류 @@ -95,15 +91,6 @@ axios.get('users/1') ### axios.post(url[, data[, config]]) 서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. -======= -액시오스를 통해 사용할 수 있는 요청 메소드는 다음과 같습니다. - -자주 쓰이는 메소드는 get, post, put, delete입니다. - -### **axios.get(url[, config])** - -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 인자인 config 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. ->>>>>>> 79a9e24 ([설명 추가] axios http method 설명 추가 ) ```javascript axios.post('/books', { title: '1984' }) @@ -117,17 +104,6 @@ axios.post('/books', { title: '1984' }) axios.put('users/2', { name: 'Iron Man' }) ``` -### **axios.put(url[, data[, config]])** - -특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 데이터 전체를 교체할 경우에 사용됩니다. - -```javascript -axios.put('통신할 서버주소', { 변경할 데이터 }) - .then(res => { - console.log(res) - }) -``` - ### **axios.delete(url[, config])** 특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. From 699a0d2f1f96d7b3b0e07b1a35f488d44307825a Mon Sep 17 00:00:00 2001 From: scl2589 Date: Thu, 2 Sep 2021 23:56:50 +0900 Subject: [PATCH 13/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios=20wording=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A9=B1?= =?UTF-8?q?=EB=93=B1=EC=84=B1=20=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 55 ++++++++++++++++------------------------------- 1 file changed, 19 insertions(+), 36 deletions(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 12e3a266c..dbc67aae0 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -62,13 +62,13 @@ HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 `.catch()` 를 통해 오류를 처리합니다. `error` 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다. ```javascript -axios.get('/hello') { - catch(function (error) { +axios.get('/hello') + .catch(function (error) { if (error.response) { console.log(error.response.status); console.log(error.response.headers); } - }); + } } ``` @@ -76,13 +76,13 @@ axios.get('/hello') { 기타 에러 처리 방법은 [axios 에러 처리 문서](https://axios-http.com/docs/handling_errors)를 참고합니다. -## 액시오스 HTTP 요청 메소드 종류 +## 액시오스 HTTP 요청 메서드 종류 -액시오스에서 자주 사용되는 HTTP 요청 메소드를 알아보겠습니다. +액시오스에서 자주 사용되는 HTTP 요청 메서드를 알아보겠습니다. ### **axios.get(url[, config])** -서버에서 데이터를 가져올 때 사용하는 메소드입니다. 두번째 파라미터 `config` 객체에는 헤더 (header), 응답초과시간 (timeout), 인자값 (params) 등의 요청값을 같이 넘길 수 있습니다. +서버에서 데이터를 가져올 때 사용하는 메서드입니다. 두 번째 파라미터 `config` 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있습니다. ```javascript axios.get('users/1') @@ -90,7 +90,7 @@ axios.get('users/1') ### axios.post(url[, data[, config]]) -서버에 데이터를 새로 생성할 때 사용하는 메소드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. +서버에 데이터를 새로 생성할 때 사용하는 메서드입니다. 두 번째 파라미터 `data`에 생성할 데이터를 넘깁니다. ```javascript axios.post('/books', { title: '1984' }) @@ -98,7 +98,7 @@ axios.post('/books', { title: '1984' }) ### **axios.put(url[, data[, config]])** -특정 데이터를 수정할 때 요청하는 메소드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. 멱등성 (idempotent)을 가져 `put`을 한 번 보내는 결괏값과 `put`을 여러 번 연속으로 보내는 결과값이 동일합니다. +특정 데이터를 수정할 때 요청하는 메서드입니다. `put` 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. `post`와의 다른 점은 `post`는 여러 번 호출할 경우, 새로운 데이터가 지속적으로 추가됩니다. 반면, `put`은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결괏값이 동일합니다. 예를 들어, 아래 예시처럼 2번 유저의 이름을 `Iron Man`으로 수정하기 위해 `axios.put` 요청을 보냅니다. 이때, `put`요청을 한 번 보내거나 여러 번 보내도 2번 유저의 이름은 `Iron Man`으로 동일하게 수정됩니다. ```javascript axios.put('users/2', { name: 'Iron Man' }) @@ -106,7 +106,7 @@ axios.put('users/2', { name: 'Iron Man' }) ### **axios.delete(url[, config])** -특정 데이터나 값을 삭제할 때 요청하는 메소드입니다. +특정 데이터나 값을 삭제할 때 요청하는 메서드입니다. ```javascript axios.delete('books/3') @@ -116,17 +116,9 @@ axios.delete('books/3') 액시오스 요청을 할 때는 config 설정이 가능합니다. 이 중 필수적인 설정은 url뿐입니다. -### url - -`url`은 액시오스 요청에 사용될 서버의 URL을 말합니다. - -```javascript -url: '/books' -``` - ### method -`method`는 요청을 할 때 사용할 요청 메소드입니다. `method`의 기본값은 get 입니다. +`method`는 요청을 할 때 사용할 요청 메서드입니다. `method`의 기본값은 get입니다. ```javascript method: 'get' @@ -134,7 +126,7 @@ method: 'get' ### baseURL -URL이 절대경로가 아닌 이상, URL 앞에 `baseURL`이 추가됩니다. 액시오스 인스턴스에 `baseURL`을 설정하여 상대경로(relative URL)를 전달하는 방법이 더 편리할 수 있습니다. +`baseURL`은 액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성입니다. 보통 `http://mysite.com/api/v1/`처럼 API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다. ```javascript baseURL: `https://도메인.com/api/` @@ -149,38 +141,39 @@ baseURL: `https://도메인.com/api/` ``` ### params -`params`는 요청과 함께 보낼 URL 파라미터를 말하며 오브젝트 (object)나 [URLSearchParams 오브젝트](https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams)로 이루어져야 합니다. `params`가 널(null)이거나 undefined인 경우, URL에 렌더링되지 않습니다. +`params`는 HTTP 요청에 붙일 URL 파라미터를 의미합니다. 예를 들어, 아래 예시 코드는 `https://domain.com`이라는 URL로 HTTP 요청을 보냈을 때 `https://domain.com?id=123`으로 전달하는 것과 같은 효과를 가집니다. 여기서 `params`가 `null`이나 `undefined`인 경우에는 파라미터가 조합되지 않습니다. ```javascript params: { - ID: 13579 + id: 123 } ``` ### data -`data`는 요청 본문(body)에 포함되어 보내질 데이터를 말합니다. `data`는 'PUT', 'POST', 'DELETE', 그리고 'PATCH' 액시오스 요청 메소드에 적용이 가능합니다. +`data`는 HTTP 요청 보디에 실어서 보낼 데이터를 의미합니다. 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용합니다. ```javascript data: { firstName: 'Christine' }, -// 아래의 data config 설정은 POST 메소드에서만 사용이 가능합니다. +// 아래의 data config 설정은 POST 메서드에서만 사용이 가능합니다. data: 'Age=26&City=New York' ``` ### timeout -`timeout`은 요청 시간이 초가되기까지의 시간을 밀리초(millisecond)로 지정합니다. 요청이 `timeout`에 지정된 시간보다 오래 걸리면 요청이 중단됩니다. +`timeout`은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성입니다. 요청 시간이 지정된 값을 초과하면 에러가 발생합니다. ```javascript +// 단위(millisecond) timeout: 5000 ``` ### responseType -`responseType`은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 'arraybuffer', 'document', 'json', 'text', 'stream'이 가능합니다. json이 기본값입니다. +`responseType`은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 arraybuffer, document, json, text, stream이 가능합니다. 기본 값은 json입니다. ```javascript responseType: 'json' @@ -188,17 +181,7 @@ responseType: 'json' ### 기타 액시오스 요청 Config -Config 옵션은 메소드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. - -- `head` 는 `get` 방식과 동일하지만, 응답에 body가 없습니다. 이를 통해 웹 서버의 정보를 확인하거나 버전을 확인하는 등의 용도로 사용됩니다. - -**axios.options(url[, config])** - -- `options` 를 통해 서버에서 지원하는 옵션들을 미리 확인하기 위해 사용됩니다. - -**axios.patch(url[, data[, config]])** - -- `patch`의 경우, 데이터의 일부를 교체할 경우에 사용됩니다. +Config 옵션은 메서드 별로 사용할 수 있는 옵션이 다르므로, [액시오스 Request Config 문서](https://axios-http.com/docs/req_config)를 참고합니다. ## 기타 액시오스 API From 91510298a042d93ae5a1dec54d091907bb5a8890 Mon Sep 17 00:00:00 2001 From: scl2589 Date: Fri, 3 Sep 2021 00:10:39 +0900 Subject: [PATCH 14/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=82=AD=EC=A0=9C]?= =?UTF-8?q?=20axios.md=20config=20=EB=B6=80=EB=B6=84=20url=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=AC=B8=EC=9E=A5=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index a4ce0337a..410c9342c 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -114,7 +114,7 @@ axios.delete('books/3') ## 액시오스 HTTP 요청 Config 옵션 -액시오스 요청을 할 때는 config 설정이 가능합니다. 이 중 필수적인 설정은 url뿐입니다. +액시오스 요청을 할 때는 config 설정이 가능합니다. ### method From 1c79364688de3dba1708bc86f37b7ca7eac6d25c Mon Sep 17 00:00:00 2001 From: scl2589 Date: Fri, 3 Sep 2021 00:12:38 +0900 Subject: [PATCH 15/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EB=B3=80=EA=B2=BD]?= =?UTF-8?q?=20=EB=B6=80=ED=98=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 410c9342c..1d44ebbcc 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -141,7 +141,7 @@ method: 'get' `baseURL`은 액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성입니다. 보통 `http://mysite.com/api/v1/`처럼 API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다. ```javascript -baseURL: `https://도메인.com/api/` +baseURL: 'https://도메인.com/api/' ``` ### headers From b3e0ee1cfd7528a81fab5f8fecbec5787dc9d734 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Sun, 5 Sep 2021 16:25:48 +0900 Subject: [PATCH 16/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20axios.md=20then=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/axios.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/vue/axios.md b/docs/vue/axios.md index 1d44ebbcc..63e95bd7d 100644 --- a/docs/vue/axios.md +++ b/docs/vue/axios.md @@ -55,7 +55,7 @@ new Vue({ ### .then -HTTP 통신이 성공했다는 뜻으로, `.then()`으로 결과값을 받아서 처리할 수 있습니다. +비동기 통신이 성공했을 경우, `.then()`은 콜백을 인자로 받아 결괏값을 처리할 수 있습니다. ### .catch From fd77e97513268711121af3648fde1209279b1ea1 Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Fri, 17 Sep 2021 19:18:08 +0900 Subject: [PATCH 17/19] =?UTF-8?q?[=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20Array=20=EB=B0=B0=EC=97=B4=20=EC=A1=B0=EC=9E=91=20=EB=A9=94?= =?UTF-8?q?=EC=86=8C=EB=93=9C=20=EC=84=A4=EB=AA=85=20=EB=B3=B4=EC=B6=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/array.md | 73 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 68 insertions(+), 5 deletions(-) diff --git a/docs/js/array.md b/docs/js/array.md index cf1fae936..c4740841f 100644 --- a/docs/js/array.md +++ b/docs/js/array.md @@ -58,8 +58,71 @@ console.log(arr); // [10, 20] 배열을 조작할 때 주로 사용하는 API는 다음과 같습니다. -- [push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) : 배열에 데이터 추가 (맨 끝 인덱스부터 추가됨) -- [slice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) : 배열의 특정 인덱스에 있는 값을 반환 (배열의 내용이 변환되지 않음) -- [splice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) : 배열의 특정 인덱스에 있는 값을 변경 또는 삭제 (배열의 내용이 변경됨) -- [pop()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) : 배열의 마지막 인덱스의 값을 꺼냄 (배열의 내용이 변경됨) -- [shift()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) : 배열의 첫번째 인덱스의 값을 꺼냄 (배열의 내용이 변경됨) +### [push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) + +`push()`는 배열에 데이터를 추가할 때 사용하며, 맨 끝 인덱스부터 추가됩니다. + +```javascript +let arr = []; +arr.push(2); // [2] +arr.push(4); // [2, 4] +arr.push(1); // [2, 4, 1] +arr.push(5); // [2, 4, 1, 5] +``` + +### [slice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) + +`slice()`는 배열의 특정 인덱스에 있는 값을 반환하며 새로운 배열을 반환합니다. 그래서 원본 배열의 내용은 바뀌지 않습니다. + +매개변수가 1개이면, 해당 인덱스부터 배열의 마지막까지의 모든 요소들을 포함한 새로운 배열을 반환합니다. 매개변수가 2개일 경우, 첫번째 매개변수는 기존 배열의 시작점(인덱스)을 지정하는 것이고, 두번째 매개변수는 배열의 종료 지점(인덱스)을 뜻합니다. 이때는 시작 지점에 있는 요소를 포함하여, 종료 지점에 있는 요소를 제외하고 그 사이의 요소들을 반환합니다. + +```javascript +const fruits = ['apple', 'banana', 'orange', 'peach', 'grape'] + +console.log(fruits.slice(2)); // ['orange', 'peach', 'grape'] +console.log(fruits.slice(2, 4)); // ['orange', 'peach'] +console.log(fruits.slice(1, -1)); // ['banana', orange', 'peach'] +``` + + + +### [splice()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) + +`splice()`는 배열의 특정 인덱스에 있는 값을 변경하거나 또는 삭제됩니다. `splice()`는 원본 배열의 내용을 변경합니다. + +`splice()`는 최소 2개의 매개변수가 필요합니다. 첫번째 매개변수는 배열의 변경을 시작할 인덱스를 말합니다. 두번째 매개변수는 배열에서 몇 개의 요소를 제거할지 지정합니다. 만약 세번째 매개변수를 지정하지 않으면 요소를 제거하고, 세번째 혹은 그 뒤에 여러 매개변수가 존재한다면 새로 추가할 요소들을 나타냅니다. + +예를 들어, `animals.splice(1, 0, 'reindeer')` 을 살펴보면, 첫번째 매개변수가 1이기 때문에 배열의 변경이 첫 번째 인덱스부터 시작되고, 두번째 매개변수가 0이므로 아무 요소도 제거되지 않습니다. 세번째 매개변수에 `'reindeer'`이 있기 때문에 변경이 시작되는 첫번째 인덱스에 해당 요소가 추가됩니다. + +```javascript +const animals = ['tiger', 'lion', 'rabbit', 'gorilla'] +animals.splice(1, 0, 'reindeer'); // ['tiger', 'reindeer', 'lion', 'rabbit', 'gorilla'] +animals.splice(4, 2, 'turtle', 'hippo'); //['tiger', 'reindeer', 'lion', 'rabbit', 'turtle', 'hippo'] + +``` + + + +### [pop()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) + +`pop()`은 배열의 마지막 인덱스의 값을 꺼내고, 해당 값을 리턴합니다. `pop()`은 배열의 내용을 변경합니다. + +```javascript +let things = ['presents', 'vitamins', 'scissors', 'bags']; +let popped = things.pop(); +console.log(popped); // 'bags' +console.log(things); // ['presents', 'vitamins', 'scissors'] +``` + + + +### [shift()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) + +`shift()`는 배열의 첫번째 인덱스의 값을 꺼내며, 해당 값을 리턴합니다. `shift()`는 배열의 내용을 변경합니다. + +```javascript +let numbers = [1, 2, 3, 4, 5]; +let firstElement = numbers.shift(); +console.log(firstElement); // 1 +console.log(numbers); // [2, 3, 4, 5] +``` From d8a77a8d484922a2d47e311b5f979b7ad9b35ba7 Mon Sep 17 00:00:00 2001 From: scl2589 Date: Mon, 20 Sep 2021 14:56:00 +0900 Subject: [PATCH 18/19] =?UTF-8?q?[=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80]?= =?UTF-8?q?=20array.md=20=EB=B0=B0=EC=97=B4=20=EC=A1=B0=EC=9E=91=20?= =?UTF-8?q?=EB=A9=94=EC=86=8C=EB=93=9C=20=EC=B6=94=EA=B0=80(map,=20filter,?= =?UTF-8?q?=20reduce,=20forEach)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/array.md | 75 +++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 71 insertions(+), 4 deletions(-) diff --git a/docs/js/array.md b/docs/js/array.md index c4740841f..665ed9bea 100644 --- a/docs/js/array.md +++ b/docs/js/array.md @@ -74,7 +74,7 @@ arr.push(5); // [2, 4, 1, 5] `slice()`는 배열의 특정 인덱스에 있는 값을 반환하며 새로운 배열을 반환합니다. 그래서 원본 배열의 내용은 바뀌지 않습니다. -매개변수가 1개이면, 해당 인덱스부터 배열의 마지막까지의 모든 요소들을 포함한 새로운 배열을 반환합니다. 매개변수가 2개일 경우, 첫번째 매개변수는 기존 배열의 시작점(인덱스)을 지정하는 것이고, 두번째 매개변수는 배열의 종료 지점(인덱스)을 뜻합니다. 이때는 시작 지점에 있는 요소를 포함하여, 종료 지점에 있는 요소를 제외하고 그 사이의 요소들을 반환합니다. +매개변수가 1개이면, 해당 인덱스부터 배열의 마지막까지의 모든 요소들을 포함한 새로운 배열을 반환합니다. 매개변수가 2개일 경우, 첫 번째 매개변수는 기존 배열의 시작점(인덱스)을 지정하는 것이고, 두 번째 매개변수는 배열의 종료 지점(인덱스)을 뜻합니다. 이때는 시작 지점에 있는 요소를 포함하여, 종료 지점에 있는 요소를 제외하고 그 사이의 요소들을 반환합니다. ```javascript const fruits = ['apple', 'banana', 'orange', 'peach', 'grape'] @@ -90,9 +90,9 @@ console.log(fruits.slice(1, -1)); // ['banana', orange', 'peach'] `splice()`는 배열의 특정 인덱스에 있는 값을 변경하거나 또는 삭제됩니다. `splice()`는 원본 배열의 내용을 변경합니다. -`splice()`는 최소 2개의 매개변수가 필요합니다. 첫번째 매개변수는 배열의 변경을 시작할 인덱스를 말합니다. 두번째 매개변수는 배열에서 몇 개의 요소를 제거할지 지정합니다. 만약 세번째 매개변수를 지정하지 않으면 요소를 제거하고, 세번째 혹은 그 뒤에 여러 매개변수가 존재한다면 새로 추가할 요소들을 나타냅니다. +`splice()`는 최소 2개의 매개변수가 필요합니다. 첫 번째 매개변수는 배열의 변경을 시작할 인덱스를 말합니다. 두 번째 매개변수는 배열에서 몇 개의 요소를 제거할지 지정합니다. 만약 세 번째 매개변수를 지정하지 않으면 요소를 제거하고, 세 번째 혹은 그 뒤에 여러 매개변수가 존재한다면 새로 추가할 요소들을 나타냅니다. -예를 들어, `animals.splice(1, 0, 'reindeer')` 을 살펴보면, 첫번째 매개변수가 1이기 때문에 배열의 변경이 첫 번째 인덱스부터 시작되고, 두번째 매개변수가 0이므로 아무 요소도 제거되지 않습니다. 세번째 매개변수에 `'reindeer'`이 있기 때문에 변경이 시작되는 첫번째 인덱스에 해당 요소가 추가됩니다. +예를 들어, `animals.splice(1, 0, 'reindeer')` 을 살펴보면, 첫 번째 매개변수가 1이기 때문에 배열의 변경이 첫 번째 인덱스부터 시작되고, 두 번째 매개변수가 0이므로 아무 요소도 제거되지 않습니다. 세 번째 매개변수에 `'reindeer'`이 있기 때문에 변경이 시작되는 첫 번째 인덱스에 해당 요소가 추가됩니다. ```javascript const animals = ['tiger', 'lion', 'rabbit', 'gorilla'] @@ -105,7 +105,7 @@ animals.splice(4, 2, 'turtle', 'hippo'); //['tiger', 'reindeer', 'lion', 'rabbit ### [pop()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) -`pop()`은 배열의 마지막 인덱스의 값을 꺼내고, 해당 값을 리턴합니다. `pop()`은 배열의 내용을 변경합니다. +`pop()`은 배열의 마지막 인덱스의 값을 꺼내며, 해당 값을 리턴합니다. `pop()`은 배열의 내용을 변경합니다. ```javascript let things = ['presents', 'vitamins', 'scissors', 'bags']; @@ -126,3 +126,70 @@ let firstElement = numbers.shift(); console.log(firstElement); // 1 console.log(numbers); // [2, 3, 4, 5] ``` + + + +### **[map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)** + +`map()`은 배열 내의 각각의 요소에 대해 인수로 전달한 `callback`(콜백) 함수를 한 번씩 실행하여, 함수가 리턴 한 결괏값으로 새로운 배열을 만들어 리턴합니다. + +아래 예시에서는 `numbers` 배열의 인수 1, 2, 3, 4에 대해서 각 인수에 3을 더하는 콜백 함수를 실행하여 4, 5, 6, 7 인수를 담은 새로운 배열을 리턴합니다. + +```javascript +const numbers = [1, 2, 3, 4]; +const map1 = numbers.map(x => x + 3); +console.log(map1); // [4, 5, 6, 7] +``` + + + +### **[filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)** + +`filter()`은 주어진 함수의 조건에 맞는 요소들만 모아 새로운 배열을 반환합니다. + +```javascript +const array = ['earphones', 'handcream', 'grape', 'tv', 'books', 'sandwiches']; +const result = array.filter(each => each.length >= 5); +console.log(result); //['earphones', 'handcream', 'grape', 'books', 'sandwiches'] +``` + + + +### **[reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)** + +`reduce()`는 배열을 순회하면서 각 요소에 대해 리듀서 함수를 실행해 해당 함수의 반환값을 **누적**할 때 자주 사용합니다. + +리듀서 함수는 4개의 인자를 가집니다. 첫 번째 인자는 누산기 (accumulator)입니다. 함수의 반환값을 누적합니다. 두 번째 인자는 처리할 현재 요소를 말하며, 세 번째 인자는 처리할 요소의 인덱스를 나타냅니다. + +함수 뒤에는 누산기의 초깃값을 추가해야 합니다. 이 초깃값을 따로 추가하지 않는다면 기존 배열의 첫 번째 값을 뜻하며, 인덱스는 0이 아닌 1부터 시작합니다. + +가장 자주 사용하는 예로는 모든 배열의 합을 구할 때 사용합니다. 아래 예시에서는 초깃값을 0으로 두었기 때문에 `acc`의 초깃값은 0이 되고, 배열의 첫 번째 요소부터 차례대로 `acc`에 자신의 값인 `cur`을 더해갑니다. 이를 통해 최종적으로 반환되는 값은 `numbers` 배열의 요소인 1부터 5까지 더한 15입니다. + +```javascript +const numbers = [1, 2, 3, 4, 5]; +const result = numbers.reduce((acc, cur, idx) => { return acc += cur }, 0) // 15 +``` + + + +### **[forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)** + +`forEach()`는 각각의 요소에 대하여 주어진 콜백 함수를 실행해 배열 요소의 인덱스와 값에 접근할 수 있습니다. `forEach()`는 배열을 변경하지 않습니다. + +```javascript +const numbers = [1, 2, 3, 4, 5]; +numbers.forEach(number => console.log(number)); +// 1 +// 2 +// 3 +// 4 +// 5 + +// 다른 배열에 복사하기 +const copied = [] +numbers.forEach(function(number){ + copied.push(number) +}) +console.log(copied) // [1, 2, 3, 4, 5] +``` + From 417ebbbb3be2cc613de2ad4c5d14f5f083e5df10 Mon Sep 17 00:00:00 2001 From: scl2589 Date: Sun, 3 Oct 2021 19:09:49 +0900 Subject: [PATCH 19/19] =?UTF-8?q?[=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95]?= =?UTF-8?q?=20=EB=B0=B0=EC=97=B4=20=EC=A1=B0=EC=9E=91=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EB=B0=B1=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/js/array.md | 77 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 63 insertions(+), 14 deletions(-) diff --git a/docs/js/array.md b/docs/js/array.md index 665ed9bea..e3ea34847 100644 --- a/docs/js/array.md +++ b/docs/js/array.md @@ -74,10 +74,14 @@ arr.push(5); // [2, 4, 1, 5] `slice()`는 배열의 특정 인덱스에 있는 값을 반환하며 새로운 배열을 반환합니다. 그래서 원본 배열의 내용은 바뀌지 않습니다. +```javascript +arr.slice([begin[, end]]) +``` + 매개변수가 1개이면, 해당 인덱스부터 배열의 마지막까지의 모든 요소들을 포함한 새로운 배열을 반환합니다. 매개변수가 2개일 경우, 첫 번째 매개변수는 기존 배열의 시작점(인덱스)을 지정하는 것이고, 두 번째 매개변수는 배열의 종료 지점(인덱스)을 뜻합니다. 이때는 시작 지점에 있는 요소를 포함하여, 종료 지점에 있는 요소를 제외하고 그 사이의 요소들을 반환합니다. ```javascript -const fruits = ['apple', 'banana', 'orange', 'peach', 'grape'] +const fruits = ['apple', 'banana', 'orange', 'peach', 'grape']; console.log(fruits.slice(2)); // ['orange', 'peach', 'grape'] console.log(fruits.slice(2, 4)); // ['orange', 'peach'] @@ -90,12 +94,16 @@ console.log(fruits.slice(1, -1)); // ['banana', orange', 'peach'] `splice()`는 배열의 특정 인덱스에 있는 값을 변경하거나 또는 삭제됩니다. `splice()`는 원본 배열의 내용을 변경합니다. +```javascript +array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) +``` + `splice()`는 최소 2개의 매개변수가 필요합니다. 첫 번째 매개변수는 배열의 변경을 시작할 인덱스를 말합니다. 두 번째 매개변수는 배열에서 몇 개의 요소를 제거할지 지정합니다. 만약 세 번째 매개변수를 지정하지 않으면 요소를 제거하고, 세 번째 혹은 그 뒤에 여러 매개변수가 존재한다면 새로 추가할 요소들을 나타냅니다. 예를 들어, `animals.splice(1, 0, 'reindeer')` 을 살펴보면, 첫 번째 매개변수가 1이기 때문에 배열의 변경이 첫 번째 인덱스부터 시작되고, 두 번째 매개변수가 0이므로 아무 요소도 제거되지 않습니다. 세 번째 매개변수에 `'reindeer'`이 있기 때문에 변경이 시작되는 첫 번째 인덱스에 해당 요소가 추가됩니다. ```javascript -const animals = ['tiger', 'lion', 'rabbit', 'gorilla'] +const animals = ['tiger', 'lion', 'rabbit', 'gorilla']; animals.splice(1, 0, 'reindeer'); // ['tiger', 'reindeer', 'lion', 'rabbit', 'gorilla'] animals.splice(4, 2, 'turtle', 'hippo'); //['tiger', 'reindeer', 'lion', 'rabbit', 'turtle', 'hippo'] @@ -145,7 +153,7 @@ console.log(map1); // [4, 5, 6, 7] ### **[filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)** -`filter()`은 주어진 함수의 조건에 맞는 요소들만 모아 새로운 배열을 반환합니다. +`filter()`은 콜백 함수의 조건에 맞는 요소들만 모아 새로운 배열을 반환합니다. ```javascript const array = ['earphones', 'handcream', 'grape', 'tv', 'books', 'sandwiches']; @@ -159,22 +167,61 @@ console.log(result); //['earphones', 'handcream', 'grape', 'books', 'sandwiches' `reduce()`는 배열을 순회하면서 각 요소에 대해 리듀서 함수를 실행해 해당 함수의 반환값을 **누적**할 때 자주 사용합니다. -리듀서 함수는 4개의 인자를 가집니다. 첫 번째 인자는 누산기 (accumulator)입니다. 함수의 반환값을 누적합니다. 두 번째 인자는 처리할 현재 요소를 말하며, 세 번째 인자는 처리할 요소의 인덱스를 나타냅니다. +```javascript +reduce((accumulator, currentValue, currentIndex, array) => { ... }, initialValue) +``` + +리듀서 함수는 4개의 인자를 가집니다. 첫 번째 인자는 누산기 (accumulator)입니다. 누산기는 함수의 반환값을 누적합니다. 두 번째 인자는 처리할 현재 요소를 말하며, 세 번째 인자는 처리할 요소의 인덱스를 나타냅니다. -함수 뒤에는 누산기의 초깃값을 추가해야 합니다. 이 초깃값을 따로 추가하지 않는다면 기존 배열의 첫 번째 값을 뜻하며, 인덱스는 0이 아닌 1부터 시작합니다. +함수 뒤에는 누산기의 초깃값을 추가할 수 있습니다. 이 초깃값을 따로 추가하지 않는다면 기존 배열의 첫 번째 값을 뜻하며, 인덱스는 0이 아닌 1부터 시작합니다. -가장 자주 사용하는 예로는 모든 배열의 합을 구할 때 사용합니다. 아래 예시에서는 초깃값을 0으로 두었기 때문에 `acc`의 초깃값은 0이 되고, 배열의 첫 번째 요소부터 차례대로 `acc`에 자신의 값인 `cur`을 더해갑니다. 이를 통해 최종적으로 반환되는 값은 `numbers` 배열의 요소인 1부터 5까지 더한 15입니다. +가장 기본적인 예로는 모든 배열의 합을 구할 때 사용합니다. 아래 예시에서는 초깃값을 0으로 두었기 때문에 `acc`의 초깃값은 0이 되고, 배열의 첫 번째 요소부터 차례대로 `acc`에 자신의 값인 `cur`을 더해갑니다. 이를 통해 최종적으로 반환되는 값은 `numbers` 배열의 요소인 1부터 5까지 더한 15입니다. ```javascript const numbers = [1, 2, 3, 4, 5]; -const result = numbers.reduce((acc, cur, idx) => { return acc += cur }, 0) // 15 +const result = numbers.reduce((acc, cur, idx) => { return acc += cur }, 0); // 15 ``` +또한, 특성에 따라 분류할 때 사용할 수 있습니다. 아래 예시에서는 사람의 나이에 따라 분류합니다. 나이를 키로 삼아, 누산기에 나이가 있는지 확인하고, 없으면 초기화합니다. 이후, 리스트에 해당 나이를 키로 가진 오브젝트를 추가합니다. 이를 통해 나이에 따라 사람들을 분류합니다. + +```javascript +const people = [ + { name: 'Lee', age: 25 }, + { name: 'Kim', age: 30 }, + { name: 'Choi', age: 25}, + { name: 'Shin', age: 30} +] + +function groupBy(peopleArray, property) { + return peopleArray.reduce((acc, cur) => { + // 나이를 기준으로 분류한다. + const key = cur[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(cur); + return acc; + }, {}); +} + +const groupedPeople = groupBy(people, 'age'); +console.log(groupedPeople); +/* +Object { + 25: Array [Object { name: "Lee", age: 25 }, Object { name: "Choi", age: 25 }], + 30: Array [Object { name: "Kim", age: 30 }, Object { name: "Shin", age: 30 }] +} +*/ + +``` + + + ### **[forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)** -`forEach()`는 각각의 요소에 대하여 주어진 콜백 함수를 실행해 배열 요소의 인덱스와 값에 접근할 수 있습니다. `forEach()`는 배열을 변경하지 않습니다. +`forEach()`는 각각의 요소에 대하여 주어진 콜백 함수를 실행해 배열 요소의 인덱스와 값에 접근할 수 있습니다. 반환값이 없기 때문에 아래 예시처럼 순회하며 연산을 하고, 다른 배열에 조작할 때 사용합니다. `forEach()`는 배열을 변경하지 않습니다. ```javascript const numbers = [1, 2, 3, 4, 5]; @@ -185,11 +232,13 @@ numbers.forEach(number => console.log(number)); // 4 // 5 -// 다른 배열에 복사하기 -const copied = [] -numbers.forEach(function(number){ - copied.push(number) -}) -console.log(copied) // [1, 2, 3, 4, 5] +const odd = []; +const even = []; +numbers.forEach(function(number) { + number % 2 ? odd.push(number) : even.push(number) +}); +console.log(odd); // [1, 3, 5] +console.log(even); // [2, 4] + ```