그나마 5,6시간 정도의 숙면을 취하고 '공부하러 나간다' 보다는 '나가는 김에 공부좀 해야지' 라고 자기최면을 걸며 조금이라도 덜 피곤함을 느끼(려고 자기최면을 걸)며 4일차 시작 ^^......

비동기실행

  • 비동기 실행이란 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정 등 전포스트에서 언급한 'CRUD' 같은 것들)이 저장될 때 까지 기다리지 않고 다른 작업을 진행 함.

이러한 비동기 실행의 특징 때문에, 요청들 사이에 서로 기다릴 필요가 없을 때 (예를 들면 홈페이지 메인의 배너, 검색창 뉴스창 등)사용한다. 하지만, 프론트엔드 측에서 등록한 데이터를 바로 불러오는 경우 (게시물 등록 후 미리보기 창)에 비동기 실행이 진행 될 경우, 빈창이 뜰 수도있다.이러한 경우 동기실행 방식이 필요하다.

동기실행

  • 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신, 앞서 언급한 게시물 미리보기의 경우 동기실행을 진행 해야만 바로 불러오기가 가능하다.

역시나 개인적인 견해로 쉽게 풀어서 예시를 들어보자면.....

차례대로 하느냐 한번에 하느냐..정도로 생각하면 될 것같다 ..순서가 의미가 있느냐 없느냐.......

그냥 사진을 보도록 하자..

....다음 내용은 graphql을 이용하기 위한 apollo-client 셋팅에 대한 설명이었다.

현재 우리가 사용하는 도구들 (emotion 같은 것들) 을 세팅하는 위치는 일반적으로 app.js 이다. 그러니 우리는 Class 풀더에서 다음과 같이 기입했다.

세팅이 완료 되었다. 이제 본격적으로 graphql에 대해 실습할 차례였다.

저번 시간에 한 mutation기능을 자바스크립트 페이지에서 구현할 예정인데.. 이게 생각보다 좀 더 복잡했다..

1, 일단 CREATE_BOARD라는 변수에 gql 의 Mutation 기능을 할당(하는 것처럼 보인다)한다.

// graphql 코드 생성
const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			message
		}
	}
`

2, 방금 만든 gql 변수로 useMutaion을 만든다.

//mutation 코드 생성
const [CreateBoard] = useMutation(CREATE_BOARD)

과정을 시작한 이후에 그래도 귀가 후 복습을 어느정도 하면 이해가 되는 것들이 대부분이었는데.. 이 부분은 무슨뜻이지 모르겠다.. 그냥외우자..

3, 등록버튼을 클릭했을 때 실해되는 함수에서 mutation코드를 실행

function handleClickPost(){
	createBoard({
			variables: {
					aaa: "훈이",
					bbb: "1234",
					ccc: "안녕하세요 훈이에요",
					ddd: "반갑습니다"
			}
	})
	return (
		<button onClick={handleClickPost}>게시물 등록</button>
	)
}

4, 백엔드 API페이지에서 확인.

이렇게 하면 백엔드에 등록이 되는 것을 확인할 수 있지만.. 이런식으로 하드코딩을 하게되면 매번 스크립트를 작성해야 한다는 단점이 있으므로..위의 코드는 변수 값이 실시간으로 바뀌는 것에 대해 반응 되게끔 바뀌어야한다. 이런식으로 말이다.

const Mutation_Create = gql`
	mutation Mutation_Create($key_1: 프로퍼티 타입, $key_2: 프로퍼티 타입, $key_3: 프로퍼티 타입, $key_4: 프로퍼티 타입) {
    writer(사용하려는 함수의 입력 key) : $key_1
    password(사용하려는 함수의 입력 key): $key_2
    title(사용하려는 함수의 입력 key): $key_3
    contents(사용하려는 함수의 입력 key): $key_4
    } {
    //rturn 받는 key
    message
`

이제 들어가는 데이터를 고정 된 값이 아닌 state로 변경만 해주면 우리가 사용 할 코드가 짜잔..이라고하기엔 길지만 어쨌든 완성됩니다 ^.^

Hoisting, 호이스팅

다음은 Daily_Scrum 시간 었는데, 호이스팅에 대해서 알려주셨다. 호이스팅이란 쉽게말해,

  • 변수의 선언과 초기화를 분리하여 선언 부분만 앞으로 끌어오는 것.

정도로 생각하면 될 것같다. 더 깊히 이해하려면 아직 배우지 않은 개념도 알아야 한다고 하니 넘어가도록 하자.

Day.04 후기

살고싶다요..

profile
생각은 나중에..

0개의 댓글