웹 개발을 하다 보면, 이 에러를 적어도 한 번 쯤은 겪게 되고, 그리고 높은 확률로 이 에러 때문에 골머리를 앓는 경험을 하게 하는 그것. 바로 CORS Error CORS가 대체 뭐길래 이런 에러를 띄우는 건지 알아보기 전에, CORS가 필요하게 된 배경인 SOP에 대해서 먼저 알아보도록 합시다. SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻합니다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책인데요. 여기서 말하는 ‘출처(Origin)’는 다음과 같습니다. 출처는 프로토콜, 호스트, 포트의 조합으로 되어있습니다. 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 예시를 들어 이해해봅시다. https://www.codestates.com vs h..

구현화면 핵심 코드 FlightDataApi.js import flightList from '../resource/flightList'; import fetch from 'node-fetch'; if (typeof window !== 'undefined') { //flightList 데이터를 로컬스토리지에 flight라는 키를 지정하고 그 안에 넣어준다. localStorage.setItem('flight', JSON.stringify(flightList)); } export const getFlight = async(filterBy = {departure: '',destination: ''}) => { // 현재 condition값은 {departure: '입력값',destination: '입력값'} ..

State 끌어올리기 실습 import React, { useState } from "react"; import "./styles.css"; const currentUser = "김코딩"; function Twittler() { const [tweets, setTweets] = useState([ { uuid: 1, writer: "김코딩", date: "2020-10-10", content: "안녕 리액트" }, { uuid: 2, writer: "박해커", date: "2020-10-12", content: "좋아 코드스테이츠!" } ]); //**새로운 작성된 트윗인 newtweet을 받아와서 트윗리스트에 넣어준다. */ const addNewTweet = (newTweet) => { setTwee..

결과물 장난으로 누군가가 '생일축하글 쓰는 페이지 만들면 축하해주러 갈게요~ ' 라고 말한게 자꾸 머리에 멤돌았다. 내가 나의 생일에, 나의 생일만을 위한 게시판을 만들고 그 게시판에 함께 부트캠프 커리큘럼을 진행하고있는 동기들에게 축하를 받는다면 신선한경험이자 리프레쉬 할 기회라고 생각해서 만들고 말았다. UI/UX , 디자인 까지 고려하기에는 시간이 촉박했가에 (2월1일 생일인데 1월31일에 얘기가 나옴.) 기본적인 CRUD와 야매 로그인 기능만 넣고 배포해버려따. 한 서너명에게 축하받을거라고 생각했는데, 생각보다 많은 사람들이 오셔서 축하해주시고 동기부여를 받았다고 해주시니 기분이 너무 좋았다. 이전 생일들은 항상 친구들과 술자리를 가지거나 밤새 파티를 했다. 물론 그런 시간도 즐거운 추억이였지만,..

REST API 웹에서 사용되는 모든 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 API가 클라이언트가 서버에게 요청하는 방법을 알려주는 메뉴판이라면 REST API는 알아보기 쉽고 가독성이좋은 메뉴판이라고 생각한다. 리챠드손 슨배님의 성숙도 모델(RMM) RMM은 3단계까지 있지만 현실적으로 2단계까지만 적용해도 좋은 API디자인이라고 볼 수 있고, 이런경우를 HTTP API라고 부른다. REST 성숙도 모델 - 0단계 단순히 HTTP 프로토콜을 사용하는 것이 REST API의 출발점이자 0단계 성숙도를 만족한것이다. REST 성숙도 모델 - 1단계 REST 성숙도 모델에 따르면, 1단계에서는 개별 리소스(Resource)와의 통신..

프로토콜 프로토콜은 통신규약이다. 서버와 클라이언트가 소통을 하기위해 정해놓은 규칙같은것 대표적으로 서버와 클라이언트는 HTTP라는 프로토콜을 이용하여 대화한다.(보안을 강화한 HTTPS도 있다. 은행이나 결제서비스가 있는 사이트는 HTTPS가 쓰인다.) OSI 모델 계층 응용계층(세션,표현) : DHCP,DNS,HTTP,SMTP,POP3,IMAP,SNMP,FTP,SMTP,SSH,RDP,WebSocket 전송계층 : TCP, UDP 네트워크 계층 : IP 데이터 계층 : 이더넷 물리계층 : RS-232,RS-449 이러한 여러 프로토콜들이 모여서 조합하면 하나의 컴퓨터 네트워크 디자인인 '네트워크 아키텍쳐'가 된다. API API는 Application Programming Interface의 약자이며,..