JavaScipt 기초 document

summary
Empty
Course
JavaScript 기초
author
Sungpah
content num
0
tech
JavaScript
cover
docs.jpg
duration
Empty
안녕하세요! 오늘은 자바스크립트 기초를 다뤄 보려고 합니다. 극 초보를 위한 문서 입니다.
Reading 25 mins (but hope it's worthy!)

why javascript?

가장 많이 쓰고, 이곳저곳에서 쓰입니다. 일단 react의 기본 랭기지고, 나중에 nextjs나 여러 다른 상황에서 javascript를 만납니다. 세상에서 제일 많이 쓰이는 프로그래밍 랭기지라고 아시고 넘어가면 될 것 같습니다. 시작도 바로 javascript로 하시면 좋겠죠.

데이터 타입에 대해서

시작 부터 변수 타입입니다. 변수가 뭔지 모르셔도..일단 쭉 읽어보시길 권장드립니다!
자바스크립트에서 인식하는 데이터 타입은 것은 아래의 것들입니다.
"나는 배고프다" → 요건 string 이라고 합니다. (한국말로는 문자열!, 앞으로는 string이라고 하죠)
777 → 칠백칠십칠 요건 number라고 합니다. 77.7 도 number 입니다. (상세하겐 fraction이라고 하죠)
[3,4,"15"] → 요건 array라고 합니다. 한국말로는 "열" 이라고 하죠. 브라켓([])은 array!
{firstName: "sungpah", lastName: "lee"} → 요건 object 라고 합니다. 너무 쉽죠?
참고로 firstName, lastName같은 것을 key라고 하고 sungpah, lee 같은 것을 value라고 합니다.key value, key value.
boolean은 true/false죠! 참 거짓.
function은 함수! - 뒤에서 자세히 다룹니다.
null - 빈 값으로 정의가 되어 있음
undefined - 값이 정의되지 않음
여기서 null과 undefined의 의미를 지금 당장 이해하고 넘어가지 않아도 되니, 하나만 기억해주세요. null은 정의는 되어 있지만 빈값으로 정의되어 있는 거고, undefined는 정의된적이 없다!입니다.

변수에 대해서(variable)

const, let, var
변수는 영어로 variable 이라고 하고, 앞으로는 변수대신 variable이라고 하겠습니다. 말 그대로 변할 수 있는 것들이니까요.
variable 을 만드는 방법은 매우 간단합니다. 앞에 let 혹은 var를 쓰고 그다음 원하는 variable의 이름을 쓰고, 그다음 값을 입력하면 됩니다.
let nickName = "david"; console.log(nickName) // -> david nickName = "sungpah" console.log(nickName) // -> sungpah
JavaScript
그럼 이제 드는 생각은, var는 뭐고 let은 뭐지? 겠죠!
var과 let의 차이는 코드로 먼저 보이겠습니다.
function varTest() { var x = 1; { //요렇게 curly brace로 열려 있는 공간을 block 혹은 block scope이라고 합니다. var x = 2; // same variable! console.log(x); // 2 } console.log(x); // 2 } function letTest() { let x = 1; { let x = 2; // different variable console.log(x); // 2 } console.log(x); // 1 }
JavaScript
보시다 싶이, x는 var로 맨처음 선언이 되고 바로 그다음 scope에서 ({}의 영역을 block scope라고 합니다) 다시 선언이 되는데, 이는 앞에 선언된 x=1 을 덮어 씌웁니다. 즉 x=1이 더이상 아니고 2가 됩니다.
반면, let은 블럭 내에서만 한정이 됩니다. 즉 맨 위에서 let x = 1이라고 하고, 그다음 중간에 다시 redeclare가 되도 그건 그 block scope내에서만 적용이 된다는 것이죠.
뭐, 왠만하면 변수 이름을 스콥에서 같게 짓는 것이 바람직하지 않을 때가 많지만, 알고 있으면 유용합니다.
가장 큰 차이는 var는 글로벌하게 쓰이고 let은 아니라는 것이지요. 이 부분은 나중에 심화에서 다루겠습니다.

상수(constant)

const에 값을 입력하면 다시 업데이트를 할 수 없습니다.
const MY_NAME = "sungpah" MY_NAME = "sungpah 2" // error 발생!
JavaScript
왜 const를 사용해야 하나요 그럼? 이라는 질문을 받은 적이 있습니다. 간단히 설명한다면, 코드의 전역이든, 특정 영역이든, 우리가 계속 참조하고 수정할 일이 없는 값인 경우 const를 사용하면 됩니다. 가령, 앱의 버전이라던가, 앱이 통신을 해야 하는 서버의 도메인이라던가 말이죠.
const CURRENT_APP_VERSION = 1.15 const API_PATH = "https://www.ringleplus.com/api/v1"
JavaScript

크롬 브라우저에서 직접 해볼 수 있다는 것. (콘솔에서)

여러분의 크롬 브라우저에 가셔서 오른쪽 마우스를 클릭하고 inspect 를 한 번 눌러보세요.
Screen_Shot_2021-03-09_at_9.20.09_PM.png
그다음 콘솔탭을 누르시고!
Screen_Shot_2021-03-09_at_9.20.20_PM.png
이렇게 크롬 브라우저를 열어서 콘솔탭에서 이것저것 연산을 해볼 수 있답니다
Screen_Shot_2021-03-09_at_9.20.33_PM.png

그 다음은 브라우저에서 파일을 만들어서 해볼 수 있다는 것

이제 좀 더 개발자 답게 좀 수준을 높여볼까요? 😎
이제 본격적으로 파일을 만들어서 작업을 해봅시다.
1.
여러분의 아무런 디렉토리에서 폴더하나를 만들고 그 안에 index.html이라는 이름으로 파일을 하나 만들어 보도록 합시다.
2.
좀 멋지게 하기 위해서, 폴더에 app.js라고 파일을 하나 만듭시다. 이름은 뭐든 상관 없습니다. extension이 .js이면 됩니다.
3.
그 안에 script 태그를 열고 src="./app.js" 로 app.js를 불러 옵니다.
4.
alert메시지를 간단하게 app.js에 작업합니다.
5.
그다음 index.html을 크롬 브라우저를 열어서 확인해보도록 합시다. 참 쉽죠?
개인적으로는 vscode를 사용하고 있습니다.
_2021-03-10__10.32.43.png
index.html, app.js 파일 두개를 만들고, 각각 위에 처럼 간단하게 작성해보세요
_2021-03-10__10.32.54.png
그다음 index.html을 더블클릭하면 실행됩니다.

덧셈 뺄셈 곱셈 나눗셈에 대해서.

덧셈~나눗셈 이런것들을 operator라고 합니다.
let a = 5 let b = 6 console.log(a*b) console.log(a-b) console.log(a/b) console.log(a%b) //그냥 한 번 값을 보면 됩니다. 그냥 한 번 넣어봤습니다 심심할거 같아서.
JavaScript
string끼리도 덧셈이 가능해요
'hello' + ' world'; // "hello world"
JavaScript

if - 만약에!

아주 아주 일반적인 if statement 죠. 설명이 뭐 필요하겠습니까 바로 한 번 코드로 만나볼까요?
const a = "sungpah" let b = "sungpa" b = b + "h" if(a === b) { alert('같다!') }else{ alert('다르네'); }
JavaScript
b에 "h"를 더하면 두 스트링이 더해지니까 sungpah가 되고, 그걸 다시 b에 대입하게 됩니다. 그래서 b 는 "sungpah" 입니다.
if(a === b) 를 보시면 "=" 를 세번 썼습니다. 세번쓰셔야해요! 세번인 이유는 좀 있지만, 일단 입문을 하실 때는 === 기억만 하시면 됩니다😎
조건이 있는 이런걸 control structure라고 부르는데요 control structure는 더 복잡하게 만들 수 있습니다. (물론 실제 프로덕션에서는 왠만하면 단순하게 하는게 좋지만요!)
const a = "sungpah" let b = "sungpa" b = b + "h" if(a === b) { alert('같다!') }else if (a === 'david'){ alert('david이네'); }else if (a === 'paul'){ alert('paul이었군') }else{ alert('대체 무엇?') }
JavaScript
이런 식으로 else if 로 계속 해서 밑에 추가적인 case를 더할 수 있습니다.
이것보다 좀 더 쉬운 switch statement도 있지만, 요건 일단 처음엔 몰라도 되니 넘어가겠습니다 😁

copy 에 대해서

일단 왜 카피를 알아야 하는지가 다뤄지는게 더 중요합니다. 아래의 object를 조금 수정하는 코드를 보여드리겠습니다.
let nameObject = {name: "nick"} let nameObject2 = nameObject nameObject.name = "sungpah" console.log(nameObject) //{name: "sungpah"} console.log(nameObject2) //{name: "sungpah"}
JavaScript
nameObject2가 저는 여전히 nick을 가지길 원했지만, 바뀌어 버렸습니다. 여기서 알 수 있는 것은, 카피를 해도 서로 완전히 독립적인게 아니라 계속 영향을 받는 다는 것이지요. 흠 마치 파일 복사를 해서 작업 하는데, 자꾸 누가 원본 파일을 수정해서 제꺼도 바뀌는 느낌이죠.
이를(?) 해결하기 위해, 완전한 복사를 해와야 합니다. 그 순간의 스냅샷을 말이죠.
방법은 다음과 같습니다.
let nameObject = {name: "nick"} let nameObject2 = {...nameObject} nameObject.name = "sungpah" console.log(nameObject) //{name: "sungpah"} console.log(nameObject2) //{name: "nick"}
JavaScript
여기서 처음 보는 신택스 {...nameObject} 에 주목해주세요. 이 신택스는 카피한다라는 의미입니다.
여기서 하나 더 공부할 것은 variable의 type에 따라 복사법 신택스가 조금 다르다는 점 입니다.
만약에 nameObject가 array였다면,
let nameObject = [1,2,3] let nameObject2 = [...nameObject] nameObject[2] = 5 console.log(nameObject) //[1,2,5] console.log(nameObject2) //[1,2,3]
JavaScript
string이나, number의 경우 카피를 하면 문제 없이 사용이 가능합니다.
let a = '123' let b = a a = '555' console.log(a) //555 console.log(b) //123
JavaScript

iteration에 대해서 (반복)

1.
for loop에 대해서
2.
object에서 키값으로 한바퀴 돌기
이제 약 절반 정도 왔습니다.
우리가 만나는 여러 문제 중에 마나는 것중 하나가 바로 iteration을 해야 할 때 입니다. 무슨말인지 아직 모르시겠다면 간단한 예시로 보여드리겠습니다.
예를 들어 array = [1,2,3,..... 10000] 의 데이터를 가지고 있다고 하겠습니다. 첫번째 entry부터 마지막 엔트리까지 프린트를 해야 하는 일을 해야 한다고 한다면 우리는 어떻게 해야할까요?
console.log(array[0]) console.log(array[1]) console.log(array[2])......??? ...??
JavaScript
만약에 만줄을 처야 한다면, 프로그래밍은 우리의 친구가 될 수 없죠.
간단한 방법을 소개하면
array.forEach((val) => { console.log(val) });
JavaScript
forEach다음에 (val) 에 주목해주세요. 이 val에 들어가는 글자인 val에는 무엇이든 상관 없습니다. 물론 변수 타입이름 같은건 피해주세요! (나중에 엄청 헷갈리거든요! ㅎ)
자 다른 유형의 iteration이 있습니다. 그건 바로 object를 이터레이션 해야 하는 경우인데요, 가령
let ourObject = { firstName:"sungpah", lastName: "lee", birth: "안알랴줌", height: '2m면nba', ....} //정보가 엄청 많지만 일단 4개면 적었고, ....는 신택스가 아니고 뒤에 생략했다는 말 입니다.
JavaScript
이 경우, 저희는 키, 벨류쌍을 프린트 하고 싶다고 하겠습니다. 어떻게 하면 좋을까요?
여러 방법중에 쉽게 쓸 수 있는 것은 바로 이것 입니다.
for (const [key, value] of Object.entries(ourObject)) { console.log(`${key}: ${value}`); } //혹은 Object.entries(ourObject).forEach(([key, value])
JavaScript
이렇게 할 수 있습니다.
Object.entries(여기에 우리의 object) 을 하면, 이 오브젝트에 있는 키, 벨류가 페어로 해서 어레이로 나오게 됩니다. 한 번 직접 콘솔로 찍어보시길 권장합니다😀
for (let key in ourObject) { console.log(key, ourObject[key]); }
JavaScript
전 이걸 제일 많이 써왔는데, es6에선 위에서 제공해주는 방식이 나오네요.! 저도 정리 하면서 새로 배웁니다 🤣

Array의 몇가지 성질! (진짜 꼭 알아야 할것만!)

어레이의 길이: 몇개의 엘리먼트가 있나! : .length
두번째의 엘리먼트는 무엇? : [1] <[2]가 아니고?>
어레이에 추가하고 싶어!
어레이를 자르고 싶어!
이 엘리먼트는 어레이에서 몇번째 index에 있지?
위의 네가지가 어레이에서 알아야 할 내용입니다. 특히 리엑트를 위해선 말이죠!
var a = new Array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3
JavaScript
var a = ["dog", "cat", "hen"]
JavaScript
a의 두번째 엘리먼트인 "cat" 에 접근을 하려면? a[1] 라고 합니다. 첫번째 dog는 a[0] 이죠. 안에 있는 이 숫자들을 우리는 index라고 하는데, 이 인덱스는 0부터 시작을 합니다. 그럼 퀴즈는, 임의의 array의 마지막 엘리먼트를 가져오는 방법은 무엇일까요?
array[array.length - 1] //입니다.
JavaScript
숫자가 옆으로 하나씩 밀리기 때문이죠! ㅎ 이해되셨으리라 소망합니다. 😎
그 다음은 어레이에 추가하기! 간단하게 .push를 사용하면 됩니다.
a.push('eagle'); a //["dog", "cat", "hen", "eagle"]
JavaScript
이제 한 번 어레이를 잘라볼까요?
splice vs slice
어레이를 자를 때에, 원본 어레이를 수정하는 경우와 그렇지 않는 경우가 있습니다. 이건 실제로 코드를 짜다보면 만나는 문제고 이 경우 이 차이를 아는 것은 매우 중요합니다. 뭐든 알고 수정해야죠!
splice - 원본을 바꾼다!
splice는 두 개의 인풋을 받는데, 하나는 시작 index, 두번째는 작업할 길이 입니다. 예를 들어 .splice(2,1)을 하게 되면, 원본 어레이의 세번째 엘리먼트 부터 한개를 잘라버리자! 입니다. 2인데 왜 세번째냐구요? 어겐 인덱스는 0부터 시작이어서, 0,1,2 → 따라서 세번째 입니다. 예제를 볼까요?
var array2=[6,7,8,9,0]; console.log(array2.splice(2,1)); // shows [8] console.log(array2) // shows [6,7,9,0]
JavaScript
보시면 자르는 식자체의 리턴 값은 [8] 이고, 원본이었던 array2는 이제 8을 잃어 버렸습니다. 기억하세요! 원본이 바뀝니다.
slice - 원본을 바꾸지 않아!
두 개의 인풋을 받습니다. 시작점 끝점! 첫번째 인풋은 필수고, 두번째는 안써도 됩니다. (안써도 된다는 말은 default로 어떠한 룰이 있다는 이야기 입니다. 안써도 된다에 초점을 두지 말고, default가 뭔지를 아셔야 합니다😎)
var array=[1,2,3,4,5] console.log(array.slice(2)); // shows [3, 4, 5], returned selected element(s). console.log(array); // shows [1, 2, 3, 4, 5], original array remains intact. var array2=[6,7,8,9,0]; console.log(array2.slice(2,4)); // shows [8, 9]
JavaScript
대체 이 엘리먼트는 해당 어레이에서 몇번째 index에 있지?
이 문제는 매우 자주 접하게 됩니다. 예를 들어 우리에게 유저 리스트가 있는데, 그 유저들 중, 이름이 sungpah인 유저의 정보를 수정해주고 싶다면 어떻게 해야 할까요?
1.
일단 유저를 찾고
2.
그다음 업데이트 ㄱ ㄱ.
이걸 한 번 그대로 해볼까요? let array에 유저데이터가 다음과 같다고 합시다. sungpah를 찾아서 sungpahzzang으로 수정해봅시다.
let array = [ {name: 'sungpah', id:1}, {name:"david", id:2}, {name: "paul", id:3} ] const index = array.findIndex(element => element.name === "sungpah") if (index !== -1) { array[index].name = `${array[index].name}zzang`; } array
JavaScript
여기서 두가지를 소개할게요.
findIndex
index !== -1
findIndex는 특정 조건을 만족하는 인덱스를 찾는 것입니다. element라고 쓰여있는건 매개변수고, 어떠한 이름도 다 괜찮습니다. 저는 편하게 element라고 했구요. 그다음 화살표! 그다음 조건을 쓰시면 됩니다.
저는 간단한 로직만 해놨는데, 좀 더 복잡한 로직으로 찾아야 한다고 한다면 (예를 들어 이름이 sungpah고 id는 1인 경우) 다음 처럼 해볼 수 있습니다.
const index = array.findIndex(element => element.name === "sungpah" && element.id === 1)
JavaScript
&& 를 하고 다른 조건을 적어주면 됩니다.
index 가 -1이 아닌 경우에만 작업을 하고 있는데, -1이라는 건 뭘까요?
우리가 array에서 검색을 할 때, 검색 결과가 안나올수 있죠! 그경우 입니다. -1! -1!

함수에 대해서 - 이게 전부라고 말해도 과언이 아니다

1.
return에 대해서
2.
arrow에 대해서
일단 함수는 뭘까요? 쉽게 이야기 하면, 무언가 하는 기능 box 입니다. 어릴 때에 함수 기억나시죠? 박스안에 외부에서 인풋을 주면 무언가 변환되어 아웃풋으로 나오는 기계같은것 말이죠!
함수의 예로는, 덧셈을 하는 함수, 곱셈을 하는 함수, 덧셈을 하고 곱셈까지 하는 함수, string을 alert해주는 함수, 뭔가 복잡한 연산을 함수 등 여러가지가 함수가 될 수 있습니다.
자바스크립트에서 함수 선언은 여러 방법이 있는데, 가장 최신의 방법을 선보이겠습니다.
예를 들어
const addFunction = (a,b) => { console.log(a+b) } addFunction(1,2) //3 - 콘솔로 프린트를 했기에 이렇게 보일 겁니다.
JavaScript
여기서 문법은
const 하고, 함수이름 하고, 그다음 = 하고, 그다음 (variables), 그다음 ⇒, 그다음 {}, 그다음 {}안에 코드! 입니다.
곱셈을 하는 함수라면
const multiplyFunction = (a,b) => { console.log(a*b) } addFunction(4,2) //8
JavaScript
함수는 어떠한 기능 단위로 잘 짜주면 코드 정리에 매우 유용하게 사용이 됩니다. 왜 함수를 써야 하냐라는 궁금증이 있다면 다음의 이유로 쓴다라고 생각하시면 좋을 것 같습니다.
1.
중복되는 코드들을 하나의 함수로 작성하므로서, 수정을 할 때에 일괄 적용이 되게 할 수 있다 (매우 중요)
2.
함수를 정의하는 단위를 일정하게 함으로서, 코드의 flow의 일관성이 생기므로 매우 효율적으로 코드를 작성할 수 있을 뿐만 아니라, 협업을 할 때도 좋다.
아래의 예제를 한 번 볼까요?
const multiply = (a,b) => { return a * b } const add = (a,b) => { return a + b } const result = multiply(add(3,4), add(5,6)) console.log(result) //77!
JavaScript
두 함수를 정의 했습니다. multiply, add
자 처음 보는 return이라는게 보입니다.
일단 리턴.. 처음에 이 용어를 읽을 때에, 대체 무슨말인가 싶었습니다. 리턴.. 돌아간다 아닌가요..? ㅎㅎ 근데, 그게 맞습니다. 🤣 정확히 리턴의 의미는
나를 부른 곳으로 다시 돌아간다. 아주 종종 결과 값을 가지고 말이죠
아직 무슨말인지 이해 안가시는 분들을 기준으로 설명하겠습니다.
const result = multiply(add(3,4), add(5,6)) 에서, 우리는 multiply 함수를 불렀습니다. multiply에서 인풋으로 두개의 add함수를 사용을 합니다. 사용을 한다는 말은 실행을 한다는 말입니다. multiply가 add(3,4)를 부른 것은 덧셈 결과 7을 얻기 위해서겠죠. 그래서 add는 그의 역할을 다 하고 자기를 불렀던 multiply로 돌아가는 겁니다. 돌아갈때 결과 값을 들고 말이죠. 그 결과값을 바로 return 옆에 있는 값입니다. 나를 부른 곳으로 특정 값을 가지고 돌아간다 라는 말 이제 이해 되시죠?
한 번 이해를 한 후로는 너무 큰 의미를 부여하실 필요는 없습니다. 우리는 항상 input과 output이 있을 예정이고 왠만하면 return옆에 뭔가 있을 거니까요 😎

map 함수에 대하여

일단 왜 쓰는지를 아는게 중요하죠! 뭐든 why가 빠지면 안됩니다.
map은 어레이를 나의 편이성에 맞는 다른 어레이로 바꿔주는 편안한 함수 입니다. 굉장히 많이 쓰여요. 아주아주 많이. 그래서 간단하게 개념만 이해하고 가시면 됩니다. 중요한 건 길이는 같습니다.
예를 들어
const array = [{nickName: "sungpah", id: 1}, {nickName:"david", id:2}, {nickName: "paul", id: 3}] //이 모든 이름이 접니다 저요 ㅋㅋㅋ 지금은 sungpah를 주로 쓰죠
JavaScript
제가 하고 싶언던 것은, nickName만 추출해서 ["sungpah", "david", "paul"] 하고 싶습니다. 이런걸 해야할 경우가 많아요! (지금은 와닿진 않겠지만..)
const converted = array.map((obj) => { return obj.nickName })
JavaScript
다른 예로는, nickName에 id값을 더해서 nickNameWithId라는 칼럼을 하나 추가한 array로 만들고 싶다고 하겠습니다.
즉 {nickName: "sungpah", id:1, nickName2: "sungpah1"} 로 만들겠다는 것이지요.
const convertedWithId = array.map((obj) => { const nickName2 = `${obj.nickName}${obj.id}` obj.nickName2 = nickName2 return obj }) //이렇게 하시면 됩니다. 이러면 convertedWithId의 하나의 엘리먼트에는 nickName2가 칼럼으로 //더해져 있습니다. //리턴은 마지막에 한 번만 해야 합니다. ㅎㅎ!
JavaScript

Promise에 대해서 - 약속해줘.

일단 약속해줘.. 아 죄송합니다. Promise가 뭘까요?
프로미스란, 아래 MDN 원문을 가져왔습니다.
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
해석하면
1.
일단 Promise는 object의 일종이다.
2.
언젠가는 끝날(완성이는 실패든) ..
입니다. 어싱크로너스의 개념을 언급한 적이 없으니, 이제 해야 겠군요.
가령, 제가 오늘 날짜 미세 먼지수치를 airkorea에서 받아오겠다고 하겠습니다. (로긴을 하고 받아와야 하네요!)
url = "http://openapi.airkorea.or.kr/openapi/services/rest/UlfptcaAlarmInqireSvc/getUlfptcaAlarmInfo"
JavaScript
우리가 요청을 하면 결과값은 빠르면 수십 ms 느리면 수초 뒤에 오게 됩니다. 우리의 통제 권한에 있지 않은 이 딜레이동안, 자바스크립트는 멈추지 않게 하기 위해 asynchronous의 개념을 가지고 있습니다. 일단 요청을 하고, 결과가 오기 전까지 다른 것들은 잘 동작하는 거죠. 그 다음, 결과가 오면 그때 되서 그 결과값에 따라 다음 일을 하는 겁니다. 여기서 말하는 다른것이란, 해당 asynchronous한 액션을 제외한 나머지인것이죠!
사실 이렇게 설명을 한다고 해도, 처음에 잘 이해가 안될 수 있습니다. 저도 그랬구요. 백문이 불여일견이라고 한 번 볼까요?
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => console.log(data));
JavaScript
fetch는 default javascript 함수 에요. 일단 get method (이해가 안되도 괜찮습니다) 를 실행하면, 앞서 이야기 했던 것 처럼, 결과 값이 언제 올지는 모릅니다. 기억하셔야 할 건 요건데요, fetch는 프로미스를 리턴한다 입니다.
위의 코드는 https://jsonplaceholder.typicode.com/todos/1 에 요청해서 결과를 받는 겁니다. 결과값은 response에 있습니다. 이를 우리가 읽을 수 있는 버전으로 바꾸는게 그다음 ⇒ 에 있는 response.json() 입니다.
그다음 .then을 찍으면 json형태로 바뀌어 있는게 바로 'data' 입니다. 이거는 여러분의 application에 맞춰서 매개변수 이름을 다르게 지을 수도 있습니다. 가령 json 으로 짓고 싶다면 말이죠!
console을 출력하면
{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }
JavaScript
로 나오게 됩니다. 그럼 우리는 이 값을 가지고 앱이나 웹에서 눈에 보이도록 작업만 해주면 끝나는 것이죠.
마지막으로, await 한 번 알아볼까요?
const resolveAfter2Seconds = () => { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } const asyncCall = async () => { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: "resolved" } asyncCall();
JavaScript
갑자기 이상한 문법들이 막 소개가 됐죠. await, async대체 이게 뭔가요? 라는 생각이 드시면 아주 정상입니다. async는 일단 함수를 정의할 때 쓰고, await는 어싱크 함수 내에서 사용하는 명령어 입니다. await를 쓰면, 프로미스가 끝날 때까지 기다렸다가 아래의 코드를 마저 실행합니다.
위에서 보면 resolveAfter2Seconds라는 함수는 프로미스를 리턴하고 있고, 이 프로미스는 2초후에 resolve가 됩니다. 이 함수를 await로 불러오는 순간(그리고 그렇게 불러와야 합니다) 불러온 라인에서는 프로미스가 끝날 때까지 기다립니다. 그리고 결과인 'resolved' string이 찍힙니다.
만약에 await을 쓰지 않고 썼다고
const resolveAfter2Seconds = () => { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } const asyncCall = async () => { console.log('calling'); const result = resolveAfter2Seconds(); console.log(result); // expected output: "resolved" // but real output is : Promise {<pending>} } asyncCall();
JavaScript
await을 안하면 저렇게 그냥 promise자체가 리턴되버립니다 ㅎㅎ 으악~~ 이러면 우리가 값을 못쓰죠!
처음에 이런 실수를 간혹 하게 됩니다.

Fetch 에 대해서

앞에서 promise, await을 봤으니, 이제 한 번 실전으로 가봅시다. 여기를 이해하시고 넘어가시면 이제 완성입니다.
fetch는 자바스크립트에서 기본적으로 제공하는 http request API 입니다. XMLHttpRequest를 더이상 쓰지 않고 이제 fetch로 해보죠. 물론 axios를 써도 되지만, 개인 취향에 맡기겠습니다. 저는 기본 함수를 좋아합니다.
fetch의 리턴은 promise입니다.
get 사용법은 매우 간단합니다.
Get Method
//get method fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => console.log(data));
JavaScript
post나 다른 매소드들도, 어렵진 않습니다. 위에서 배운대로, await을 쓰려면 정의내린 함수는 async여야 합니다. 또한 await을 쓰면, 어웨이트가 끝날 때까지 아래는 기다리고 있으니, response.json()은 최종 결과값을 가지고 있습니다. 그리고 async함수를 사용을 하면, .then으로 이어서 인식하거나, 또 await을 써서 처리할 수 있습니다.
Other methods ( + customization)
//Assume jwtToken exists. const bearerToken = 'Bearer ' + jwtToken; const request = async (url, payload) => { const response = await fetch(url, { method: payload.method, // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json', 'Authorization': bearerToken, }, body: JSON.stringify(payload) // body data type must match "Content-Type" header }); return response.json(); // parses JSON response into native JavaScript objects } //async다음에는 .then을 붙이면 된다. 혹은 await을 사용하면 된다. const firstSampleAPI = (payload) => { request('https://example.com/firstSample', payload) .then((json) => { return json }); } firstSampleAPI({method: "POST"}) const secondSampleAPI = async (payload) => { const json = await request('https://example.com/secondSample', payload) //then.. it awaits..until it gives out the response! console.log(json); } secondSampleAPI({method: "GET"})
JavaScript
ex) - sample api
fetch("https://reqres.in/api/users", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: "sungpah", job: "dreamer" }) }).then(res => res.json()) .then(json => { console.log(json); })
JavaScript
천천히 한 번 따라가 보시면 좋습니다. 오래 걸리셔도 문제 없습니다. 결국 익숙해지면 아무것도 아니니까요!
자 이정도만 알면, 리액트를 알아가시는데에 전혀 문제가 없습니다. 참말로요! 🤩