fullstack-study

react-datepicker  , dateformat   1. react-datepicker   https://www.npmjs.com/package/react-datepicker react-datepickerA simple and reusable datepicker component for React. Latest version: 6.9.0, last published: a month ago. Start using react-datepicker in your project by running `npm i react-datepicker`. There are 3043 other projects in the npm registry using react-datepiwww.npmjs.com  설치 npm in..

router 라우터  라우터란 https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85 라우팅 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는ko.wikipedia.org  yarn add react-router-dom https://reactrouter.com/en/main Home v6.23.1 | React Router reactrouter.com    SPA(Single Page Application) 싱글페이지라고 부르는 이유는 유저가 처음 접속했을때 구체적인 data..

react style 1. bootstraphttps://react-bootstrap.netlify.app/ React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app https://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app 2. materialhttps://mui.com/ MUI: The ..

클래스 (class)  클래스(class) :객체를 생성하기 위한 탬플릿 역할을 합니다.OOP(Object Oriented Programming) 객체지향 프로그래밍Object(객체)  : 사람, 동물, 자동차, 물건Object Modeling(객체 모델링)  : 현실 세계 있는 독립적인 객체를 소프트웨어를 통해서 형상화(모델링) Object Relationship(객체 간의 관계)- 집합관계: 서로 포함하고 포함되는 관계 - 사용관계: 객체 간의 상호 작용 - 상속관계: 부모, 자식 객체지향의 특징1. 캡슐화 2. 상속 3. 다형성 클래스와 객체1. 객체를 위한 설계도 2. 객체는 클래스가 인스턴스화(실체화) 된 것 클래스의 생성자    1. 생성자를 정의하지 않으면 컴파일러는 기본생성자를 자동으로 만..

적응형 / 반응형  적응형 (Adaptive):적응형 디자인 또는 시스템은 사용자의 행동이나 환경의 변화에 맞춰 자동으로 조정됩니다.이는 일반적으로 더 넓은 범위의 상황에 대응하기 위해 설계됩니다. 사용자의 프로필, 환경 조건, 또는 기타 맥락적 요소에 따라 변화합니다.PC / MOBILE / TABLET 별도로 작업반응형 (Responsive):반응형 디자인은 주로 디스플레이나 레이아웃이 다양한 디바이스 크기와 형태에 맞춰 자동으로 조정되는 것을 의미합니다.주로 웹 디자인이나 앱 디자인에서 사용되며, 사용자가 어떤 디바이스를 사용하든 일관된 경험을 제공합니다.예를 들어, 반응형 웹사이트는 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 적절하게 표시될 수 있도록 레이아웃이 조정됩니다.따라서, 적응형..

useEffect, useLayoutEffect, useReducer , useMemo, useCallback   1. useEffect useEffect는 컴포넌트가 렌더링 된 후 비동기적으로 실행됩니다. 브라우저가 화면을 업데이트한 후에 실행되므로, 레이아웃 계산이나 DOM 조작보다는 데이터 가져오기, 구독 설정, 타이머 설정 등에 적합합니다. 2. useLayoutEffectuseLayoutEffect는 컴포넌트가 렌더링 된 후, 브라우저가 화면을 업데이트하기 전에 동기적으로 실행됩니다. 따라서 레이아웃 계산, DOM 측정 또는 동기적인 DOM 조작이 필요한 경우에 적합합니다. 실행 시점:useEffect: 컴포넌트가 렌더링되고 화면이 업데이트된 후 비동기적으로 실행됩니다.useLayoutEffec..

React Swiper 1. 설치 npm i swiper 2. // Import Swiper React componentsimport { Swiper, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swiper/css';export default () => { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... );};  https://swiperjs.com/demos Swiper DemosSwiper..

useRef 1. useRefuseRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다. const ref = useRef(initialValue) 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능합니다.useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능합니다.​ 공식문서 내용useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.  useRef 설명useRef는 React에서 제공하는 Hook 중 하나로, 주로 다음과 같은 두 가지 용도로 사용됩니다:DOM..

props , PropTypes, map , events, useState 1. props props 는 Properties 의 줄임말 부모 컴포넌트에서자식 컴포넌트에 값을 전달할때 자식 컴포넌트에서 부모의 값을 받아올때 JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있음 , 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달 React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐릅니다. 하위 컴포넌트는 전달 받은 props를 읽기만 가능하고, 쓸 수 없습니다. (READONLY) https://ko.react.dev/learn/passing-props-to-a-component 컴포넌트에 props 전달..

fullpage.js  https://alvarotrigo.com/fullPage/ko/ fullPage scroll snapping. Create full screen pages fast and simpleMouse wheel snap to sections. Fast and simple to use.alvarotrigo.com # 옵션  https://github.com/alvarotrigo/fullPage.js?tab=readme-ov-file#options GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simplefullPage plugin by Alvaro Trig..