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

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..

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의 약자이며,..

onChange function NameForm() { const [name, setName] = useState(""); // const [초기값, set함수] = 초기값은" " const handleChange = (e) => { // 이벤트가 발생하면 setName(e.target.value); // set함수를 이용해서 이벤트타겟에 입력된 value값으로 초기값을 업데이트한다. } return ( // input 창에 이름을 입력하면 h1크기로 이름이 출력되는 컴포넌트 {name} ) }; import React, { useState } from "react"; import "./styles.css"; function SelectExample() { const [choice, setChoice] ..

Props props는 외부로 부터 전달받은 값. 상위 컴포넌트로부터 넘겨받는다. props는 immutable한 데이터이며, 부모에서 자식으로 혹은 구성 요소 자체에서 데이터를 전달하는 데 사용된다. 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있다. 수ㅏㅇ위 컴포넌트에서 넘ㅇ겨받은 prop State state는 내부에서 변화하는 값 컴포넌트 내에서만 지지고 볶고 변화한다. 변수가 업데이트된다? 신경쓰지않는다. state가 업데이트 된다? UI렌더링 한다. UI렌더링 하기 좋은 state와 잠시 값을 가지고있기 좋은 변수의 역할을 분리하기 시작했다. useState()는 길이 2 짜리 Array를 반환한다. 초기값을 담고있는 State.값과 이 State를 업데이트해주는 set함수를 반..