냥냠

저번에 개발한 넷플릭스 웹사이트를 어느 기기를 사용하더라도 자연스럽게 동작할 수 있도록 반응형으로 구현할 생각이다. 그 전에 어떤 방법들이 있는지 먼저 살펴보자 💪🏻 1. fluid 디자인반응형이라고 하면 가장 생각하기 쉬운 비율로 컴포넌트 너비나 높이를 설정하는 것이다. 이를 fluid 디자인이라고 한다. Fluid 웹 디자인은 페이지 내 엘리먼트들의 너비(width)를 화면 또는 브라우저 창의 너비에 비례하여 설정합니다. Fluid 웹사이트는 현재 뷰포트의 너비에 따라 확장 또는 축소됩니다. Fluid 디자인은 스크린 크기가 다른 여러 환경에서도 웹 사이트의 사용성을 높이는 데 유용합니다. fluid 디자인 외에도 fixed , responsive, adaptive 디자인 등 다양한 레이아웃 디자..

pagination을 구현하기 위한 방법  1. mui - pagination mui의 컴포넌트는 페이지네이션을 위한 UI만 제공하고데이터를 페이지별로 나누는 로직은 별도로 구현해줘야 한다. 🍄 간단한 pagination 로직 🍄 - 한 페이지 당 표시되는 게시물 개수 : a- 총 게시물 개수 : N 이 정보가 있으면 N / a 의 몫을 반올림하면 총 페이지의 개수까지 구해진다.  페이지 번호를 기준으로 표시해줘야 할 게시물들의 범위 ( 해당 페이지의 첫 게시물의 위치 ) 예를 들어1번째 페이지의 첫 게시물의 위치는 (1 - 1) * a = 02번째 페이지의 첫 게시물의 위치는 (2 - 1) *a = a3번째 페이지 => 2a, 4번째 페이지 => 3a  ...  현재 페이지 상태 관리 ( use..

redux-toolkit의 사용 방법넷플릭스 클론 코딩 중에 리덕스 관리를 기존 리덕스에서 리덕스 툴킷으로 바꾸는 과정 기록 * 설치 코드npm install redux react-redux @reduxjs/toolkityarn add redux react-redux @reduxjs/toolkit  기존의 리덕스를 사용할 때에는 몇 가지 문제점이 있었다. - 스토어 복잡성 - 반복되는 코드 작성 - 다양한 패키지 설치 등등 여러 가지 이유로 기존의 리덕스보다 리덕스 툴킷을 이용하면 더 좋다고 한다. 리덕스 툴킷에 포함된 기능 - configureStore : 기존의 createStore 대신 간단하게 Store를 만들 수 있게 해준다.  - createReducer : 기존의 switch문 대신 간단하게..

Redux 라이브러리 동등한 컴포넌트 사이에서는 어떤 함수를 공유할 수는 없다.-> 부모가 props 를 통해 자식에게 주는 건 가능 (일방적) 부모에서 자식으로 O자식끼리 공유 X자식이 부모 X--> 단방향 통신 + props 남발으로 너무 복잡해짐  Store(리덕스)에 State를 저장해서 어느 컴포넌트에서든 가져올 수 있게 한다.  component ---useDispatch --> Action -----> Reducer -----> Store Store -------useSelector----->component Redux 초기세팅 //설치 npm install redux, npm install react-redux//index.js에서 리덕스로 감싸주기 + store 만들기import { P..

//1. 링크를 추가해서 다른 페이지로 이동 homepage go to aboutpage //2. 버튼을 추가해서 다른 페이지로 이동 - useNavigateimport { useNavigate } from 'react-router-dom';const navigate = useNavigate();const goTopage = () => { navigate("/");};return( go to page )1. 라우터 (router) - 스위치  여러 개의 페이지 만들기 (1) 설치 : npm install react-router-dom@6//index.js에서 app전체를 라우터로 감싸기import {BrowserRouter} from 'react-router-dom'; //A..

react 기초   1. component로 코드 재활용App.jsfunction App() { return( box1 aa )}이렇게 box 를 여러개 만들어주고 싶을 땐 Box.js 라는 컴포넌트를 생성한다. Box.jsimport React from 'react'const Box = () => { return ( )}export default BoxBox를 export해주고 App.jsimport Box from "./Box.js";function App() { return ( //간단한 코드로 여러 개를 가져올 수 있다. )}App.js에서 Box 컴포넌트를 받아올 수..

보호되어 있는 글입니다.