AI Platform / Web

React 프로젝트 AWS EC2에서 우분투 환경으로 배포하는 방법에 대해 알아보자. 필자도 react 배포 시 아래의 내용을 참고하여 배포를 한다. 그리고 오류가 난다면 주기적으로 추가하고 있다. 0. 들어가면서 creat-react-app으로 local 개발 시 환경과 배포(production) 개발 환경은 달라야 한다. 따라서, 아래의 방법을 보고 우선 셋팅을 진행한다. [react] 실무 개발 환경/배포 환경 설정(.env) 천천히 읽어보면 그렇게 어려운 것은 없을 것이다. 만약 nodejs에서 express로 개발을 하여 백엔드를 만들었다면 아래의 방법을 참고하면 도움이 될것이다. 만약 react와 nodejs로 둘다 EC2에서 배포를 한다면 파일을 client와 server로 하나씩 만들어서 ..

0. 들어가면서 사실 이 부분은 쉽게 이해하기 어렵다. 그리고 가장 잘 정리 된 곳은 공식문서이다. https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 이 블로그는 자세히 알려주지 않는다. 처음 배우는 사람들이 쉽게 이해할 수 있도록 다 덜어낸 정보를 전달한다. 여기서 개념을 잡고 공식문서를 꼭 읽어보기 바란다. 1. 개념 useEffect는 useState에 연결되므로 아래의 코드에서 이어서 설명하겠다. 1분이면 보고 올 수 있다. [Web/React] - [react web] Hook 기초_useStat..

배포의 방식은 다양하다. 아래의 방식은 기초 배포 방식으로 보안에 취약하고 최적화 미들웨어를 추가하지 않았다. 여기서 사용할 PM2는 원격 서버에서 node 프로세스를 백그라운드로 실행시킨다. 따라서 putty 연결이 끊어지는 경우에도 배포가 중단되지 않는다. 따라서 추가 보안적용을 nodejs에 넣어주면 좋다. 만약 nodejs에 대한 다른 정보확인이 필요하다면, 아래의 url을 접속해서 확인하자. [Web/nodejs] - nodejs 기초 총 정리 우분투 18.04 LTS 기준으로 만들어본다. 아래의 흐름을 따라가면 배포가 될 것이다. AWS EC2 시작 EC2에 접속하고 인스턴스 시작을 누른다. 그 후에 18.04 우분투(18.04 LTS 기준)로 설정을 진행한다. 보안 그룹 구성 (인바운드/아웃..

react 모킹 방법을 검색해보면, 블로그들은 크게 2가지 특징을 가진다. 너무 설명이 없거나, 너무 설명이 많다. 그래서 hanpy는 쉽고 간단하게 설명을 적어보려한다. nodejs에 관한 기본 셋팅이나 개념은 아래의 url로 대체한다. [Web/nodejs] - nodejs 기초 총 정리 https://mswjs.io/ Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io 모킹을 위해 msw 라이브러리를 사용할 것이다. 위는 공식문서다. 핵심은 front단에서 API를 보낼 곳이 없는 경우, 가상으로 데이터를 불러올 수 있는 곳을 만들어 준 것이다. 간단히 사용법을 적어보겠다. npx create-react-ap..

nodejs 서버 실행 시 위와 같은 에러가 뜬다면, mySQL 데이터 베이스 연결 시 기본 설정이 잘못 됐을 가능성이 크다. { "development": { "username": "root", "password": "root", "database": "punch", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "root", "password": null, "database": "database_test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": null, "database": "database_producti..

0. 들어가면서 useState를 활용해서 내용을 숨기고 보이는 방법에 대해 알아보자. 우선은 앞의 useState 기초를 확인하고 오자. 우리가 만들 것은 버튼 누를 시 특정 내용이 보이고, 다시 누르면 안보이게 하는 것이다. 기초 개념은 아래에서 참고하자. [Web/React] - [react web] 시작 후 파일 정리 [Web/React] - [react web] Hook 기초_useState [Web/React] - [react web] Hook 기초_useEffect [Web/React] - [React Web] AWS EC2 배포 ALL-IN-ONE [Web/React] - [react web] mocking 모킹 방법 (msw로 데이터 가져오기) 1. 코드 기본적인 component 생성과..

핵심만 압축했습니다. 디테일한 부분은 공식문서를 확인해 주세요! 0. 들어가면서 Hook의 종류는 굉장히 많다. 만약 간단한 프로젝트만 한다면, useState, useEffect 정도만 알아도 충분하고, 복잡한 내용은 useRef 정도를 추가하면 된다. 시중의 블러그나 책은 대부분 같은 내용만 다루는 것 같다. 더하기와 빼기... 물론 좋은 예제이지만 나는 핵심만 압축해서 이야기 해보고자 한다. 기초적 실습을 보여주고, 추가로 프로젝트 시 사용했던 수많은 기술들을 담아보려 한다. 사실 useState와 useEffect 정도만 알아도 이 글을 보고 있는 분들의 초급 수준에서 문제 없다. useEffect는 추가로 다음 블로그에서 이야기 해보려 한다. 1. useState 핵심 html은 변하지 않는다...

npm run build react 배포를 위해 빌드 시 다음과 같은 에러가 발생 할 수 도 있다. 이는 nodejs 버전이 높아서 생기는 문제다. 해결책 1 pakage.jsn을 변경한다. // 변경 전 "start": "react-scripts start" // 변경 후 "start": "react-scripts --openssl-legacy-provider start" 해결책 2 terminal에 다음과 같이 쳐준다. export NODE_OPTIONS=--openssl-legacy-provider 이러한 해결책은 안전하지 않은 SSL로 실행중임을 의미하므로, 실행은 할 수 있지만, 근본적인 문제 해결은 못아니라고 할 수 있다. 따라서 가능하면 node 버전을 낮춰서 빌드를 진행하면 될 것이다.