그나마 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로 변경만 해주면 우리가 사용 할 코드가 짜잔..이라고하기엔 길지만 어쨌든 완성됩니다 ^.^
다음은 Daily_Scrum 시간 었는데, 호이스팅에 대해서 알려주셨다. 호이스팅이란 쉽게말해,
- 변수의 선언과 초기화를 분리하여 선언 부분만 앞으로 끌어오는 것.
정도로 생각하면 될 것같다. 더 깊히 이해하려면 아직 배우지 않은 개념도 알아야 한다고 하니 넘어가도록 하자.
살고싶다요..