[기초] RestAPI 공부전, 홈페이지 만들때 전체적인 맥락 알기

in Development on API


데이터분석 일만 주구장창 하다가, API 공부해야할일이 생겼다.
Rest API를 공부할때 전체적인 맥락과 용어가 너무 어려워서 유튜브를 보고 맛만 보려고 적었다. 맛이 좀 길어지긴 했지만..

홈페이지 만들때 전체적인 맥락 알기

디자인 & 마크업

  • 디자인 : 말 그대로 디자인

  • 마크업 : 이미지파일->브라우저에서 잘 돌아가는 웹문서로 만드는 작업(html, css으로 하고, 동적인 부분은 자바스크립트)

프론트엔드

  • 렌더링 :
    • 서버사이드 렌더링 : 유저 요청으로 웹문서를 서버에서 코드 다 돌려서 페이지를 다 만들어서 보내주는 거면
    • 클라이언트 사이드 렌더링 : 유저 요청으로 서버에서 데이터를 보내주면 유저의 브라우저에서 프로그램 코드가 돌는 거면

  • 브라우저는 자바스크립트 언어를 읽고 실행하는 기능이 있다.

  • 프론트엔드 : 언어는 보통 자바스크립트 쓴다.

  • 프론트엔드 개발
    어떤 유저가 나의 홈페이지에 접속하면 서버에 가서 자바스크립트 파일을 유저의 브라우저에 떨구고 브라우저에서 그 파일을 실행
    이 자바스크립트 코드를 개발하는 것이 프론트엔드 개발

  • 리액트 : 클라이언트 사이드 렌더링을 할때 편하게 하기위한 자바스크립트 라이브러리. 페이스북에서 만들어서 공개

  • 컴포넌트 : index.html만 봐도 통으로 코드가 짜여있지만, 리액트에서는 컴포넌트 단위로 쪼개져있다. 그 쪼갠 단위.

  • 라우팅 : 화면을 쏴주는게 아니고 동적으로 만들기 때문에, 유저가 어떤 url로 이동을 하면 url에 맞는 화면을 만들어서 렌더링하도록 함. (=SPA방식이라고 함, Single Page Application)
    필요한 url들을 만들고 이 url에 맞는 페이지들을 연결하는 것을 라우팅이라고한다.
/                  => 메인 페이지
/tag/태그이름       => 리스트 페이지
/content/컨텐츠id   => 상세 페이지
/admin             => 어드민

그외                => 404

백엔드

  • 모델링 : 어떤 스키마들을 만들지 설계하고 개발
    title
description
image
tags
uri

    처럼 단위로 구성하는 것을 모델링이라고 한다.

  • 큰틀로 보기 : 요청-> 백엔드서버 -> DB -> 백엔드서버 -> 받기
    페이지에서 유저가 어떤 태그(#머시기)를 눌렀다면 -> 프론트엔드 코드에서 statssy.io/tag/머시기로 라우트를 시키고 그에 맞는 페이지를 보여줄 수 있게 렌더링을 한다.

  • API : 요청을 넣으면 거기에 맞는 결과를 응답해주는 인터페이스 (예시에서는 태그를 넣으면 그 태그에 맞는 컨텐츠 리스트를 응답해주는 API)
    • 백엔드 서버는 이 API 주고 받는 역할
    • 이 API를 통해 요청을 하는 쪽은 프론트엔드 개발자나 다른 서버 개발자

  • Rest API : CRUD(Create, Read, Update, Delete) 요청. 그래서 API path(/이런거 쓰는거)와 http method(post,get,patch, delete쓰는거)를 가지고 API설계하는 방식.

  • 벡엔드 서버 만들기
    Framework 선정 : 백엔드개발을 할때 대부분 웹 프레임워크를 써서 개발.
    백엔드는 기술스택이 다양함. 그래서 그 언어에 맞는 웹 프레임웍이 여러개가 있기 떄문에 선택의 폭이 다양

  • 종류
    • ruby on rails
    • 파이썬 django, flask
    • node js : 브라우저 위에서가 아니라 서버에서도 자바스크립트가 돌아갈 수 있게끔 하는 그런 프레임웍. 그 node 기반의 프레임웍이 여러개 있다.(koa.js라는 프레임웍이 있음)
  • 백엔드가 완료되면, 실제 데이터를 가져다 뿌려줄수 있다.(보통 json파일로 보내준다.)

참고사이트:사윤TV


© 2018. by statssy

Powered by statssy