전체 글
[TIL] 엘리스 SW 엔지니어 트랙 Day 064
[TIL] 엘리스 SW 엔지니어 트랙 Day 064
2022.01.20📖 오늘 배운 내용 - 2022.01.20 Proxying API Requests MUI CI/CD Heroku에서 배포 Firebase 📝 Proxying API Requests package.json에 "proxy": "http://localhost:3333" 추가 리액트는 자기가 해당 주소 값을 가지고 있지 않으면, proxy값을 확인하고 있다면 해당 주소로 요청을 보낸다. Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 📝 MUI 📝 CI/CD CI ⇒ Continuous Integrat..
[React] useEffect에서 async/await 사용하는 방법
[React] useEffect에서 async/await 사용하는 방법
2022.01.19🎯 useEffect에서 async/await 사용하는 방법 useEffect 내에서 비동기 처리를 해주려고 async/await을 사용하려고 했는데 오류가 발생했다. Effect callbacks are synchronous to prevent race conditions. Put the async function inside: .. useEffect는 아무것도 반환하지 않거나 clean up 함수를 반환해야 한다. useEffect(() => { async function fetchData() { const respons = await fetch("http://localhost:3333/topics/" + id); const result = await respons.json(); console.log..
[TIL] 엘리스 SW 엔지니어 트랙 Day 063
[TIL] 엘리스 SW 엔지니어 트랙 Day 063
2022.01.19📖 오늘 배운 내용 - 2022.01.19 Server Side Rendering Client Side Rendering 성능 측정 키 메트릭 React를 활용한 Server Side Rendering React 앱 빌드와 배포 Azure를 사용한 VM 배포 Next.js 맛보기 📝 SSR과 CSR 차이점 [WEB] SSR과 CSR 차이점 🎯 SSR과 CSR 차이점 Server Side Rendering, Client Side Rendering에 대해 알아보자! 📝 Server Side Rendering 📕 Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹.. lakelouise.tistory.com 📝 성능 측정 키 메트릭 [WEB] 성..
[Next.js] Next.js 맛보기
[Next.js] Next.js 맛보기
2022.01.19🎯 Next.js 맛보기 Next.js는 React 기반으로 서버 사이드 렌더링을 구현을 쉽게 할 수 있도록 도와주는 프레임워크다. SSR(Server Side Rendering) 이란 말 그대로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. SSR을 이용하면 Node 서버에서 리액트 컴포넌트를 만들고 만들어진 HTML 요소를 브라우저로 전송하게 된다. Next.js는 서버사이드 렌더링에 필요한 거의 모든 기능을 지원하는 좋은 프로젝트다. Next.js의 중요한 특징은 페이지를 기반으로 빌드한다는 것이다. 첫 페이지를 서버에서 받으면 (내용이 모두 채워져 있는 html 파일을 받으면) 검색 엔진 최적화가 가능하며 사용자가 화면을 보는 시간도 빨라진다. 📝 Next.js 셋업 📕..
[React] 리액트 앱 배포 프로세스
[React] 리액트 앱 배포 프로세스
2022.01.19🎯 React 앱 배포 프로세스 IP를 부여받은 서버(VM)에 React 앱을 배포 앱을 빌드하고, 웹서버를 세팅 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 사용자는 필요한 데이터를 받아 앱을 로딩 📝 프론트엔드 앱 배포 시 유의할 점 서버와 통신 시, CORS가 허용되었는지 브라우저, 디바이스별로 앱이 정상적으로 동작하는지 앱의 로딩 속도, 각 동작 시 성능, 버그 등을 점검
[React] 리액트로 SSR 구현하기
[React] 리액트로 SSR 구현하기
2022.01.19🎯 React를 활용한 Server Side Rendering 📝 ReactDOMServer ReactDOMServer를 활용하여, 특정 React Component를 HTML로 빌드 Node.js 서버에서 JSX를 사용하여 페이지 빌드 📝 ReactDOMServer.renderToString() React Component를 HTML로 변환한다. 클라이언트의 페이지 요청 시, 변환된 HTML string을 전달한다. ReactDOMServer.renderToNodeStream은 readable stream을 생성하고 브라우저가 받아서 점진적으로 페이지를 그린다. 📝 ReactDOM.hydrate renderToString으로 생성한 HTML의 root을 기준으로, 받아온 React code를 통해 ma..
[WEB] 성능 측정 키 메트릭
[WEB] 성능 측정 키 메트릭
2022.01.19🎯 성능 측정 키 메트릭 📝 웹 퍼포먼스 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정하는 성능 측정 방법 성능을 측정하여 웹앱의 사용성을 개선할 수 있다. 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등 좋은 유저 경험으로 유저의 만족을 얻을 수 있다. 📝 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황 발생 시 지표가 악화된다. 📝 First Contentful Paint 페이지에 진입하고부터, 브라우저가 어떤 DOM Content를 만들 때까지 걸리는 시간 페이지 진입 후 FCP까지 평균 3초 이상 걸리면 성능 개선이 필요 📝 Time to I..
[WEB] SSR과 CSR 차이점
[WEB] SSR과 CSR 차이점
2022.01.19🎯 SSR과 CSR 차이점 Server Side Rendering, Client Side Rendering에 대해 알아보자! 📝 Server Side Rendering 📕 Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다. 클라이언트는 별도의 처리 없이 웹페이지 노출 이를 Server Rendering이라고 한다. 즉, 서버에서 페이지를 렌더링 해준다. 📕 Server Side Rendering Server Rendering을 MPA(Multi Page application)라고 부른다. 서버에서 자바스크립트를 이용해 페이지를 미리 빌드한다. 컴포넌트 생성에 필요한 API 요청, routing, ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 062
[TIL] 엘리스 SW 엔지니어 트랙 Day 062
2022.01.18📖 오늘 배운 내용 - 2022.01.18 json-server 리액트, 리덕스, 라우터를 사용한 프로젝트 복습 Development, Production의 차이 CI/CD 📝 json-server 개발 초기 api가 아직 안 나왔을 때 mock을 사용해서 작업할 수 있다. db.json 파일 만들어주고 사용할 데이터를 객체로 넣어주기 npx json-server --w db.json 실행 npx json-server --w db.json --port 3333(포트 번호) // db.json { "topics": [ { "title": "html5", "body": "html5 is ...", "id": 1 }, { "id": 2, "title": "css", "body": "css is..." }, {..
[TIL] 엘리스 SW 엔지니어 트랙 Day 061
[TIL] 엘리스 SW 엔지니어 트랙 Day 061
2022.01.17📖 오늘 배운 내용 - 2022.01.15 React 테스팅 jest react-testing-library 📝 React 테스팅 [React] React 테스팅 🎯 React 테스팅 📝 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 코드를 리팩토 lakelouise.tistory.com 📝 jest [jest] jest란? 🎯 jest facebook에서 오픈소스화한 테스팅 프레임워크 assertion 함수들, test runner, mock 라이브러리 등을 모두 제공한다. create-react-app에서 기본적으로 사용된다. (npm test) 사용성이 좋고, 가장 인기.. lakelouise...
[react-testing-library] 유저 이벤트
[react-testing-library] 유저 이벤트
2022.01.17🎯 유저 이벤트 📝 user-event 내장 이벤트 함수인 fireEvent, createEvent를 좀 더 직관적이고 범용적으로 사용할 수 있도록 만든 라이브러리 click, type, keyboard, upload, hover, tab 등 유저가 실제로 웹페이지를 사용하며 만드는 이벤트를 메서드로 제공한다. 📝 user-event - click import userEvent from "@testing-library/user-event"; import { render } from "@testing-library/react"; userEvent.click(submitButton) userEvent.click(submitButton, { shiftKey: true }) userEvent.click(subm..
[react-testing-library] 쿼리의 우선순위
[react-testing-library] 쿼리의 우선순위
2022.01.17🎯 쿼리의 우선순위 유저가 페이지를 이동하는 방식에 가까운 쿼리일수록 우선순위가 높다. 접근성 높은 HTML을 작성할수록 테스트가 용이한 코드가 된다. 📝 ByRole (제일 높음) accessibility tree에 있는 요소들을 기준으로 원소를 찾는다. 유저가 웹 페이지를 사용하는 방식을 가장 닮은 쿼리 동일한 role을 가진 경우, accessible name을 이용해 원소를 구별한다. accessible name이란 원소의 특징을 나타내는 이름이다. 임의로 role 혹은 aria-*을 부여하는 것을 지양한다. 자주 사용되는 Role : button, checkbox, listitem, heading, img, form, textbox, link 자주 사용되는 accessible name butto..