programming study/항해99 커리큘럼 (82) 썸네일형 리스트형 [항해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.. [항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (8) (2021.3.23) 1. 서버와 서버리스 웹은 응답과 요청으로 이뤄진다. 클라이언트가 서버에 요청, 서버가 클라이언트에게 응답 서버가 하는일 데이터 관리 분산처리 웹 애플리케이션 서버리스 서버를 신경 쓸 필요가 없다. 누군가 구축한 서버의 일부분을 빌려 쓸 수 있다. 2. Firebase BaaS Backend as a Service 백엔드와 관련된 것을 빌릴 수 있는 서비스 Firebase 2.1 Firebase 설정 사이트에서 프로젝트 만들기 버튼 클릭 프로젝트 이름을 정하고 약관 동의 프로젝트 애널리틱스 설정 나라 선택 2.2 FireStore realtime-database 제공 실시간 데이터 추가, 삭제 리액트의 react-firebase 패키지와 연동 spark 요금제: 무료 Collection: 문서의 집합 D.. [항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (7) (2021.3.22) 1. 리덕스 전역 상태관리를 편히 할 수 있게하는 라이브러리 공식 문서 리덕스 패키지 설치 yarn add redux react-redux 1.1 리덕스 개념과 용어 데이터를 한 군데 몰아넣고 다른 곳에서 꺼내볼 수 있다. ActionCreator: 액션 생성 함수, 액션을 만들기 위해 사용 State 리덕스에서 저장하고 있는 상태값 딕셔너리 형태 ({[key] : value})의 형태로 보관 Action 상태에 변화가 필요할때(가지고 있는 데이터를 변경할 때) 발생 객체 type은 정한 임의의 문자열 넣기 {type: "CHANGE_STATE", data: {...}} ActionCreator 액션 생성 함수 액션을 만들기 위해서 사용 const changeState = (new_data) => { /.. [항해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.. 이전 1 ··· 4 5 6 7 8 9 10 11 다음 목록 더보기