본문 바로가기

programming study

 (889)
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (5) (2021.3.30) 리덕스 1. 설치하기 리덕스, 리덕스 모듈 내에서 경로 이동을 할 수 있는 히스토리 ,라우터와 히스토리를 역어줄 모듈 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 불변성 관리를 용이하게 할 수 있는 패키지 yarn add immer redux-actions 2. 모듈 만들기 예시코드 // 패키지 임포트 import { createAction, handleActions } from "redux-actions"; import { produce } from "immer"; // Action const LOG_IN = "LOG_IN"; const LOG_OUT = "LOG_OUT"; c..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (4) (2021.3.29) 1. 토큰 기반 인증 이전의 방식은 사용자의 로그인 상태를 서버가 전부 가지고 있었다. 서버의 세션에 사용자 정보를 넣고 로그인 여부를 기록, 저장 서버에 부하가 크고 관리의 여러움 최근은 토큰 기반 인증 방법을 많이 사용 1.1 OAuth2.0 외부서비스의 인증 및 권한부여를 관리하는 프레임워크 Open Authentication, Open Authorization 동작 방식 클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_token을 준다. 클라이언트는 access_token을 이용하여 API 요청을 할 수 있다. 서버는 API 요청을 받고, access_toke을 가지고 권한 여부를 확인 후 결과를 클라이언트에게 보낸다. 유저가 구글 로그인을 하는 상황 구글(Resource Ser..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (3) (2021.3.28) Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어이다. 메인 쓰레드와 콜스택 하나 코어 엔진과 실행환경(런타임)의 도움을 받아 비동기 작업을 동시에 할 수 있다. WebAPI(dom, ajax, setTimeout), Task Queue, Event Loop 1. 콜백 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나 그러나, 콜백 헬로 불리는 중첩 문제를 일으킬 수 있다. 콜백 헬 비동기 처리 시에는 실행 완료를 기다리지 않고 다음 작업을 실행 비동기 처리 함수 내에서 처리 결과를 반환하는 것으로 원하는 동작을 하지 않을 경우 콜백 함수를 사용한다. 콜백 함수 내에서 또 다른 비동기 작업이 필요한 경우 중첩이 생기게 된다. 2. Promise 비동기 연산이 종료된 이후 결과를 알기 위해서 사..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (2) (2021.3.27) 1. 프로젝트 세팅 개발환경 세팅 크롬 익스텐션 Redux devTools: 리덕스 사용시, 리덕스 액션에 따른 데이터의 변화를 볼 수 있다. React developer Tools: 리액트 디버깅에 용이 VSCode react extension pack prettier - code formatter 2. 기획서 쪼개기 2.1 기획서 프로토 타입 툴 진행할 프로덕트의 화면을 공유하는 협업 툴 제플린, XD, 피그마 등등을 사용 2.2 컴포넌트 쪼개기 각자의 방식이 있다. 편한 방식으로 쪼개는 것이 best 너무 짝게 만들면 만들기 어렵다. 너무 크게 만들면 재활용이 어렵다. 기획서를 보면서 컴포넌트를 쪼개기 페이지마다 반복되는 부분 컴포넌트로 만들기 3. 프로젝트 진행하기 3.1 폴더 구조 잡기 이것 또..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (1) (2021.3.26) 1. javaScript 기본 문법 1.1 변수 변수: 변하는 값 선언 -> 초기화 -> 할당 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상) 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간이 확보(undefined로 초기화) 할당: undefined로 초기화 된 변수에 실제 값 할당 var 가급적 사용하지 말 것 함수 수준 스코프 선언과 초기화를 한 번에 재선언이 가능 선언하기 전에도 사용 가능 호이스팅 선언을 맨 위로 끌어올린다. function cat(){ name = "siru"; // 이 if문 내로는 절대 들어올 일이 없다 if(false) { var name; } alert(name); } // 하지만 경고창이 실행된다. // 함수의 최상위로 호이스팅이 되기 때문 ..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (10) (2021.3.25) 1. 리덕스와 FireStore firestore를 리덕스 스토어 넣기 위해서 미들웨어가 필요하다. 액션 -> 미들웨어 -> 리듀서 순으로 처리가 된다. 1.1 redux-thunk 객체 대신 함수를 생성하는 액션 생성 함수를 작성 가능 패키지 설치 yarn add redux-thunk 미들웨어 추가(configStore.js) import { createStore, combineReducers, applyMiddleware, compose } from "redux"; import thunk from "redux-thunk"; import bucket from "./modules/bucket"; import { createBrowserHistory } from "history"; export const ..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (9) (2021.3.23) 리액트 특강 과제 설명 아래 순서대로 하기 캘린더 화면 그리기 캘린더 뷰 일정 클릭 팝업 뷰 (모달): 캘린더와 하나에 묶기 완료일정, 모든일정보기 토글버튼으로 일정 추가하기 뷰: 별도의 url, 라우터, 일정이 없으면 팝업이 안되도록(맨 마지막에) 일자 하나 하나는 배열 * 기능 만들기 바로 리덕스 , 파이어 스토어 나중에 페이지 이동 가짜 데이터만들어서 실행시켜보기 일정에대한 모든 데이터는 무엇이 가지고 있을까? -> 메인 컴포넌트 가지고 있다. 리덕스 수정, 삭제 파이어 스토어 미들웨어 라우트 경로를 나눠준다. react-route-dom 주소와 컴포넌트를 엮는다. props를 넘길 수 있다. history를 자동으로 넘긴다. 파라미터를 넘길 수 있다. 페이지별로 쪼갤 수 있다. 리덕스 데이터를 전..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (6) (2021.3.22) 1. 라우팅 1.1 SPA Single Page Application html이 1개인 어플리케이션 전통적인 웹 사이트: 페이지를 이동할 때마다 서버에서 html, css, js (=정적자원)을 내려준다. 페이지를 이동할 때마다 서버에서 주는 방식은 화면을 바꿀 때의 상태유지가 어렵고 바뀌지 않은 부분까지 새로 불러와 비효율적이다. SPA: 딱 한번만 정적자원을 받는다. 장점: 사용성 단점 처음에 모든 컴포넌트를 받아온다. 사용자가 들어가지 않는 페이지까지 전부 가지고 온다. 첫 로딩속도가 느리다. 1.2 라우팅 브라우저의 주소에 따라 다른 페이지를 보여주는 것 SPA에서는 라우팅 라이브러리를 사용하여 구현 2. 라우팅 라이브러리 2.1 react-route-dom 패키지 yarn add react-ro..

티스토리툴바