[코드캠프]4일차_TIL

윤성해·2023년 3월 16일
0

프론트엔드_TIL

목록 보기
4/27
post-thumbnail

🏷️ 수업목차

  1. 동기실행, 비동기실행
  2. 호이스팅
  3. apollo-client
  4. apollo-client 로 graphql 뮤테이션 실행
  5. graphql 뮤테이션에 async / await 적용

✏️ 오늘의 TIL

1. 동기, 비동기

❗️응답 기다리기 ➡️ 동기
❗️안기다리기 ➡️ 비동기

  • 동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신입니다.

    동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후 게시글 불러오기 과정이 실행되기 때문에 문제 없이 작업이 가능합니다.

  • 비동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행합니다.

    이러한 특징 때문에 비동기 실행은 요청들 사이에 서로 기다려 줄 필요가 없을 경우, 여러 가지 요청을 동시에 처리해 줄 때에 사용됩니다.

2. VSCODE에서 비동기/동기 실행

1) 비동기 통신

function 함수이름() {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) // Promise
}

위의 코드는
axios가 먼저 실행되고, data에 객체가 담겨서 밑으로 내려오는 순서입니다!
get은 메서드(조회), 엔드포인트(주소) 이며, 주소는 JSON형태(객체)로 ("{ }")들어옵니다. 위의 경우 Promise가 리턴되고, 의미는 백엔드 쪽에서 데이터를 아직 못받았고, 주긴 할거야! 입니다.

💡 Promise 객체
Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체입니다. 주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 사용하며 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 되는데, 이러한 문제를 해결하기 위한 방법 중 하나입니다.
프로미스에는 세 가지 상태가 있습니다. 여기서 상태란 처리 과정을 의미합니다.

Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

그렇다면, 이것을 기다리지않고 싶다면??(동기 통신 해주기)

2) 동기 통신

  • 비동기를 동기로 바꿔주는 명령어는 async / await 이며, 둘은 짝꿍입니다! 활용방법은 아래 이미지를 참고해보고 두개의 명령어가 어디에 붙었는지 확인해봅시다!

💡 Fragments
React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그입니다.
사용 시 key가 없다면 <></> 처럼 빈 태그로 사용할 수 있지만, 만약 key가 있다면 <Fragment></Fragment> 문법으로 명시적으로 선언해주어야합니다.

💡JSON 관련해서
제이슨으로 받으면 문자열 따옴표 나오는데 , 이걸 없애고 객체로 만들어 주는 기능이 axios에 포함되어있습니다.

아래는 제이슨 형태입니다. "" 가 없어야 객체입니다.

1. 객체를 제이슨(문자열)로 만드는 방법

2. json.parse() 로 다시 객체로 만들기

3. 호이스팅

호이스팅은 변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것입니다. 따라서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.

1) 변수 선언 방식(var)의 호이스팅

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6;  // 초기화

변수 선언 시 초기화를 제외한 선언만 호이스팅합니다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면 사용하는 시점의 변수는 기본 초기화 상태인 undefined입니다.
let과 const로 선언한 변수도 호이스팅이 되긴 하지만, var와는 달리 undefined로 변수를 초기화 하지 않기 때문에 변수 선언 전에 먼저 사용하게되면 오류가 발생합니다.

2) 함수(function)의 호이스팅

catName('클로이')

function catName(name) {
	console.log('제 고양이의 이름은' + name + '입니다')'
}

// '제 고양이의 이름은 클로이입니다'

async function onClickSync(event) {
const result = await axios.get("https://koreanjson.com/posts/1");
console.log(result); //제대로 된 결과 => { title : "..."}
console.log(result.data.title); //정당의 목적이나... 요런식으로
};
//중복 함수선언 문제로 화살표 함수로 바꿔보겠습니다.


 ----- 화살표 함수를 사용한 코드 -----
const onClickSync = async () => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result); //제대로 된 결과 => { title : "..."}
    console.log(result.data.title); //정당의 목적이나... 요런식으로
  };
  //화살표 함수식 입니다!
  //function은 지워주고 async의 위치가 바뀌었어요.

4. apollo-client

1) 설치와 세팅

playground 에서 실습했던 내용의 코드를 vscode에서 적용하기 위해서는 apollo-client라는 도구가 필요합니다.

일반적으로 설치한 도구들을 세팅하는 위치는 _app.js 이고, 설치 후에 다음과 같은 세팅이 필요합니다.

💡 _app.js에 아래와 같이 작성해 줍니다.

import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client'
>
function MyApp({ Component, pageProps }){
	const client = new ApolloClient({
		uri: "http://backend-example.codebootcamp.co.kr/graphql",
		cache: new InMemoryCache()
	})

	return (
		<ApoloProvider client={client}>
			<Component {...pageProps}/>
		</ApolloProvider>
	)
}

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

2) _app.js의 작동 원리

우리는 지난시간에 index.js가 페이지로 인식되어 실행된다고 배웠습니다.

사실은 index.js(페이지)가 실행되는 것이 아닌 index.js가 app.js로 합쳐져서 app.js가 실행되는 것 입니다.

위의 사진에서 보시는 것 처럼 Component 자리에 index.js가 들어오게 되고 index.js가 합쳐진 app.js가 실행된다고 보시면 됩니다.

❗️페이지 컴포넌트도 조립이 가능하다(수업때 진행한 여러 index 합침)❗️

5. apollo-client 로 graphql 뮤테이션 실행

1) mutation을 사용하기 전, playground에서 우리가 사용하려는 mutation이 제대로 작동하는지 확인합니다.

2) 만약, 제대로 작동한다면, graphql mutation을 실행하려는 페이지 상단에서, apollo-client 의 도구들을 불러옵니다.

// graphql 요청에 필요한 도구 불러오기
import { useMutation, gql } from '@apollo/client'

3) javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql`` 사이에 붙여넣어 변수/상수를 만들어 줍니다.

아래의 CREATE_BOARD를 대문자로 만든 것은 관례입니다.

const CREATE_BOARD = gql`
	mutation {
		createBoard(
					writer: "훈이",
					title: "안녕하세요!",
					contents: "내용입니다."
		){
			_id
			number
			message
		}
	}
`

4. 위에서 만든 gql 변수/상수를 활용하여, useMutation을 만들어 줍니다.

나의함수는 mutation을 실행하기 위한 이름 입니다.
따라서 aaa 등 아무 이름을 붙여도 괜찮습니다.
하지만 보통 API 이름과 맞춰서 사용하는게 일반적이므로 API 이름과 통일해서 적어주기!
(예시 코드에서는 편의를 위해 나의함수라는 이름을 사용했습니다.)

// mutation 코드 생성
const [나의함수] = useMutation(CREATE_BOARD)

5. 게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 줍니다.

const [나의함수] = useMutation(CREATE_BOARD);

const onClickSubmit = () => {
    나의함수({
				variables :{
					writer: "훈이",
					title: "안녕하세요!",
					contents: "내용입니다."
				}
		});
}

return <button onClick={onClickSubmit}>버튼</button>;

6. 게시물 정상적으로 등록되는지 확인해봅니다.

위 코드는 항상 같은 게시물이 등록된다는 문제점 이 있습니다.
위 3번의 CREATE_BOARD 부분이 변경해봅시다!

💡 입력받은 값 넣어주기!!!

위 방법은 하드코딩으로, 같은값만 들어갑니다.
우리는 사용자가 입력한대로 생성해줘야 하기때문에 입력값이 바뀌어야 합니다.
❗️input의 onChange를 이용해 입력받은 값을 state에 저장두었던 것을 활용하여,
입력받은 값을 state에 저장하고 variables에 넣어주면 됩니다.
우선 값을 변경할 수 있도록 기존의 graphql, mutation 코드를 수정해줍시다!

#graphql 코드
const CREATE_BOARD = gql`
	mutation createBoard($writer: String, $title: String, $contents:String){
		createBoard(writer: $writer, title: $title, contents: $contents){
            _id
            number
						message
		}
	}
`
// mutation 코드
    const onClickSubmit = () => {
				나의함수({
							variables :{
									writer: "훈이",
									title: "안녕하세요!",
									contents: "내용입니다."
								}
						});
    }

❗️즉, graphql에 입력할 데이터는 최종적으로 등록하기 버튼을 눌렀을 때, 실행되는 onClickSubmit 함수에서 실행되는 mutation 에서 넣어 주어야 합니다.

💡mutation에 보내줘야 할 값을 직접 입력하는 방식(3번, 5번 과정)을 우리는 ‘하드코딩’이라고 부릅니다.

7. 이렇게 해도 계속 똑같은 데이터만 들어간다면?

variables에 들어가는 데이터를 고정된 값이 아닌, state로 변경하면! 최종적인 코드가 완성됩니다!


위 이미지는 그냥 문제 해결순서..
1. 플레이 그라운드 연습해서
2. 잘되면 vscode로 가져오기

6. graphql 뮤테이션에 async / await 적용

rest-API 또는 graphql-API 를 사용해서 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용할 수 있습니다.
여기서! 응답 결과를 변수에 담아서 사용하려면! 통신이 완료될 때까지 기다려야 합니다!
async / await 를 활용하여 기다려 봅시다!

// mutation에 동기식 처리
async function onClickSubmit(){

  const result = await createBoard({
		                  variables: {
                             writer: "훈이",
                             title: "안녕하세요!",
                             contents: "내용입니다."
            }
		});
// 결과물 확인하기
		console.log(result);
}
return (
	<button onClick={handleClickPost}>게시물 등록</button>
)

기본 형식은 이렇게 됩니다. 화살표 함수로 사용 할때는 async 의 위치를 () 앞에 입력해야합니다.

// 비동기 통신
function 함수명() {
	// 서버에 요청하는 코드
}


// 동기 통신
async function 함수명() {
	await // 서버에 요청하는 코드
}

----------------------------------------

// 화살표 함수인 경우
const 함수명 = async () => {
	await // 서버에 요청하는 코드
}

❗️네트워크 문제 해결방법
지금까지 발생했던 오류는 데이터 통신 과정이 없었기 때문에 콘솔창에서 문제를 확인할 수 있었지만, 이제는 데이터 통신 과정이 생기면서 콘솔창에서는 확인할 수 없는 문제들이 발생합니다.
네트워크 문제가 발생하며 이렇게 생기는 네트워크 문제는 개발자도구의 [Network] 세션에서 확인할 수 있습니다.
Request, Response, Preview 헤더를 각각 확인하여 어떤 문제가 발생하였는지 직접 확인하고 수정할 수 있으니 잘 활용하도록 합시다.

7. urn vs url vs uri

여기서 #이란?
하나의 페이지에서의 옵션이다.
naver(주소)#footer 치면 페이지 들어가자마자 footer 부분으로 페이지가 자동 이동하는것을 확인할 수 있다.

(추가) 에러 잡는 방법

  1. HTML,CSS 문제 발생 -> 검사 Elements 탭으로 가기.
    거기서 버튼 이런거로 변경해보고 되면 VScode로 가서 수정하기.(원래하던거랑 순서를 변경하기) 오른쪽에 styles라고 css도 있으니까 색 변경 이런거 해보기
  2. 자바스크립트는 콘솔창으로 확인하기.
  3. 네트워크 문제 발생 -> 이때는 네트워크 탭으로 가기. 그상태에서 다시 눌러보기 그리고 빨강색 클릭해서 보기. states400 어쩌고 이런거 보면 실패. 4어쩌구는 유저실패 편지봉투에 헤더 부분은 보내는이가 요약해서 . 오리진은 나 자신
    페이로드는 내가 뭘 보냈는지가 나온다. 역슬래시는 줄바꿈 () 안하면 가장 밖에있는 문자열이랑 안에 묶여져있는 문자열("")이 충돌될 수 있다.
    그리고 리스폰스를 보면 에러메세지가 담겨져있다. 많이 읽어보고, 해결하기

🤷🏻‍♀️궁금한 것

❗️ 알게된 것

  • 뮤테이션 사용 방법 정리
  • 깃허브 올리는거 정리
  • 과제 중, 인풋값을 문자열이 아닌 숫자로 받아와야 할 때 Number로 묶어주는 것을 볼 수 있다! 마지막 html 부분 input type 은 "text"로 해도 무방하다 한다.

✨ 느낀 점

그래도 어찌어찌 되는것이.. 참으로 신기한 하루하루다.
항상 수업 들으면서
어 이거 나 할 수 있는거 맞나ㅋㅋㅋㅋㅋ속으로 생각하는데
일단 켜서 뭐라도 해보면 답이 나오는 것 같다. 답..이 나오는 건 아니고 이렇게 저렇게 요롷게 조롷게 말이다..ㅎ 그래도 진짜 다행인건 자바스크립트 함수 읽는게 조금씩 되는 것 같다. 예전에는 위에갔다가 밑에갔다가 도대체 뭐라는건지 모르겠어서 힘들었는데 이젠 천천히 보면 읽혀요!!

오늘은 백엔드 개발자분들이 만들어놓은 API를 가져와서 활용? 해보고 다시 전송도 해보는 통신을 과제를 통해 익힌 날이었다. 어렵지만 신기하고 재밌었음ㅎㅎ

오늘 과제 스크린샷!

하드코딩 하지 않고 인풋값에 사용자가 입력한 값을 받아와서 저장해주는 것을 구현했다. 요거 활용해서 포폴에도 적용했다.

숫자를 받아와야 할 때는 Number로 묶어주는 것 기억하기 : )✨

오늘 진행한 자기소개 자룤ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ킹받고 귀여워서 저장ㅎ

profile
윤성해
Slow and steady wins the race.
이전 포스트

[코드캠프]프론트엔드 3일차_TIL_🔥

다음 포스트

[코드캠프]5일차_TIL_라우팅

0개의 댓글