뭘 배웠지?

엘리스 SW 엔지니어 트랙 60일차 온라인 강의날 테스팅 코드 테스팅 코드 작성 이점 TDD 방법론 적용해서 생산성 향상 테스트 코드가 구현 코드에 대한 문서화가 된다 코드 품질과 신뢰성을 높인다 TDD에 대해 Test Driven Development의 약자 테스트 코드를 먼저 작성하는 방법론이다 버튼을 만들기 전에 버튼 동작 테스트 코드를 미리 만들어 놓는다 그럼 실패하겠지 그런다음 버튼 개발을 해서 성공으로 만든다 'testable code'란? 테스터블한 코드 코드가 영향을 미치는 범위와 사이드 이펙트를 줄인다 기능들을 작게 분리한다 React 테스트 이유 컴포넌트 많아지면 서로 영향 미치는 경우가 생긴다 특정 코드 수정되면 에러가 생길 수 있다 테스팅 용어 Mocking - 특정 동작 흉내내기 ..

엘리스 SW 엔지니어 트랙 59일차 온라인 강의날 Redux 앱 전체 상태 관리하기 위해 나온 라이브러리 많은 개념들이 Flux 패턴에서 가져왔다 주로 React와 같이 사용 언제 Redux 사용할까? 앱 전체 상태 관리시 복잡한 비동기 처리시 앱의 상태가 복잡하고 체계적으로 관리하고 싶을 때 상태 관리 패턴 도입해서, 여러 개발자와 협업시 logger, devtool 등 활용해서 상태 관리할 때 핵심 원칙 3가지 1. Single source of truth Store는 단 하나, 모든 앱의 상태는 여기에 보관 2. Immutability 상태는 오직 읽을 수만 있다. 변경하려면 도든 상태가 변경되어야 한다 3. Pure function(side effect) 상태의 변경은 사이드 이펙트를 만들지 않아..

엘리스 SW 엔지니어 트랙 58일차 실시간 강의날 Redux로 CRUD setState 배운지도 얼마 안된 참이라 Redux가 더욱 편하게 해준다고 이해가 쉽게 잘 안되지만 props로 넘겨주는 일을 하고 있지 않은 것이 좋네 Redux는 어플리케이션의 심장 같은 녀석이라고 한다 좋은 엔진을 얻었다고 생각하라고도 하신다 Redux 없이 만든다면 props drilling 을 해야할 수도 있다 React에서 Redux 사용 방법 이걸로 감싸줘야 이 안에서 redux를 사용할 수 있다 Root 읽을 때 useSelector 훅 useSelector는 함수를 매개변수로 받는다 function selectorHandler(state) { return state.number; } const number = use..

엘리스 SW 엔지니어 트랙 57일차 온라인 강의날 상태 관리 데이터를 저장하고 하나 이상의 컴포넌트에서 데이터 공유하는 것 컴포넌트 안, 여러 컴포넌트 간의 상태 등 모두 상태 관리라 그런다 MPA 상태 관리 서버의 데이터로 페이지 렌더링하기 때문에 클라이언트 데이터와 서버 데이터 큰 차이 없다 SPA 상태 관리 클라이언트 데이터와 서버 데이터가 많이 다르다 Why 상태 관리? 데이터가 많아지고, 유저와 상호 작용하는 데이터가 많아지며 백엔드와의 데이터 통신도 고려해야 한다(ex. GraphQL) 장점 높은 품질 코드 작성에 유리 성능, 네트워크 최적화 데이터 관리 고도화(예: localStorage 활용한 persist state) 단점 Boilerpate 문제 파악해야 할 로직, 레이어 많다 잘못 사..

엘리스 SW 엔지니어 트랙 56일차 실시간 강의날 REDUX(리덕스) 리덕스는 자바스크립트에 포함된 기술이다 리액트에 포함된 기술이 아니다 소프트웨어 개발시 위험한게 복잡성이다 코드의 복잡성을 낮추기 위해 Redux를 사용한다 Single Source of Truth 단 하나의 객체에 어플리케이션이 사용하는 모든 데이터를 집어 넣는다 상태(state)는 그냥 객체다 데이터의 보안을 생각하기에 reducer, dispatcher 만 이용해서 데이터를 변경할 수 있다 직접 state 값을 바꾸지 못한다 데이터를 가져갈 때도 삼엄하다 getstate라는 함수를 이용해서 가져갈 수 있다 UNDO, REDO 쉽게 가능 store 정보가 저장되는 곳 state가 저장된다 state를 직접 수정을 할 수 없다 get..

엘리스 SW 엔지니어 트랙 55일차 온라인 강의날 Promise 콜백 헬(콜백이 중첩 되는 것)을 좀 더 보기좋게 사용할 수 있는 기술 아직 가져오지 않은 데이터(이게 왜 Promise라고 불리는 이유일까?)에 대해 .then | .catch | .finally 등 핸들러를 붙여서 데이터 처리, 오류 처리, 정리 로직을 실행한다 .then 체인으로 비동기 실행을 마치 동기 실행처럼 동작하게 한다 Promise 사용 예시 function returnPromise() { return new Promise() => { setTimeout(() => { const randomNumber = generateRandomNumber(100) if(randomNumber < 50) resolve(randomNumber..

엘리스 SW 엔지니어 트랙 54일차 온라인 강의날 MPA(Multi Page Application) 서버에 미리 여러 페이지 두고 유저가 요청시 적합한 페이지 전달 서버에 라우팅 처리하는 기능 있고, 서버에서 여러 페이지 관리 페이지 요청마다 모든 리소스 받아오니까, 페이지 간 데이터 재활용하기 힘들다 SPA는 데이터를 재활용하기 편하다는 뜻이겠구나 SPA(Single Page Application) 한 페이지에서 다른 페이지로 안넘어가고 전체 웹앱을 사용 Client side routing 기술 활용해서 페이지 진입시 리로드 없이 라우팅 AJAX 기술 활용, 페이지 이동시 서버에 데이터만 요청하고 자바스크립트로 페이지 만든다 여러 페이지를 구성요소로 보고 여러 페이지 스타일 컴포넌트 재활용 자바스크립트..

엘리스 SW 엔지니어 트랙 53일차 실시간 강의날 CRUD 복습 Update 복습을 하자! 제일 복잡하니 라우팅 url을 공유할 수 있게 만들어준다 window.history를 사용해서 만들면 코드가 엄청 길어주는데 react-router-dom 이라는 녀석을 npm에서 다운받아서 사용하면 편하다 npm install react-router-dom 웹 어플리케이션을 만들 때 라우팅이 반이다 어떻게 라우팅을 하는지 중요하다 react-router-dom 배우긴 어렵지만 강력한 기술 최상위 컴포넌트에서 라우터를 쓰겠다고 선언해야된다 => 라우터 어렵다 안익숙해서 그렇지 CORS(Cross Origin Resource Sharing) 보안(유저 보호) 위한 정책 브라우저가 막지만, 설정은 서버가 해야된다. 다..

엘리스 SW 엔지니어 트랙 52일차 온라인 강의날 좋은 앱이란? 1. 번들 사이즈에 대한 고려 HTML, CSS, JS가 차지하는 사이즈 번들 사이즈가 커지면 로딩 길어진다 2. 앱 성능 animation, transition 등 유저와 상호작용에서 스타일 코드 성능이 중요 요소 3. 사용자에게 유리한 UI/UX 스타일링에 대한 지식 필요 4. 자바스크립트와 스타일 적절하게 조합 UI 토글링, 애니메이션, 다크보드, 복잡합 UI 컴포넌트 등 자바스크립트 지식만으로 구현하기 힘들다 5. 유지보수가 용이하고 확장 가능한 코드 스타일 코드 작성하고, 관리하는 지식 필요 React 스타일링 방법 3가지 1. CSS import CSS 파일을 import 해서 사용 자바스크립트 파일 분리 2. CSS module..

엘리스 SW 엔지니어 트랙 51일차 새해 첫 실시간 강의날 State useState는 굉장히 중요하다 상태 관리를 최근 여러번 들었는데 아마도 이것을 사용해서 상태 관리를 하나보다 그럼 state 사용법에 익숙해지면 상태 관리에도 도움이 되겠지? 리액트에서 바꿀 값은 state로 지정해주는 느낌이다. 리액트는 렌더링을 하며 그려주는 방식인데, state를 변경하면 다시 렌더링되며 바뀐 state로 다시 그려준다 => state만 조작하면 된다 보아하니 가장 상단 컴포넌트에서 state를 조작하고 만지네 상단만이 아니다 수정이 필요한 값이거나 props의 값을 바꾸고 싶으면 상단 컴포넌트건, 하단 컴포넌트건 state를 선언하고 사용해서 값을 바꾼다 링크 링크(a tag)는 서버에서 어떤 정보를 가져올 ..