Web
HTTP 메서드와 활용
📒 좋은 URI 설계는 뭘까? 📌 리소스 식별 가장 중요한 것은 리소스 식별. 회원 정보 관리 API를 만들어보자. 필요한 기능이 뭐가 있더라... 회원 목록 조회, 회원 조회, 회원 등록, 회원 수정, 회원 삭제? 📝리소스란? "회원"이라는 개념 자체가 바로 리소스! 📝리소스를 어떻게 식별하나? 회원을 등록, 수정, 삭제하는 것은 생각하지 말고 회원 자체만 리소스로 식별해서 회원 리소스를 URI에 매핑 📌리소스와 행위 분리 * URI는 리소스만 식별! * 리소스와 해당 리소스를 대상으로 하는 행위를 분리해야 함. 예시로 들었던 회원 정보 관리 API의 경우 리소스는 회원이고 행위는 조회, 등록, 삭제, 변경이다. 즉 리소스는 명사, 행위는 동사 그럼 행위(메서드)는 어떻게 구분하지? 그래서 등장하는 것..
HTTP 기본 개념
📒 Intro 📌HTTP란? * HyperText Transfer Protocol * Image, 음성, 영상, JSON, XML (API) 등 거의 모든 형태의 데이터 전송 가능. * 서버간에 데이터를 주고 받을때도 대부분 HTTP 사용. 📌HTTP의 역사 여러가지 버전 있지만... HTTP/1.1 (1997) 버전만 알면 됨. 가장 많이 사용하고 가장 중요한 버전. 📌 기반 프로토콜 * TCP: HTTP/1.1, HTTP/2 * UDP: HTTP/3 📌 특징 1. 클라이언트 서버 구조 2. 무상태 프로토콜(Stateless), 비연결성 3. HTTP 메세지를 사용해 통신 -> 단순하고 확장 가능 📒 클라이언트 서버 구조 📌클라이언트와 서버가 분리되어 독립적으로 존재한다는 것이 포인트! * 복잡한 비즈..
URI와 웹 브라우저 요청 흐름
📒 URI (Resource Identifier) 말그대로 자원을 식별하는 구별자. Uniform: 리소스를 식별하는 통일된 방식. Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier: 다른 항목과 구분하는데 필요한 정보 📌 URL (Resource Locator) * 리소스의 주소.로서 위치를 지정. * 위치는 변할 수 있지만 이름은 변하지 않음. * 구조: scheme://[userinfo@]host[:post][/path][?query][#fragment] - scheme: 주로 프로토콜 사용하고, (https) 포트는 생략 가능. - userinfo: URL에 사용자정보를 포함해서 인증해야 할 때 쓰는데 거의 사용하지 않음. -port: 일반적으로 생략. h..
HTTP의 기초, 인터넷 네트워크
📒 Intro 두개의 컴퓨터는 서로 어떻게 통신하느냐? 바로바로 인터넷! 매우매우 복잡한 인터넷 망을 통해 클라이언트와 서버가 통신한다. (물론 물리적으로 케이블가져가다 연결하면 그것도 통신은 통신이지만 이세상에 컴퓨터가 두세개가 있는게 아니잖아) 📒IP (Internet Protocol) 그렇게 복잡한 인터넷 망인데 아무나 아무렇게 통신할 수 있을까? 없지. 다수의 집합체(?)가 있는 곳이라면 어디든 그랬듯이 "규칙"이라는게 필요하다. 그 중에서도 인터넷 통신에 필요한 규칙이 바로 인터넷 프로토콜. IP다. 대략 127.0.0.1같이 숫자랑 쩜으로 구성된.(?) 이 인터넷 프로토콜은 패킷(Packet)이라는 통신 단위로, 지정한 IP주소(IP Address)에 데이터를 전달한다. 그럼 그 패킷이라는건 ..
[React] Components와 Props
📒Component Rendering function Welcome(props) { return Hello, {props.name}; } const element = ; ReactDOM.render( element, document.getElementById('root') ); 엘리먼트로 ReactDOM.render() 호출. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트 호출. Welcome 컴포넌트는 결과적으로 Hello, Sara 엘리먼트 반환. React DOM은 Hello, Sara 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트. **props는 읽기 전용. 컴포넌트의 자체 props를 수정할 수 없음.
[#4] 좋아요 버튼 만들기
📒구현순서 Model 만들기 Button UI 만들기 얼마나 많은 사람이 이 영화를 Favorite list에 넣었는지 정보 얻기 내가 이 영화를 이미 Favorite list에 넣었는지,아닌지 정보 얻기 (페이지 새로고침 하더라도 정보가 유지되어야 함.) 데이터를 화면에 보여주기 📒Model userFrom / movieId / movieTitle / movieImage / MovieRunTime const mongoose = require('mongoose'); const Schema = mongoose.Schema; const favoriteSchema = mongoose.Schema({ userFrom: { //누가 이 영화를 좋아했는가? type: Schema.Types.ObjectId, //O..