06.08 디지털 트윈 부트캠프 38일차

프론트엔드 - React

styled-components + media query

미디어 쿼리

미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모귤(기능)이다.

모든 미디어 쿼리는 미디어 타입과 조건에 대한 물음(쿼리)라는 두 가지 구성 요소를 지니고 있다.

@media 미디어타입 and (쿼리) {}

미디어 타입: screen, print, speech(음성 낭독기), all

쿼리: viewport

styled-components를 이용해 컴ㅍ포넌트 내부에 

 

transform (변형) : x, y 축 값을 변경하여 모양 바꾸기

관련 ㅎ함수

translate: 이동하기

rotate: 회전하기

scale: 확대 및 축소

skew: 비틀기

 

transition (전환) : 속성값을 변경하여 스타일 바꾸기

transition-property: 바꾸고 싶은 속성

transition-duration: 바뀌는 데 걸리는 시간

transition-delay: 바뀌기 전에 기다리는 시간(지연 시간)

transition-timing-function: 동작할 때의 속도 변화 방식

linear: 같은 속도를 유지

ease(기본값): 느렸다가 빨라짐

ease-in: 서서히 빨라짐

ease-out: 서서히 느려짐

ease-in-out: 서서히 빨라지다가 느려짐

 

styled-components에서 & 기호의 의미: 선택된 요소 그 자신

 

bootstrap

컴포넌트 툴킷 중 하나로, 스타일 시트를 작성하지 않아도 스타일이 존재하는 요소를 제공받을 수 있다.

스크립트를 작성하지 않아도 움직임과 상호작용이 존재하는 요소를 제공받을 수 있다.

 

리액트 부트스트랩

스타일링된 리액트 컴포넌트를 빠르게 얻고 기능을 커스터마이징 할 수 있도록 도와주는 라이브러리

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

npm i react-bootstrap bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'
import { 컴포넌트명 } from 'react-bootstrap'

 

---

TDD(Test Driven Development)

테스트 주도 개발

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하고 테스트 코드를 통과할 수 있는 실제 코드를 작성하는 개발 방식

원하는 기능의 테스트 코드 작성 -> 테스트 코드 실행 Fail -> 테스트 코드를 통과할 수 있는 실제 코드 작성 -> 테스트 실행 Pass

TDD를 하면 안정적으로 동작하는 코드를 작성할 수 있고 디버깅 시간을 줄일 수 있다.

 

React Testing Library

DOM 노드를 테스트하고자 할 때는 DOM Testing Library 솔루션을 사용할 수 있다.

여기에 React 관련 기능을 추가해 구축된 React Testing Library를 이용해 테스트 컴포넌트에 대한 테스트를 수행할 수 있다.

create-react-app 으로 생성한 프로젝트에는 React Testing Library가 포함되어 있다.

다른 방법으로 설정한 리액트 프로젝트에서 이를 사용 한다면 아래 명령어로 설치하면 된다.

npm i --save-dev@testing-library/test

 

Jest

페이스북에서 만든 테스팅 프레임워크

REact Testing Library와 함께 사용되며 아주 적은 양의 코드만으로도 단위별 테스트를 수행할 수 있는 편리한 프레임워크

마찬가지로 기존 내장되어 있으나 없다면,

npm i --save-dev jest

 

describe: 여러 종류의 테스트를 그룹화하는 블록

it: 개별 테스트를 수행하는 블록

expect: 값을 테스트하는 메소드로 주로 매처와 함께 사용

matcher: 값의 테스트 방법 정의

 

---

 

Next.js

리액트의 서버 사이드 렌더링을 손쉽게 구현할 수 있도록 사용자를 도와주는 간편한 프레임워크

리액트는 SPA 기반으로 클라이언트 사이드 렌더링을 수행하기 때문에 검색엔진 최적화 취약

 

CSR

클라이언트 사이드 렌더링

빈 html을 가져다가 JS 파일을 해석하여 화면을 구성하는 방식

이미 화면 구성을 마친 html 문서에 비해 검색이 잘 안됨

 

SSR

서버 사이드 렌더링

html 문서에 script 내용을 반영한 다음에 사용자에게 화면을 보여주므로 검색이 잘 된다.

서버 측에서 페이지를 미리 렌더링하여 완성된 html을 제공하는 방식

 

npx create-next-app@latest --typescript

타입스크립트

자바스크립트에 타입을 부여한 언어로, JS의 확장된 언어

Next.js는 TS를 이용하면 좀 더 편리하게 사용할 수 있도록 만들어진 프레임워크로 TS 설정을 추가한 채 개발을 진행하는 것이 일반적이다.