오늘 첫 시간에는 이전에 만든 게시글 작성코드리뷰를 해주셨다.내 코드와 비교해가면서 듣다보니 새로운 것을 알게되었다.
작성자를 name이라고 하자. 만약 name이 비어있지 않다면 그 값을, 비어있다면 오류메시지를 출력할때
조건문을 사용하여
if(name !== ""){
setErr("이름을 입력해주세요")
}
이렇게 적었었는데, 리뷰해주신 코드에는
if(!name){
seErr("이름을 입력해주세요")
}
이런식으로 적혀있었다.
그래서 name이 아닐경우에 에러?라고 생각을 했는데 원래 if문은 그 조건이 true일 경우에 실행하는 것이고 false일 경우에는 아래로 내려게 되는데, 이 과정에서 특정 조건식을 제외하고 false로 되는 애들이 있었다.
비어있는 문지열인 ''와"",
숫자 0,
false,
undifined,
null,
NaN
이 값들이 false로 정해져있다.
그래서 만약
if(""){
console.log("안녕하세요")
}
라고하면 false가 나오므로 if의 로직은 실행되지 않고 아래로 넘어간다.
그렇다면 !name은?
일단 여기서 !은 반대연산자 라고도 할 수 있다.그러니까 만약 name에 빈문자열이 들어가면 false인데 !로 인해 true 로 바뀌어 if의 로직이 실행된다.
반대로 name의 값이 있을경우 false의 경우에 해당되지 않기에 true값인데 앞에 반대연산자가 들어가 false로 변환되어 if로직이 실행되지 않는 것이다.
이렇게 하나를 알아가며 코드 리뷰?는 끝이 났고 나도 수정을 하고싶은 부분들이 생겨나 수정을 해보았다.기존의 name !== ""을 !name식으로 바꾸며 복습을 했고 알림도뜨게 하고 싶었으나 알림은 이상하게 작동이 안되었다.
그리고 두번째 시간에는
개발자의 통신에 대해 배워보았다.
데이터 전송 방법을 알아보고 실습도 해보았다
두 컴퓨터간에 파일을 주고받을 때에는 FTP라는것을,메일을 주고받을경우에는 SMTP라는 것을,텍스트나 하이퍼텍스트인 html을 주고받을경우 HTTP라는 것을 이용하는데 이중 벡엔드 컴퓨터로 보내는 작업은 HTTP라는 것을 이용하는 것이다.
각각 데이터를 주고받는 길이라고 알고있으면 쉬운데,
프론트엔드에서 화면에 보여줄 데이터를 전송하여 백엔드 컴퓨터에 보내면 검증을 거쳐서 이상없으면 데이터베이스가 저장된 컴퓨터에서 데이터를 가져와 꺼내서 화면에 보여주고 계속해서 반복되는 형식으로 백엔드와 프론트 엔드간의 소통이 이어진다.
백엔드에서 데이터를 저징히는 함수를
API라고 한다.
API를 만드는 방법은 두가지가 있다 하나는 REST-API,
다른 하나는 GRAPHQL-API라고 한다.
수업은 GRAPHQL에 맞춰서 진행되나 일반적으로는 REST를 사용하기에 둘다 알아야 할 필요는 있다.
둘의 차이로는 일단 프론트 엔드에서 설치해야하는 프로그램도 다르지만, REST는 데이터를 전부 다 받아 올 수밖에 없지만, GRAPHQL은 필요한 것만 뽑아서 받아올 수 있다.
여기서 전부 다 란?
:백엔드에서는 데이터를 하나하나 담아주게되는데 이 하나하나들을 말한다.
따라서 규모가 큰 데이터를 다루는 SNS등은 GRAPHQL을 사용하여 받아오고 아닐경우나 오픈으로 제공되는 경우에(OPEN-API 또는 PUBLIC-API라고한다.)는 REST를 사용한다. 일반적인 방법이 REST라는 것이다.
이때 응답을 받아올 때 JSON(자바스크립트 객체 표기법) 형식으로 받아오는데,이것은 객체형태로 주고 받는다는 의미이다.
왜?
HTTP는 객체가 아니라 텍스트로 주고받아야 하는데, 다라서 객체는 아니고 문자열을 객체처럼 꾸며 가져와
객체형태라고 하는 것이다."[]"이런식으로 되어있다.
프론트엔드에서 보낸 요청(req)과, 백엔드에서 보내는 응답(res)에는 각각 헤더와 바디부분이 존재하는데, JSON데이터로 요청을 보내면 헤더에는 요약정보, 보내는 이 , 받는 이, 보내는 형태가 들어가고(이때 보내는 형태가 JSON이 아니라 html이면 바디부분에는 꺽쇠태그가 들어가게된다.
)
바디에는 상세내역이 들어간다.
그다음은 CRUD에 대해 알아보았다(Create Read Update Delete)를 일컷는 말인데, 등록하고, 목록을 조회하고, 상세조회하고, 수정하고 삭제함을 일컷는데, 각각의 API가 필요하고, 그래서 최소 5개의 API가 필요하다.
이 CRUD를 만드는 방법에서 REST은 POST,PUT,DELETE,GET으로 생성하고 수정하고 삭제하고 조회하는 반면,
GRAPHQL에서는 MUTATION과 QUERY로 MUTATION로는 생성,수정,삭제를 그리고 QUERY로 조회를 진행한다. 훨씬 적은 메서드를 사용하여 더 쉽게 느껴졌다.
실습으로는 open-API인 koreanjson.com과 API연습도구인 postman,설명서(=API-docs)인 스웨거를 이용해 REST-API를, playground를 이용해 GRAPHQL-API를실시해보았다.
playground는 실습도구와 설명서인 API-docs라는것이 함께 있어 훨씬 보기 편하다.
koreanjson에 들어가면 endpoint라는 이름으로 열거 되었는것이 있는데, 주소의 맨 뒷부분에 붙어 엔드포인트라고 하는 것 같다.:뒤에 적힌것은 바뀔수 있는 값이 라는 뜻이고 여기서 end-point이름은 벡엔드개발자가 임의로 바꿀 수 있기에 구분하기위해
이름을 통일시키고 메서드로 구분한것이 restful로
만약
restful하다 라는 말을 듣게되면
엔드포인트 이름을 통일시켰다
restful하지않다 라는 말은
엔드포인트의 이름을 바꾸어주었다(다 다르다)
라는 의미가 된다.
필요한 프로그램만 설치하여 원하는 조건만 맞춰주면 자동으로 등록,조회 등이 가능해진다.
다음시간에는 vscode로 받아오는 방법에 대해 수업한다.
