백엔드감자's Today I Learned : 공부습관만들기.

BE_{Potato.}·2023년 2월 4일
0
post-thumbnail

오늘 든 생각인데 나는 여태까지 스스로를 야행성이라고 생각해왔다. 근데 결론만 말하면 밤을 좋아하긴 하는데 밤과 새벽에는 좀 우울한 감성들이 많이 올라오고, 아침과 낮에는 좀 활기찬 마음이 주가 되는 것 같다. 공부시간을 이런 특성을 고려해서 짜봐야겠다.
본론으로 들어가서

 🏄‍♂️ 부트캠프 강의내용

구조분해할당으로 강의가 시작한다.
구조분해할당은 다른 말로 '비구조화할당'이라고도 한다.
객체의 구조분해할당의 최종모습이다.

구조분해할당은 객체의 구조를 분해해서 변수를 만들고 그 변수에 할당을 하는 것이다.

배열의 구조분해할당 모습이다. 배열도 구조분해할당이 가능하다.
구조분해할당을 하는 이유는 하나 변수할당할 때는 괜찮은데 여러개가 생기면 코드 줄이 길어진다.

  • 객체의 구조분해할당에서는 key값이 굉장히 중요하다.
    배열의 구조분해할당에서는 순서가 중요하다. -> 중간에 빼고 싶으면 , , 이렇게 빈 공간이더라도 자리를 만들어줘야 한다.(객체 구조분해할당은 key값 따라서 값을 가져오는 것이라 key이름이 똑같아야 한다.)
  • key와 value가 같을 때, 뒤의 :value를 생략할 수 있다.(이를 shorthand-property라고 부름)
  • (중요)함수 안에 return을 만나면 원래 자기 값이 지워지고 return 뒤의 값이 들어간다. -> 이것을 명심하고 적용하면 코드보기가 한결 쉬워짐.

현재 날짜를 구하는 함수. 파일로 저장해놓고 필요할 때 쓰면 유용하다.

< 구조분해할당 심화버전 >
객체는 복사본을 만들고 복사본의 key를 바꾸면 원본에도 영향을 미친다. 복사가 안된다는 것인데 배열도 마찬가지이다.
그렇다면 why?
문자열,숫자,boolean 값은 원본 그대로가 저장되는데 객체와 배열은 해당주소값이 저장되어 있기 때문. 그래서 복사본의 데이터를 바꿔도 원본의 데이터를 바꾸는 것과 똑같이 동작한다.

-spread parameter: 얕은 복사(... 변수명)
-Rest Parameter: 깊은 복사(JSON.strtingify,JSON.parse.)


객체나 배열을 복사하는 것은 안 되므로 새로운 변수에 {},[] 등을 적어서 새로운 주소를 만들어서 그곳에 내용을 새로 써주는 방법밖에 없다. 위 사진에선 profile.name, age...등은 문자 들이라서 그대로 복사 가능하다.

변수명이 프로파일인 객체를 복사한 프로파일4를 만들고 싶다면 위의 방법처럼 스프레드 연산자를 사용하면 profile.name,profile.age,,,등등 하나하나 안 입력해도 된다.
but, 단점은 객체안의 객체가 또 나올 때에는 복사가 또 안된다. => 얕은복사 라고 부름.
객체를 백틱사용해서 문자열로 바꾸고, 객체로 다시 바꿔보자.
=>객체를 문자로 바꾸는 방법은 JSON.stringify(객체변수명) : 객체가 문자열로 바뀐다. 그리고 JSON.parse(문자열~~)하면 객체가 새로 만들어진다.
같은 내용이더라도 주소가 바뀐다.

객체나 배열의 깊은 복사 방법. 복사는 복사본을 변경했을 때 원본에 영향을 미쳐서는 안된다.


배열 두개를 합치는 모습. 스프레드 연산자를 쓰고 새로운 배열에 넣어서 변수명을 지어주면 된다.


레스트 파라미터의 모습. 만약 child 객체에서 money,와 hobby를 빼고 싶다면 money, hobby, ...rest로 매개변수를 적으면 rest안에 money,hobby가 빠진 객체들이 저장된다.(rest의 이름은 관례인데 원하는 이름으로 적어도 된다.)

  • 우리가 불편한 부분들을 미리 함수로 만들어서 제공해주는 것들을 '라이브러리'라고 한다.

< 통신 >
개발자 입장에서의 '통신'은 프로그램을 설치해서 그 프로그램을 이용헤서 데이터를 주고받는 것을 말한다.

< 두 컴퓨터간의 데이터 전송 >
우리가 사용하는 것은 HTTP(Hyper Text Transfer Protocol).
HTTP에는 규칙이 있다. 프론트엔드 컴퓨터가 요청을 보내면 반드시 백엔드 컴퓨터는 응답을 보내야 한다. 프론트엔드 컴퓨터에서 예를 들어 게시글 관련 정보가 있으면 그것을 객체형태로 만들어서 보내준다. 백엔드에서는 함수가 실행되고 함수의 인자로 프론트엔드가 준 것을 사용한다.그리고 함수로 받은 인자(데이터)를 데이터베이스에 저장한다. 그리고 프론트엔드 컴퓨터에 잘 등록되었다는 응답을 보내준다.(요청이 들어오면 응답을 반드시 보내줘야 한다.)
응답에는 객체형태의 내용과 상태코드를 같이 보내준다.

  • 상태코드: 숫자.400 프론트엔드, 403 금지,404 페이지 찾을수 없음 등등.
    500 백엔드 등등

< API >
프론트엔드의 요청을 처리해줄 각각의 담당자.함수.

API의 종류

- rest: 주소처럼 모양이 생김. 프론트엔드에서 요청할 때 쓰는 도구로 Axios. 필요한 것만 딱 받아올 수 없고 내용 다 받아와야 함.
-> rest API 다 받아와서 네트워크비용 많이들고 속도도 느림.
이름만 다 같고 매서드만 다르게 한 restAPI를 restful이라고 한다.
- graphQL:사용자가 많은 서비스에서 장점이 있음. 모양이 함수처럼 생김. 프론트엔드에서 요청할때 쓰는 도구로 Apollo-client. 딱 필요헌 것들만 받아올 수 있음.

< JSON: javascript object notation >
자바스크립트 객체 표기법. 요청과 응답을 주고받을 때 객체처럼 생긴 형태로 주고 받는데 이것을 JSON 형태라고 부름. 객체가 아니라 텍스트인데 객체처럼 표기했다해서 붙여진 이름.

  • 요청과 응답 안에는 헤더와 바디가 있는데 JSON이 이 바디 안에 들어감. 헤더에는 요약정보가 들어감.

< CRUD >
어떤 기능을 만들 때 최소한 5가지 이상의 API를 만들어야 한다.(READ는 2개라서)
: Create / Read(상세보기와 목록 불러오기 2개가 필요)/ Update / Read


명령어.method라고 부른다.
graphQL 관점에서 Mutation이라 붙여진 이유는 DB가 변경되어서, Query는 변경없이 꺼내기만 해서. => mutation이 조금 더 안정성을 요한다.

프론트엔드 입장에서 요청을 보내는 코드의 예시. axios와 인터넷만 연결되어 있으면 자동으로 요청이 보내진다. 그리고 백엔드에서 받아온 데이터들을 result라는 변수에 넣어준다.

  • 오픈API(공공API)가 거의 rest API로 이루어진 경우가 많다.

  • JSON은 객체만을 얘기하는 것이 아니라 배열도 해당된다.

< Express.js 기초 >
restAPI를 만들 때 사용하는 도구로 Express를 설치한다. Express는 웹 프레임워크. 프레임워크는 도구모음 정도로 생각하면 된다.라이브러리들이 모여있는 도구상자.

Express의 사용법. 최근 방식으로 import express from 'express'를 쓰면 된다.

사용방법 예시.

  • 실무를 가면 Docs가 가장 중요하다. 가장 핵심이다. 개발자들은 개발하거나 Docs 찾아보거나 둘 중 하나가 주가 된다.
  • package.json에는 설치될 파일들 목록이 적혀져 있고, node_modules는 설치된 파일들 목록들이 있다.
  • express의 listen문을 만나는 순간 종료되지 않고 24시간 켜짐. => 포스트맨으로 확인하면 가능하다.

profile
항상 '기본'을 중요시하는 예비 백엔드개발자입니다!

0개의 댓글