지옥의불구덩이

제목1구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(2) 이전 포스팅에서 구름IDE 컨테이너 항상켜두기 설정을 하고, 리액트 실행URL 생성및 확인을 해보았습니다. 이번 포스팅에서는 리액트 프로젝트를 백그라운드로 실행하여 컨테이너 항상켜두기 상태에 프로젝트가 적용될 수 있도록 설정해보도록 하겠습니다. ※ 들어가기에 앞서.. 항상 켜두기 기능이 동작하지 않습니다 help.goorm.io - 해당 링크의 구름ide의 안내에 따르면 "node 앱을 사용중이라면 npm 패키지의 forever명령어를 사용하여 간단히 백그라운드 프로세스로 실행할 수 있다고 나옵니다." 이번 포스팅에서는... 1. 구름IDE 가이드에 언급된 "forever"를 이용하여 실행해보고, 발생하는 이슈를 알아봅니다. 2. ..

구름IDE 리액트 항상켜두기 / 리액트 백그라운드 실행 가이드(1) 구름 IDE의 프리미엄플랜 서비스가 50%할인하여 이번기회에 체험해보고있는데요, 프리미엄 플랜은 컨테이너 1개에 한하여 항상 켜두기기능을 제공합니다. 이에 리액트 프로젝트에 항상켜두기기능을 설정해보았습니다. 해당 과정을 다음의 두 단계로 알아보도록 하겠습니다. - 포스팅(1) : 구름IDE 컨테이너 항상켜두기 설정 / 실행URL과 포트 설정 - 본 포스팅 - 포스팅(2) : React 백그라운드 실행 및 중지 / "forever" vs "pm2" 1. 항상켜두기 적용할 컨테이너의 "설정" 클릭 2. 항상켜두기 토글 "ON" - 간단하게 컨테이너 설정의 항상켜두기 토글버튼으로 항상켜두기 기능 설정이 되었습니다. 3. 이제 해당 컨테이너에 ..

[React] setState 비동기 / setState 콜백 / setState 버그 본 포스팅에서는 리액트(React)의 setState가 비동기로 이루어지는 것을 확인하고, 이로인해 발생할 수 있는 문제점과 해결방법을 알아보도록 하겠습니다. 1. 작성한 스크립트 함수 실행부분 state = { public_transport : "bus" } change_vehicle = (vehicle) => { //클릭한 탈것을 매개변수로 받아 public_transport값에 대입 this.setState({ public_transport : vehicle }); this.alert_vehicle(); } alert_vehicle = () => { //현재state의 public_transport값을 받아와서 ..

React 개발환경 설정 가이드(3) / VS Code / Window 본 포스팅에서는 아래의 해당내용을 단계별로 진행하면서 React개발을 위한 툴을 설치하고 CRA(Create-React-App)를 이용하여 React샘플 프로젝트를 구성해 보도록 하겠습니다. - 가이드(1) : node / npm 다운로드 및 설치 - 가이드(2) : Visual Studio Code 다운로드 및 설치 - 가이드(3) : Visual Studio Code 설정 및 React프로젝트(CRA) 생성 - 본 포스팅 1. 먼저 리액트 프로젝트 워크스페이스(작업공간)로 사용할 디렉토리를 생성해주세요. - 원하는 위치, 원하는 경로에 설정해주세요. 2. File > Open Folder... > 생성한 디렉토리를 "폴더선택" -..

React 개발환경 설정 가이드(2) / VS Code / Window 본 포스팅에서는 아래의 해당내용을 단계별로 진행하면서 React개발을 위한 툴을 설치하고 CRA(Create-React-App)를 이용하여 React샘플 프로젝트를 구성해 보도록 하겠습니다. - 가이드(1) : node / npm 다운로드 및 설치 - 가이드(2) : Visual Studio Code 다운로드 및 설치 - 본 포스팅 - 가이드(3) : Visual Studio Code 설정 및 React프로젝트(CRA) 생성 1. Visual Studio Code 홈페이지(code.visualstudio.com/download) 에서 인스톨러 다운로드 2. 다운로드 받은 인스톨러를 실행합니다. 라이센스 약관 동의 후 "Next" 3...

React 개발환경 설정가이드(1) / VS Code / Window 본 포스팅에서는 아래의 해당내용을 단계별로 진행하면서 React개발을 위한 툴을 설치하고 CRA(Create-React-App)를 이용하여 React샘플 프로젝트를 구성해 보도록 하겠습니다. - 가이드(1) : node / npm 다운로드 및 설치 - 본 포스팅 - 가이드(2) : Visual Studio Code 다운로드 및 설치 - 가이드(3) : Visual Studio Code 설정 및 React프로젝트(CRA) 생성 1. Node 홈페이지(nodejs.org/ko/) 에서 LTS버전 인스톨러 다운로드 2. 다운로드 받은 인스톨러를 실행합니다. 이후 대부분 기본설정을 변경하지않고 Next의 연속... 3. 라이센스 약관 동의 후..

리액트 익스플로러(IE11) 연동하기 리액트 프로젝트(CRA)는 JavaScript의 최신버전인 ES6이상의 문법을 사용합니다. 하지만, 역시 기대를 져버리지않는 IE는 ES6문법을 지원하지않기 때문에.. 우리는 익스플로러에서도 ES6이상의 문법을 해독할 수 있게끔 처리를 해줘야 정상적으로 화면이 출력이 됩니다. 리액트 프로젝트(CRA) 익스플로러-IE11 실행시 화면 해당 이슈를 Polyfill을 적용하여 해결할 수 있습니다. 1. react-app-polyfill 모듈 설치 - npm사용시 : npm install react-app-polyfill - yarn사용시 : yarn add react-app-polyfill 2. package.json 내부에 ie설정 3. index.js 내부에 polyf..