개발일지/React (4) 썸네일형 리스트형 Redux 입문하기 (with React.js) 해당 글은 생활코딩의 Redux 강의 내용을 정리하며 작성하였습니다. https://opentutorials.org/module/4078 Redux 수업소개 예측 가능한 애플리케이션의 상태 저장소인 Redux를 다루는 수업입니다. 이 수업에서는 순수한 웹기술인 HTML, JavaScript와 Redux만을 이용해서 웹애플리케이션을 만들어 볼 것입니다. 이 opentutorials.org Why Redux ? 1. logic을 재사용함 => logic 횟수를 감소시킨다. 2. redux-dev-tools를 사용하면 '시간여행'이 가능하다! 3. component 간의 의존성을 낮출 수 있다. => component들은 하나의 store에 집중하면 된다. What is Redux ? dispatch : ③ .. [Redux] 배열 state에 값 추가하기 export default function SurveyReducer(state, action) { console.log("state =>", state); console.log("action =>", action); if (state === undefined) { return { clickedArray: [] }; } var newState; switch (action.type) { case "ADD_SURVEY": var newData = { id: action.data }; newState = { ...state, clickedArray: state.clickedArray.push(newData), }; break; case "DELETE_SURVEY": newState = { ...state, cl.. Next.js What is Next.js ? React 전용 SSR 프레임워크 What is SSR ? Server Side Redering 렌더링 작업을 서버에서 Why SSR? - 기존 CSR(Client Side Rendering) 방식 초기 구동 시 전체 페이지 렌더링. 사용자 이벤트 발생할때마다 이를 해석하고 필요한 부분만 렌더링하는 방식. - 기존 CSR과 비교시 빠른 첫 페이지 렌더링 가능 SEO(Search Engine Optimization)를 유도하기위해서 적용 Next.js + Express -> 렌더링 전처리 가능! 클라와의 통신횟수 감소! What is Gatsby ? =React + GraphQL 내용이 자주 바뀌지 않는 정적사이트(블로그, 회사소개) 만들 때 사용 Next.js vs Gat.. [React] 개발환경 설정 choco 설치 https://zetawiki.com/wiki/%EC%9C%88%EB%8F%84%EC%9A%B0_Chocolatey_%EC%84%A4%EC%B9%98 윈도우 Chocolatey 설치 - 제타위키 다음 문자열 포함... zetawiki.com Node.js 설치 choco install nodejs VSCode plugin 설치 - ESlint - ES7 React/Redux/GraphQL/React-Native snippets - Prettier - Code formatter - Rainbow Bracket VSCode 설정 1. shift+, 커맨드로 setting 열기 2. format on save 입력 후 check 3. compact folders 입력 후 check 해제 Ngi.. 이전 1 다음