우아한 테크러닝 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는 ..

리액트 네이티브로 프로젝트를 진행중인데, 화면 라우팅 용으로 리액트 네비게이션을 사용중이다. 단순 라우팅 이외에도 params를 화면간에 넘겨줄 수 있는 게 참 편리하다고 생각했고, 그 특징을 적극 활용해서 state를 루트 파일까지 끌어올리지 않고 바로바로 넘겨주며 사용하고 있다. (추후 리덕스로 리팩토링 예정이다.) 오늘도 navigation.navigate로 다음 페이지로 넘어가게 해주고, 동시에 params로 변수 몇 가지를 넘기는 부분을 작업했고, 그 후 넘어간 뒤의 스크린(넘어온 뒤의 스크린의 이전 스크린이다.) 에서 params로 받아 온 변수들을 여러 차례에 걸쳐서 합친 뒤 또 다른 스크린으로 넘겨주어야 했다. 그래서 대강 화면별 이동하는 데이터의 흐름은 아래와 같았다. (1, 2, 3번 ..

final 프로젝트 본격 구현 이전에 리액트 네이티브 연습겸 미니 프로젝트를 진행했다. 기술 스택은 기본적으로 react hooks, react native, react navigation, async storage를 사용했고, 리덕스 연습을 위해 리덕스 브랜치를 따서 추가적으로 redux, redux-persist를 사용했다. 연습하고자 했던 내용들은 아래와 같다. 1. 리액트 네이티브에서 하위 컴포넌트에 props 넘겨주기 2. 리액트 네이티브에서 반복문을 이용한 컴포넌트 렌더링 3. useEffect를 이용한 비동기 처리 (Async Storage에서 로그인 여부를 가져오는 데에 사용했다.) 4. 탭 / 스택 네비게이션을 nesting 해서 사용하기 5. 네비게이션 이동 시에 params를 넘겨주기..