반응형 프로젝트 기록/React, Node.js를 이용한 게시판 만들기13 React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유 React RouterReact Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리해주는 라이브러리이다해당 라이브러리를 사용하여 url 경로에 따라 다른 컴포넌트를 렌더링 할 수 있다 1. 프로젝트 폴더 생성npx create-react-app react-router-app 2. react 개발 서버 실행npm run start=> 개발 서버 실행되는지 확인 완료http://localhost:3000 3.React Router 설치npm install react-router-dom => 설치 확인React 프로젝트 폴더\package.json 내에서 찾아볼 수 있다 package-lock.json에서 react-router-dom의 버전과 정보 확인 가능 4. R.. 2024. 10. 30. useState, useEffect 이해, Counter 만들기 - React, Node.js 프로젝트 React의 상태 관리 useState와 useEffect useState와 사이드 이펙트 처리를 위한 useEffect는 React에서 상태 변화를 관리하고컴포넌트가 렌더링될 때 특정 동작을 처리하는 중요한 역할을 한다=> 간단한 Counter를 구현해보자 1. useState1-1. 개념useState : 상태 관리 기초를 위해 사용되는 훅.컴포넌트 내에서 상태 값을 설정하고, 해당 값을 변경할 수 있도록 해준다. 상태가 변경될 때마다 컴포넌트가 다시 렌더링됨. 1-2. 사용법> Counter.js 생성 이전에 state, props를 이용해 Couter.js를 만들어보았었다 https://tiny-immj.tistory.com/84 React 컴포넌트 재사용하기, props와 state - Re.. 2024. 10. 24. React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트 React component의 구조와 재사용, props와 state 1. React component React는 컴포넌트 기반 아키텍처. 컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다 1-1. Button 컴포넌트 만들기> Button.js 생성import React from 'react';function Button({ label, onClick, type }) { return ( {label} );}export default Button;이 컴포넌트는 세 가지 props(label, onClick, type)을 받아서 버튼을 렌더링한다(props에 대한 내용은 밑에서 다시 정리할 예정)이렇게 생성한 버튼을 다른 컴포넌트에서.. 2024. 10. 23. Axios, CORS 설정을 적용한 React, Node.js 프로젝트 React 프로젝트의 설정 React는 사용자 인터페이스를 구축하는데 사용되는 자바스크립트 라이브러리이다Create React App을 이용해 React 프로젝트를 설정해보려 한다 1. 프로젝트 폴더 생성 npx create-react-app my-react-app 2. react 개발 서버 실행npm run start => 실행되는 것 확인http://localhost:3000 Node.js와 React 통신 설정 axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신 구현 Axios : Http 요청을 쉽게 보낼 수 있는 자바스크립트 라이브러리. GET, POST, PUT, DELETE 요청을 보내는데 사용되며 React에서 백엔드 API와 통신할 때 유용하다 1. Ax.. 2024. 10. 19. 2. React, Node.js를 이용한 게시판 만들기 - MySQL 연결 및 CRUD 작성 1. mysql community 버전 다운로드2. mysql 설치하기 3. 환경변수 설정4. 데이터베이스 초기화https://tiny-immj.tistory.com/79 React와 node.js를 사용한 게시판 만들기 - db 세팅이전에 node.js, npm, git 세팅을 하고 기초 프로젝트를 만들었다https://tiny-immj.tistory.com/78 React와 node.js를 이용한 기초 프로젝트 생성(for mac)1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.jtiny-immj.tistory.com 1. mysql community 버전 다운로드2. mysql 설치하기 3. 환경변수 설정4. 데이터베이스 초기화5. Node.js 프.. 2024. 10. 18. 1. React, node.js를 사용한 게시판 만들기 - db 세팅 이전에 node.js, npm, git 세팅을 하고 기초 프로젝트를 만들었다https://tiny-immj.tistory.com/78 React와 node.js를 이용한 기초 프로젝트 생성(for mac)1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org pkg 파일이 다운받아지면 실행시켜 설치해주세tiny-immj.tistory.com db 중 mysql을 윈도우에 설치해보려 합니다 1. mysql community 버전 다운로드2. mysql 설치하기 3.. 2024. 10. 10. 이전 1 2 3 다음 반응형