Jaeilit

배열메서드 Array.reduce() 는 첫번째 인자로 누산값, 두번째로 현재 값 등등 을 가진다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org 사용예제 postDB.get().then((docs) => { let post_list = [] docs.forEach((doc) => { let _post = doc.data() let post = Obj..

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..

파이어베이스란? 클라우드 데이터베이스를 제공하는 서비스입니다. 그 외에도 호스팅으로 배포도 도와주고 다양한 기능이 있습니다. 파이어베이스를 통해서 데이터들을 서버에 저장하고 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 ..

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..

웹 저장소 데이터를 저장을 할 때 서버 DB을 통해서 저장을 하는데, 굳이 서버에서 가지고 있지 않아도 되는 데이터들을 저장해야 할 때가 있을 겁니다. 별로 중요하지 않거나, 지워져도 되거나, 같은 말이지만 유실되도 되거나 등등 그럴때 사용 하는것이 웹 저장소입니다. 중요한 정보는 절대 저장하지 않는다! 1. Local Storage JavaScript 로 조작 도메인, 프로토콜, 포트로 묶여있기 때문에 같으면 같은 스토리지를 공유 브라우저가 달라도 도메인만 같다면 동일한 로컬 스토리지를 사용 서버에 전송하지 않음(쿠키보다 더 많은 자료를 보관 가능) 로컬 스토리지 5mb 쿠키 4kb 사용자가 지우지 않는 이상 브라우저에 계속 남아 있음 클라이언트 저장 자동로그인과 같이 지속적으로 필요한 데이터를 저장 ..