Jaeilit

1. 쿠키 다시 살펴보기 2. 쿠키 만들기 3. 쿠키 찾아오기 4. 쿠키 삭제하기 웹저장소에 관한 글 https://jaeilit.tistory.com/25 쿠키 다시 살펴보기 1. 간단한 특징 쿠키는 사용자가 유효기간을 정할 수 있다. (브라우저가 종료되도 인증은 유지됨) 도메인 하나당 20개의 값 그리고 하나당 4kb까지 저장 가능 암호화가 존재하지 않아서 보안상 위험할 가능성 2. 동작 설명 클라이언트가 페이지 요청 서버에서 쿠키를 생성 HTTP 헤더에 쿠키를 포함시켜서 응답한다. 3. 사용의 예 로그인시 아이디 비밀번호 저장하시겠습니까? 쇼핑몰의 장바구니 등 팝업종료시 더이상 보지않음 1. 쿠키 만들기(setCookie()) key값이 되는 user_id name과 value 값의 value, 만..

Components.defaultProps defaultProps 프로퍼티를 할당함으로써 props 의 초기값을 정의할 수 있습니다. 공식문서 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html 1. defaultProps 설정 2. props 로 받아와서 사용하기 3. Inputs 컴포넌트에서 props 값(label, placeholder, _onChange) 들을 입력 해준다. 4. 개발자도구 react components 를 살펴보면 prop로 넘겨주는 값들을 확인 할 수 있다. (콘솔 안찍어도 됨) 요거를 자식 컴포넌트에서부터 코드를 작성하다보니 이해하는데 엄청난 시간이 걸렸으나 내 나름대로 정리해보면 1. 핵심은 props 는 부모가..

1. 미들웨어(logger, thunk) 2. mapStateToProps, mapStateToDispatch 1. 미들웨어(logger, thunk) 미들웨어란? 액션을 디스패치 했을 때 호출된 액션을 처리하려는 리듀서와 디스패치 사이의 어떤 작업을 말함 보통은 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때로 예를 들어서 리액트 앱에서 우리가 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리한다. 1-2. logger 와 thunk import { applyMiddleware, combineReducers, createStore } from "redux" import { subscribersReducer } from "./subscribers/reducer..

지난 글 https://jaeilit.tistory.com/30 TIL(7)REDUX_1편 리덕스는 왜 쓰는가? 리액트에서는 단 방향 데이터입니다. 부모 컴포넌트의 데이터를 자식 컴포넌트에게 props 로 넘겨줄 수 있습니다.. 하지만 자식이 또 자식을 또 또 자식을 이렇게 트리 구조 jaeilit.tistory.com 다시 짚어보기 코드 순서 상태관리 1. action type 2. action function 3. reducer 4. createStore() 5. dispacth() 번외, 6. subscribe 설정 7. 미들웨어 logger 1. action type 정의 // 액션 타입 정의 const INCRE_COUNT = "INCRE_COUNT" const DECRE_COUNT = "DEC..

DOM 이란? HTML 문서나 XML에 접근하기 위한 인터페이스 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다. - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다. 서버리스란 ? 서버리스(serverl..

파이어베이스란? 클라우드 데이터베이스를 제공하는 서비스입니다. 그 외에도 호스팅으로 배포도 도와주고 다양한 기능이 있습니다. 파이어베이스를 통해서 데이터들을 서버에 저장하고 CURD를 해봅니다. Firebase 설정 & 연동 프로젝트 생성 후 프로젝트 설정의 일반 탭의 코드를 복사해서 firebase.js 에 붙여준다. import { initializeApp } from "firebase/app" import { getFirestore } from "firebase/firestore" const firebaseConfig = { apiKey: API키 입력, authDomain: "spart-react-basic-a0a65.firebaseapp.com", projectId: "spart-react-ba..

리덕스는 왜 쓰는가? 리액트에서는 단 방향 데이터입니다. 부모 컴포넌트의 데이터를 자식 컴포넌트에게 props 로 넘겨줄 수 있습니다.. 하지만 자식이 또 자식을 또 또 자식을 이렇게 트리 구조를 이루게 되면 부모이였던 컴포넌트는 조상이되기 됩니다. props를 자식에게 또 그 자식의 자식에게 그 자식의 자식의 자식... 이런식으로 내려가게되기 때문에 데이터를 관리하기에는 많이 비효율적입니다. 내가 쓰지도 않는데 가지고 있어야할 경우도 생기고, 데이터를 관리하는 점에서도 난잡해질것이며, 거쳐가는 지점이 많다는 것 자체도 비효율입니다. 또, 형제끼리는 props를 나누지 못한다는 결정적인 단점도 있습니다. 데이터를 데이터 저장소(컴포넌트 이외의 바깥 장소)에서 관리하며 컴포넌트들이 필요할때마다 빼서 쓰면 ..

Array.map() 배열의 각 요소들에 대해 연산을 하여 원본 배열을 유지하고 새로운 배열로 반환 한다. const original_array = [1, 2, 3, 4, 5] const map_array = original_array.map(a => a+1) console.log(original_array) // [1, 2, 3, 4, 5] console.log(map_array) // [2, 3, 4, 5, 6] 원본 배열은 유지된다. 새로운 배열 반환. Array.map vs Array.forEach 두 메서드 전부 배열의 각 요소들을 순회한다는 공통점이 있지만, map 메서드는 원본 배열을 유지하고 새로운 배열로 반환시키고, forEach 는 원본 배열이 바뀐다. 새로운 배열은 undefined ..

SPA(Single Page Application) 한개의 페이지 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운한다. 이후 새로운 페이지의 요청이 있는 경우, 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신함. 모든 페이지가 새로고침 되는게 아니라 요청이 있는 부분만 리렌더링 되는 방식 SPA 를 CSR(Client Side Rendering) 방식이라고 한다. 클라이언트가 서버에게 최초 요청을 하면 HTML을 받아온다. 추가적인 요청에 대해서는 AJAX 을 통해 JSON 데이터를 받아서 업데이트만 해준다. SPA 장점 요청 받는 부분만 렌더링하면 되기 때문에 빠르다. (성능과 연결) 새로고침에 대한 페이지 깜빡임이 없다. 페이지의 일부만 바뀌는 것이기 때문에 application..

1. JWT JWT(JSON WEB TOKEN) 란? JSON 웹 토큰(JWT) 정보를 JSON 객체로 안전하게 전송하기 위한 간결하고 자체 포함된 방법을 정의 하는 개방형 표준( RFC 7519 )입니다. JWT는 크기가 비교적 작기 때문에 URL과 POST 매개변수를 통해 HTTP 헤더 내부에서 보낼 수 있으며 비교적 빠르게 전송됩니다. 모든 Auth0 발급 JWT에는 JSON 웹 서명(JWS)이 있습니다 . 즉, 암호화되지 않고 서명됩니다. 인용글 https://auth0.com/docs/security/tokens/json-web-tokens 항해99 미니프로젝트 사용예제 POST 요청으로 url 담아서 쿠키(token)를 전송 서버측에서 token_receive로 받아옴 받아온 token_rec..