fullstack-study

mbti 유형검사  MBTI(Myers-Briggs Type Indicator)는 심리 유형 이론을 기반으로 사람들의 성격을 16가지 유형으로 분류하는 성격 유형 검사입니다.  MBTI의 16가지 성격 유형MBTI 성격 유형은 4개의 차원에서 각 성향을 조합하여 총 16가지로 나눌 수 있습니다:E (외향) vs. I (내향)S (감각) vs. N (직관)T (사고) vs. F (감정)J (판단) vs. P (인식)각 MBTI 유형의 의미E (Extraversion, 외향): 외부 세계와의 상호작용을 중시하고 사람들과 교류하는 것을 좋아합니다.I (Introversion, 내향): 내면 세계에 집중하며 혼자만의 시간을 중요시합니다.S (Sensing, 감각): 현실적이고 사실적인 정보를 중시하며, 경험과 ..

반응형   1. styled폴더  - media.jsconst sizes = { mobile: '480px', tablet: '768px', desktop: '1024px',};export const media = { mobile: `(max-width: ${sizes.mobile})`, tablet: `(max-width: ${sizes.tablet})`, desktop: `(max-width: ${sizes.desktop})`,};  desktop: 2560pxlaptopL: 1440pxlaptop: 1024pxtablet: 768pxmobileL: 425pxmobileM: 375pxmobileS: 320px   2. import styled from 'styled-c..

React로 CRUD 원리 이해 투두 리스트 (To-do list) 애플리케이션을 기준으로 CRUD 작업을 설명. 투두 리스트는 할 일을 관리하는 간단한 애플리케이션으로, 각 작업이 CRUD 작업에 해당하는 방식으로 구현될 수 있습니다. CRUD는 Create, Read, Update, Delete의 약자Create: 새로운 할 일을 추가Read: 추가된 할 일 목록을 화면에 표시Update: 기존 할 일의 완료 상태를 변경 또는 할 일 내용을 수정Delete: 특정 할 일을 삭제 1. Create (생성)할 일을 새롭게 추가하는 작업입니다. 사용자가 새로운 할 일을 입력하면 이를 저장하여 화면에 표시하는 기능입니다. 예사용자가 입력창에 "React 공부하기"라는 할 일을 작성한 후, "추가" 버튼을 클..

react-toastify 알림 메시지  react-toastify는 React 애플리케이션에서 사용자에게 간단하게 알림 메시지를 표시할 수 있게 해주는 라이브러리입니다.      https://www.npmjs.com/package/react-toastify react-toastifyReact notification made easy. Latest version: 10.0.5, last published: 2 months ago. Start using react-toastify in your project by running `npm i react-toastify`. There are 2436 other projects in the npm registry using react-toastify.www.n..

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

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

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