728x90 반응형 SMALL Spring boot 프로젝트 기록/기본적인 기초 공부16 CORS란? CORS는 크로스-오리진-리소스 셰어링의 약자입니다. 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침입니다. 저의 프로젝트의 애플리케이션에서 프론트엔드 서버의 도메인은 http://localhost:3000 입니다. 따라서 현재 Todo 페이지의 Origin은 http://localhost:3000 입니다. componentDidMount 함수의 fetch 부분에서 http://localhost:8080 으로 새 요청을 보내고있습니다. 이때 브라우저는 2개의 요청을 보내게 되는것입니다. 첫번째 요청은 Option에 메서드를 사용하는 요청입니다. 이 메서드는 보통 이 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인하고 싶을 때 보냅니다. OP.. 2021. 12. 17. 로컬 스토리지 여기서 궁금증!!!! 과연 우리가 로그인하고, 상태값이라던가, 정보라던가, 내활동 기록들 등등이 어디에 기록될까요? 계속 DB에 왔다갔다하면서 로그인이 되어있으면 로그인관련 테이블의 로그인유무에 대한 컬럼의 row가 0, 1 로 계속 기록되는걸까요? 웹 스토리지를 이용하면 사용자의 브라우저에 데이터를 key-value 형태로 저장할 수 있습니다. 쿠키와 비슷하다고 생각하면 될것같습니다. 웹 스토리지에는 두 종류가 있습니다. 세션스토리지, 로컬 스토리지 세션 스토리지는 브라우저를 닫으면 사라지고 로컬 스토리지는 브라우저를 닫아도 사라지지 않습니다. 따.라.서, 사용자가 브라우저를 재시작할 때마다 로그인하게 하고 싶으면 세션 스토리지를, 브라우저를 재시작해도 로그인 상태를 유지하고 싶으면 로컬 스토리지를 사.. 2021. 12. 15. React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한이유 이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다. 우리에게 익숙한 형식의 라우팅은 다음과 같습니다. 브라우저에 "어떤사이트.com"을 입력하고 들어가면 index.html 이 렌더링 됩니다. index.html은 어디서 온것일까요?? 바로 "어떤 사이트" 의 서버에서 온것입니다. 어떤사이트 주소를 렌더링 할 html 과 여타 다른 파일들을 리턴한 것입니다. 마찬가지로 어떤사이트.com/login 을 입력하고 들어가면 이 요청은 GET 요청이 되어 해당 사이트의 서버에 전달됩니다. 서버는 로그인 경로를 보고 login.html 페이지를 반환합니다. 브라우저는 이런 라우팅을 서버-사이트 라우팅 이라고 합니다... 2021. 12. 14. JSON 웹 토큰 서버에서 전자 서명된 토큰을 이용하면 인즈엥 따른 스케일 문제를 해결할 수 가 있습니다! 우리는 전자 서명된 토큰을 이용해 스케일 문제를 해결합니다.ㅎㅎ 그리고 이렇게 전자 서명된 토큰 중 하나가 JSON 웹 토큰 입니다. 이것이 JWT라고 합니다. JWT는 오픈 스탠더드이고, JSON 형태로 된 토큰입니다. 토큰은 {header}.{payload}.{signature} 로 구성되어 있습니다. 각 파트의 필드가 무엇을 뜻할까요? Header typ : Type을 줄인 말로 토큰의 타입을 의미 alg : Algorith을 줄인 말로 토큰의 서명을 발행하는데 사용된 해시 알고리듬의 종류를 의미 Payload sub : Subject 를 줄인 말로 토큰의 주인을 의미, 애플리케이션에서는 사용자의 이메일이나 아.. 2021. 12. 11. 토큰 기반 인증 토큰(Token)은 사용자를 구별할 수 있는 문자열이다. 토큰은 최초 로그인 시 서버가 만들어줍니다. 서버가 자기만의 노하우로 토큰을 만들어 반환하면 클라이언트는 이후 요청에 아이디와 비밀번호 대신 토큰을 계속 넘겨 자신이 인증된 사용자임을 알리는 것입니다. 토큰을 기반으로 하는 요청은 헤더에 Authorization : Bearer 을 명시합니다. 서버는 이 토큰을 받고 어떤 형태로든 인증을 해야 합니다. 상황을 간단하게 하려고 서버가 랜던함 문자와 숫자를 섞어 UUID 로 토큰을 작성해 넘긴다고 가정해봅시다. 그러면 서버는 토큰을 생성해 인증 서버를 통해 저장해야합니다. 그리고 요청을 받을 때마다 헤더의 토큰을 서버의 토큰과 비교해 클라이언트를 인증할 수 있습니다. 이 솔류션은 Basic Auth를 .. 2021. 12. 8. Basic 인증 상태가 없는 웹 어플리 케이션에서 인증을 구현하는 가장 간단한 방법은 무엇일까요? 가장 간단한 방법은 모든 HTTP 요청에 아이디와 비밀번호를 같이 보내는 것일거에요! 이런 방법을 Basic인증이라고 합니다. Basic 인증에서는 최초 로그인한 후 HTTP 요청 헤더의 Authorization : 부분에 "Basic :' 처럼 아이디와 비밀번호를 콜론으로 이어붙인후 Base64로 인코딩한 문자열을 함께 보내는 거에요 이 HTTP 요청을 수신한 서버는 인코딩된 문자열을 디코딩해 아이디와 비밀번호를 찾아낸 후 사용자 정보가 저장된 DB또는 인증 서버의 레코드와 비교합니다. DB의 레코드는 아이디와 비밀번호가 일치하면 요청받은 일을 수행하고, 아니면 거부하게 되는겁니다! 흠... 이 솔루션은 그러나 아이디와 .. 2021. 12. 8. React 컴포넌트 리액트 컴포넌트가 무엇인지 리액트 애플리케이션을 생성하면서 만들어진 App.js를 통해 알아봅시다! import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 컴포넌트는 App입니다. 하단의 export default App을 통해 App이라는 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다. 컴포넌트는 자바스크립트 함수 또는 자바스클비트 클래스 형태로 생성할수있습니다!! 아래는 자바스크립트 함수로 컴포넌트를 구현한 것입니다. 클래스로 구현하면 reder()함수를 작성해 주어야합니다. class A.. 2021. 12. 2. React.js 가 뭐에요?ㅠㅠ SPA React나 앵귤라, 뷰 는 대중적인 SPA 라이브러리/ 프레임워크입니다 . SPA란 싱글 페이지 애플리케이션의 약자로 한번 웹 페이지를 로딩하면 사용자가 임의로 새로고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미합니다. 대체 무슨 말인가.ㅠㅠㅠㅠ 리액트를 이용해서 SPA의 개념을 공부해보겠습니다!! 매의 눈을 가지고 있어 찰나의 순간도 정확히 볼수 있다고 가정해봅시다! 그렇다면 첫 페이지를 로딩했을 때 보이는 것은 맨위처럼 (1번) 하얀 화면에 아무것도 없는 브라우저일 것입니다. 이때 브라우저는 index.html을 로딩하고 있습니다! HTML이 를 랜더링 하다보면 마지막에 bundle.js라는 스크립트를 로딩하게 됩니다! 이 자바스크립트는 npm start를 실행했을때 .. 2021. 12. 2. 브라우저의 동작 원리 리액트js를 공부하면서 필요한 브라우저의 동작원리에 대해 한번 공부해보았습니다. 아주 간단하게 기록을 해봤습니다. 저희가 브라우저 주소창에 http://google.com과같은 과같은 웹주소를 입력하면 브라우저는 Http GET요청을 해당 URL의 서버로 전송합니다. 보통 프론트엔드가 있는 웹 서비스의 경우 HTML파일을 결과로 반환합니다. HTML을 받은 브라우저는 그림처럼 두 단계를 거쳐 텍스트로된 HTML을 브라우저에 보여줍니다. 첫 번째 단계는 파싱이고, 두 번째 단계는 랜더링입니다. 파싱은 쉽게 말씀드리면 랜더링의 전처리 단계입니다. 파싱 단계에서 브라우저가 하는 일은 크게 3가지가 있습니다. 첫 번째 : 브라우저는 HTML을 트리 자료 구조의 형태인 DOM트리로 변환합니다. 두 번째 : 이미지.. 2021. 12. 2. 프론트엔드란? + node.js 간단설명 프론트엔드란 말 그대로 사용자 바로 앞에서 사용자와 상호작용하며 애플리케이션 로직을 수행하고 백엔드 서버로 요청을 요청하는 역할을 합니다!! 웹서비스에서 클라이언트 또는 프론트엔드라는 웹 브라우저를 뜻합니다. 사용자는 자신의 컴퓨터에서 브라우저를 실행합니다. 브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScripte,Css 등)을 사용자의 컴퓨터로 다운로드 한 후 브라우저에서 실행킵니다! Node.js ? Node.js가 등장하기 전 자바스크립트는 브라우저 내에서만 실행할 수 있었습니다. 자바스크립트는 브라우저상에서 HTML 렌더링의 일부로 실행하거나 , 자바스크립트 콘솔을 이용해 실행해야 했습니다 . 다시말씀드려서, 자바스크립트는 브라우저 밖에서는 실행할 수 가 없었습니다. 그러나 이.. 2021. 12. 2. REST API REST는 Respesentational State Transfer의 약자로 아키텍처 스타일이다. 아키텍처 스타일은 아키텍처 패턴과는 조금 다르다. 아키텍처 패턴은 어떤 반복되는 문제 상황을 해결하는 도구고, 아키텍처 스타일은 반복되는 아키텍처 디자인을 의미한다. REST아키텍처 스타일은 6가지 제약조건으로 구성된다. 이 가이드 라인을 따르는 API를 RESTful API라고 한다. REST 제약조건 클라이언트-서버 상태가 없음 캐시되는 데이터 일관적인 인터페이스 레이어 시스템 코드-온-디맨드(선택사항) 클라이언트 - 서버 클라이언트 - 서버라는 것은 리소스를 관리하는 서버가 존재하고, 다수의 클라이언트가 리소스를 소비하려고 네티워크를 통해 서버에 접근하는 구조를 의미한다. 이런 구조 중 우리에게 가장 .. 2021. 11. 23. 레이어드 아키텍처 레이어드 아키텍처 패턴은 어플리케이션을 구성하는 요소들을 수평으로 나눠 관리하는 것이다. 수평으로 나눴다는 것은 무슨 뜻일까? 간단히 말하면, 저 위의 그림처럼 레이어로 나눠 놓은 것들을 하나의 클래스, 하나의 메서드 안에 전부 구현한다고 생각해보자 처음에는 그렇게 길게 작성되지 않는다. 그러나 조금만 복잡한 비즈니스 로직을 구현한다면 메서드가 금방 몇 백줄을 넘을 것이다. 이런 경우 훌륭한 개발자들은 무엇을 하는가? 바로 메서드를 쪼개 작은 메서드로 나눈다. 그런데 다른클래스에서 똑같이 해당 메서드를 가져오려면 복사-붙여놓기 하는식으로 옮겨야한다. 이렇게 계속 복사- 붙여넣는 식으로 쓰다보니 이 메서드 하나를 클래스 하나처럼 쓰자 고 해서 이 작업이 국소적으로 봤을때 레이어로 나누는 것이고 클래스로 나.. 2021. 11. 23. 이전 1 2 다음 728x90 반응형 LIST
