FrameWork/ReactJS
-
[React + Spring] 데이터 전송 - axios postFrameWork/ReactJS 2023. 3. 6. 14:46
개요 프론트에서 데이터를 입력받고 백으로 전송한다. 개발환경 STS 4.17.2 React 18.2.0 Springboot 2.7.8 Java 8 Maven 4 Mysql 8.0.32 mybatis 1.3.2 1. Front 데이터를 건내줄 회원가입 폼을 구현한다. 📜 전체코드 - Signup.js 이름, 이메일, 비밀번호를 입력받고, 비밀번호 확인까지 하면 회원가입 버튼을 누를 수 있게 해주었다. import { useState } from "react"; import { useNavigate } from "react-router-dom"; import "./Routes.css"; import axios from "axios"; function SignUp() { // 이름, 아이디, 비밀번호 cons..
-
React 시작하기 (2)FrameWork/ReactJS 2023. 2. 12. 18:35
개요 ' npx create-react-app ' 을 통해 설치된 개발환경 디렉토리 살펴보기 React app이 어떻게 구동되는지 간략하게 살펴보기 디렉토리 살펴보기 node_modules - 라이브러리를 모은 폴더 public - 정적 파일을 담는 곳. (이미지 등) - 앱 밖에서 사용하는 이미지는 이곳에 담는다. (favicon 등) - 파일명을 써주기만 해도 import가 가능하다 src - 개발과 관련된 폴더 - 보통 이 폴더를 많이 사용한다 React 구동방식 알아보기 React 앱의 돌아가는 순서를 역으로 설명하면 다음과 같다 1. public폴더의 index.html 2. src폴더의 index.js 3. src폴더의 app.js 1. index.html 이 파일이 화면에 보여지는 파일이다...
-
React 시작하기 (1)FrameWork/ReactJS 2023. 2. 11. 21:28
개요 React 설치 방법 및 실행 (window) 1. node.js 설치 React를 사용하기 위해서 Node.js가 필요하다. 아래의 사이트에서 설치해주자. 들어가면 두 개의 버전으로 다운받을 수 있는데, 왼쪽 버전을 추천한다. (최신버전보다 안정적임. 근데 나는 최신으로 받음) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. React App 생성 Node.js설치를 완료했으면 npm, npx 명령어를 사용할 수 있다. npx 명령어를 활용하여 React 개발 환경을 한번에 만들수 있다. 본인이 원하는 디렉토리에서 터미널을 열고 설치해주자. npx create-react-app..