props 설정하기 자식 속성에 defaultProps값을 설정해서 위에서 넘겨주지 않을 시 값을 어떻게 설정할지 정할 수 있다. 연결되는 다른 div의 글자 하나가 위로 떠있을 때? align-items: flex-end (center 중앙정렬) 금액 표기법 .toLocaleString 요소를 위에서 아래로 쌓을 때 제일 마지막 요소를 제일 아래에 두고 싶다면 margin-top:auto (padding으로 내부 위치 적절히 조절) 요소 다루기 포지션이 absolute인 것은 부모의 포지션이 명시된 것을 기반으로 함 styled-components의 css 기능 large props를 전달받는 것의 유무에 따라 크기가 달라지게 하기 import styled, { css } from "styled-com..

SSR Server Side Rendering 소개 Full page load 없이 라우팅 서버에서 자바스크립트를 이용해 페이지를 미리 빌드 컴포넌트 생성에 필요한 API 요청, routing, redux store 생성 등을 처리 클라이언트는 빌드 된 페이지와 자바스크립트를 받아, 웹앱을 CSR처럼 동작 성능 측정키 메트릭 웹 퍼포먼스 웹페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정 성능을 측정하여 웹앱의 사용성을 개선할 수 있음 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등 좋은 유저 경험으로 유저의 만족을 얻음 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되..

React 테스팅 Mocking -특정 동작을 흉내 내는 것 ex) 실제 API를 호출하는 게 아니라, 가짜 payload를 반환하는 mocking function을 만듦 Stubbing -더미를 채워 넣는 것 ex) Child 컴포넌트를 렌더링 하지 않고, 대신 그 자리에 등을 채워 넣음 setup -테스트하기 위한 환경 생성 / mock data, mock function 등을 준비 expectation –원하는 테스트 결과를 만들기 위한 코드를 작성 assertion –정말 원하는 결과가 나왔는지를 검증 const transformUser= (user) => { const{ name, age, address} = user return[name, age, address] } test("Test tra..

Redux 소개 앱 전체의 상태 관리가 필요할 때 / 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 / 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 logger, devtool 등을 활용하여 상태를 관리할 필요가 있을 때 Action const action1 = {type:"namespace/getMyData",payload:{id: 123}}; Action은 상태의 변경을 나타내는 개념 ex) payload 이용해서 상태를 변경하는 것 외엔 다른 것은 일어나면 안됨 어떤 형태든지 상관없으나, 주로 type, payload를 포함하는 JavaScript 객체 Action Creator const addObj = (id) => (..

상태 관리 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유 SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 Client만의 데이터 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리를 고려 상태 관리 기술이 해결하는 문제들 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활용함 변경이 잦다면, 데이터의 변경 시점을 파악해 최적화 props drilling Context API 등을 활용, 필요한 컴포넌트에서 데이터를 가져올 수 있음 Flux Pattern MVC 패턴에서는, View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어남 앱이 커지면 업데이..

자바스크립트 비동기 1 동기 vs 비동기 비동기 응답을 받으면, 응답을 처리하는 callback 함수를 task queue에 넣음 event loop는 main thread에 여유가 있을 때 task queue에서 함수를 꺼내 실행 // 동기 스레드 제어권 안넘기고 순서대로 실행 console.log("This is synchronous..."); for (let i = 0; i console.log("This is asynchronous..."), 5000..