유저 상태를 Provider로 비비고, Context로 비비자!

React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다! 01Context와 ProviderReact의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.1. Context 란?Context는 데이터를 저장하는 "저장소" 역할을 합니다.React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.import { createContext, useContext } from "react";// Context 생성export const AuthContext = crea..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 26.
• textsms

GitHub 로그인 구현? 생각보다 너무 쉽다! (진짜 쉽다…)

GitHub OAuth를 이용하면 소셜 로그인을 쉽게 구현할 수 있습니다.이 글에서는 GitHub OAuth App을 등록하는 방법부터 로그인 흐름, 구현까지 간단히 정리해 보겠습니다.01Github OAuth App 등록하기1. 설정 메뉴로 이동하기먼저 GitHub에 로그인한 후, Settings > Developer settings > OAuth Apps로 이동합니다. 2. 앱 정보 입력하기필요한 정보를 입력해 앱을 등록합니다.Application name: 웹사이트 이름HomePage URL: 내 웹사이트 주소Application description: 사이트 설명 (선택 사항)Authorization callback URL: 인증 완료 후 GitHub 인증 서버가 코드를 보낼 URL모든 정보를 입..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 19.
• textsms

[React] export 모듈 불러오기 에러

01개발 환경 ViteReactJavascript  02문제 상황  폴더 구조: src 폴더 아래에 components와 api 폴더를 생성했습니다. api 폴더에는 axios.js와 requests.js 파일이 있고, 이를 index.js에서 한 번에 export 하려고 했습니다.components 폴더의 Banner.jsx에서 api/index.js를 import하여 사용하려고 했습니다.문제: Banner.jsx에서 api/index.js를 import했을 때 SyntaxError가 발생했습니다. //axios.jsimport axios from 'axios';const instance = axios.create({ // 설정...});export default instance;//request..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 15.
• textsms

[React] Vite-App 생성하는 방법

vite 란빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구입니다.프랑스어로 Vite(빠르다)라는 단어입니다. '바이트'가 아닌 '비트'라고 불러야 합니다. ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev   React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. IDE- 통합 개발 환경(Integrated Development Env..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 14.
• textsms

[React] State와 Hooks(useState, useEffect...)

01StateState는 컴포넌트의 상태를 나타내며, 변화 가능한 값을 관리하는 데 사용됩니다.State는 직접 수정할 수 없고, setState를 통해 수정해야 합니다.// 잘못된 예시this.state = { name: '박서방' };// 정상적인 사용법this.setState({ name: '박서방' }); 상태가 변경되면 컴포넌트가 다시 리렌더링 됩니다. 따라서 렌더링과 데이터 흐름에 필요한 값만 state에 포함시켜야 성능 저하를 막을 수 있습니다.함수형 컴포넌트에서는 React 16.8부터 useState Hook을 사용하여 상태를 관리할 수 있습니다.02Lifecycle (생명주기)React 컴포넌트는 생성, 업데이트, 제거라는 세 가지 주요 생명주기를 가집니다.이 과정을 통해 컴포넌트의 동..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 20.
• textsms

[React] Components와 Props

01Components- Component란 웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소입니다.작은 Component들이 모여서 하나의 Component를 구성하고 이러한 Component를 모아서 전체페이지를 구성합니다.이렇게 하나의 Component를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 개발시간과 유지보수 비용을 줄일 수 있습니다. - 개념적으로는 Javascript의 함수와 비슷합니다. 입력을 받으면 정해진 출력을 합니다.React는 어떠한 속성(Props)들을 입력받아서 그에 맞는 React element를 return 해주는 것입니다.* React element: React를 구성하는 가장 작은 블럭들. Javascript 객체 형태로 존재하면 화..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 17.
• textsms

[React] React-App 생성하는 방법

React 란React.js 는 페이스북에서 개발한 사용자 인터페이스 라이브러리입니다.현재 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다.  React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. yarm- npm의 약점(일관성, 보안성, 성능)을 보완해서 Facebook에서 나온 npm 확장 패키지 매니저입니다.- npm과 동일하게 터미널에서 " npm in..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 13.
• textsms