'코딩 공부 (frontend)/react' 카테고리의 글 목록

widget

Next.js?

React를 기반으로 하는 Full-Stack(Frontend + Backend) 웹 애플리케이션 프레임워크

즉, Next.js만 써도 Client + Server 동시 개발 가능

=> 개발 환경 통합

=> 개발 속도 ↑

=> Client , Server 따로 배포할 필요 X

프레임 워크?

Next.js는 개발에 필요한 대부분의 기능이 갖춰져 있음

=> 개발 환경 설정 & 라이브러리 설치할 필요 X

React

CSR을 통해 SPA을 구축하는 라이브러리로,

페이지의 전환 없이 한 페이지에서 바뀐 부분에 대해서만 화면 전환이 이루어진다.

처음에는 빈 html 파일을 보여주고 그 이후에 필요한 소드들을 다운로드해서 보여준다.

=> 초기 로딩 속도가 느리다.

=> 처음에 빈 html을 보여주기 때문에 검색 엔진 최적화(SEO) 측면에서 불리하다.

Next.js를 사용한다면?

pre-rendering을 통해

SSR(서버 사이드 렌더링) or SSG(정적 사이트 생성)를 가능하게 해줌

CSR(클라이언트 사이드 렌더링)

Client Side Rendering의 약자로,

클라이언트 쪽에서 렌더링을 한다는 뜻

초기 HTML과 CSS를 클라이언트에서 받아와서 렌더링하고

JavaScript를 통해 동적인 데이터를 가져오는 방식이다.

SSR(서버 사이드 렌더링)

Server Side Rendering의 약자로,

서버 쪽에서 렌더링을 한다는 뜻

웹 사이트의 일부 또는 전체가 클라이언트로 전송되기 전에 서버 측에서 렌더링 되도록 하는 방식으로,

주로 사용자마다 페이지의 데이터가 변경되어야 하는 페이지에서 사용한다.

pre-rendering?

Next.js는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링 한다.

=> 사용자 경험 향상, 검색 엔진 최적화(SEO)

방식은 두 가지

SSG(Static-Site Generation)

빌드 타임에 HTML에 생성되어 요청이 들어올 때마다 재사용하게 해준다.

SSR(Server-Side Rendering)

요청이 들어올 때마다 HTML을 생성한다.

사진 출처 : 오즈코딩스쿨 리액트 강의

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Bundling & Code Splitting (0)	2024.08.14
useMemo, useCallback, memo (0)	2024.08.13
Redux로 전역상태 관리하기 (0)	2024.08.12
Context API (0)	2024.08.09
React 외부 구현 상태관리 (0)	2024.08.08

widget

번들링(Bundling)?

여러 개의 파일을 하나의 파일로 합치는 것.

ex) html, css, javascript 등...

효과

- HTTP 요청의 수를 줄여 속도 향상

- 코드를 압축해 파일 크기 축소

- 사용되지 않는 코드 제거로 최적화

Vite -> Rollup

CRA -> Webpack

코드스플리팅(Code Splitting)이란?

코드를 여러 개의 작은 부분으로 나누는 것.

=> 파일을 분리하는 작업

효과

- 초기 로딩 속도 개선

- 불필요한 코드 로드 방지

- 데이터 비용 절감

- 번들 파일의 크기 줄임

React.lazy와 Suspense를 이용한 코드 스플리팅

대규모 애플리케이션에서 성능을 최적화하는 효과적인 방법으로,

사용자가 필요로 하는 컴포넌트만 로드하여 초기 로딩 시간을 줄이고

사용자 경험을 개선한다.

먼저 기존 작업 파일에 lazy 작업을 해준다.

// React.lazy
const Main = lazy(() => import("./page/Main"));
const Detail = lazy(() => import("./page/Detail"));
const Search = lazy(() => import("./page/Search"));

// 일반 적인 import
// import Main from "./page/Main";
// import Detail from "./page/Detail";
// import Search from "./page/Search";

lazy를 사용 시 컴포넌트가 필요한 시점에만 로드를 하는데

비동기적으로 로드하기 때문에 느리다.

Suspense를 사용해

lazy로 로드 된 컴포넌트가 로드되는 동안 보여줄 대체 UI를 표시해 준다.

모든 lazy 컴포넌트는 Suspense로 감싸져 있어야 한다.

Code Splitting을 통해 번들 크기를 줄이고, 초기 로딩 속도를 개선해 보자

우선 React.lazy before / after를 비교해 보겠다.

먼저 빌드를 해준다.

npm run build

코드 번들링: 애플리케이션의 JavaScript, CSS, HTML 파일을 번들로 묶는다..
최적화: 코드 스플리팅, 트리 쉐이킹, 압축 등을 통해 성능을 최적화한다.
출력: 결과를 dist 디렉터리에 저장한다.

React.lazy before 보다 after가 js 파일이 훨씬 늘어난 게 보인다.

코드 스플리팅(Code Splitting)

Vite와 Rollup을 통해 빌드 과정에서 모듈을 청크로 나누는 설정.

vite.config.js 파일

plugins 아래에 아래 build 코드를 추가해 준다.

 build: {
    outDir: "docs",
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.indexOf("node_modules") !== -1) {
            const module = id.split("node_modules/").pop().split("/")[0];
            return `vendor-${module}`;
          }
        },
      },
    },
  },

코드 스플리팅 결과

JavaScript 청크로 동적 import로 로드된 모듈과 외부 라이브러리를 포함한

여러 개의 JavaScript 파일이 생긴 걸 볼 수 있다.

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Next.JS? (0)	2024.08.20
useMemo, useCallback, memo (0)	2024.08.13
Redux로 전역상태 관리하기 (0)	2024.08.12
Context API (0)	2024.08.09
React 외부 구현 상태관리 (0)	2024.08.08

widget

useMemo

성능 최적화를 위해 사용되는 React 훅

컴포넌트가 리렌더링 될 때마다 계산된 값을 메모이제이션한다.

의존성 배열이 변경되지 않는 한 이전 계산 결과값을 재사용하며,

그렇지 않은 경우 기존 함수의 결과값을 그대로 반환한다.

=> 불필요한 계산 방지 & 렌더링 성능 개선

useCallback

함수를 메모이제이션하는 데 사용 & 성능 최적화를 위해 사용되는 React 훅

의존성 배열 중 하나라도 변경되면 메모이제이션된 콜백 함수 반환

=> 컴포넌트가 렌더링 될 때 불필요한 함수 재생성을 방지한다.

함수를 반환한다는 점에서 값을 반환하는 useMemo와 다르다.

메모이제이션(Memoization)?

useMemo와 useCallback 같은 메모이제이션 훅을 통해 최적화를 위해 사용

연산량이 많은 함수의 호출 결과를 저장해 두었다가, 같은 입력 값으로 함수를 호출하면

새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환

=> 반환 시간 절약 & 불필요한 중복 연산 x

React.memo

React의 고차 컴포넌트(Higher-Order Component)

함수형 컴포넌트의 성능을 최적화하는 데 사용

React.memo는 props 변화에만 영향을 준다.

=>컴포넌트의 props가 변경되지 않는 한 리렌더링 x

props가 변경되지 않으면, React.memo는 이전의 렌더링 결과를 재사용한다.

자식 컴포넌트가 props에 의존하고, 부모 컴포넌트가 자주 렌더링 되는 경우 많이 쓴다.

요약

useMemo

함수 호출 결과 저장

계산된 값을 메모이제이션하고, 불필요한 재계산을 방지하는 방법

useCallback

함수 저장

함수가 불필요하게 새로 생성되지 않도록 최적화하는 방법

React.memo

컴포넌트 저장

컴포넌트가 props가 변경되지 않는 한 리렌더링되지 않게 하는 방법

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Next.JS? (0)	2024.08.20
Bundling & Code Splitting (0)	2024.08.14
Redux로 전역상태 관리하기 (0)	2024.08.12
Context API (0)	2024.08.09
React 외부 구현 상태관리 (0)	2024.08.08

widget

Redux?

전역 상태 관리를 위한 라이브러리

모든 상태를 하나의 중앙 저장소(Store)에서 관리한다.

복잡한 데이터 흐름이나 상태 관리가 필요할 때 사용하면 좋다.

Redux 데이터 흐름

=> FLUX 패턴

Counter 예시

+,-버튼이 있는 counter인데 UI에서 +버튼을 누르면

{ type: 'INCREMENT' } 문자열을 담은 Action 객체가 만들어진다.

만들어진 Action 객체는 Dispatch()로 전달되고

이 Dispatch()는 Reducer()로 Action 객체를 전달을 해준다.

Reducer는 Action 안에 있는 값을 해석해

Store에 담긴 상태를 업데이트한다.

변경된 상태에 맞춰 UI가 리렌더링 된다.

Action

상태를 어떻게 변화시킬 것인지

내용이 담겨있는 객체

액션 객체

{
  type: 'INCREMEMT'
  payload: 5
}

액션 생성자

const increment = (num) => ({
  type: 'INCREMEMT'
  payload: num
})

Dispatch

Action 객체를

Reducer로 넘겨주는 역할을 하는 함수

액션 객체

dispatch({
  type: 'INCREMEMT'
  payload: 5
})

액션 생성자

dispatch(increment(5))

Reducer

리턴하는 값이 새로운 상태가 되는 함수

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMEMT':
      return state + action.payload
    case 'DECREMEMT':
      return state - action.payload

    // 기본값 유지
    default:             
      return state
  }
}

Reducer가 여러 개면?

combineReducers()로

묶어서 하나로 만들 수 있음

const rootReducer = combineReducers({
  counterReducer, anyReducer, ...
})

Store

Redux의 전역 상태 저장소

createStore()에 Reducer를 전달해서 생성

const store = createStore(rootReducer)

구성 요소를 다 만든 후

React-Redux에서 제공하는 기능을 사용한다.

App과 전역 상태 저장소 연결

=> <Provider store={ store }>

상태 저장소에서 상태 꺼내서 사용

=> useSelector()

dispatch() 만들어서 사용

=> useDispatch()

Redux-Thunk?

Action으로 객체 말고도 함수를 사용할 수 있게 해주면서

Redux에서 비동기 처리를 할 수 있게 해주는 미들웨어

설치 방법

npm install redux-thunk

사용 방법

applyMiddleware(thunk)를 사용하여 redux-thunk를 Store에 적용

const store = createStore(rootReducer, applyMiddleware(thunk))

createStore 함수를 사용하여 스토어를 생성

store의

첫 번째 인자로 스토어의 상태를 관리할 Reducer를 가졌다면,

두 번째 인자로 redux-thunk 미들웨어를 스토어에 적용한다.

applyMiddleware를 가져와서

redux-thunk의 thunk를 applyMiddleware의 인자로 전달해 준다.

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Bundling & Code Splitting (0)	2024.08.14
useMemo, useCallback, memo (0)	2024.08.13
Context API (0)	2024.08.09
React 외부 구현 상태관리 (0)	2024.08.08
React 내부 구현 상태관리 (1)	2024.08.08

widget

Context API?

props 대신 component tree를 통해 곧바로 컴포넌트에 전달하는 방식

props drilling을 회피하기 위한 용도로 사용한다.

다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 할 때 주로 사용한다.

Context API를 useState 및 useReducer를 함께 사용하는 편이다.

컴포넌트가 상태 관리를 공유할 수 있도록 트래킹을 도와주고,

실제 상태 변경은 useState 및 useReducer 등의 hook 이 진행한다.

Context API 사용법

먼저 Context를 생성해 주어야 한다.

createContext

전역 상태를 만들어준다.

const Mycontext = createContext(초기값);

Provider

전역 상태를 연결해 준다.

Provider를 사용하여 생성한 context를 하위 컴포넌트들이 데이터를 받을 수 있도록 해준다.

<MyContext.Provier value={데이터값} />

Provider로 하위 컴포넌트들을 감싸주면

모든 하위 컴포넌트들이 Context에 접근 가능하다.

useContext()

전역 상태를 가져와 준다.

useContext() 훅

: createContext() 함수 호출로 생성된 Context 객체를 인자로 받아

현재 Context 값을 리턴한다.

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div> // Provider에서 value로 전달한 데이터 출력
    )
}

** useContext() 훅 사용 시 파라미터로 Context 객체를 넣어줘야 한다 **

Context API를 활용한 counter 예시

* counterContext.jsx

Context 생성

const counterContext = createContext();

Provider 컴포넌트

CounterProvider는 counter 상태와 setCounter 함수를 관리하며,

counterContext.Provider를 통해 자식 컴포넌트에 제공한다.

value 값에 { counter, setCounter }를 설정,

이 값을 모든 자식 컴포넌트가 접근할 수 있게 한다.

export const CounterProvider = ({ children }) => {
    const [counter, setCounter] = useState(0);

    return (
        <counterContext.Provider value={{ counter, setCounter }}>
            {children}
        </counterContext.Provider>
    );
};

Context 사용하기

useCounter 훅을 사용하여

위에서 생성 했던 const counterContext = createContext();의

counterContext(상태저장소)에서 상태와 함수를 가져온다.

function useCounter() {
    return useContext(counterContext);
}

* App.jsx

useCounter 훅을 사용하여 counter와 setCounter를 가져온다.

import { useCounter } from '../context/counterContext';

export function App() {
  const { counter, setCounter } = useCounter();

  return (
    <>
      <div>counter: {counter}</div>
      <button onClick={() => setCounter(prev => prev + 1)}>+</button>
      <button onClick={() => setCounter(prev => prev - 1)}>-</button>
    </>
  );
}

* main.jsx

CounterProvider에서 제공하는 걸 App 컴포넌트와 그 자식들이 이 상태를 공유 가능하다.

createRoot(document.getElementById('root')).render(
  <CounterProvider>
    <App />
  </CounterProvider>,
)

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

useMemo, useCallback, memo (0)	2024.08.13
Redux로 전역상태 관리하기 (0)	2024.08.12
React 외부 구현 상태관리 (0)	2024.08.08
React 내부 구현 상태관리 (1)	2024.08.08
Tailwind CSS의 장단점&익스텐션 추천 (0)	2024.08.07

widget

• React 외부에서 상태를 관리하는 방법
• Redux & Redux Toolkit 이란?
• Redux & Redux Toolkit 사용법

전역 상태 (Global State)

React 외부에서 상태를 관리하는 방법

프로젝트 전체의 상태 관리를 총괄하는 것이다.

전역에서 관리하기 때문에, 어떤 컴포넌트에서든 상태 값을 반영하고, 변경시키는 것이 가능하다.

ex)

Redux

Redux Toolkit

Recoil

MobXa

Zustand

Jotai

Redux & Redux Toolkit?

Redux

전역 상태 관리를 위한 라이브러리

모든 상태를 하나의 중앙 저장소(Store)에서 관리한다.

복잡한 데이터 흐름이나 상태 관리가 필요할 때 사용하면 좋다.

Redux Toolkit

초기 설정과 코드량이 많아질 수 있는 Redux를 보완하기 위해 만들어졌다.

코드 유지 보수성을 향상시킨다.

Redux & Redux Toolkit 사용법

Redux 설치방법

npm install redux react-redux

Redux Toolkit 설치방법

npm install @reduxjs/toolkit

Counter 상태 관리 예시

// Redux의 createStore 함수로 Store 생성
import { createStore } from 'redux';

// counter 함수 = reducer
// 현재 상태(state)와 액션(action)을 받아서 다음 상태를 계산하여 반환
function counter(state = 0, action) { // 초기값 : 0
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }

// 앱의 상태를 보관하는 Redux 저장소 만듬
let store = createStore(counter)

// subscribe()를 이용해 Store 상태가 변경될 때마다 호출
store.subscribe(() => console.log(store.getState())))

// dispatch()를 이용해 액션(action)발생
// 내부 상태 변경
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Redux로 전역상태 관리하기 (0)	2024.08.12
Context API (0)	2024.08.09
React 내부 구현 상태관리 (1)	2024.08.08
Tailwind CSS의 장단점&익스텐션 추천 (0)	2024.08.07
Tailwind CSS 설치&기본 세팅 (0)	2024.08.07

widget

• React 내부에서 상태를 관리하는 방법
• Context API란?
• Context API 사용법

로컬 상태 (Local State)

React 내부에서 상태를 관리하는 방법

특정 컴포넌트 내에서 데이터를 관리,

다른 컴포넌트와 공유되지 않는다.

ex)

useState

Context API

Context API?

props 대신 component tree를 통해 곧바로 컴포넌트에 전달하는 방식

props drilling을 회피하기 위한 용도로 사용한다.

다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 할 때 주로 사용한다.

Context API를 useState 및 useReducer를 함께 사용하는 편이다.

컴포넌트가 상태 관리를 공유할 수 있도록 트래킹을 도와주고, 실제 상태 변경은 useState 및 useReducer 등의 hook 이 진행한다.

Context API 사용법

먼저 Context를 생성해 주어야 한다.

createContext 함수를 사용한다.

const Mycontext = createContext(초기값);

Provider

Provider를 사용하여 생성한 context를 하위 컴포넌트들이 데이터를 받을 수 있도록 해준다.

<MyContext.Provier value={데이터값} />

Provider로 하위 컴포넌트들을 감싸주면

모든 하위 컴포넌트들이 Context에 접근 가능하다.

Consumer

value를 Provider의 하위 컴포넌트들에게 전달하면 하위 컴포넌트들은 이 값을 사용하는데,

데이터를 소비(구독) 한다는 의미를 가져 Consumer 컴포넌트다.

<MyContext.Counsumer>
    {value => <p>내 이름: {name}</p>}
</MyContext.Counsumer>

Consumer 컴포넌트 예시

const Mycontext = createContext(초기값);

function App() {
  return (
    <MyContext.Provier value={데이터값}>
      <My />
    </MyContext.Provier>
  )
};

function My(props) {
  return (
    <MyContext.Counsumer>
      {value => <p>내 이름: {name}</p>}
    </MyContext.Counsumer>
  )
};

++ useContext()

Consumer 컴포넌트보다 더 추천하는 방법이다.

useContext() 훅

: createContext() 함수 호출로 생성된 Context 객체를 인자로 받아

현재 Context 값을 리턴한다.

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div>
    )
}

** useContext() 훅 사용 시 파라미터로 Context 객체를 넣어줘야 한다 **

useContext() 훅 예시

const Mycontext = createContext(초기값);

function App() {
  return (
    <MyContext.Provier value={데이터값}>
      <My />
    </MyContext.Provier>
  )
};

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div>  // Provider에서 value로 전달한 데이터 출력
    )
}

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Context API (0)	2024.08.09
React 외부 구현 상태관리 (0)	2024.08.08
Tailwind CSS의 장단점&익스텐션 추천 (0)	2024.08.07
Tailwind CSS 설치&기본 세팅 (0)	2024.08.07
Styled-Components (0)	2024.08.06

widget

Tailwind CSS의 장단점

장점

- CSS 코드를 직접 작성하지 않아도 된다.

=> 개발 속도가 빨라진다.

- 체계적이고 일관된 디자인 사용이 가능하다.

- 클래스 이름을 만들 필요가 없다.

단점

- 초기 세팅이 복잡하다.

- 코드가 안 이쁘다.

- CSS 크기가 커질 수 있다.

VSCode 추천 익스텐션

Tailwind CSS IntelliSense 익스텐션

공식 익스텐션으로 자동완성 등 편리하게 코드를 작성할 수 있다.

이런 식으로 font-를 쳤는데 추천을 해주는데 클릭 시 자동 완성이 된다.

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

React 외부 구현 상태관리 (0)	2024.08.08
React 내부 구현 상태관리 (1)	2024.08.08
Tailwind CSS 설치&기본 세팅 (0)	2024.08.07
Styled-Components (0)	2024.08.06
Styled-Components 사용 방법 (0)	2024.08.06

widget

Tailwind CSS란 ?

사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크(CSS 프레임워크)다.

Utility-First란 ?

미리 세팅된 유틸리티 클래스를 활용해 HTML 코드 내에서 CSS를 적용시키는 것

Tailwind CSS 설치 방법

사용 언어별 추천 설치 방법이 있다.

아래 공식 사이트 참고.

https://tailwindcss.com/docs/installation/framework-guides

우리는 vite를 사용하기 때문에 먼저 react를 설치해 주고,

Tailwind CSS를 설치해 준다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설치 후에 세팅이 필요하다.

먼저 tailwind.config.js에서 간단한 설정이 필요하다.

/** @type {import('tailwindcss').Config} */

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

여기서 content 부분에 이 코드를 넣어주면 된다.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

그다음에 index.css에서 이 코드를 넣어준다.

@tailwind base;
@tailwind components;
@tailwind utilities;

초기 세팅은 끝났다.

이제 Tailwind CSS 공식 문서를 보면서 필요한 Classname을 가져다 사용하면 된다.

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

React 내부 구현 상태관리 (1)	2024.08.08
Tailwind CSS의 장단점&익스텐션 추천 (0)	2024.08.07
Styled-Components (0)	2024.08.06
Styled-Components 사용 방법 (0)	2024.08.06
SCSS의 중첩 규칙 이해 및 활용 (0)	2024.08.05

widget

Styled-Components란?

JavaScript와 CSS를 결합하여 컴포넌트 기반 스타일링 가능

=> CSS-in-JS

컴포넌트를 더 깔끔하고 모듈화된 스타일링 코드로 관리 가능

Styled-Components 장단점

장점

- CSS도 컴포넌트화 할 수 있다.

- CSS와 JS의 상호작용이 쉽다.

- Class 이름을 자동으로 지어준다.

- SSR을 지원하여 초기 렌더링 성능 개선이 가능하다.

단점

- SCSS 코드를 CSS로 변환하는 과정이 필요해서 조금 더 느리다.

- Clsss 이름이 안 이쁘다.

- JS의 크기가 커진다.

CSS-in-JS?

JavaScript를 사용하여 CSS를 작성하고 관리하는 방법이다.

- 각각의 컴포넌트에 스타일을 지정할 수 있어 CSS 이름 충돌을 방지한다.

- JavaScript의 변수나 조건문 등을 활용하여 스타일을 동적으로 조작이 가능하다.

ex) props

- CSS를 모듈화하고 유연하게 작성할 수 있다.

CDD(Capability-driven development)?

- CDD는 사용자의 요구사항을 충족시키기 위해 기능을 설계하고 개발

=> 기능 중심 개발 & 사용자 경험 중심

- Styled-Components를 통해 개발된 컴포넌트는 각각 독립적으로 스타일 적용

=> 반복적이고 짧은 개발 주기

- 기능을 독립적이고 재사용 가능한 단위로 개발(컴포넌트 단위로 스타일을 정의하고 관리)

=> 모듈화& 재사용성

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Tailwind CSS의 장단점&익스텐션 추천 (0)	2024.08.07
Tailwind CSS 설치&기본 세팅 (0)	2024.08.07
Styled-Components 사용 방법 (0)	2024.08.06
SCSS의 중첩 규칙 이해 및 활용 (0)	2024.08.05
SCSS의 변수 사용법 (0)	2024.08.05

Total