Next.js를 활용하면 페이지별로 Pre-rendering 방식을 선택할 수 있다 특정 페이지 별로 이곳은 SSG, 저기는 SSR 이런 식으로 가변적으로 사용할 수 있습니다. 또 아예 Pre-render를 안 하고 싶다고 하고 CSR에서 하도록도 선택할 수 있습니다. getStaticProps를 사용하면 SSG getServerSideProps를 사용하면 SSR SSG(Static Site Generation)를 사용하면 좋은 페이지 Marketing pages Blog posts E-commerce product listings Help and documentation 위 네 가지 모두 전반적으로 정적일 수 있고 자주 바뀌지 않는 데이터들일 것입니다. 정적으로 만든다면 새로 배포하기 전까지 새로 바뀔..
public 정적 리소스를 Next.js로 서빙하기 위한 디렉토리입니다. Image Component vs 이미지를 화면에 렌더링할 수 있는 방법은 위와 같이 두 가지입니다. 1. 로드될 때 유형과 크기가 다르다 아래 이미지는 제가 컴포넌트에 ``와 ``를 같이 렌더링하여 네트워크 탭에서 확인한 결과입니다. 보시면 형식 자체가 달라졌는데요. 태그로 이미지를 로드한 경우는 png, 컴포넌트로 로드한 경우에는 webp라는 유형으로 로드가 되었는데요. webp는 구글에서 만든 이미지의 포멧입니다. png나 jpeg보다 훨씬 가볍게 동일 혹은 더 좋은 화상의 이미지를 제공할 수 있는 포멧입니다. 크롬에서는 wepb를 알아서 제공하기 때문에 최적화된 이미지 포멧으로 제공을 하게 됩니다. 용량도 좀 더 적도 더 좋..
DOM ✔️ DOM(Document Object Model)은 문서 객체 모델이라는 뜻, HTML, XML 문서의 프로그래밍 interface ✔️ 웹 페이지는 일종의 문서(document)라고도 할 수 있는데 ✔️ 이 문서는 웹 브라우저를 통해 그 내용이 해석 → 웹 브라우저 화면에 표시 ✔️ 이때 DOM을 통해 동일한 문서를 표현, 저장, 조작할 수 있게 되는 것 → DOM은 문서로 만들어져있는 웹 사이트를 브라우저가 이해할 수 있는 구조를 제공 렌더링(Rendering) ✔️ Render는 애플리케이션에서 요소의 속성(props)이 새로운 속성으로 바뀌거나 컴포넌트의 상태가 변경될 때 사용자 화면의 해당 정보만을 갱신하는 것을 의미 ✔️ 렌더링 방법 덕분에 웹 페이지를 전부 다 다시 로드하지 않아도..
screen 객체 screen은 React Testing Library(RTL)의 주요 객체 중 하나입니다. 테스트 대상이 되는 컴포넌트를 가리키는 역할을 합니다. screen 객체는 DOM 요소에 접근하고, 요소를 검색하고, 상태를 확인하는 데 사용됩니다. screen 객체의 주요 메서드 중 하나가 "query" 메서드인데요! screen.query 메서드는 주어진 선택자를 사용하여 DOM에서 요소를 찾습니다. → 요소가 존재하지 않으면 null → 요소를 찾으면 해당 요소 return 이를 통해 테스트에서 화면에 특정 요소가 있는지 확인하거나 상태를 검증할 수 있는 것입니다! React Testing Library의 screen 객체에는 다양한 메서드가 있으며, 필요에 따라 적절한 메서드를 사용하여 ..
TDD 원칙대로 세팅 TDD 원칙대로라면 기능 코드를 추가하기 전에 테스트를 작성해야 합니다. 이번 예제에서는 App.js에서 할 거라 App.js를 비워주겠습니다. 📜 App.js 파일 function App() { return ; } export default App; 1. 테스트하려는 내용들 세팅 전역 테스트 메서드인 test에는 총 2개의 인자가 들어간다고 했었습니다. 첫 번째 인자에는 테스트의 문자열 설명, 두 번째 인자에는 테스트 함수입니다. 우선 내가 테스트하고자 하는 내용들을 모두 적어서 세팅해봅시다. 저는 버튼에 올바르게 초기 색상이 적용되었는지, 클릭 시 파란색으로 바뀌는지 기능 테스트까지 해보려고 합니다. 📜 App.test.js 파일 test('button has correct in..
React Testing Library(RTL) 소개 React Testing Library는 세부적인 구현 사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것은 권고합니다. 예를 들어 Hello world 라는 코드가 있다면 RTL은 태그를 사용하는지보다 Hello world 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 구현보다는 기능에 초점을 맞춘 테스트 방식이라고 할 수 있습니다 :) RTL은 이름 그대로 React 컴포넌트를 테스트 하기 위해 만들어진 도구이기 때문에, 기본적으로 CRA에 내장되어 있습니다. RTL의 역할 - 테스트를 위한 가상 DOM을 생성 - DOM과 상호 작용하기 위한 유틸리티도 제공 - 브라우저 없이도 테스트를 가능하도록 테스트 유형 ..
- Total
- Today
- Yesterday
- 리액트
- jest
- styled-components
- 인프런
- 자바
- testing
- frontend
- CSS
- JSP
- 머신러닝
- next.js
- 타입스크립트
- 프로젝트 회고
- react-query
- 프론트엔드 공부
- rtl
- Python
- 프론트엔드 기초
- TypeScript
- 프론트엔드
- 자바스크립트 기초
- 자바스크립트
- 데이터분석
- 파이썬
- 디프만
- 스타일 컴포넌트 styled-components
- 리액트 훅
- HTML
- react
- 딥러닝
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |