fullstack-study

프로토타입 예제  1. 예제 처음과 마지막 사진 동일   텍스트 프레임 3개 겹침 1번 프레임만보이고 레이어 투명도0 또는 눈감기기      두개를 하나의 프레임으로 감싸기 컴포넌트 등록베리언트추가              # 다음 , 이전 버튼 추가1. 사진 3개, 텍스트 3개 준비   사진을 3개 나열하고 autolayout처리  텍스트 3개 내열 autolayout처리        프로토타입     프로토타입    프로토 타입

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..

상태관리 context 와 redux   # 상태 관리를 사용하는 이유  1. 컴포넌트 간의 상태 공유여러 컴포넌트가 동일한 데이터를 필요로 하는 경우, 상위 컴포넌트를 통해 상태를 전달하는 "prop drilling" 방식은 코드가 복잡해지고 관리하기 어려워집니다. 글로벌 상태 관리를 사용하면 상태를 중앙에서 관리하고 필요한 컴포넌트들이 직접 접근할 수 있어, 복잡성을 줄일 수 있습니다.2. 복잡한 상태 관리의 단순화글로벌 상태 관리 도구들은 상태를 효율적으로 관리하기 위한 다양한 패턴과 구조를 제공합니다. 예를 들어, Redux나 MobX 같은 라이브러리는 액션(action)과 리듀서(reducer)를 통해 상태를 예측 가능하고 체계적으로 관리할 수 있습니다. 이는 상태 변화의 원인을 명확하게 추적할..

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..