리액트 공부와 함께 하는 일상/4주차7 [TIL] 4주차 - 3. CORS (Cross-Origin Resource Sharing) CORS (Cross-Origin Resource Sharing) 오픈 api를 사용하다 보면 cors 에러가 발생하여 리소스 값들을 가져 오지 못하는 경우가 있습니다. cors에서 origin은 주소 값을 뜻하며 사이트 주소(네이버 주소 같은 것.)가 됩니다. 어디서 출발한지를 나타내며 요청 출발지에 해당됩니다. 예를 들어, 네이버에서 카카오로 요청을 하게 됩니다. 그러면 네이버라는 오리진에서 카카오로 요청을 하게 되는 것입니다. 이 때 오리진이 크로스 됩니다. 네이버에서 네이버로 요청을 해야지 왜 카카오로 요청하느냐 는 식입니다. api 요청 시 기본적으로 크로스된 상태에서 리소스를 허용할 수 없습니다. 백엔드에서 허용해야 리소스 값을 받을 수 있습니다. 이 때 우회적인 방법으로 api 데이터 값을 .. 2022. 2. 7. [TIL] 4주차 - 2. 웹 서비스 구조 / SQL / NoSQL 웹 서비스 구조 웹서비스는 Front-end 프로그램, Back-end 프로그램 그리고 DataBase로 이루어져있습니다. 그리고 이 구성으로 제작된 웹 서비스를 user는 Browser를 통해 이용하게 됩니다. 🔨 접속자가 적다면 한대에 이 세가지 프로그램을 다 설치해서 운영하는 것도 충분히 가능합니다. 접속자가 많아질 경우 각 접속자에 대한 메모리 할당량이 버거워질 수가 있어서 현대에 와서는 한 컴퓨터 당 하나의 프로그램을 설치하고 있습니다. 프런트엔드 서버 컴퓨터 백엔드 서버 컴퓨터 데이터 베이스 서버 이런 식으로 말입니다. 예를 들면 백엔드는 node.js 프런트는 next 데이터베이스는 postgres가 설치되어 있는 식입니다. 이 때, 서버라고 한다면 프로그램이 깔려서 24시간 동작하고 있는 .. 2022. 2. 7. [TIL] 4주차 - 1. 컴포넌트 생명주기 (feat. Class Component) Class class componenet 어떤식으로 구성되어 있을까요? 컴포넌트 사이클에 대해 알아보겠습니다. 자바스크립트는 객체지향 언어 입니다. 점 .을 하면 그 객체가 가지고 있는 함수, 변수를 사용할 수 있습니다. 위 사진에서 date는 Date() 객체에 대한 주솟값을 받아 .점을 통해 해당 객체의 함수를 사용하고 있습니다. 컴포넌트 역시 클래스로 만들어줄 수 있습니다. 클래스형 컴포넌트는 use ~ 이름을 가진 hooks는 사용할 수 없고 html을 표현하기 위한 render()함수가 필요합니다. class는 자바스크립트 ES6 에 나온 문법이고 이전에는 prototype 문법을 사용했습니다. 컴포넌트 선언 방식은 함수형 컴포넌트 와 클래스형 컴포넌트 이렇게 두가지가 있습니다. 이 둘의 특징을.. 2022. 2. 3. 이전 1 2 다음
