TIL (52) 썸네일형 리스트형 191218(수) TIL React Todo list 2 [ Todo list 기능 추가 ] 오늘은 어제 만든 todo list에 기능을 추가했다. 아마 이번 주 동안 계속 얘만 붙잡고 있을 것 같다. 목록, todo 추가 시 포커스 변경 input text: autoFocus 사용 다른 목록으로 이동하면 filter초기화(all)로 todo list에 있던 state: displayState를 app.js로 옮긴 후 title클릭 시 해당 state의 상태를 'all'로 변경 완료된 todo는 todo list 맨 밑으로 이동 이건 스크린샷을 못 찍었다. sort사용. todoList.sort((todoA, todoB) => { if (todoA.completed && !todoB.completed) { return 1; } else if (!todoA.co.. 191217(화) TIL. React로 Todo App 만들기 오늘은 어제 그린 설계를 토대로 react로 todo앱을 만들어봤다. 규모가 매우 작은 데에도 불구하고 props 내리고 state상태 관리하고 하는 게 마냥 쉽지만은 않다. 아 이래서 react-redux를 쓰는구나~를 깨달았음! 일단 시간이 부족해서 CSS는 건드리지 못했고 현재까지 구현한 Todo앱에 대한 스크린샷과 간단한 기능 설명만 할 것이다.(아직 미완성이지만 오늘은 종일 이것만 했기 때문에ㅋㅋ) 완성하면 그 때 또 블로깅해야지~ 테스팅을 위해 기본 데이터를 저장해뒀다. 목록 1: title1 - [ ] text1, [ ] text2 목록 2: title2 - [ ] text3 목록의 데이터들은 모두 체크되어있지 않은 상태다. [ Todo App ] 1. 최초 실행 시 화면 실행했을 때 메인 .. 191216(월) TIL-1. Redux review, Todo App 1. Sprint Review 1-1. react-redux store라는 글로벌한 객체에서 state를 받아와서 상태를 관리하기 쉽게 함. 1-2. redux immutable.js https://immutable-js.github.io/immutable-js/docs/#/ React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 스테이트를 복잡하게 설정한 경우 immutablejs를 사용하는게 좋다. 2. React Todo App Intro flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex공부용 개구리게임: https://flexboxfroggy.com/#ko flex.. 1913-15(금-일) TIL(?)-1. Redux 1. Redux redux사용 전 읽어보면 좋을 글 https://medium.com/lunit-engineering/당신에게-redux는-필요-없을지도-모릅니다-b88dcd175754? 1-1. Store https://redux.js.org/api/store 영어로 된 Docs읽느라 힘들었는데 찾아보니 한글번역사이트가 있었다!!!: https://deminoth.github.io/redux/api/Store.html A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's j.. 191212(목) TIL-2. Intro Redux [CODESTATES in16] intro Redux redux: Js에서 사용할 수 있는 state container 1. Intro Redux 1-1. 컴포넌트 간 정보 공유 방식 react: 자식 컴포넌트 간 데이터를 주고받을 대, 부모 컴포넌트를 통해서만 주고받는다. 친척 컴포넌트 간 데이터를 주고받아야 한다면? 상태 관리가 힘들어짐. 1-2. Redux의 기본 개념 Single source of truth: store 컴포넌트들의 상태를 저장 상태가 관리되는 공간은 오직 하나: 외부에 존재하는 하나의 store State is read-only: Action 어떤 행동(Action)과 그에 따라 상태를 변경해주는 메소드들의 집합 Action: Simple JavaScript Object Chan.. 191212(목) TIL-1. React, assign() [CODESTATES im16] React, assign() 1. Checkpoint A JavaScript library that builds on the premise of declarative and reusable components. : React 선언적이고 재사용가능한 구성 요소를 전제로 구축한 JS라이브러리 A structural framework for dynamic web apps. : Angular.jS 라이브러리: 사용자인 내가 필요한 코드를 갖다 씀 프레임워크: 구축된 틀에 사용자 코드가 얹혀짐. A predictable state container for JavaScript apps. : redux A JavaScript compiler that takes code written .. 191211(수) TIL-1. Recast.ly [CODESTATES im16] Recast.ly 1. Recast.ly recastly의 컴포넌트간 props 및 state flow 다이어그램 2. Sprint Office Hour 2-1. component 독립적이고, 재사용 가능한 코드의 집합 컴포넌트 합성: 컴포넌트 안의 컴포넌트 Class & function component 2-2. class vs function 차이: class: state, life cycle사용 가능 constructor는 상황에 따라 생략 가능(state를 사용하지 않는 경우 생성자를 쓰지 않아도 됨) 하지만 render()는 필수이다. function: class보다 가벼움 2-3. props HTML 속성을 통해 하위 컴포넌트에 전달되는 인자 부모 컴포넌트가 자.. 191209(월) TIL-2. React Key Concept [CODESTATES im16] React Key Concept 1. Data flow 단방향 데이터 흐름 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐름. > 자식컴포넌트가 직접적으로 부모 컴포넌트에게 데이터를 전달해줄 수 없음. 2. 컴포넌트와 Props Props: 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터(속성) 단순히 사용만 할 수 있다. 변경할 수 없다. [React] 컴포넌트와 props 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 독립적으로 생각할 수 있음. 개념상 컴포넌트는 자바스크립트 함수와 비슷함. 임의의 입력 (“props”라고 부르는)을 받아들이고 어떤 게 화면에 나타나야 하는 지를 설명하는 React 요소를 반환함. 2-1. 함수형 및 .. 이전 1 2 3 4 5 6 7 다음
