## Fetch API
Fetch API는 HTTP를 구성하는 요청(request), 응답(response) 그리고 헤더(Headers)의 요소를 Javascript에서 조작할 수 있는 인터페이스를 제공합니다.
이전에는 XMLHttpRequest를 사용하여 jQuery와 같은 라이브러리의 도움을 받았지만, 이제는 Fetch API의 전역 fetch() 메서드 하나면 쉽게 비동기적으로 가져올 수 있습니다.
- 🔗 [MDN Fetch API](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API)
**시작하기 전에**
원격 데이터를 호출하기 위해 JSONPlaceholder라는 페이크(Fake) api 사이트를 이용할 예정입니다. 무료로 사용할 수 있어 테스트 용도로 사용하기 좋습니다.
- [JSON Placeholder Guide](https://jsonplaceholder.typicode.com/guide/)
nodejs 환경에서는 17.5 버전 이후에 Fetch API를 지원합니다. 현재(2022년 10월)는 지원하지 않는 nodejs 버전이 많으니 아래 예제들은 브라우저의 개발자 도구 환경에서 실행하시기 바랍니다.
### 기본 사용법
fetch 메서드는 promise로 동작합니다. promise가 익숙하지 않으신 분은 promise 영상을 시청하시기 바랍니다.
```js
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => console.log(json));
```
### 옵션 추가하기
두번째 파라미터로 옵션을 설정하여 호출 할 수 있습니다.
```js
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
}).then((response) => response.json())
.then((json) => console.log(json));
```
아래 예제와 같이 'body' 부부분에 데이터를 담아 서버에 전송할 수 도 있습니다.
```js
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
```
### 파일 업로드
```js
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData,
})
.then((response) => response.json())
.then((result) => {
console.log('성공:', result);
})
.catch((error) => {
console.error('실패:', error);
});
```
여러개의 파일 업로드도 가능합니다.
```js
const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');
formData.append('title', '제주도 수학여행');
for (let i = 0; i < photos.files.length; i++) {
formData.append(`photos_${i}`, photos.files[i]);
}
fetch('https://example.com/posts', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((result) => {
console.log('성공:', result);
})
.catch((error) => {
console.error('실패:', error);
});
```
### fetch() 메서드
https://developer.mozilla.org/en-US/docs/Web/API/fetch
Session 대신 JWT를 사용하는 이유 실 서버는 하나의 인스턴트로만 동작하지 않는다. 서버의 고가용성(high availabliity, HA)을 확보하기 위해 두 개 이상의 병렬서버로 운영하게 된다. 서버가 병렬로 운영되는 상황에서 세션을 사용하면 각 서버간의 세션을 동기화하는 문제가 발생한다. 이를 해결하기 위해 공유 데이터베이스를 이용한 세션공유 기법들을 사용하기도 한다. 서버가 많아지면 세션동기는 더 어렵다. JWT를 사용하면 세션사용으로 인한 서버 자체에 부담도 줄이면서 공유 세션에 대한 관리가 한층 수월하다. 스프링 시큐리티 - SecurityConfig.java session을 사용하지 않도록 설정 jwtAuthFilter 추가 httpBasic 제거 - JwtAuthenticationFilter.java config.filter 패키지에 파일 추가 jwt dependency 추가 (3개). gradle refresh하는 거 까먹지 말기 config.service 패키지에 [JwtService.java](http://JwtService.java) 추가 jwtService와 UserDetailService final field 추가. @RequiredArgsConstructor 까먹지 말기 - config.service.JwtService 소스 참조해서 파일 작성 - controller, service 수정 User 를 리턴하면 pwd가 그대로 노출되므로 AuthResponse와 AuthRequest로 교체 Github https://github.com/ohhoonim/factory.git 유튜브 영상 스프링부트 - 보안 JWT JWT - refresh 토큰과 logout
``` [!NOTE] Winddows와 Macos macos를 기준으로 설명하고 있으나, 거의 대부분 macos의 `Cmd`키를 `Ctrl`키로 변경하면 windows에서도 그대로 사용할 수 있음 ``` # VSCode 단축키 - `Cmd + p` : 파일 오픈을 위한 palette - `Cmd + shift + p` : 명령어 실행을 위한 palette. `Cmd + p` 한 다음 '>'를 입력해도 됨 - `Cmd + shift + o` : 현재파일에서 심볼 찾기 (field, method, function 등). `Cmd + p`한 다음 '@'를 입력해도 됨 - `Cmd + Opt + ` : 열려있는 편집기 전환 - `Cmd + shift + e` : 편집기와 탐색기를 전환 함. (탐색기에서 vim 커서 이동 키도 동작한다는 것이 핵심) - `Cmd + Opt + ` : 열모드로 블럭 지정. (VIM단축키와 조합하면 최상임. 이건 글로 설명이 안됨) --- ``` [!NOTE] VSCode용 Vim 확장 - 여기서는 vscodevim 에서 제작한 Vim 확장을 설치하여 사용한다. Vim 단축키는 다를 바 없다. - `esc`키를 눌러 Normal모드 진입시 '한글' 입력상태인 경우 많이 불편하다. '한영'을 자동으로 변환해주는 여러 방법들을 써봤지만, 몇 일 지나면 풀려서 잘 동작 안한다. 그냥 Normal 모드 진입시 '한영'변환을 신경써서 잘 해주자. (시간낭비하지 마세요) - macos의 경우 `Cmd`키와 `Caps`키를 바꾸자. - Windows의 경우 `Ctrl`키와 `Caps`키를 바꾸자. (써보면안다. 얼마나 편한지) ``` ``` [!warning] - 표기된 모든 단축키는 `대소문자`를 구분합니다. (shift 입력하기 귀찮아서임) - `잘라내기`라고 표기한 것은 `붙여넣기`가 가능하다는 뜻입니다. - VIM 모드 전환은 직...
설치하기에 앞서 테스팅 이야기 ISO/IEC/IEEE 29119 에서는 소프트웨어 테스팅의 표준standard에 대해 정의하고 있습니다. 돈받고 파는 문서를 '표준'이라고 번역하기는 좀 껄끄러운데요. 'standard'는 비지니스를 안정적으로 수행할 수 있는 잘 정리된 '가이드' 정도가 올바른 번역이 아닐까 생각됩니다. 소프트웨어에 표준이 있다면 얼마나 좋겠습니까마는 no silver bullet 이라는 말도 있듯이 이건 그냥 iso에서 제시하는 가이드일 뿐이라는 것이 개인적인 의견입니다. 뭐 대단한거 한다고 시작하는데 말이 많군요. (^^;) 29119 part2에서는 테스트프로세스를 다루고 있구요. 이 중 test management process 항목이 있습니다. 어딜가나 비지니스가 끼어드니 management는 빠지는 곳이 없네요. 먹고살려면 어쩔수 없죠. 경영진을 설득하기 위한 부단한 연구라고 인정하는 수밖에. 출처 : http://softwaretestingstandard.org/part2.php 테스팅 서버를 구성하는 이유는 test management process 관점에서 'test monitoring & control'이 필요하기 때문입니다. (위 그림에서 가운데 노란색 박스) testlink 는 오픈소스로서 전 세계에서 가장 많이 사용되고 있는 툴이며 monitoring과 control을 위해 적절한 기능을 제공하고 있다고 판단됩니다. 맨티스는 testing completion 조건을 만족시키기 위한 테스팅 조직과 개발 조직간의 협업툴로서 이용될 수 있습니다. 개발조직에서는 맨티스와 같은 버그 리포트 툴을 사용하고 있으며 bugzilla, jira와 같은 다른 버그리포트 툴로 대체될 수 있습니다. 본 포스팅에서는 monitoring & control 을 수행하기 위한 테스팅 환경 구축이라고 보시...
댓글
댓글 쓰기