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

윤성해·2023년 3월 15일
0

프론트엔드_TIL

목록 보기
3/27
post-thumbnail

🏷️ 수업 목차

  1. HTTP 통신
  2. HTTP 요청과 응답
  3. API
  4. API와 CRUD
  5. GRAPHQL, playGround 실습
  6. API 요청 연습

✏️ 오늘의 TIL

1. HTTP 통신

HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길입니다.


HTTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있습니다.

1) HTTP 요청(Request)과 응답(Response)

요청

웹브라우저에서 홈페이지(Front-end)가 실행중이라면, 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청합니다.

응답

요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답합니다.

  • 통신요청 / 응답

    헤더와 바디가 존재하며 요청, 응답도 같은 포맷임

  • 헤더는 내용을 요약해줍니다.

  • 요청의 텍스트 안에는 객체가 들어가있습니다.

  • 요청/응답의 보내는이가 바뀌어있는것을 확인할 수 있습니다.

❗️ 응답을 할 때는 상태코드가 붙는데, 상태코드란?
응답오는 메시지가 뭐든간에 상태코드가 200 이라면 성공이라고 치자! 라는 의미이다.

<알아두어야 하는 상태코드들>
2xx 성공
4xx 프론트엔드 오류(유저 오류)
5xx 백엔드 오류(서버오류)
404 는 페이지없음!
상태코드 종류 MDN

2) API

API는 백엔드 분들이 만든 함수(기능)이고, 버튼 기능마다 api가 따라다녀야 한다.
ex) 게시물 저장 API, 프로필 저장 API, 프로필 조회 API...

API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게되는 데이터가 API 함수의 return 데이터 입니다.

3) API 종류(rest-API vs graphql-API)

API의 종류는 크게 rest-API, graphql-API 로 2가지가 있습니다.
rest-API 와 graphql-API 는 몇가지 차이점이 있습니다.

rest-API와 graphql의 차이점

  1. 함수 이름의 차이

    rest-API는 API 이름이 마치 홈페이지 주소처럼 생겼습니다.
    graphql-API는 API 이름이 일반적인 함수와 같습니다.

  2. 응답 결과물의 차이

    rest-API 는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 합니다.
    반면에, graphql-API는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있습니다. 필요한 데이터만 받는다면 용량이 작아지고, 속도가 빨라집니다.

❗️graphql은 페이스북 개발팀에서 만들었으며
1. 필요한 데이터만 골라 받을 수 있음
2. 용량이 작아서 속도 빠름
3. 글로벌 서비스에서 사용(페이스북,
이라는 장점을 가지고 있어서 효율적인 통신이 가능하지만

GRAPHQL이 나온지 얼마 되지 않아서
1. 많은 회사가 아직 rest api를 사용함
2. open-api에서 일반적으로 rest를 제공함
이러한 이유때문에 REST-API를 알아야합니다.

  1. 설치해야 할 프로그램의 차이

4) API 응답 데이터 JSON ( JavaScript Object Notation )

JSON은 자바스크립트의 객체 표기법입니다.

객체도 아닌 객체 표기법이란?
백엔드에서 응답을 받을 때, 객체 자체를 주고 받을 수 없기때문에 객체를 문자열로 묶어서 객체를 담은 문자열을 보내는 것입니다.

즉, 백엔드에서 응답의 결과물로 넘겨주는 것이 JSON이고, JSON은 객체를 담은 문자열 입니다.
받아온 JSON 데이터는 프론트에서 문자열을 벗겨 객체로 사용하게 됩니다!

  • 응답으로 주고받은 JSON은, 응답의 body 부분입니다. header에는 body와 관련된 요약정보가 들어가있습니다.

5) API와 CRUD

API는 크게 4가지 방식으로 구분할 수 있습니다.

  1. 새로운 것을 생성하는 API ⇒ CREATE
  2. 기존의 것을 조회하는 API ⇒ READ
  3. 기존의 것을 수정하는 API ⇒ UPDATE
  4. 기존의 것을 삭제하는 API ⇒ DELETE

사용방법은 아래와 같습니다.

한장에 정리!

6) API 명세서

API 명세서란 API 사용 설명서입니다.
홈페이지를 만들기 전, Back-end 개발자가 만들어 놓은 API 가 몇 개 있고, 어떻게 구성되어있는지 확인하기 위해 필요합니다.

API명세서는 Back-end 개발자에게 받아야 합니다. Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만듭니다.

7) GRAPHQL _ playGround 실습해보기!!

graphQl docs의 필수값
1-1 . ! 는 무조건 보내줘야하는 필수값입니다.
1-2 . [!]는 있다면 무조건 보내줘야하는 조건필수값 입니다.

API 요청연습

  1. Query 요청

    1) 데이터를 조회하기 위해 query문을 사용하게 됩니다.
    2) query문 형식 내 fetchBoards 를 사용하려 합니다.
    3) 인자로 받고있는 page의 값을 입력합니다.
    4) 조회(return) 하려는 정보를 입력합니다.
  1. Mutation 요청

    1) 새로운 data를 만들거니, mutation을 사용하게 됩니다.
    2) mutation문 형식 내 createBoard 를 사용하려 합니다.
    3) 등록 시 사용되는 인자의 값을 입력합니다.
    4) data 등록이 완료 되었을 경우, return 받으려는 정보를 입력합니다.

graphql-API 연습

// graphql-API 명세서로 board API해석

1. Back-end 개발자가 미리 설치해 놓은 playground에 접속합니다.

    * postman - API연습 프로그램
    * swagger - API명세서

2. 데이터베이스에 저장되어있는 게시글 1번을 조회하기 위해 API에 요청해 보세요.

3. 새로운 게시글을 등록해 보세요.

4. 방금 등록한 게시글의 제목을 수정해 보세요.

5. 지금 수정한 게시글을 삭제해 보세요.

6. 삭제한 게시글을 조회해 보세요. 정상적으로 삭제가 되었는지 확인해주세요.

🤷🏻‍♀️ 궁금한 것

  • 리액트에서 hover 사용을 아직 안해봄 오늘해봐야지
  • yarn dev 는 ls 로 확인후 패키지제이슨이 있는 곳에서 실행해야 한다고는 알고있는데, 실행하고 가끔 주소 작성하는 방법을 모르겄다. 간단한 파일은 열 수 있는데 class/02-02/homtework 어쩌고 하면서 길어지면 못찾겠음 (프리보드 포폴 모으는거 못여는중)

❗️알게된 것

  1. (!writer) ➡️ (writer === "") 와 같은 의미

    ! 는 값을 반대로 만들어준다.
    !true 를 콘솔창에 작성해보면 flase가 출력되고 !false 는 true가 출력된다
    이것을 적용해서,
    if (writer === "") 이렇게 작성된 조건문의 결과를 반대의 의미로 해주고싶다면 앞에 !를 넣어주면 된다.
    (writer)는 문자열이 입력된 상태, (!writer)는 입력되지 않은상태이므로 공백상태다.

  2. 거짓을 의미하는 애들 : 0 , ''(빈문자열) , false , null ,undefined ,NaN => 빈문자열 안에 공간 들어가면 참

  3. rest-ful 하다! 라고 말하는것은, 아래의 사진처럼 메서드만 바꿔서 사용할 수 있도록 깔끔하다는 의미이다. 백엔드 분들과 소통할 때 쓰이는 단어라고 함

  4. 플레이그라운드 연습할 때, 객체를 받아오는건지 아닌건지에 따라 중괄호를 써줘야하고 아닐수도 있다.

    query{ //요기는 {} 가 있고요
  fetchProduct(productId: "da4be0d5-505b-4ffe-90a9-997db1d4c496"){
    seller
    name
    price
  }
}
    query{ // 요기는 없답니다!
  fetchBoardsCount
}
  • 깃허브 올릴 때 과제 업로드 하는 주소, 내 잔디심는 주소 따로있는게 아니고 그냥 원래 커밋하던대로 하고 깃허브 안에서 코드캠프 안으로 업로드(?) 하면 된다고함

✨느낀 점

프론트엔드 메인과정 3일차 수업이 끝났다. 블로그 내용도 제대로 못써서 오늘은 대충 김밥먹으면서 쓰고있다. 느리면 밥도 못먹지뭐!🥲
첫날과 어제, 2일동안 3시간 자고 저녁도 못먹었는데 과제 완성도가 조금 낮다!
어제는 리액트로 자바스크립트 작성하는 방법을 배웠는데, 기존에 써주던 방식보다 훨씬 이해가 잘된다.
진짜 처음으로 혼자 자바스크립트 관련 과제를 완성했다..
세상에 이렇게 뿌듯할수가 없다 이말이지ㅜㅜ....... 어제 했던 과제는

1. 버튼 누르면 버튼 안에 텍스트 변경 
2. 버튼 누르면 숫자가 증감하는 카운터 만들기
3. 회원가입 페이지에 조건문 작성, 조건 해당 안되면 에러메세지 띄우기
//를 기존 자바스크립트 방식과, state를 사용한 방식 2가지로 실습했고
4. 리액트 이용해서 게시판 만들기 포트폴리오  
//는 자바스크립트 적용해보는게 더 해보고싶어서 state 사용한 방법으로 벨류값 저장, 
오류메세지 띄우기는 했지만 CSS는 아직 미완성이다! ㅎㅎㅎㅎ

그래도 뿌듯했다.🥰 매우매우매우매우!!!!!!!

어제는 잘 못하던 것을 혼자 성공해보고, 멘토님과 상담을 통해 화이팅(?)을 얻었다. ㅎㅎ
일단 중간점검차.. 생각해본것은

그대로 유지할 것
1. 메인과정 참여 잘 하기(하라는 시간에 하라는거 잘 하기)
2. 블로그 작성 잘하기
3. 안되는거 포기하지말기

추가해볼 것
1. 시간 정해놓고, 못한 것은 일단 잡고있지 말고 끝내기 ➡️ 시간 효율 높아진다고 하셨음
2. 조금 더 일찍 잠들기 (3시 -> 1시)
3. 블로그 작성할 때 전날 과제를 통해 배운점, 해결한점, 궁금한 점 추가해서 작성하기 ➡️ 회고
4. 주말에 회고 / 포폴 완성 못한거 / 블로그 지정주제 글못쓴거 모두하기!!
5. 자바스크립트, 알고리즘 한글로 해석하는 습관 만들기

  • 알고리즘 푸는 시간에 해보고
    * 자바스크립트는 따로 공부하는 시간 만들어보기 ➡️ 이거 언제하지???????

추가적으로 항상 정리정돈 잘하자! 코드도 파일도...주변도(지금도 못함)
아자자자자자ㅏㅈ자 ✨

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

[코드캠프]프론트엔드 2일차_TIL

다음 포스트

[코드캠프]4일차_TIL

0개의 댓글