[ReactJS] React + MySQL 게시판 만들기

[ReactJS] React + MySQL 게시판 만들기

1. React + MySQL MySQL과 React를 사용하여 게시판(Bulletin Board) 애플리케이션을 만드는 기본적인 방법은 데이터베이스에서 게시물 데이터를 저장하고, React를 사용하여 사용자 인터페이스를 구축하는 방식입니다. 먼저 아래 필요한 Node.js와 MySQL과 React 프로젝트 생성부터 해야합니다.Node.js: Node.js 공식 웹 사이트에서 설치MySQL: MySQL 공식 웹 사이트에서 설치React 앱 생성: Create React App을 사용하여 React 프로젝트 생성npx create-react-app react-boardcd react-board 다음 mysql과 react를 나눌 수 있도록 폴더를 구조화 합니다.mkdir backend - MySQL mkd..

  • format_list_bulleted Front-End/ReactJS
  • · 2025. 3. 12.
  • textsms
[React] React TMDB API를 사용한 리듀서 규현하기

[React] React TMDB API를 사용한 리듀서 규현하기

TMDB API를 사용한 React에서 Redux 리듀서를 설정하는 방법에 대해 알아보겠습니다. 먼저 아래 사이트로 들어가 TMDB API로그인과 API Key 발급이 필요합니다. The Movie Database (TMDB)환영합니다 수백만 개의 영화, TV 프로그램 및 인물을 발견하세요. 지금 살펴보세요.www.themoviedb.org 사이트 로그인 후 설정 API로 들어가 API Key를 발급하면 위 사진처럼 API 토큰과 키가 발급됩니다. 다음 아래 명령어로 React 프로젝트를 만들면 됩니다. npx create-react-app tmdb-blog1.Redux 설정프로젝트 폴더에 actions 폴더를 따로 만들고 types.js 파일에 액션타입을 정의합니다.// src/actions/types..

  • format_list_bulleted Front-End/ReactJS
  • · 2025. 3. 3.
  • textsms
[React] React-Readux 사용법

[React] React-Readux 사용법

1. ReduxReact-Redux는 React 애플리케이션에서 상태를 관리하는 라이브러리로, 전역 상태를 관리하는 패턴을 제공해 복잡한 애플리케이션에서 상태를 쉽게 관리하도록 도와줍니다. Redux의 특징으로는 다음과 같습니다.단일 스토어: 애플리케이션의 모든 상태를 하나의 스토어에서 관리, 이를 통해 애플리케이션의 상태를 중앙 집중식으로 관리할 수 있음불변성: 상태를 직접 수정하는 것이 아닌, 새로운 상태 객체를 반환해 상태를 변경, 이를 통해서 이전 상태를 보존하고, 상태 변경을 쉽게 추적순수 함수: 상태 변화는 순수 함수인 리듀서를 통해 이루어짐, 리듀서는 현재 상태와 액션을 입력받아 새로운 상태를 반환함미들웨어: Redux는 미들웨어를 통해 비동기 작업이나 로깅과 같은 추가 기능을 쉽게 적용할 ..

  • format_list_bulleted Front-End/ReactJS
  • · 2025. 3. 3.
  • textsms
[React Native] 2장 컴포넌트 구조 이해

[React Native] 2장 컴포넌트 구조 이해

1. 기본 프로젝트 구조프로젝트를 생성하면 기본 폴더 구조는 다음과 같습니다.MyExpoApp/├── assets/├── node_modules/├── App.js├── app.json└── package.json2. 기본 컴포넌트Viewreact-native를 제일 먼저 실행하면 보이는 곳은 app -> (tabs) -> index.tsx 부분입니다 이곳은 다음과 같이 수정합니다.import React from "react";import { View, StyleSheet } from "react-native";const App = () => { return ;};const styles = StyleSheet.create({ container: { flex: 1, justifyContent..

  • format_list_bulleted Mobile/React Native
  • · 2025. 3. 3.
  • textsms
[ReactJS] 8장 Typescript

[ReactJS] 8장 Typescript

React에 Javascript파일을 Typescript 파일로 전환하는 방법을 알아보겠습니다.1. JavaScript 파일 생성먼저 리액트 프로젝트에 Javascript 파일을 생성하고 간단한 React 컴포넌트를 작성합니다.import React from 'react';const App = () => { return ( Hello, world );};export default App;2. TypeScript로 변환하기이제 생성한 파일을 Typescript로 전환해 보겠습니다. Typescript로 변환하기 위해 필요한 아래 명령어로 typescript 패키지를 설치해줍니다.npm install --save typescript @types/react @types/react-d..

  • format_list_bulleted Front-End/ReactJS
  • · 2025. 2. 27.
  • textsms
[ReactJS] 7장 상태관리

[ReactJS] 7장 상태관리

1. React 상태관리React에서 상태 관리는 애플리케이션의 데이터 흐름과 UI의 일관성을 유지하는 데 중요한 역할을 합니다. 상태 관리는 사용자 인터페이스의 동적 변화를 가능하게 하고, 애플리케이션의 일관성을 유지하는 데 중요한 역할을 합니다. 특징데이터 흐름: React는 단방향 데이터 흐름을 따르며, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하며, 자식 컴포넌트는 props를 통해 받은 데이터를 기반으로 UI를 렌더링상태의 불변성: 상태는 직접 수정하지 않고, 항상 새로운 상태 객체를 반환하여 업데이트함, 이는 React의 리렌더링과 최적화에 기여 훅(Hooks): React 16.8버전부터 도입된 훅을 통해 함수형 컴포넌트에서도 상태 관리를 할 수 있게됨2. 상태관리의 ..

  • format_list_bulleted Front-End/ReactJS
  • · 2025. 2. 26.
  • textsms
반응형