맛동산이

리액트를 다루는 기술을 참고하여 기술하였습니다.JWT란?JWT란 Json 포멧을 이용하여 속성을 저장하는 Claim기반의 Web Token이다.이렇게 만들어진 JSON파일은 static변수로 로컬 스토리지 파일에 저장되는데 static으로 저장되는 이유는 HTTP통신을 할때 항상 헤더에 저장되어 보내지기 때문이다. 이러한 토큰을 이용한 인증 서비스가 필요한 시점은 언제일까?다음과 같은 경우 토큰을 이용하면 편리하다.모바일 어플리케이션을 만들때인증정보를 다른 어플리케이션으로 전달할때보안이 중요할때JWT의 구조JWT는 3가지 구조로 되어있다. Header, Payload, Signature로 이루어 지며 각 부분은 Base64Url로 인코딩 되어 표현되어 진다. header헤더는 두가지 정보로 구성된다.ty..

리액트를 다루는 기술을 참고하여 기술하였습니다.인증과 인가먼저 토큰기반과 세션기반인증을 살펴보기 위해서 인증과 인가를 알아야 한다.인증 (Authentication)유저가 누구인지 확인하는 절차로그인, 유저의 identification을 확인하는 절차인가(Authorization)유저의 권한을 허락하는 것, 유저마다 다른 권한이 존재하고, JWT와 같은 토큰을 이용하여 인가할수 있다. 인증과 인가의 차이 기존 HTTP프로토콜의 특성이자 약점http프로토콜의 약점이자 특성은 다음과 같다.1. connectionless 프로토콜( 비연결 지향)클라이언트가 서버에 요청을 했을때, 그 요청에 맞는 응답을 보낸후 연결을 끊는 처리 방법이다.이를 통해서 수만명의 웹 서비스 유저를 동시에 받더라도 접속유지는 최소한으..

리액트를 다루는 기술을 참고하여 기술하였습니다.axios는 현재 가장 많이 사용하는 http클라이언트다.특징은 HTTP요청을 Promise기반으로 처리한다는 점이다.준비하기npm install axios하면 준비완료. 데이터 받기axios는 get() 함수를 이용해서, 데이터를 HTTP형태로 받아올수 있다.Const onClick= ()=>{ axios.get('http://데이터 받을 곳의 주소') .then(response=>{ setData(response.data); } };이러한 방법을 통해서 데이터를 받아온다. 👉중요한 점은 axios로 데이터를 받은것을 Promise로 처리한다는 점.즉 axios로 데이터를 받앗을때, resolve되면, .then으로 처리를 해줄수 있고,오류를 catch문으..

리액트를 다루는 기술을 참고하여 기술하였습니다.비동기(asynchronous) 작업이란?동기적이란 한가지 작업이 끝난후, 다음작업을 시행하는것을 의미하고,비동기적이란 한가지 작업을 하는 도중에 다른 작업을 동시에 시행하는 것을 의미한다. callback함수???스택오버플로우에서는 콜백함수를 다음와 같이 정의한다.A callback function is a function which is passed as an argument to another function, and,is invoked after some kind of event.어떠한 함수의 인자로 이용되는 함수어떠한 이벤트에 의해서 호출되어지는 함수 예를들어function Callback(){ printf("called"); };라는 함수가 있다면..

리액트를 다루는 기술을 참고하여 기술하였습니다.useNaviagete()navigate의 사용방법은 다음과 같다.const naviagte= useNavigate(); 이후 navigate()를 이용해서 이동할수 있다. 예를들어 {navigate(1)}}>HomeonClick={()⇒{naviagte(’http::// 어쩌고저쪼고 이동할 주소’)}1은 앞으로 한페이지-1은 뒤로가기 이다.즉 현재 존재하는 버튼이나 글에다가 다양하게 이동할때, 동작하는 함수를 만들기 위해서 useNaviagte를 사용한다. 404페이지 만들기404페이지는 오류 페이지를 의미한다.Route path="*" *은 이외에 모든 페이지를 의미한다. 즉 없는 페이지를 접속하게 되면 없는페이자고 하면된다. Nested Routes(중..

리액트를 다루는 기술을 참고하여 기술하였습니다.페이지 주소를 정할때는 유동적인 값을 사용할 때도 존재한다.url 파라미터 예시 : ?page=1&keyword=react쿼리스트링 예시 : page=1&keyword=react url파라미터는 주소의 경로에 유동적인 값을 넣는 형태이며, 뒷부분에? 문자 이후 key=value를 정의하며 &로 구분하는 형태이다.url파라미터는 ID, 이름, 특정 데이터를 조회할때 사용쿼리스트링은 키워드 검색, 페이지네이션, 정렬방식등 데이터 조회에 필요한 옵션을 전달할 때 사용 useParams()url파라미터를 통해서 여러개의 페이지를 생성하고 싶을때, useParams()를 사용할수 있다.단순하게 생각했을때, 여러개의 페이지가 나눠져잇다고 가정을 해본다. 메인페이지라는 ..

리액트를 다루는 기술을 참고하여 기술하였습니다.라이브러리 설치리액트 라우터 돔을 설치할 리액트 프로젝트의 파일에서 다음과 같이 터미널에 작성을 하면 이용이 가능해진다.yarn add react-router-dom 혹은 npm install react-router-dom 라이브러리 세팅index.js파일에서 다음과 같이 작성한다.import {BrowserRouter} from "react-router-dom"; 그리고 을 다음과 같이 감싸준다. 이렇게 작성하고 나면 모든 준비가 완료됨. 라우터 사용방법import {Routes, Route, Link} from 'react-router-dom'이렇게 작성하면 사용이 가능한데 프레그먼트 태그를 제외하고 가장 높은 상위 태그에 를그리고 이후에 를 통해서 페이..

리액트를 다루는 기술을 참고하여 기술하였습니다.라우팅이란?웹 어플리케이션에서 라우팅이란 사용자가 요청한 url에 따라 알맞는 페이지를 보여주는것을 의미한다.이렇게 여러가지 페이지로 구성된 웹 어플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위한 방법이 바로 라우팅 시스템이다.라우팅 시스템을 사용하기 위해서는 다음과 같은 라이브러리를 사용할수 있다.리액트 라우터next.js 싱글페이지 어플리케이션이란?싱글페이지 어플리케이션을 살펴보기 전에 우선 멀티페이지 어플리케이션이라는 개념을 알아야한다.멀티페이지 어플리케이션멀티페이지 어플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아서 계속해서 css, js파일등을 받아 화면에 보여주는 동작방식을 채택하였다..

리액트를 다루는 기술을 참고하여 기술하였습니다.리액트의 불변성이란?리액트는 불변성을 지켜야 한다.그렇다면 이 불변성이란 무슨뜻일까?우선 불변성의 사전적 정의는 변하지 않는 성질이다. 불변성을 이해하기 위해서는 참조형광 원시형에 대하여 이해를 해야한다.참조형과 원시형원시형 call by value원시형의 데이터 타입은 boolean, string, number, null 등이 있다.원시형은 직접적으로 메모리에 값이 입력되는것을 의미한다. 참조형 call by reference참조형은 배열과 객체 같은 데이터 타입이 존재한다.참조형의 경우에는 직접적으로 메모리 값이 올라가는것이 아닌 메모리에 참조되는 주소가 입력이 된다. 그렇다면 다시 돌아와서 불변성이란 결국 무엇을 뜻하는 것일까?바로 데이터가 메모리상에 ..