22.06.28 TIL NEXT.js + typescript: 초기세팅 (오늘의집 클론코딩 초기세팅)

next js 의 장점

 

• 검색앤진최적화(Search engine Optimization, SEO)
• 빠른 첫페이지 로딩 & 새로고침시 화면 번쩍임 X
• pages폴더는 라우터

next로 앱 설치

yarn create next-app --typescript

or
npx create-next-app --typescript

create-react-app은 뒤에 파일명을 붙여줘야 되지만, next로 만들게 되면 이건 따로 안해줘도 된다 ㅎㅎ

앱을 만들면서 이름 뭐로 할건지 물어보기 때문 !!

 

 

이렇게 파일들이 생겼다 ! 와우 신기 !

yarn add next react react-dom

yarn dev

yarn start가 아닌 yarn dev로 localhost:3000을 실행시킬 수 있당..

 

이제 타입스크립트 관련 패키지를 깔아주자 !

yarn add --dev typescript @types/react @types/node

이제 pages 안에 있는 _app.tsx는 아래와 같이 설정해주고,

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

index.tsx

import React, { useState } from "react";
import Head from "next/head";

export default function Home() {
  const [text, setText] = useState<string>("자바스크립트");

  setTimeout(() => {
    setText("타입스크립트");
  }, 1000);

  return (
    <div className="container">
      <div>
        <span>{text} 적용 완료</span>
      </div>
    </div>
  );
}

이렇게 하면 타입스크립트 적용 완료이다 !!!

 

이제 오늘의집 클론코딩하며 ㅎㅎ열공빡공이다 !!

 

오늘의집 클론코딩..회의 사항..

사용스택 : redux-toolkit / react-query / styled-components / typescript / next.js

 

리덕스 툴킷 사용을 위해 패키지 설치

yarn add react-redux @types/react-redux @reduxjs/toolkit

스타일드 컴포넌트 패키지 설치

yarn add styled-components @types/styled-components

리액트 쿼리 패키지 설치

yarn add react-query

폴더구조 ㅠㅠ

 

api

비동기는 항상 사용하던 Axios를 기본으로 할것 같다.api 폴더 하위엔 Axios Instance 와 각각 api 명세를 둘 생각이다.(추가적으로 React-query는 좀 스터디가 필요해보이고 필요성이 느껴진다면 적용할 생각이다.)

components (Presentation Component)

• Atomic Design Pattern➡️ 말 그래도 작은 단위의 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 지속적으로 개발하기 용이하게 하는 방식이다.아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.
  • 🍅 Atom(원자)
    • #Generic #Abstract
    • 원자은 진짜 말그대로 가장 작은 단위의 컴포넌트이다.
    • 원자는 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다.
    • 때문에 다양한 state를 다양하게 가지고 있어야하며 추상적이지만 최대한 포용할 수 있게 되어야 설계 되어야 한다. Ex) button: disabled, hover, different sizes, etc.
    • 원자는 마진이나 위치값을 가지고 있지 않는다.
  • 🥫 Molecule(분자)
    • #LittleComplex
    • 원자를 엮어 조금 복잡한 단위의 분자가 생성된다.
    • 분자는 분자만의 프로퍼티를 가지고 있을 수 있고 이를 활용해 원자에 기능을 만들어 줄 수도 있다.
    • 분자가 원자의 위치값을 지정하기도 한다.
  • 🍝 Organism(유기체)
    • #MoreComplex
    • 유기체는 분자를 엮어 만들어서 생성되고 때로는 분자가 되지 않은 원자가 엮이기도 한다.
    • 유기체가 완성되면 컴포넌트가 최종 모습을 가지게 된다.
    • 하지만 여전히 contents에 따라 최대한 재사용성 높게 개발하는 것이 중요하다!
    • 유기체는 분자와 원자의 위치값을 조정한다!
  • 📄 Template(템플릿)
    • #Layout #NoStyling
    • 템플릿은 만들어진 유기체와 컴포넌트의 positions, placements을 정해주는 역할을 한다.
    • 단, 템플릿에는 Styling이나 Color는 들어가지 않는다.
    • 템플릿의 역할은 페이지의 그리드를 정해주는 역할 뿐이다.
  • 🍱 Page(페이지)
    • #Final
    • 페이지는 템플릿을 이용해서 각 그리드에 컴포넌트를 그려서 디스플레이한다.
• Atomic Design 에서는 5개의 구분된 단계가 존재합니다.
• ➡️ 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식을 의미합니다.
• MVC 디자인 패턴
  1. 사용자는 애플리케이션과 상호작용합니다.
  2. 컨트롤러의 이벤트 핸들러가 작동됩니다.
  3. 컨트롤러는 모델로부터 데이터를 요구하고, 그 결과를 뷰로 전달합니다.
  4. 뷰는 데이터를 사용자에게 보여줍니다.
  • Model: 지식, Data 관리
  • View: 시각적 표현, 화면 렌더링 & UI
  • Controller: 사용자와 시스템 간 상호작용 담당, 데이터와 비즈니스 로직 사이의 상호동작(이벤트 핸들링)

리액트 쿼리

- basic: react-query의 기본 기능(fetching)을 구현한 파일들을 담고 있습니다.
- pagination:react-query로 pagination을 구현한 파일들을 담고 있습니다.[다음장에서 다루겠습니다.]
- Server: Fetcher 파일에는 api 주소를 모두 저장하고 있는 파일입니다.

styles

Global Styles 폴더 (컴포넌트 개별 css 는 각 컴포넌트 폴더에 module로 관리한다.)

types

type 관리 폴더

utils

공통 함수 폴더

아토믹 디자인 패턴으로 하니 마니 논의하다가 결국 ㅠㅠ더 공부하자고 .. 그래도 컴포넌트 재사용을 위한 코드를 짜기로 약속했다 !!!!!

 

 

오늘의집클론코딩깃헙🐣