[Week13] react CH1

안나경·2024년 4월 15일

크래프톤정글

목록 보기
55/57

01-1 리액트 프레임워크 이해하기

가상 DOM, document object model과 JSX, Javascript XML라는 방식으로 동작.

HTTP 응답 데이터를
사용자가 볼수 있도록 웹페이지 화면에 보여주는 것을 렌더링, rendering이라고함.

리액트는 SPA, single page applicatin으로
주소창으로 요청하는 자원이 하나로,

한번만 요청하므로 화면 깜박임 현상이 일어나지 않으며
현재 화면에서 사용자가 새로 요청한 부분만
동적으로 화면을 생성한다.

즉, 리액트는 싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크라고 할수 있다.

클라이언트에서 동작하는 템플릿 엔진

대개 템플릿 엔진으로
HTML을 DB에서 추출한 데이터와 결합하여 만들어주는데

백엔드 -JSON data-> 프런트엔드 -DOM 객체-> (웹브라우저가 이해)

즉,
프런트엔드 프레임워크는
클라이언트에서 동작하는 템플릿 엔진이라 할수 있다.

리액트 버전 18 특징

  • 동시성 concurrent React
  • 자동 일괄 처리 automatic batching
  • 트랜지션 transition
  • 서버측 렌더링 server-side rendering

새로운 method가 많긴하나
맞춤형인 서버에서만 지원되는 경우가 많음.

01-2, 3,4 리액트 개발환경 만들기

vsCode extension

Ctrl+shift+P 로 열어서
prettier : 코드 포매터. 설정 만줘져야함.

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

사용할때는 .prettierrc.js 파일을 만들어서

module.exports = {
    singleQuote: true,
    semi : false,
}

등의 형식을 써줘야함. (컴파일시 반영.)
//prettier-ignore을 쓰면 그 이후가 프리티어 설정이 안먹히지만
타입스크립트 컴파일러 타입 체크 기능도 무력화함.

Tailwind CSS: 스타일링 코드 사용 용이
Headwind : 테일윈드 css 관련코드 재배치
PostCSS : 테일윈드 규칙이 표준이 아니라 뜨는 에러메시지 제거용

타입스크립트 컴파일러는 따로 설치하여
늘 컴파일 해주어야함.

npm i -g typescript ts-node

01-5 첫번째 리액트 프로젝트 만들기

npx create-react-app 프로젝트이름 --template typescript

하면 관련 파일 쫙 설치해줌.

npm run start 개발 모드
npm run build 빌드 모드

애플리케이션 실행하기

웹팩과 번들 파일

웹팩, webpack은 프런트엔드 프레임워크에서 사용하는
대표적인 모듈 번들러, module bundler다.

웹 애플리케이션은 다양한 파일로 구성되는데
웹팩에서는 이처럼 필요한 파일을 모듈이라고 하고
이 다양한 입력 모듈을 결합하여
훨씬 단순한 형태의 모듈로 변환해주는 역할을 웹팩이 하며
이 때의 결과물을 번들, bundle이라고 한다.

근데 웹팩은 빌드 모드일때와 개발 모드일때 동작 방식이 서로 다르다.

npm run build 시
public 폴더의 index.html 파일을 바탕으로
번들 파일들을 반영한 새로운 index.html을 build 폴더에 만들어준다.

npm install -g serve
serve -s build

이러면 바로 서비스할수 있다.

개발 모드로 실행하기.

Ctrl + C로 서버를 중지한 후
npm start 명령으로 서버를 구동하지않아도 돌아가는데

웹팩이 서버로 동작하기때문에 출력내용이 조금 다르다.

음.....

지피티에게 물어봤는데

  • serve : 이미 build된 것을 서비스할 뿐. 자동으로 새로고침해주지 않음.
  • npm start : 변경 사항을 감지해서 자동으로 빌드 새로고침 해줌.
    (물론 개발할 때만 주로 씀.)

늘 build 해야하나 궁금해하던 동료분이 이 부분 이슈인거같은데...

소스코드 수정해보기

개발 모드에서 핫 모듈 교체

바로바로 웹브라우저에 반영하여 생산성 높이기
이 기능을 핫모듈 교체, hot module replacement HMR이라고함.

(하지만 완벽하진 않으니 웹페이지를 간간히 새로고침도 해보도록.)

그럴듯한 가짜 데이터 만들기

Node.js 패키지는 자바스크립트로 개발된 것도,
타입스크립트로 개발된 것도 있다.

자바스크립트 패키지를 타입스크립트에서 사용하려면
@types/로 시작하는 타입 라이브러리를 추가로 설치해줘야한다.

chance, luxon 패키지

chance : 다양한 종류의 가짜 데이터 제공
luxon : 날짜 형태 수정

npm i chance luxon
npm i -D @types/chance @types/luxon

src/data 폴더에
index.ts, util.ts, image.ts, chance.ts, date.ts생성.

src/data/util.ts

가짜 데이터를 만들때 도움을 주는 함수 정의.

export const makeArray = (length: number) => new Array(length).fill(null)

export const range = (min: number, max: number): number[] =>
  makeArray(max - min).map((notUsed, index) => index + min)

export const random = (min: number, max: number): number =>
  Math.floor(Math.random() * (max - min)) + min

undefined에 map을 쓰면 컴파일 에러가 뜨니
null로 fill해둔다.

range 함수는 특정 인덱스 숫자로 채운 배열을,
random 함수는 min, max 사이 무작위 정수를 반환한다.
(이미지를 임의의 크기로 생성시 유용.)

image.ts 파일

import * as U from './util'

//prettier-ignore
export const picsumUrl = (width:number, height:number):string => `https://picsum.photos/${width}/${height}`
export const randomImage = (
  w: number = 1000,
  h: number = 800,
  delta: number = 200
): string => picsumUrl(U.random(w, w + delta), U.random(h, h + delta))

export const randomAvatar = () => {
  const size = U.random(200, 400)
  return picsumUrl(size, size)
}

url을 만든뒤,
randomimage는 각 범위에 따라 url을 제공하고
randomavartar는 정사각형 크기로 제공하고 있다.

chance.ts 파일

import Chance from 'chance'
const chance = new Chance()

export const randomUUID = () => chance.guid()
export const randomName = () => chance.name()
export const randomEmail = () => chance.email()
export const randomId = () => chance.fbid()

export const randomJobTitle = () => chance.profession()
export const randomCompanyName = () => chance.company()
export const randomSentence = (words = 5) => chance.sentence({words})
export const randomTitleText = (words = 3) => chance.sentence({words})
export const randomParagraphs = (sentences = 3) => chance.paragraph({sentences})

단순히 chance 메서드로 가짜 데이터를 만들고 있다.

date.ts

import {DateTime} from 'luxon'

export const makeRandomPastDate = () => {
  const value = new Date().valueOf()
  const n = 100000
  return new Date(value - Math.floor(Math.random() * n * n))
}

export const makeRelativeDate = (date: Date) => {
  DateTime.fromJSDate(date).startOf('day').toRelative()
}

export const randomRelativeDate = () => makeRelativeDate(makeRandomPastDate())

export const makeDayMonthYear = (date: Date) =>
  DateTime.fromJSDate(date).toLocaleString(DateTime.DATETIME_FULL)

export const randomDayMonthYear = () => makeDayMonthYear(makeRandomPastDate())

makeRandomPasteDate는
랜덤한 날짜를 만들고 있으며

randomRelativeDate 에서는
startOf('day')로 시간 중 day빼고 전부 초기화 시킨후(0으로..)
.toRelative()로 ~일전 등으로 문자열화한다.

.toLocaleString(DateTime.DATETIME_FULL)은
지역 등을 반영하여 April이나 4월 등으로 표시한다.

index.ts

export * from './util'

export * from './image'

export * from './chance'

export * from './date'

정확히 어떤 파일에서 비롯되었는지 확실하지 않아도
메서드 접근에 용이하도록 취합한다.

가짜데이터 사용해보기

src/App.tsx

import * as D from './data'

export default function App() {
  return (
    <div>
      <p>
        {D.randomName()}, {D.randomJobTitle()}, {D.randomDayMonthYear()}
      </p>
      <img src={D.randomAvatar()} height="50" />
      <img src={D.randomImage()} height="300" />
    </div>
  )
}

잘뜬당.
에러로는 img를 쓸 떄는 alt 속성으로 대체텍스트도 포함하라고 하고있다.

profile
안나경
개발자 희망...
이전 포스트

[Week13] NestJS Ch4 프로바이더

다음 포스트

[Week13] React Ch2 리액트 동작원리

0개의 댓글