코드캠프 4일차 TIL

벌써 코드캠프 본캠프 수강을 한 지 4일차라니 믿기지가 않는다!

회사에 다닐 때, 오랫동안 진득하게 공부만 하는 것이 버킷리스트였는데
요즈음 코딩 덕분에 버킷 하나를 이룬 것 같아서 기분이 좋다:)

어제는 Rest API와 Graphql API를 예제 사이트(포스트맨, 플레이그라운드)로 학습했는데
학습을 하고 값을 보면서도 감이 확 오지 않았었다.
그런데 오늘 vscode로 직접 백엔드에 push해볼 수 있었는데
이제서야 머릿속으로 작동원리가 싸악 그려지면서 이게 뭔 소리였는지 느껴지는 것이었다.

역시 개념만 백날 익히는 것보다 심화학습 한번 하는게 더 효과적인 것 같다고 다시한번 느끼게 되는 요즈음.

**

Async, Await

통신이 완료될 때까지 기다리는 함수.
응답결과를 변수에 담아서 사용하려면 통신이 완료될 때까지 기다려야 한다.

1. import axios reference code

import axios from 'axios'
import {useState} from 'react'
export default function RestGetPage(){
    const [aaa, setAaa ] = useState("안녕하세요")


    async function zzz(){
        const result = await axios.get('http://koreanjson.com/posts/1')
        console.log(result)
        console.log(result.data.title)

        setAaa(result.data.title)
    }

    return (
        <> 
        <div>{aaa}</div>        
        <button onClick={zzz}>REST-API 요청하기!!</button>
        </>
    )
> }

2. import GRAPHQL reference code

import { useMutation, gql } from '@apollo/client'
import { useState } from 'react'
const CREATE_BOARD = gql`
    mutation createBoard($writer:String, $title:String, $contents:String){
        createBoard(writer:$writer, title:$title, contents:$contents) {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationBoard2Page(){
    const [createBoard] = useMutation(CREATE_BOARD)
    const [aaa,setAaa] = useState("안녕하세요")
    async function zzz() {
        const result = await createBoard({
            variables: {writer:"영희“, title:“제목이요“, contents:“내용이요"}
        })
        console.log(result)
        console.log(result.data.createBoard.message)
        setAaa(result.data.createBoard.message)
    }
    return (
        <>
        <div>{aaa}</div>
        <button onClick={zzz}>GRAPHQL-API 요청하기</button>
        </>
  )
}

---

오늘 아침에 알고리즘 문제풀이를 하는데 난이도가 확 뛰는 것을 느꼈다.
문제를 어느정도 이해하고 중간이라도 풀어내야 복습할 때 완전히 이해가 될텐데,
이거는 뭐 아예 손도 못대는 정도니 이러지도 저러지도 못하고 정말 스트레스였다.
앞으로도 계속 알고리즘 문제는 풀어야할텐데, 계속 이런 자괴감을 느낄 수는 없었다.

어디서부터 잘못된 것이며, 어디부터 어떻게 공부해야
가장 빠르고 효율적으로 진도를 따라갈지 궁금하여 멘토님께 여쭤보니 자바스크립트의 대표적인 문법들의 개념을 우선적으로 익히고
이후에는 보지 않고도 쓸 줄 알아야 한다고 하시며 주말에 보충 공부를 할 것을 권하셨다.
아래는 멘토님께서 슬랙에 보내준 공부해야 할 내용들!
이 친절과 열정에 감동하여 반드시 이 문제를 꼭 해결해 나갈 것이라 다짐했다!



**

https://codepen.io/pen/
콘솔 연습할 수 있는 페이지 주소입니다!
주말 동안에는

조건문
if( 조건식이 true 일때만 실행 ) {
}


반복문
for( 최초식, 조건식, 증감식 ) {
}


배열
[] 인덱스에 대한 개념
[1, 2, 3][2]


객체
{} key와 value 개념
{‘name’ : ‘철수’}
{}.name // key 로 접근하면 value 를 뽑을 수 있다

> 기본 개념을 공부해주시면 될 것 같습니다!