Jaeilit

DOC 사용 const onChange = (e) => { // input type file 비동기적으로 파일의 내용을 읽어들이는 데 사용됨 const reader = new FileReader() // 현재 input 의 files 정보를 onChange 함수와 useRef를 통해 읽어옴 const file = imgRef.current.files[0] // 바이너리 파일을 base64 encode 문자열로 반환 // 그 외 readAsText() 텍스트로 읽기 reader.readAsDataURL(file) // reader의 이벤트 핸들러 중 하나 // onloaded 읽기 동작이 성공여부를 떠나 완료되었을 때 발생 // 읽어온 결과를 result로 반환 받음 reader.onloadend = ()..

1. 리덕스 데이터 불변성이란? 2. 리덕스의 동작원리 설명할 수 있을 정도로 예를들면 지금 저보고 설명하라고하면 리덕스에서 store의 state 값을 변경해야 할 때는 dispatch 를 통해서 해당 action 에게 전달 합니다. 해당 action 생성함수는 데이터 변경에 대해서 로직을 짜고 실제 데이터 변경은 리듀서에서 이뤄진다. 예를들면 액션 생성함수에서 state.cnt + 1 해주세요 reduecer state.cnt = action.cnt 이런식으로 실제로 데이터를 입히는 곳 이라고 이해를 함. 헌데, 너무 허술하고 대충 알고 있는 느낌이 강해서 정확히 개념을 잡고 갔으면 좋을 것 같음 https://velog.io/@y1andyu/Redux-Redux-thunk-%EB%8F%99%EC%9..

회원가입 로직 useState 를 통해 필요한 정보들을 입력받고 dispatch 를 통해 signup 액션함수를 호출 액션 함수에서 회원가입에 필요한 정보를 저장하고 setUser({ user_name, password, nickname.. 등등}) 로그인 로직 로그인 버튼을 누르면 useState 를 통해 id 와 pwd 값을 dispatch 해서 login 액션함수로 넘겨줌. 리듀서에서 쿠키를 저장. setCookie(key"value") 그 다음에 action.payload user 정보를 state에 저장

1. 컴포넌트 나누기 page 부터 살펴보기 page 를 나누고 그 안에서 components 를 나누고 그 안에서 elements 를 나눠본다. 2. Image 라는 ele가 2가지 이상 용도로 사용 될 경우 style 을 용도 갯수 만큼 만들어서 사용 할 생각이였는데 이 방법이 아니라 props 값으로 바꿔준다. (input type이 아님 임시변수) 예를 들면 동그라미 이미지와 세모, 네모가 필요하다 생각했을 때 나였다면 이렇게 3개를 썼을 텐데 이 방법이 아니라 이렇게 하면 같은 타입이 바뀌지만 이미지를 사용하는 것 처럼 보여서 덜 혼동스럽다. 3. 이미지 size를 나눌때 styled.components 에서 속성을 줄 때 --size : %{(props) => props.size} px ; 이..

배열메서드 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..