fullstack-study

카카오 로그인  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  1. 카카오 로그인 > 문서보  2. 내 애플리케이션 > 애플리케이션 추가   3. 앱키 4. 플랫폼 > web 플랫폼 등록    5.    6. : .envVITE_KAKAO_JAVASCRIPT_KEY=????VITE_KAKAO_REST_API_KEY=????VITE_KAKAO_REDIRECT_URI=https://xxx.vercel.app/oauth/ 7. config.jsconst isLocal = window.location..

TMDB API  1. 가입https://www.themoviedb.org/?language=ko The Movie Database (TMDB)찾으시는 영화나 TV 프로그램이 없나요? 로그인 하셔서 직접 만들어주세요.www.themoviedb.org  2. More > API  또는  프로필 > 설정 > API   3.  API  >  생성 > Developer  4. 사용약관 스크롤  맨아래 동의   5.  작성   6. API 페이지 이동 ( API, 액세스토큰  사용 )  7.  More > API    8.  API Reference    9. Movie List > Now Playing > Try it > JSON 생성   10.  11.  이미지 기본 경로 https://developer.th..

vercel 배포 vercel이란?Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, 빠르고 간편하게 웹 애플리케이션을 배포할 수 있도록 도와주는 서비스입니다. Next.js의 개발사이기도 하며, Next.js를 최적화하여 지원하지만, React, Vue, Svelte, Angular 등 다양한 프레임워크를 사용할 수 있습니다. Vercel 공식 사이트 공식 사이트에서 GitHub, GitLab, Bitbucket 계정으로 가입 vs 터미널에서 설치 - 1번만 npm i -g vercel 1. npm run build 또는 yarn build 2. vercel login >> 로그인 선택 >> 이 메일로 로그인했을경우 이메일 확인 >> 이메일 > 코드 인증 이메일 인증 ..

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