REACT6 [React] 서버에 수정된 파일 배포할 경우 주의사항 이번 포스팅에서는 리액트프로젝트를 서버에 배포하면서 느낀점 및 간단한 배포계획을 작성해보려고 합니다. 우선 저희는 winSCP프로그램을 이용해 파일을 옮겨서 적용하는 방식을 이용하고 있습니다. 리액트로 만든 프로젝트 화면(실행중인 상태) 찌꺼기 파일이 있을수도 있으므로 보통 react src디렉토리 아래에 있는 파일중 변경사항이 있을경우 지운다음 새로 적용하는 형태였습니다. 그러나 한꺼번에 많은 파일들을 지우고 통째로 옮길경우 리액트가 실행되어있는 상태라면 아래와 같은 메세지들이 잔뜩 뜨면서 서버가 강제로 종료되는 현상이 발생했습니다. 그래서 이것저것 테스트 해본 결과 아래와 같이 배포할 경우 안정적으로 서버가 운영됨을 확인할 수 있었습니다. index.js 파일과 App.js파일은 따로 반영한다. cs.. 2023. 11. 17. [React] AWS EC2 Ubuntu서버에 리액트 프로젝트 설치하기 1. AWS EC2 우분투 서버 인스턴스 생성AWS에 접속하셔서 EC2 인스턴스를 새로 생성합니다. 인스턴스 생성 방법과 관련해서는 아래 링크에 자세히 나와있으니 https://teammoca.tistory.com/8 AWS EC2 인스턴스 우분투(Ubuntu 22.04) 서버 무료(프리티어)로 개설하기1. https://aws.amazon.com/ko/ 에 들어가서 콘솔 홈에서 'EC2'를 클릭합니다.2. 왼쪽메뉴의 EC2 대시보드에서 리소스 - 인스턴스(실행 중) 을 클릭합니다. (또는 왼쪽메뉴에서 바로 인스턴스를 클릭)3. 우측teammoca.tistory.com이번 포스팅에서는 간단한 이미지로만 보이고 넘어가도록 하겠습니다. 아래 이미지 단계의 설명은 이와 같습니다. ① 인스턴스명 입력 ② ubu.. 2023. 11. 15. [React] React라우팅 Link, Routes를 이용하여 화면메뉴 동적으로 세팅하기 라우팅이란?웹 어플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것을 의미합니다. React에서는 메뉴를 클릭했을 때 다른 화면으로 이동하는 수단으로 많이 사용 합니다. React에서 기본적으로 화면들어가는 구조를 파악해보면 index.js에서 > App.js를 호출하는 방식을 가지고 있습니다. 우선 저희는 App.js에서 작성을 해보도록 하겠습니다.1. react-router-dom설치npm install react-router-domReact에서는 라우터를 구현할 때 react-router-dom을 사용합니다. 2. index.js에 ReactDom 생성 및 BrowserRouter 생성 import React from 'react'; imp.. 2023. 11. 14. [React] React에서 모든화면에서 공통함수 또는 제이쿼리 접근하기 //해당파일에서는 react의 useState, useRef, useEffect를 사용하겠다. import {useState,useRef,useEffect} from 'react'; React에서는 각 파일들을export와 import해서 사용합니다. export : 모듈의 기능을 외부에서 사용할 수 있도록 내보내는 기능 import : export로 내보낸 모듈을 가져오는 기능 이번 포스팅에서는 import 하는 방식을 알아볼텐데요. 우선 제일 기본적으로 많이 사용되는 예시 2가지를 보겠습니다. 1. import [변수명] from [경로] // pageTop.js를 Top 이라는 변수명을 사용하여 import하겠다. import Top from './pageTop.js'; 이렇게 쓸경우 내가 작업하고.. 2023. 11. 14. Spring Boot 프로젝트에 React프로젝트 연동하기 1. Spring Boot 프로젝트폴더에 create-react-app 을 이용하여 react프로젝트를 설치합니다. 예시) create-react-app ./front ( front 폴더 속에 생성)2. react프로젝트 생성중인 화면3. ./front/ 폴더 아래에 react 가 정상적으로 설치가 되었다면 package.json 파일을 열어서 proxy를 설정합니다. 프록시 설정이유는 spring boot port를 8080으로 설정하였고 react는 기본적으로 3000의 포트로 설정됩니다. 기본적으로 포트가 다를경우 통신이 불가한데, 이때 react package.json파일에 프록시 설정을 해준다면 react가 다른서버와 통신이 가능합니다.4. App.js에서 통신된 값을 화면상에서 확인 할 수 있.. 2023. 8. 14. node.js를 이용하여 react설치하기 Node.jsnodejs.org1. https://nodejs.org/en 접속하여 node.js 설치합니다.2. 설치할 경로를 지정합니다.3. https://code.visualstudio.com/ 에 접속하여 visualstudio를 설치합니다. 4. 윈도우 실행창에서 Visual Studio Code를 '관리자 권한으로 실행' 으로 실행시켜줍니다.5. View - Appearance - Panel클릭해서 터미널창을 활성화 시킵니다.6. 터미널에서 명령어 npm install -g create-react-app 를 입력하여 react를 설치합니다. 7. react 설치완료되었을 경우 Terminal창 화면 8. 터미널에서 명령어 create-react-app -V를 입력해 react가 정상적으로 설치.. 2023. 8. 6. 이전 1 다음
