🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법

01🔥 파이어베이스 (Firebase)란?Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다. 기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다. 특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.02Firebase 프로젝트 생성하기Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 3. 8.
• textsms

[React] Axios

01AxiosAxios는 HTTP 클라이언트 라이브러리로, JavaScript에서 API 호출을 쉽게 할 수 있도록 도와주는 라이브러리입니다. Promise 기반으로 작동하며, 브라우저와 Node.js에서 모두 사용할 수 있습니다. 특히, React에서 자주 사용됩니다. 📌 Axios 설치//npm을 사용하는 경우npm install axios//yarn을 사용하는 경우yarn add axios02기본 사용법Axios는 GET, POST, PUT, DELETE와 같은 HTTP 메서드를 사용하여 API 요청을 보낼 수 있습니다.다음은 가장 기본적인 예시입니다.✅ GET 요청 예시서버에서 데이터를 가져오는 예시입니다.import axios from "axios";axios.get("https://jsonp..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 21.
• textsms

API와의 첫 데이트, 너무 떨지 마!

✅❌📌👉01API (Application Programming Interface) 란API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말로, API는 애플리케이션 간에 데이터를 주고받을 수 있도록 돕는 "언어"라고 할 수 있습니다. 예를 들어, 날씨 앱을 켤 때, 앱은 날씨 정보를 제공하는 API에 "오늘 날씨가 어때요?"라고 묻고, API는 날씨 정보를 반환합니다. 이렇게 서버와 클라이언트 간에 데이터를 교환할 때 API가 중요한 역할을 하죠. 1. API 역할API는 클라이언트와 서버 간에 데이터를 주고받는 중요한 역할을 합니다.예를 들어, 우리가 웹사이트에서 정보를 요청할 때, 서버에서 데이터를 받아오는 방식을 API가 처리한다고 생각하..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 19.
• textsms

[Review] 한입 React.js 강의 후기

01강의소개이 강의는 리액트를 처음 배우는 사람들을 위한 강의입니다! 이 강의를 들으면 리액트가 무엇인지, 어떻게 사용하는지 기본 개념을 배울 수 있어요.처음에 자바스크립트 기초개념을 먼저 복습느낌으로 배우고 리액트를 시작해서 더 강의가 잘 들어옵니다.강사님이 설명을 굉장히 깔끔하고 쉽게 해 주셔서 어려운 부분도 쉽게 이해할 수 있고 질문에 대한 답도 빨라서 좋습니다! 특히 강사님께서 챌린지를 같이 운영해주셔서, 하루하루 강의를 듣고 과제를 하면서 개념을 반복적으로 익힐 수 있었습니다. 이 과정을 통해 리액트에 대한 자신감도 생기고, 실제로 리액트를 활용한 웹 애플리케이션을 만드는 데 필요한 기술을 배울 수 있었습니다.  👉인프런 강의 바로가기 한 입 크기로 잘라 먹는 리액트(React.js) : 기초..

• format_list_bulleted ...기타/REVIEW
• · 2025. 2. 18.
• textsms

[React] Redux와 Redux Toolkit

01Redux 란Redux는 애플리케이션에서 여러 컴포넌트들이 공통으로 사용하는 데이터를 전역 상태라고 부르는데,이 상태를 효율적으로 관리하는 도구입니다. React 같은 라이브러리에서는 컴포넌트들이 서로 독립적으로 동작하는데,여러 컴포넌트들이 같은 데이터를 필요로 할 때 Redux를 사용해서 상태를 한 곳에서 관리할 수 있습니다. ✅ 필요한 모듈: redux와 react-redux 모듈을 사용합니다.  📌 왜 Redux를 배워야 할까? Redux는 많은 개발자들이 사용하는 인기 있는 라이브러리입니다.예를 들어, npm trends에서 Redux의 다운로드 수를 보면 얼마나 많은 사람들이 이 도구를 사용하고 있는지 알 수 있습니다. 📌 FLUX 패턴?FLUX 패턴은 상태를 효율적이고 예측 가능한 방식..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 18.
• textsms

[React] 최적화 전략 2탄 (lazy, Suspense와 코드 스플리팅, Debounce, Throttle)

01lazy와 Suspense1. lazy lazy는 컴포넌트를 필요할 때만 로딩하는 기능으로, 초기 로딩을 최적화할 수 있습니다.이는 대개 큰 애플리케이션에서 유용하게 쓰입니다. ✅ 사용법import React, { Suspense, lazy } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() { return ( Hello, world! Loading...}> );}export default App;React.lazy는 동적으로 컴포넌트를 불러오는 함수입니다.import() 구문을 사용하여 컴포넌트를 동적으로 불러옵니다.2. Suspense ..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 17.
• textsms

[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

01SCSS (SASS의 최신 버전!)SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다. 가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다. ✅  파일 확장자:. scss: .scss1. SCSS 설치 방법npm install sass그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요. 3. 기본 문법 1) 변수 사용하기한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!$main-color: #FF6F3C;button { background-color: $main-color; color: white;}  2) 중첩(Nesting..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 17.
• textsms

[Project] 감정 일기장

01프로젝트 소개이 프로젝트는 "한입 크기로 잘라먹는 리액트" 강의의 마지막 실습 프로젝트입니다.React와 JavaScript를 활용하여 감정 일기장을 제작하였으며, 단순한 일기가 아니라 감정을 함께 기록할 수 있는 특별한 일기장입니다. 이번 프로젝트에서는 외부 폰트 적용법, 이미지 최적화 방법, 다양한 페이지 구성, 자주 사용하는 요소의 컴포넌트화, 그리고 실제 웹 배포 과정까지 실습했습니다. 1. 폴더 구조컴포넌트를 분리하여 구조를 깔끔하게 유지하였고, 스타일(CSS) 파일은 styles 폴더에서 관리한 후 global.css에서 한 번에 export하여 사용했습니다.\---src | App.jsx | index.css | main.jsx +---assets |..

• format_list_bulleted DEVELOPMENT/PROJECTS
• · 2025. 2. 17.
• textsms