맛동산이

리액트를 다루는 기술을 참고하여 기술하였습니다.인증과 인가먼저 토큰기반과 세션기반인증을 살펴보기 위해서 인증과 인가를 알아야 한다.인증 (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(중..

리액트를 다루는 기술을 참고하여 기술하였습니다.라이브러리 설치리액트 라우터 돔을 설치할 리액트 프로젝트의 파일에서 다음과 같이 터미널에 작성을 하면 이용이 가능해진다.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참조형은 배열과 객체 같은 데이터 타입이 존재한다.참조형의 경우에는 직접적으로 메모리 값이 올라가는것이 아닌 메모리에 참조되는 주소가 입력이 된다. 그렇다면 다시 돌아와서 불변성이란 결국 무엇을 뜻하는 것일까?바로 데이터가 메모리상에 ..

리액트를 다루는 기술을 참고하여 기술하였습니다.useMemo라는 기능이 있다.앞서서 useEffect에 대해서 공부를 햇는데 복습을 다시 해보자면useEffect는 어떠한 조건을 만족하거나 값이 변하거나 하면 리렌더링 하게 하는것이다.반면에 우리는 전체 페이지를 리렌더링을 하게 되면 화면의 전환이 클테고 그렇게 되면 리액트를 사용한 웹 앱의 장점인 부드러운 전환이 잘 안될수도 있다. 이를 앞서서 위를 좀더 멋있는 말로 설명할수 있는데메모라이제이션(memorization)memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플..

리액트를 다루는 기술을 참고하여 기술하였습니다.useEffect는 리액트 컴포넌트가 렌더링 될 때 마다 특정작업을 실행할 수 있도록 하는 hook이다.즉 렌더링 될때마다 side effect를 실행하기 위한 hook이다.그냥 뭐 새로고침 될때마다 뭔가 실행되게 한다고 생각하면 좀 이해하기 쉽다. 아무튼 형태는 다음과 같다.useEffect(function, deps) *function = 수행하고자 하는 작업 (함수) *deps = 검사하고자 하는 값 또는 배열 렌더링 될때마다 실행시useEffect(function, []) 한번 렌더링 될때 처음 딱 한번 실행시 =배열에 아무것도 안넣음. 하지만 빈배열useEffect(function, []) 특정 props 나 state가 변경될 때 실행시???, =..