뭘 배웠지?

엘리스 SW 엔지니어 트랙 65일차 온라인 강의날 마지막 온라인 강의 엘리스에서 하는 마지막 온라인 강의다 짧은 시간에 많은 내용을 살펴볼 수 있어 좋았다 원하는/필요한 내용을 추리고 강화시키자 다음주부터 팀프로젝트가 시작된다 React를 팀 단위로 사용해볼 수 있는 기회다 한 가지 컨텐츠 아이디어로는 복습 하면서 정리를 다시하고, 배운 내용과 순서를 공유하는 것 그럼 혼자 공부하는 사람들에게 약간의 길잡이가 될 수 있지 않을까 싶다 styled components 실습 오늘은 React UI에 대한 듀토리얼이고 styled components로 만드는 실습을 한다 styled components는 아직 강의만 들은거라 스타일과 프로그래밍 코드를 같이 적는 것이 익숙치 않지만 좋은점들이 보인다 props..

엘리스 SW 엔지니어 트랙 64일차 온라인 강의날 CSS Module class, id 등에 랜덤 문자열(hash) 달아 준다 CSS Module 사용 예시 app.module.css .title { font-size: 2.5ream; color: palevioletred; } App.jsx import styles from "./app.module.css" export default function App() { return ( Hello World ) } UI 프레임워크 이미 만들어져 쉽게 쓰기에 좋다 해당 프레임워크 디자인 벗어나기 쉽지 않다 컴포넌트 커스터마이징 어렵다 Ant Design, material UL 등 Ant Design 사용 예시 import "antd/dist/antd.css" i..

엘리스 SW 엔지니어 트랙 63일차 마지막 실시간 강의날 React, Redux, Router 실습 저번주 Create에 이어서 실습 시작 node modules Github에서 받은 것에 node modules 없다 npm install 하면 package.json에 맞춰서 node_modules 만들어준다 npm install MUI: Material UI React 라이브러리 컴포넌트 가지고 스타일 Material UI는 컴포넌트들으 가져다 쓰면 되고 Tailwind CSS는 컴포넌트를 만들어 주게 도와주는 것처럼 보인다 신기한 기능 전자 음성 speechSynthesis.speak(new SpeechSynthesisUtterance('축하합니다. 화이팅. 고마웠어요 ')); Firebase Baa..

엘리스 SW 엔지니어 트랙 62일차 온라인 강의날 SSR Server Side Rendering CSR의 한계를 SSR로 함께 처리 가능 (CSR 한계: SEO, 페이지 로딩) 서버에서 자바스크립트 이용해서 페이지 미리 빌드 API 요청, routing, redux store 생성 등 처리 클라이언트는 빌드된 페이지, 자바스크립트 받아서 웹앱을 CSR처럼 동작하게 한다 이런 방법을 Universal Rendering 이라고도 한다 웹 퍼포먼스 웹 페이지 로드되고 유저와 상호작용 하는 것들 측정 성능 측정으로 사용성 개선 가능 좋은 UX만들 수 있다 성능 측정 키 메트릭 Time To First Byte(TTFB) 페이지 요청 후 처음 데이터 도착하기까지 걸리는 시간 First Contentful Pain..

엘리스 SW 엔지니어 트랙 61일차 실시간 강의날 프로젝트 대비 git 복습으로 시작 json-server 간단한 앱에 사용 가능한 json-server RESTFul API 서버와 클라이언트가 통신할 때 사용하는 최고의 예시 HTTP이 주는 프로토콜을 최대한 잘 활용하자 전체를 바꾸는 PUT 부분만 바꾸는 PATCH React에서 Redux 사용 이 방법을 알아야겠다. CRUD를 할 수 있고, 데이터를 가져오고 보내고, 저장까지 한다면 왠만한 것들을 다 만들 수 있지 않을까? Development | Producttion Development 디버깅 및 개발 환경에 포커스 디버깅 기능이 있어서 느리다 Production 실제 배포 프로덕션으로 만들기 npm run build 이걸로 build, 프로덕션..

엘리스 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..