hanol hanol

🥕 RESTful API란? REpresentational State Transfer의 약자로 소프트웨어 프로그램 아키텍처의 한 형식 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스로 RSET는 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다 => HTTP Method(POST, GET, PUT, DELETE, PATCH 등)을 통해서 함 💡 HTTP Method CRUD Operation이란? 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말 Create : 데이터 생성(POST) Read : 데이터 조회(GET) Update :..

인증과 인가 => 시스템의 자원을 적절하고 유효한 사용자에게 전달하고 공개하는 방법 🌙 인증 (Authentication) 클라이언트가 자기자신이라고 주장하고 있는 사용자가 맞는지 검증하는 과정 너 누군지 인증해봐! ex) 로그인 🌙 인가 (Authorization) 인증 작업 이후에 행해지는 작업, 인증된 사용자의 자원요청에 대한 권한 확인 절차 ex) 내가 작성한 글 수정, 좋아요, 댓글 작성 ( 내가 타인이 작성한 글을 수정하거나 제거할 수 없음, 타인의 리소스에 대해서는 인가되어 있지 않기 때문 ) 🧿 HTTP의 비상태성(Stateless) HTTP는 비상태성(Stateless)이라는 특성을 가지기 때문에 각 통신의 상태 저장 안됨 ( = 서버는 클라이언트의 상태를 저장하지 않음, 바로 직전에 발..

🥕 왜 api들을 분리해야하는가? 개발하다보면 api가 점점 server.js에 늘어나게 되는데 각각하는 기능들도 다르고, 한번에 몰아넣으면 수정할 때도 찾기 힘들다! 그래서 우리는 routes라는 폴더를 만들어서 관련 api들을 분리해서 관리해주도록 하자! server.js app.get('/shop/shirts', (req,res)=>{ res.send('셔츠파는페이지') }) app.get('/shop/dress', (req,res)=>{ res.send('드레스파는 페이지') }) 쇼핑몰의 페이지에 관련된 api들을 shop.js파일에 담아줄것이다. (server.js와 같은위치로 폴더를 만들어줌) shop.js const router = require('express').Router(); rou..

요청을 보내기전 axios에 대해 간략하게 짚고 넘어가자 🥕 axios란? axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리임 axios 설치 npm install --s axios 아래의 경로에 다음과 같은 axios 파일을 만들어준다 /src/axios.js import axios from 'axios'; const instance = axios.create({ baseURL: "http://localhost:3001" }); export default instance; => 사용자 정의 인스턴스 기본 설정 🤔 axios 파일을 왜 만들어서 사용할까? ⇒ axios 인스턴스를 만들 때 구성 기본 값 설정해주어 통신할 때 필요한 ba..

CRUD Create Read Update Delete = 유저 인터페이스가 가져야할 기능을 가리키는 용어 CRUD개념이 기획에서 중요한가? 서비스 기획시 기초 필수 개념으로 꼭 이를 염두에 두고 기획 및 디자인을 해야함, 우리가 서비스를 운영하는 데 있어 필수적인 최소기능임 => 사용자 경험과 데이터 보호를 위해서 시스템 작동원리를 파악할 수 있기에 중요! 이름 기능 SQL문 Method(호출방식) Create 생성 Insert Post Read 읽기 Select Get Update 갱신 Update Put Delete 삭제 Delete Delete

1. HTML작성하기( form태그 사용 ) 2. 태그 기능개발 => 폼전송시 POST요청함 서버 요청방식(method형식) GET POST (글쓰기) PUT DELETE body-parser라는 라이브러리 설치 설치 후 사용할 때는 require 해주어야 함~ URL-encoded(주소 형식으로 데이터를 보내는 방식) 방식으로 보내겠다 : true = 폼 전송은 URL-encoded 방식을 주로 사용함 JSON()은 JSON 형식의 데이터 전달 방식 body-parser (보통 form 데이터나 ajax 요청의 데이터를 처리함) = 미들웨이 -jQuery와 같이 사용 - 단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, - 페이지 전체를 새로고침하지 않..

API (Application Programing Interface) 비유를 하자면! 우리는 맛집을 갔다 내가 맛있는 랍스타를 고르면, 직원이 주문을 받아 요리사에게 요청을 한다 그러면 요리사는 랍스타를 요리해서 직원에게 주고, 나는 직원이 가져다준 랍스타를 먹을 수있게된다. 나 (=클라이언트) 직원 (=API ) 요리사 (=리소스(서버)) 즉, API는 프로그램이 요청할 수 있게 명령목록을 정리하고 명령을 받으면 응용프로그램과 상호작용하여 요청된 명령 값을 전달한다. 쉽게말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있다!

코딩을 배우면서 느끼는 거지만 뭐든 시작은 세팅부터 하는 것 같다... 젤 귀찮은 작업이지만 한번 잘 설치해주면 우리가 무료로 쓸수 있으니까 좋은 마음으로 설치를 시작해보자..! 기본 세팅부터 하자!! 1 . express 라이브러리 설치하기 (라이브러리 : 코드를 쉽게 짜기 위해 빌려쓰는 코드 모음집! => 도서관에서 책을 빌려서 쓰듯이) ⇒ 해당 폴더에서 터미널 열기 상단 바 terminal => new terminal ⇒ 원하는 폴더로 이동 cd ( change directory ) 원하는 위치 ex) cd 01.Basic cd .. (상위폴더로 이동) 2. npm init -y (초기화하고 라이브러리를 설치하겠다!) (npm init만 쓰면 일일이 엔터키를 눌러서 넘어가야하지만 -y를 쓰게되면 한..