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

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