오늘은 백엔드 보충!
변수 복습
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 변수
// const x; // 값을 넣지 않고 이렇게만 하면 변수 선언
const x = 1; // 값을 넣으면(할당) 초기화(initializer)
var y; // 이제 안씀
let z;
console.log("x: " + x)
console.log("z: " + z)
z=354
console.log("z: " + z)
y='asdf'
console.log("y: " + y)
y=`${x}랑 ${y}랑 ${z}` // 템플릿 리터럴
console.log("y: " + y)
const string = '짠'
console.log(string)
</script>
객체 복습 (+ 구조 분해 할당)
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 객체
const dog = {
// property(속성 key:value)
name : "멍멍이",
color : "흰색",
bark: function() {
console.log(`${this.name} 멍멍!`) // 화살표함수는 객체 밖을 가리키기 때문에 this로 객체안 속성을 불러올 수 없음/그냥 dog.name처럼 해주면 가능
// return `${this.name} 멍멍!`
const { name, color: c, age = 5 } = this // 구조 분해 할당 / color: c처럼 다른 이름의 변수에도 저장 가능 / age처럼 추가도 가능
return [ name, c, age ]
}
}
// return을 객체로 가능
const dog = {
// property(속성 key:value)
name : "멍멍이",
color : "흰색",
bark: function() {
const { name, color } = this
return {
// name : "멍멍이",
// color : "흰색"
name: name, // 구조 분해 할당 응용
color // 생략 가능 / 원래는 color: color
}
}
}
// 불러오기 (2가지)
dog.color
dog["color"]
dog.bark() // 함수 호출
// 구조 분해 할당
const { name, color, bark } = dog // dog를 구조분해하겠다 {속성}
// const name = dog.name
// const color = dog.color
// const bark = dog.bark()
console.log(name)
console.log(color)
bark() // console.log(bark)
// 복습할 땐 배웠던 걸 최대한 응용해 어디까지 할 수 있나 챌린지 해보기
console.log(`강아지 이름은 ${dog.name}, 강아지 색은 ${dog["color"]}, 강아지가 짖을 땐 ${dog.bark()}`)
</script>
함수
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 함수 : 어떤 기능이 계속 반복될 때 모듈화 시켜 재사용 편하게 하기 위해
function Func1() {
console.log("함수입니다.")
}
Func1()
function add(param1, param2) { // 함수 안에서 이용
console.log(`${param1} + ${param2} =`, param1 + param2)
}
add(1, 2)
function returnAddResult(param1, param2) {
return `${param1} + ${param2} = ${param1 + param2}`
}
// 변수 형태에 담아 익명 함수 사용
const returnAddResult = function(param1, param2) {
return `${param1} + ${param2} = ${param1 + param2}`
}
// 화살표 함수로 만들기
const returnAddResult = (param1, param2) => {
return `${param1} + ${param2} = ${param1 + param2}`
}
// return 한줄일 땐 줄일 수 있다
const returnAddResult = (param1, param2) => `${param1} + ${param2} = ${param1 + param2}`
console.log(returnAddResult(4, 5))
</script>
배열
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 배열 : 데이터를 나열한 집합
const arr = [1, 2, 3]
arr[0] // 인덱스 0번째
arr.push(10) // 맨 끝에 추가
console.log(arr)
arr.pop() // 맨 끝의 데이터를 빼 줌 ()안에 값 넣어봤자 아무 의미 X
console.log(arr)
// number, string, function, object, array 넣기
const array = ['hello', {name: "asd"}, function() {console.log("Hi")}, 1, [2,3,4]]
array[2]()
// 백엔드에선 object 많이 씀(DB로부터 json 형태로 데이터를 끌어옴)
const data = [
{id: 0, name: "asd"},
{id: 1, name: "qwe"},
{id: 2, name: "zxc"},
]
console.log(data[0].name)
console.log(data[2].name)
</script>
for문(반복문)
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 반복문
let i = 0
i = i + 1 // i = 0 + 1 / i++로 쓰는 것과 같다
console.log(i) // 1
i = i + 1
console.log(i) // 2
for (let i = 0; i < 5; i++) {
console.log(i) // 0 1 2 3 4
}
// 이런식으로 많이 씀
let num = 0
for (let i = 0; i < 5; i++) {
num = num + 1
console.log(num) // 1 2 3 4 5
}
// 배열과 함께 응용
const array = ["가", "나", "다", "라", "마"]
for (let i = 0; i < array.length; i++) {
console.log(array[i]) // 가 나 다 라 마
}
const arr = ['hello', {name: "asd"}, function() {console.log("Hi")}, 1, [2,3,4]]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]) // hello {name: 'asd'} f () {console.log("Hi")} 1 [2,3,4]
}
const data = [12, 534, 8, 9, 70]
for (let num = 0; num < 5; num++) { // 인덱스가 0부터 01234 => 5까지
console.log(`index[${num}] : ${data[num]}`)
}
</script>
배열 - 순회방식 (javascript 기능)
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 순회방식
// forEach 배열 안에 있는 기능(javascript에만 있음)
const data = [12, 534, 8, 9, 70]
data.forEach((item, index) => { // 익명함수, 0번부터 순서대로 돈다(순회), 속성은 value, index, array 순
console.log(`forEach: ${index}, ${item}`) // 0 12 / 1 534...인덱스와 value 같이 출력됨
})
// map
let datacopy = []
datacopy = data.map((item, index) => { // 0번부터 순서대로 돈다. 차이점 : return값 가능
// console.log(`map: ${index}, ${item}`) // 출력은 forEach와 동일
return item + 1 // 데이터(item)를 리턴값으로 가져올 수 있다 => 바꿀 수 있다
})
console.log("datacopy:", datacopy) // 13, 535, 9, 10, 71
// 객체 형태의 배열로 응용 아이템 하나 추가
const arrObj = [
{id : 0, color : "red"},
{id : 1, color : "orange"},
{id : 2, color : "yellow"},
{id : 3, color : "green"},
{id : 4, color : "blue"},
{id : 5, color : "indigo"},
{id : 6, color : "violet"},
]
let rainbow = []
rainbow = arrObj.map((item) => {
const { id } = item
if (id === 0) { // 속성 변경
item = {...item, color:"puple"} // spread operator
}
return item
})
console.log(rainbow) // id 0인 항목이 puple이 됨
// 객체에 항목 하나 추가 1-1 (구글링해서 본 id랑 color를 가져와서 하는 방법)
rainbow = arrObj.map(({id, color}, idx, arr) => {
return ({[id]: color})
})
rainbow.push({id:7, color:"puple"})
console.log(rainbow)
// 객체에 항목 하나 추가 1-2 (구글링해서 본 id랑 color를 가져와서 하는 방법)
rainbow = arrObj.map(({id, color}, idx, arr) => {
arr.push({id:7, color:"puple"}) // map 내에선 모든 항목을 돌기 때문에 7번 push됨
// if를 쓰거나 해서 하면 가능
return arr
})
console.log(rainbow)
// 객체에 항목 하나 추가(더 간단)
rainbow = arrObj.map((item) => item)
rainbow.push({id:7, color:"puple"})
console.log(rainbow)
</script>
비교
<html>
<body>
자바스크립트 기초
</body>
</html>
<script>
// 비교
const example = (num) => {
if (num > 1) {
return "num가 1보다 크다"
}
}
console.log(example(1)) // undefined(return을 받은 게 없어서)
// 1보다 작을 때(else) 추가
const example = (num) => {
if (num > 1) {
return "num가 1보다 크다"
} else {
return "num가 1보다 크지 않다"
}
}
console.log(example(1))
// if 안에 if
const example = (num) => {
if (num < 3) {
return "num가 3보다 작다"
} else if (num > 0) {
return "num가 0보다 크다"
}
}
console.log(example(4))
// ===, !==
const example = (num) => {
if (num === 3) {
return "num가 3이다"
} else if (num !== 3) {
return "num은 3이 아니다"
}
}
console.log(example(6))
// 값이 true, false/null/undefined
const example = (num) => {
if (num) { // 변수 값 true
return "값이 있다"
} else if (!num) { // !변수 값 false/null/undefined
return "값이 없다"
}
}
console.log(example())
</script>
콜백
<html>
<body>
콜백
</body>
</html>
<script>
const example = (cb) => { // 파라미터를 함수형태로 써주면 콜백함수형태
cb()
}
const print = () => {
console.log("콜백함수")
}
example(print)
// num 추가
const example = (cb) => {
cb(1)
}
const print = (num) => {
console.log("num:", num)
}
example(print)
// number 추가
const example = (cb, number) => {
cb(number)
}
const print = (num) => {
console.log("num:", num)
}
example(print, 1)
// 익명함수 형태
const example = (cb, number) => {
cb(number)
}
example((param) => { // setTimeout과 비슷한 형태
console.log(param)
}, 1)
// 응용 1-1
const example = (cb, cb1, number) => {
cb(number)
cb1(number * 5)
}
const print = (num) => {
console.log(num)
}
example((param1) => { // 익명함수로 해보기
console.log(param1)
}, (param2) => {
console.log(param2)
}, 6)
// 응용 1-2
const example = (cb, cb1, number) => {
cb(number)
cb1(number * 5)
}
const print = (num) => {
console.log(num)
}
const a = "안녕하세요?"
example(print, print, a.length)
</script>
프라미스
<html>
<body>
프라미스
</body>
</html>
<script>
// Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태(resolve가 안된 상태)
// Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
// Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
const data = new Promise((resolve, reject) => {
resolve(1)
})
.then(res => {
console.log("첫번째 then:", res) // 첫번째 then: 1
return res + 1 // then을 더 쓰고 싶을 경우 return으로 값을 넘겨준다
})
.then(res => {
console.log("두번째 then:", res) // 두번째 then: 2
})
// 비동기
const data = new Promise((resolve, reject) => {
resolve(1)
})
.then(res => {
console.log("첫번째 then:", res) // 첫번째 then: 1
setTimeout(() => {
return res + 1
}, 1000)
})
.then(res => {
console.log("두번째 then:", res) // 두번째 then: undefined
})
// promise
const data = new Promise((resolve, reject) => {
resolve(1)
})
.then(res => {
console.log("첫번째 then:", res) // 첫번째 then: 1
return new Promise((resolve) => {
setTimeout(() => {
resolve(res + 1)
}, 1000)
})
})
.then(res => {
console.log("두번째 then:", res) // (1초 후 실행됨) 두번째 then: 2
})
// reject
const data = (num) => {
return new Promise((resolve, reject) => { // 화살표함수 return 생략
// if(typeof num === 'number') resolve(num)
// else reject({code:500, message:"숫자가 아닙니다"})
// 삼항연산자로 만들어보기
typeof num === 'number' ? resolve(num) : reject({code:500, message:"숫자가 아닙니다"})
})
}
data(a) // data("as")
.then(res => {
console.log("첫번째 then:", res) // 첫번째 then: 1
return new Promise((resolve) => {
setTimeout(() => {
resolve(res + 1)
}, 1000)
})
})
.then(res => {
console.log("두번째 then:", res) // (1초 후 실행됨) 두번째 then: 2
})
.catch(err => { // reject, 코드 상에서 난 에러를 catch가 받는다
console.error(err)
})
// 삼항 연산자
const data1 = (num) => {
// if (num > 1) {
// console.log("1보다 큼")
// } else {
// console.log("1보다 크지 않음")
// }
// 밑이 위와 같다
// <조건식> ? <조건식을 만족함 (True)> : <조건식을 만족하지 않음 (False)>
num > 1 ? console.log("1보다 큼") : console.log("1보다 크지 않음")
}
data1(2)
</script>
async, await
<html>
<body>
프라미스
</body>
</html>
<script>
// reject(아래 async, await와 이어짐)
const data = (num) => {
return new Promise((resolve, reject) => { // 화살표함수 return 생략
// if(typeof num === 'number') resolve(num)
// else reject({code:500, message:"숫자가 아닙니다"})
// 삼항연산자로 만들어보기
typeof num === 'number' ? resolve(num) : reject({code:500, message:"숫자가 아닙니다"})
})
}
data(a) // data("as")
.then(res => {
console.log("첫번째 then:", res) // 첫번째 then: 1
return new Promise((resolve) => {
setTimeout(() => {
resolve(res + 1)
}, 1000)
})
})
.then(res => {
console.log("두번째 then:", res) // (1초 후 실행됨) 두번째 then: 2
})
.catch(err => { // reject, 코드 상에서 난 에러를 catch가 받는다
console.error(err)
})
// async, await
// (
// () => {
// }
// )() // 익명함수 실행
(
async () => {
const res = await data(2) // data(2).then(res) => 첫번째 then과 똑같다 / resolve = data(2)
const res1 = res + 1 // 두번째 then
console.log("res:", res)
console.log("res1:", res1)
}
)()
(
async () => {
try {
const res = await data(2) // data(2).then(res) => 첫번째 then과 똑같다 / resolve = data(2)
const res1 = res + 1 // 두번째 then
console.log("res:", res)
console.log("res1:", res1)
} catch(err) {
console.error("캐치:", err)
}
}
)()
</script>
숙제
<html>
<body>
숙제
</body>
</html>
<script>
const data = (num) => {
return new Promise((resolve, reject) => {
if(typeof num === 'number')
resolve(num)
else
reject({code: 500, messgae: "숫자가 아님"})
})
}
// 숙제 1 : 삼항연산자
const data = (num) => {
return new Promise((resolve, reject) => {
typeof num === 'number' ? resolve(num) : reject({code: 500, message: "숫자가 아님"})
})
}
data(3)
// 숙제 2-1 : then, catch
.then(res => {
console.log(`첫번째 then : ${res}`)
return new Promise((resolve) => {
setTimeout(() => {
resolve(res + 1)
}, 1000)
})
})
.then(res => {
console.log(`두번째 then : ${res}`)
return `${res} X 7 = ${res * 7}`
})
.then(res => {
console.log(`세번째 then : ${res}`)
})
.catch(err => {
console.error(err) // reject에서 넘긴 데이터 받아오기
})
// 숙제 2-2 : async / await
const data = (num) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
typeof num === 'number' ? resolve(num) : reject({code: 500, message: "숫자가 아님"})
}, 1000)
})
}
;( // 함수 선언 안해도 바로 실행 가능
async () => {
try {
const res = await data(8)
console.log("res:", res)
const res1 = res + 1
console.log("res1:", res1)
const res2 = `${res} X 7 = ${res * 7}`
console.log("res2:", res2)
} catch(err) {
console.error(err)
}
}
)()
</script>저렇게 하면 작동은 하는데
async await안에 프라미스 넣는 방식으로도 해봤다.
그러나 값은 어떻게 넣어야하는건지 잘 모르겠다.
const res = await new Promise((resolve) => setTimeout(resolve, 1000))구글링해서 이렇게 넣어봤는데 값이 없으니 undefined가 나온다.
밑에 다른 방법이 있길래 따라해봤다.
<html>
<body>
숙제
</body>
</html>
<script>
// 숙제 2-2 : async / await
const data = (num) => {
return new Promise((resolve, reject) => {
typeof num === 'number' ? resolve(num) : reject({code: 500, message: "숫자가 아님"})
})
} // setTimeout 삭제
;( // 함수 선언 안해도 바로 실행 가능
async () => {
try {
const res = await data(3) // await : promise가 resolve 하는 걸 기다려 주겠다(결과 resolve(3)) / await 안하면 promise가 그대로 넘어온다
console.log("res:", res)
await new Promise((resolve) => setTimeout(resolve, 1000)) // setTImeout 여기다가 promise 이용
const res1 = res + 1
console.log("res1:", res1)
await new Promise((resolve) => setTimeout(resolve, 1000))
const res2 = `${res} X 7 = ${res * 7}`
console.log("res2:", res2)
} catch(err) {
console.error(err)
}
}
)()
</script>결과
res가 먼저 출력되고 1초 후 res1, 또 1초 후 res2 출력됨
느낀 점
복습할 땐 내가 갖고 있는 지식을 응용해 최대한 다양하게 활용해볼 것.
=> 여기서 재미를 찾을 수 있을듯
확실히 지금 보니 어느정도 이해가 간다(첫날에 비하면 장족의 발전)
오늘도 복습 충실히 해야겠다.
숙제 : 프라미스 부분의 new Promise setTimeout을 async, await으로 바꿔보기 (위에 기록)
'공부 > Boot camp' 카테고리의 다른 글
| TIL_220107_IOT (0) | 2022.01.07 |
|---|---|
| TIL_220106_Backend (0) | 2022.01.06 |
| TIL_220104_Vision 인식 (0) | 2022.01.04 |
| TIL_210103_Vision 인식 (0) | 2022.01.03 |
| TIL_211231_Vision 인식 (0) | 2021.12.31 |
