우아한 테크러닝 4일차 간단한 예제 만들기 컴포넌트 아키텍쳐 언제 쪼갤지에 대한 고민 -> 고민하다가 점점 비대해져서 버그생길까봐 못 쪼갬 언제 또갤지 고민될 때 쪼개라 class component function class ClassApp extends React.Component { constructor(props) { super(props); // 만들어지는 인스턴스 객체를 this로 참조하게 됨 this.state = { displayOrder: 'ASC' } // 그래서 바인딩을 해 줬다 this.onToggleDisplayOrder = this.onToggleDisplayOrder.bind(this); } onToggleDisplayOrder() { // 불릴 때의 this는 인스턴스가 아닌 ..

우아한 테크러닝 3일차 리액트를 직접 만들어보았다. React React Concept const list = [ { title: '안녕하세여' }, { title: '안녕히가세여' }, { title: '안녕히주무세요' }, ]; const rootElement = document.getElementById('root'); function app(items) { rootElement.innerHTML = ` ${items.map((item) => `${item.title}`).join('')} `; } app(list); 위의 코드와 같이 real dom으로 직접 조작하는건 안정성이 떨어짐 -> API가 low level -> 추상도가 높지 않음 그래서 작성하다보면 복잡도가 올라간다 two-way bi..

우아한 테크러닝 2일차 자바스크립트 훑어보기 리덕스 간단하게 만들어보기 Javascript function js에서는 함수도 값으로 변수에 넣을 수 있다 -> 함수도 값이다 js의 함수는 반드시 값을 반환하게 되어 있음 => 명시적으로 return 쓸 때 / 리턴이 없으면 undefiend 리턴 new 연산자의 경우는 명시적으로 인스턴스 ({ }) 반환 // 함수 정의문 function foo() { return 0; } // 함수식 -> 이름 정해줘도 변수명을 함수 이름으로 하기 때문에 익명함수 사용가능 // 함수를 값으로 취급할 때만 함수 이름 생략가능 const bar = function () { return 2; } // 최초에 1번만 실행되어야 하는 코드들일 경우 // 즉시 실행 코드 => 익명..

우아한 테크러닝 1일차 이번에 우아한 테크러닝 교육을 듣게 되었다! 되면 좋고 안돼도 뭐… 하는 마음으로 지원했는데, 운좋게 선발되어서… 2주 프로젝트의 타입스크립트 & 리덕스 리팩토링을 진행하려고 하는 중이기도 해서 더 반가운 소식이었다. 사용한 도구 및 공식 문서들 https://www.typescriptlang.org/play https://codesandbox.io/index2 https://reactjs.org/ https://redux.js.org/ https://mobx.js.org/README.html https://redux-saga.js.org/ https://blueprintjs.com/ https://testing-library.com/ TypeScript type 명시하기 ts는 ..