04) 암낫오케

이희주·2022년 5월 12일

코드캠프 코린이의 4일차 오늘의 요약

오늘은 동기/비동기 통신에 대해서 배웠습니다.

기본적으로 자바스크립트는 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 동기 실행 방식으로 통신하지만,
axios나 apollo-client같이 통신을 도와주는 라이브러리들은 기본적으로 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 비동기 실행 빙식으로 통신합니다.

요청들 사이에 서로 기다려줄 필요가 없으므로 여러 가지 요청을 동시에 처리해줄 수 있는 장점이 있지만,데이터를 요청하고 화면에 그려줄 때 응답이 들어오기 전에 화면에 그려주게 된다면 에러가 발생할 수 있겠죠?

그래서 우리는 이러한 비동기 실행 방식을 동기 실행 방식으로 바꾸어주어야했습니다.
이것을 도와주는 명령어가 async/await 이였습니다.
async/await을 사용해주면 await이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드가 실행되지 않습니다. 이렇게 되면 완전히 완료된 후 완성된 데이터를 화면에 잘 그려줄 수 있겠죠??

호이스팅에 대해서도 배웠습니다.
변수의 선언과 초기화를 분리해서 선언만 코드의 최상단으로 끌어올려주는 것이라고 했습니다.
function 함수 선언과 var 변수 선언은 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있었고, 게다가 재선언/할당이 가능해지기 때문에 예기치못한 에러가 발생할 수 있었습니다.
const나 let도 호이스팅이 되지만 , 할당되기 전에는 Temporal Dead Zone, TDZ에 있어서 앞서 등장하지 않았고 const의 경우에는 재선언/재할당이 모두 불가능하기 때문에 예기치못한 에러 발생을 방지할 수 있었습니다.
우리가 화살표 함수를 사용하고, let이나 const 변수 선언을 사용해주시는 이유가 이제 더 명확해지셨나요?

vscode에서 apollo-client를 사용하여 graphql-API 요청할 때는 useQuery()와 useMutation()을 사용해서 통신하면 됨니다 (apollo-client에서 import 해주시는 것도 잊지말기!)

React

어제 배운 api를 vs코드로 옮겨서 요청 받은 결과를 변수에 저장하기

동기와 비동기방식 >> Async-Await

VSCODE에서 데이터 전송하기 >> Apollo-Client / Mutation

비동기 방식과 동기 방식
동기 : 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통식
비동기 : 서버에 요청(등록,수정,삭제 등)저장이 될 때까지 기다리지 않고 다른 > 작업 진행
게시물을 등록했는데 안불러와지는 이유는?? 
=> 아직 서버에 등록이 안됐는데 요청하자마자 불러왔기 때문에 !
그래서
게시글 등록이 완료되면 불러오는 동기 방식을 사용해야 함
동기 방식 순서 : 게시글 등록, 게시글 등록 완료, 응답이 모두 끝난 후 요청, 게시글 불러오기
순서가 상관 없을때는 비동기 방식 사용 가능 (빠르니까)
비동기 방식 쓸때 : 
요청들이 서로 기다릴 필요가 없을때(동시에 여러 일을 할때)
뭐가 먼저 끝나도 상관이 없을 때
ex 게시물 목록, 상품 목록 가져오기 
axios는 비동기 방식
const data = axios.get('https://koreanjson.com/post1)
	console.log(data)
자바스크립트는 위에서부터 한줄씩 실행되는게 정상인데
const 부분 실행하다가 axios를 만나면
저 링크에서 데이터를 받아올때까지 기다렸다가
데이터 받아오면 객체에 저장한 다음
아랫줄로 내려가서 콘솔로그로 데이터 게시물이 나와야하는데

저 코드로 실행하면 http 요청한 뒤 데이터 올 때까지 안기다리고 promise 뜨면서 언젠가는 준다고 뜬다고 함.. 얼탱

근데 이걸 기다렸다가 실행하게 하는 게

비동기를 동기로 바꿔주는 명령어

에이싱크 어웨이트

async / await

코드에 적용하는 방법
// 비동기 통신
function 함수이름() {
    const data = axios.get('https://koreanjson.com/post1)
    console.log(data)
}
// 동기 통신
async function 함수이름() {
    const data = await axios.get('https://koreanjson.com/post1)
    console.log(data)
에이싱크는 실행되는 함수 앞에 붙이고, 어웨이트는 axios 앞에 붙이면 됨
어웨이트가 있기 때문에 다음줄로 바로 안내려가고 데이터베이스 안에서 데이터 받아올때까지 기다렸다가 다음줄 실행됨

vs코드 실습
코드 작동되는 순서
빈 문자열 state 만들기
버튼 하나 만들고
버튼을 누르면 함수 실행 
api요청으로 koreanjson에서 
해당하는 데이터를 가져와서
불러올때까지 기다림
불러온 값을 result 객체에 저장함
객체에서 타이틀만 뽑아서 state에 저장함 (result.data.title)
화면에 보여쥬기
import axios from 'axios'
import {useState} from 'react'

//export default해야 화면에 나옴
export default function RestGetPage() {
const [data, setData] = useState("")

// 함수이름 handleClickRestApi 이거랑 onClickRestApi 많이 사용함const onClickRestApi = async (event) => {
    const result = await axios.get("https://koreanjson.com/posts/1")
    console.log(result)
    setData(result.data.title)
}
return (
    <div>
        <div>{data}</div>
        <button onClick={onClickRestApi}>REST-API 요청하기!!!</button>
    </div>
)}
동기/비동기 실습(graphql-api 사용)

const [실행함수] = useMutation()
실행하려면
실행함수()
useMutation() 괄호 안에 가져올 api쓰기
const [createBoard] = useMutation(CREATE_BOARD)
createBoard()
useState했던것처럼 graphql 사용하려면 useMutation 입력

작동되는 순서
빈 문자열
api 요청하기 버튼 클릭하면
onClickGraphqlApi 함수실행
callGraphql 줄 실행되면 요청 날아감
백엔드에서 DB가서 데이터(createBoard) 받아올때까지 기다림
받아온걸 객체 데이터를 result 상자에 넣고
넣어준걸 콘솔로 화면에 찍어봄
게시물이 성공적으로 등록되었습니다 메세지를 리절트에 넣어줌
div안에 들어있던 빈문자열이 성공적으로 등록되었씁니다 메세지로 바뀜
setData에 가져와서화면에 보여쥼
import { useState } from "react"
import { gql, useMutation} from '@apollo/client'
const CREATE_BOARD = gql`
    mutation {
    createBoard (writer:"망고", title:"갱얼쥐", contents:"말티쥬"){
            _id
            number
            message
        }
    }
`
export default function GraphqlMutationPage() {
    const [data, setData] = useState("")
    const [callGraphql] = useMutation(CREATE_BOARD)

    //자바스크립트 영역
    const onClickGraphqlApi = async (event) => {
        // const result = await axios.get("https://koreanjson.com/posts/1") // rest-api 방식
        const result = await callGraphql()
        console.log(result)
        setData(result.data.createBoard.message)
    }

    return (
    //html 영역
        <div>
            <div>{data}</div>
            <button onClick={onClickGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </div>
    )

}
에러났을때 관리자도구에서 찾는 방법

elements : html, css 틀렸을때
network : 백엔드 부분

graphql 사용해서 CREATE_BOARD 하면
같은 내용만 계속 불러오니까
내용 수정
createBoard 안에서 문자로느 안되니까
변수 선언하기

한번에 불러오면 되는데 왜
두번에 나눠서 불러오는지,,?
골라서 받을 수 있음, 여러 api를 묶음 요청할 수 있음
rest api는 크리에이트 보드 한번, 프로덕트 한번 이렇게 두번 요청해야되는데
graphql api는 한번에 묶어서 할 수 있음
그래서 감자 라는 writer를 한번에 안 보내고
위에 createBoard 그룹으로 보낸다음에 분배해줌
근데 이러케 하면
버튼 열번눌러도 감자, 제목입니다, 내용입니다만 계속등록됨
그래서 인풋창을 세개 (wrter, title, contents) 만들어서
각각의 값이 입력되면 그 값을 어딘가로 저장한다음
입력될때마다 넣어줌 (state에)
그래서 onchange 3개 state 3개 씩 만들긔

실행되는 순서 !
빈 문자열
input창에 작성자,제목,내용 값 입력하면
onChange함수가 실행되면서
이벤트가 일어나고 값이 저장됨
Graphql-api 요청하기 버튼 클릭하면
onClickGraphqlApi 함수실행
callGraphql 줄 실행되면 요청이 날아감
이때 callGraphql 안에 있는 CREATE_BOARD내용이 요청되는데
아까 input창에 입력한  writer,title,contents값이 들어감 
이때 await가 백엔드에서 DB가서 데이터(createBoard) 받아올때까지 기다림
받아온걸 객체 데이터를 result 상자에 넣고
넣어준걸 콘솔로 화면에 찍어봄
게시물이 성공적으로 등록되었습니다 메세지를 리절트에 넣어줌
div {data}안에 들어있던 빈문자열이 성공적으로 등록되었씁니다 메세지로 바뀜
setData에 가져와서 화면에 보여쥼

알고리즘 클래스

알고리즘 삼일차 !!!!!

반복문

엄청 중요

반복문이란?
일정 로직을 계속 반복해서 실행하는 문법

사용 방법 : for()로 시작하며, 소괄호 () 안에 문법을 작성한다.
문법에는 [최초식,조건식,증감식]을 차례대로 입력한다.

for(최초식, 조건식, 증감식)
i선언 / i가 어쩌구일때 까지 /i를 어떻게 한다
**최초식**은 반복문을 처음 실행할때 선언
어디서부터 시작하는지를 결정하는 시작점
(변수선언과 똑같이 i 는 반복문 안쪽에서 내가 사용할 최초식을 선언해주는것)

**조건식**은 반복문을 실행하는 조건을 설정
해당 조건식이 true 일 때만 로직을 실행함
(true일 때 까지만 실행)

**증감식**은 반복문을 실행할 때마다 최초식을 증감
반복문의 실행 횟수를 조절할 수 있음
(i가 0이고; 조건식에서 i가 5보다 작을때까지, 증감식에서 i에서 1을 더함)
최초식 조건식 증감식을 적절하게 설정해서 사용하 자
for(let i = 0; i < 5; i = i +1) {
  console.log("안녕하세요?")
}
이렇게 하면? i가 5번 찍힘
반복문에는 여러가지 조건을 줄 수 있는데
break : 원하는 구간에서 반복문을 종료
continue : 해당 구간의 반복문을 실행하지 않음
#### continue
for(let i = 0; i < 5; i = i+1) {
  if ( i === 2) {
    continue;
  }
  console.log(i)
}
i가 0일때, i가 5보다 작을때까지, i를 하나씩 더하는데
i가 2면 건너뛰어줘
#### break
for(let i = 0; i < 5; i = i+1) {
  if ( i === 2) {
    break;
  }
  console.log(i)
}
i가 0일때, i가 5보다 작을때까지, i를 하나씩 더하는데
i가 2면 건너뛰어줘
전체 데이터를 보려고 할 때, 이 데이터가 정상적인 데이터인지 확인할 때
정상적이지 않은 데이터를 발견했을때 검사를 중단하겠다 (break)
그 중에서 정상적인 것만 검증할거다 하면 (continue) 사용

for - in : 객체를 반복할 수 있다(일반 반복문으로는 객체 반복 못해서 for in 써줘야함) , 문자열,객체,배열 가지고 올 수 있음
사용 방법 : for( let key in object)
키를 넣고 in 뒤에 내가 반복하고 싶은것 넣기
str = "abcde";
for(let key in str) {
  console.log(key)
}
//각각의 문자열을 가지고 올 수 있음
arr = ["a","b","c","d"]
for(let key in arr) {
  console.log(key, arr[key])
}
//배열도 가지고 올 수 있음
obj = {name:'철수', age:12}
for ( let key in obj) {
  console.log(key)
}
obj = {name:'철수', age:12}
for ( let key in obj) {
  console.log(key)
}
key, value 값도 가지고 올 수 있음
for - of : 각각의 요소들을 가지고 올 수 있음
for(let key of object)
str = "abcde"

for(let key of str) {
  console.log(key)
}
결과 :
'a'
'b'
'c'
'd'
'e'
//각각 한글자씩 데이터 가지고 올 수 있음
//근데 효율성이 안좋음 느림
forEach : 배열에만 사용할 수 있음
Array.forEach(function())
쩜 (.) 뒤에 함수가 사용되는 방식을 메서드 라고 부름

고차함수 : 함수 안에 함수를 넘겨줘서 받아오는거
(함수자체를 함수의 인자로 가져온다)__

while : 최초식,증건식,증감식이 분활되어 사용

for문처럼 기초적인 반복문인데 for문과 다르게
최초식,조건식,증감식을 분할해서 사용
사용방법 : while() 

let i = 0; // 최초식
while(i !== 5) { //조건식
  console.log(i)
  i = i + 1; //증감식
}
while 문은 무한반복 될 수 있기 때문에 조심해야 함
for 문은 내가 언제까지 돌릴수있는지 알아야 할때
while 문은 내가 언제까지 반복해야할지 모를때 사용
어떤 데이터를 받아오는데 이 데이터가 몇번 시도해야 받아올 수 있을지 모를때 while문 사용함

TIL

1.아침에 와서 개별적으로 알고리즘 테스트 한 것을 오후 알고리즘 클래스에서 코드리뷰 해주시는데, 내가 생각헀던것 내가 풀려고 했던 방법보다 항상 더 효율적인 코드가 있다는 것 !!!! 예를 들어 나는 for 문에서 i + 1 을 썼는데 i ++ 같은 것을 배웠다.

2.리액트를 배우고 코드가 점점 길어지고 구구절절 삼백줄이 되면서 어디가 어디고 뭐가 뭔지 오타가 어디있는지 대문자 소문자 등이 헷갈리기 시작했다 그래서 함수나 변수 선언할때 이름 똑바로 해야겠다고 느낌,, 아무렇게나 선언했던것들 고쳤다

3.처음으로 그룹멘토링 시간을 가졌는데 4주같은 4일을 보내면서 진짜 힘들고 지쳤서 방전되려던 것들을 멘토링으로 조금 회복한 것 같아서 좋았다 대단한걸 한건 아니지만 앉아서 모니터만 보다가 사람들이랑 마주보고 얘기하니까 살 것만같아

4.3시간동안 헤맨거
프리보드 만들어 뒀던 것에 graphql-api 배운걸 연결시켜서 게시판을 작성하고 등록하기 버튼 누르면 데이터가 전송되도록 연결했는데 그 과정에서 한 코드를 3시간을 넘게 뜯어고침 첫번째 문제는 플레이그라운드에서 크리에이트프리보드 형식을 가지고 오는데
const CREATE_BOARD = gql`
    mutation createBoard($createBoardInput: CreateBoardInput!){
            createBoard(createBoardInput: $createBoardInput){
                _id
                writer
                title
                contents
            }
    }
`
이거 gql 양식을 제대로 못써서 엄청 헤맸다 이건 뭐가 틀린건지도 잘 몰라서 계속 뜯어보고 플레이그라운드 사이트 가서 확인해보고 고침
두번째 문제는 오타와 대문자 소문자 구분ㅡㅡ 양식 제대로 고쳤는데도 오류떠서 코드 크으으으으으게 확대해서 계속 뚫어져라 봤더니 title 과 Title 티 하나의 차이로 안됐던 거였다 거친세상아 암다잉
화나서 키보드를 난타 하고 싶었는데 나는 아 아 아 하는 탄식밖에 못했고 주변을 둘러보니까 나같은 사람 열명은 돼서 같이 위로 주고받음,, 정신차려이각박한세상속에서

5.처음하고 그다음날에는 진짜 힘들었는데 오늘은 더힘들다 이게 잘 하고 있는건지 모르겠다 아니 난 잘하고있는데? 잘하고있는데 잘하고있는게 아니고 오늘 진짜 생각했는데 나는 이해가 안되면 외우는게 힘든 사람이라 이해하기 위해서 코드 실행되는 순서, 알고리즘 순서를 쫙 써서 한 줄 한 줄 뜯어보면서 이해하려고 노력했다 처음엔 길이 보고 얼탱이 없던게 계속 뜯어보고 물어보고 다시 해보면 이해가 된다는게 넘 뿌듯하고 벌써 개발자 다 된 기분이다 어려운데 진짜 분명히 어려운데 재밌고 모니터 앞에 계쏙 붙어있게 된다희희
주야 화이팅 취뽀 하자
그리고 주말에 알고리즘 공부해 !!!!

이희주

어제보다 오늘 발전하는 프론트엔드 개발자

이전 포스트

03일) 괄호 안에 괄호 안에 괄호 밖에 괄호 안에 괄호

다음 포스트

04) 암낫오케

React

에이싱크 어웨이트

async / await

동기/비동기 실습(graphql-api 사용)

알고리즘 클래스

반복문

while : 최초식,증건식,증감식이 분활되어 사용

TIL

03일) 괄호 안에 괄호 안에 괄호 밖에 괄호 안에 괄호

04) 암낫오케

0개의 댓글