본문 바로가기

IT개발34

[ERR] Errors running builder 'Java Builder' on project '프로젝트명'. 자바관련 프로젝트에서 제대로 빌드가 되지 않는 현상이 발생했을경우 Errors running builder 'Java Builder' on project '프로젝트명'. For input string: "H" ... 해결방법 결론은 Project - Properties에 있는 Java Compiler와 Java Build Path의 java버전이 동일하지 않아서 발생 Java Compiler와 Java Build Path의 java버전이 동일하게 맞춰주면 해결 2023. 11. 24.
[WebSquare5] 웹스퀘어 프로젝트 환경(설치) 구성 (with Tomcat 또는 SpringBoot) 1. Dynamic Web Project 생성Project - New -Dynamic Web Project 2.WebContent와 동등한 경로에 \websquare_home 디렉토리 복사 붙여넣기3. 웹스퀘어 엔진파일 속 WebContent/WEB-INF/lib 디렉토리 속 jar파일 모두 복사 붙여넣기 4. WebContent/WEB-INF/web.xml 세팅websquare servlet설정을 추가합니다. websquareDispatcher websquare.http.DefaultRequestDispatcher websquareDispatcher *.wq 5. \WebContent\websquare(정적리소스 파일)붙여넣기기존 웹스퀘어 엔진에 있던 websquare폴더를 통째로 가져와 붙여넣습니다... 2023. 11. 24.
[WebSquare5] 웹스퀘어 프로젝트 구조 및 기본세팅 1. WebSquare home세팅 웹스퀘어 home세팅하는 방법엔 여러가지가 있는데 대표적인 예시 3가지를 설명해보도록 하겠습니다. 1) WAS VM arguments에 웹스퀘어 home 세팅 -DWEBSQUARE_HOME="C:\WEBSQUARE_DEV_PACK_SP5\workspace\WRM\websquare_home" 2) web.xml에 웹스퀘어 home세팅 web.xml에 servlet에 속에 넣어주는 방법입니다. websquareDispatcher websquare.http.DefaultRequestDispatcher WEBSQUARE_HOME C:\A_teammoca_repository\eclipse_20231025\mocaerp2024\websquare_home 3) SpringBoot프.. 2023. 11. 23.
[Ubuntu] mariaDB설치 및 외부접속하기 (Ubuntu 22.04) 오늘은 ubuntu서버에 mariadb를 설치하고 외부에서 접속하는 방법에 대해 포스팅해보도록 하겠습니다. 1. apt-get update우선 mariaDB를 설치하기 위해서는 우분투 서버에 접속하셔서 apt-get를 업데이트를 해야합니다.//apt-get 앞에 sudo를 붙이거나 super admin 계정으로 변경해서 업데이트를 해주면 됩니다. //방법1. sudo apt-get update //방법2. sudo su apt-get update2. mariaDB 설치(server + client)apt install mariadb-server mariadb-client 3. mariaDB 버전확인 (mariadb --version)정상적으로 설치가 되었는지 확인할 수 있습니다.mariadb --vers.. 2023. 11. 20.
[React] 서버에 수정된 파일 배포할 경우 주의사항 이번 포스팅에서는 리액트프로젝트를 서버에 배포하면서 느낀점 및 간단한 배포계획을 작성해보려고 합니다. 우선 저희는 winSCP프로그램을 이용해 파일을 옮겨서 적용하는 방식을 이용하고 있습니다. 리액트로 만든 프로젝트 화면(실행중인 상태) 찌꺼기 파일이 있을수도 있으므로 보통 react src디렉토리 아래에 있는 파일중 변경사항이 있을경우 지운다음 새로 적용하는 형태였습니다. 그러나 한꺼번에 많은 파일들을 지우고 통째로 옮길경우 리액트가 실행되어있는 상태라면 아래와 같은 메세지들이 잔뜩 뜨면서 서버가 강제로 종료되는 현상이 발생했습니다. 그래서 이것저것 테스트 해본 결과 아래와 같이 배포할 경우 안정적으로 서버가 운영됨을 확인할 수 있었습니다. index.js 파일과 App.js파일은 따로 반영한다. cs.. 2023. 11. 17.
[vscode] Maven 프로젝트 jar 배포하기(SpringBoot) 및 리엑트 프록시 설정 안녕하세요? 이번 포스팅에서는 springBoot로 된 Maven 프로젝트를 jar파일을 생성해서 서버에 배포해보는 작업을 진행해보도록 하겠습니다. 우선 저희 환경은 vscode에서 진행됩니다. 1. vscode에서 jar파일 생성 vscode의 왼쪽 explorer에 보시면 하단에 Maven이라는 메뉴가 활성화되어있습니다. vscode에서 jar파일을 생성해보도록 해보겠습니다. 메뉴를 펼쳐보면 Maven project목록이 나옵니다. 프로젝트를 우클릭- Run Maven Commands - package 를 실행합니다. 그러면 Maven 프로젝트가 실행됩니다. 완료가 된다면 터미널에서 .jar파일이 생성된 경로를 보여줍니다. 실제로 터미널에 적힌 경로를 들어가보면 moca3-1.jar파일이 생성 되어있.. 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.
[openlayers] 지도표현방식(WMS, TMS) 1. 지도표현방식 대표적인 2가지 (WMS와 TMS)웹에서 지도를 표현하는 방식에는 대표적으로 WMS(Web Map Service)와 TMS(Tile Map Service )가 있습니다. 1) WMS(Web Map Service) 맵 데이터를 제공해주는 서비스입니다. WMS방식에는 맵 엔진이 반드시 필요합니다. 각 회사에서 개발한 맵 엔진 또는 GeoServer 같은 프로그램을 설치하여 맵 엔진 역할을 할 수도 있습니다. 맵 엔진으로 WMS를 구축하면 맵 서비스 요청에 필요한 맵 데이터를 가공하여 리턴해주는 형식입니다. 다만 TMS방식과 비교하였을 경우 상대적으로 맵 서비스 속도가 떨어집니다. 2)TMS(Tile Map Service ) TMS는 타일맵 서비스 입니다. 타일 형식으로 구역별 X,Y,Z 축.. 2023. 10. 26.
[OpenLayers] 오픈레이어스 설치 및 OSM(OpenStreetMap) 지도 띄우기 https://openlayers.org 접속하셔서 다운받습니다. (해당 포스팅은 v6.15.1 버전 기준으로 작성함)OpenLayers - WelcomeA high-performance, feature-packed library for all your mapping needs.openlayers.org 저희 포스팅에선 소스(js, css)만 필요하므로 v6.15.1-dist.zip 파일을 다운로드 합니다. 다운로드 하고 압축을 풀면 아래와 같은 파일들이 나오는데 제 포스팅에서는 ol이라는 디렉토리를 하나 생성해서 그 안에 넣어주었습니다. 지도를 띄울 index.html이라는 파일을 하나 생성합니다.index.html을 열어서 ol.js와 ol.css등 필요한 파일들을 링크시켜줍니다. 환경 세팅은 간단하.. 2023. 10. 24.
데이터베이스 문자함수(LOWER, UPPER, TRIM, SUBSTR, REPLACE) 이번 포스팅은 데이터베이스에서 많이 사용하는 문자열함수에 대해 알아보도록 하겠습니다. 1. LOWER(문자열string) - 소문자로 전환SELECT LOWER('TeamMoca') FROM DUAL;2. UPPER(문자열string) - 대문자로 전환SELECT UPPER('TeamMoca') FROM DUAL;3. TRIM(문자열) - 문자열 양옆 공백제거*주의할점 : 중간에 공백이 있는경우는 중간에 있는 공백은 제거 안됨!SELECT TRIM(' teammoca ') FROM DUAL;SELECT TRIM(' t e a mmoca ') FROM DUAL; 4. LTRIM(문자열) - 왼쪽부터 공백제거*주의할점 : 중간에 공백이 있는경우는 중간에 있는 공백은 제거 안됨!SELECT LTRIM(' te.. 2023. 10. 13.
[Openlayers] ol-ext FixedPopup 1. ol-extopenlayers의 확장 플러그인으로 style, animation, filter, controls, intersections, popup등 다양하게 제공합니다. ol-ext 다운로드는 아래 링크에 접속하셔서 다운받으시면 됩니다. https://github.com/Viglino/ol-ext GitHub - Viglino/ol-ext: Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, chartCool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer,.. 2023. 10. 12.
[Openlayers] ol.style.icon image사이즈 조절방법 지난 포스팅에 이어서 [openlayers] Feature에 style적용하는 방법 + (ol.style.icon)*버전: openlayers6 기준 입니다.1. ol.style지도상에 특정 도형을 그릴때 우리는 Feature라는 객체를 사용했습니다. [Openlayers] 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GISteammoca.tistory.comol.style.icon사용시 사용되는 이미지의 크기를 줄여서 올리는 방법을 포스팅 해보도록 하겠습니다. 우선 지도상에 이미지를 사용할경우 ol.style.icon을 사용하여 이미지 스타일을 생성합니다. image: new ol.style.Icon ({ anchor : [0.5, 0.5], src :.. 2023. 10. 5.
[openlayers] Feature에 style적용하는 방법 + (ol.style.icon) *버전: openlayers6 기준 입니다.1. ol.style지도상에 특정 도형을 그릴때 우리는 Feature라는 객체를 사용했습니다. [Openlayers] 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com이때 Feature에는 색상이나 두께 또는 z-index등의 Style을 입힐 수 있는데, 이때 style을 지정하는 방법엔크게 두가지가 있습니다. 1) new ol.style. Style 생성new ol. layer. Vector ({ source : new ol. s.. 2023. 10. 5.
[Openlayers] 드래그영역속에 있는 Feature 찾기 *버전: openlayers6 기준 입니다. 이번 포스팅에서는 지난번에 올렸던 점, 선, 면 Feature그리기편에 이어서 https://teammoca.tistory.com/m/20 Openlayers 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com드래그를 했을때 영역의 Feature를 찾는 법을 알아보도록 하겠습니다. 1. 우선 지난 포스팅의 예제소스를 통해 지도상에 점, 선, 면 Feature 그려보겠습니다.//source생성 let sample_source = new.. 2023. 9. 25.
[Openlayers] 지도상에 클릭한 지점 위도,경도 좌표얻기 *버전: openlayers6 기준 입니다. 이번 포스팅은 Openlayers에서 지도상에 마우스로 클릭한 지점에 표시(Point)를 찍고, 해당 클릭한 지점의 위도와 경도를 얻는방법을 알아보도록 하겠습니다. 우선 지도상에 나타낼 point Feature를 생성하는 기본적인 틀은 지난 포스팅과 같습니다. https://teammoca.tistory.com/m/20 Openlayers 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com 그러나 이번 포스팅은 마우스를 찍는 시점에 .. 2023. 9. 21.
[Openlayers] 점, 선, 면 Feature 그리기 1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Feature , Source, Layer에 대해 간단하게 설명하겠습니다. 2. Feature , Source, Layer우선 openlayers에는 map이라는 핵심 객체가 있습니다. 그 안에서 Feature , Source, Layer등의 다른 객체들이 모여 map이라는 객체를 구성하게 됩니다. 객체 구성하는 크기의 순을 표현해보자면 Feature -> Source -> Layer순으로 이어집니다. 아래 그림을 통해 세 객체를 간단하게 표현해보았습니다.1) Feature Feature은 점(Po.. 2023. 9. 20.
오라클 Clob데이터 (Mybatis resultMap 처리방식) 1. CLOB(Character Large Object)LOB 데이터타입 중 하나로 문자열이나 이미지 데이터를 저장하는 문자형 대용량 데이터양식입니다. *LOB (Large Object)타입은 대욘량 데이터를 저장하기 위한 데이터 타입으로 Oracle 버전 8이상부터 지원합니다. 2. Mybatis resultMap을 이용하여 CLOB 데이터 select하기 오라클에서 Clob데이터를 가져올때는 그냥 일반적인 select문을 써서 clob데이터를 읽어올 수 없기에 Mybatis의 resultMap을 이용하여 불러옵니다. 예시) 아래와 같은 COLUMN6에 CLOB데이터 형식으로 된 테이블이 있습니다. 이 테이블을 select절에서 clob데이터를 불러오려면 아래와 같이 작성합니다. 작성1) resultM.. 2023. 9. 15.
SQL WITH절 1.WITH절이란?서브쿼리를 이름을 정의해 만든 임시테이블 *참고 : Oracle9버전 이상부터 with절 지원 2. With절은 언제 사용하는지?1) 서브쿼리 사용 시 가독성이 떨어지는 경우 보통 select문에서 서브쿼리를 많이 사용하게 되는데 서브쿼리가 길어거나 혹은 동일한 서브쿼리를 태울 때 with절을 용이하게 사용하실 수 있습니다. 간결한 서브쿼리를 작성한다면 문제가 없지만 서브쿼리가 길어지다보면 쿼리의 가독성도 떨어지게 되겠지요? 그럴때 WITH절로 쿼리를 분리시켜 임시테이블로 만든 후 From절에서 테이블처럼 사용할 수 있습니다. 2)동일한 데이터를 반복적으로 사용하는 경우 Sql내에서 동일한 데이터를 반복적으로 사용하는 경우 with절을 이용하기도 합니다. 3. With절 작성법WITH .. 2023. 8. 31.
css text-transform 과 websquare를 사용한 input 입력값제어 미션 : 입력시 소문자를 입력하더라도 대문자로 강제입력되야함 한글은 아예 입력지않아야함. 포커스가빠질때가아닌 입력중인실시간에 체크되야함 숫자와대문자만입력되야함 1.text-transform 은 대문자로 또는 소문자로 바꾸는 css 속성입니다. 기본값 : none 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 속성값 A none : 입력된 그대로 출력합니다. B capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. C uppercase : 모든 글자를 대문자로 바꿉니다. D lowercase : 모든 글자를 소문자로 바꿉니다 2. allowChar websquare에서 입력을 허용할 문자를 정의할수 있습니다 3. validateOnInput websquare inputbox .. 2023. 8. 30.
계층형쿼리 START WITH ~ CONNECT BY PRIOR 아래 테이블을 START WITH ~ CONNECT BY 절을 사용하여 계층형 쿼리를 만들어보고자 합니다.START WITH [조건] : [조건]에 맞는 레코드를 일단 조회합니다. 그결과를 기준으로 계층연결을시작합니다 CONNECT BY [조건] : [조건]에 맞게 연결해 나갑니다. 이때 CONNECT BY절에 PRIOR이 어디에 붙느냐에 따라 결과값이 달라지므로 주의할 필요가 있습니다. 컬럼명앞에 PRIOR 붙어있는 컬럼의 값을 일단읽고 그 값으로 다음 조건절을 수행하게 됩니다. 아래 구문을 해석하자면 START WITH cd = '0' : 컬럼명 cd의 값이 '0'인 레코드를 찾습니다. 찾은레코드에서 PRIOR이 붙은 'cd'의 값을 읽고 조건절 cd = pcd 절을 수행합니다. 그렇게 되면 cd값이.. 2023. 8. 28.
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.
웹스퀘어(websquare5) 기본교육 (주)인스웨이브의 표준웹기반 UI/UX상용솔루션 websquare5 기본교육을 시작합니다.목차 1. 설치 툴설치는 이클립스기반이라 압축만해제함 엔진설치는 웹어플리케이션구성후 websquare폴더와 lib를 포함시킴 2.개발환경(폴더구조,구동환경(java,jsp기반was)) websquare폴더에는 config.xml로 js,css,컴포넌트들속성의 공통적용을함 lib폴더에는 웹스퀘어엔진jar과 관련의존성있는 라이브러리들위치함 websquare_home폴더는 라이센스가 들어있고 파일업로드관련설정이 있음 WEB-INF/web.xml에는 웹스퀘어 servlet등록 3.툴설정 웹스퀘어실행을 위한 context와 contextPath설정은 웹스퀘어화면파일(.xml)최초실행시 설정함 화면그릴때 컴포넌트아이디 자동부여.. 2023. 8. 12.
HTML5 CSS 위치속성 position 배우기 position을 배우면서 시스템용 레이아웃만들기를 해보겠습니다. position은 위치속성이며 요소의 위치를 지정할 수 있습니다. position 속성중 대표적인 속성은 static, relative, absolute, fixed등이 있습니다. 요소에 position속성을 기재하지 않는다면 기본값으로는 static속성을 지니게 됩니다. absolute는 조상요소(element) 중 가장 가까운 태그를 기준으로 잡습니다. absolute가 기준으로 삼을 수 있는 위치속성은 같은absolute와 relative, fixed, stickey 네가지이며, 그중 해당되는 가장 가까운 태그를 기준으로 위치를 잡습니다. relative는 자신 앞에오는 형제요소중 absolute fixed 가 아닌대상들을 기준으로 .. 2023. 8. 9.
로컬postgreSql 설치와 awsRDS에서 postgreSql 인스턴스생성하고 DBeaver로 접속하기 postgreSql은 무료오픈소스 db입니다. 요즘 대형 SI에서 'tibero'와 더불어 많이 사용되더군요. 로컬에 간단히 설치하여 공부하실수도 있고, aws에서 무료사용해볼수있는DB서비스(aws RDS)를 이용하는 방법도 좋습니다. 관계형데이터베이스이므로 'Relational Database' Service 해서 'RDS'라고 합니다. 이번강의는 아래순서와 같이 진행하겠습니다.로컬에 postgreSql설치, dbever(디비에버) 설치aws rds instance생성 및 설정dbever(디비에버) 로 rds에 원격접속1. 로컬에 postgreSql설치 postgresql.org가셔서 다운로드후 설치하시면 아주간단하게 설치됩니다.윈도우즈 기반의 모든 설치가 그렇듯이 '관리자 권한으로 실행' 으로 실행합.. 2023. 8. 9.
WinSCP(putty)를 이용하여 Ubuntu서버에 접속하기 (AWS EC2 인스턴스 Ubuntu) 1. AWS EC2 - Ubuntu 인스턴스 상세정보창에 있는 퍼블릭 IPv4 주소 를 복사합니다.2. WinSCP에 접속하여 새사이트 - 호스트 이름에는 1번에서 복사한 ip주소를 붙여넣습니다. ※ 비밀번호 대신 우리는 인스턴스 생성시 만들었던 키페어 (.pem키)를 이용하여 로그인을 하기위해 '고급'버튼을 클릭합니다.파일 프로토콜 : SFTP 호스트이름 : 인스턴스 퍼블릭 IPv4 주소 (IP) Port : 22 3. SSH - 인증 메뉴에 들어가 개인키 파일(K) ... 버튼을 클릭해서 파일을 불러옵니다.4. 저번 포스팅에 생성했던 pem키를 가져옵니다. 근데 어딨는지 잘모르시겠죠? *인스턴스 생성시 키를 새로 생성하셨다면 '다운로드'폴더에 자동 다운로드 되어있을겁니다5. pem키를 ppk로 변환하.. 2023. 8. 8.
AWS EC2 인스턴스 우분투(Ubuntu 22.04) 서버 무료(프리티어)로 개설하기 1. https://aws.amazon.com/ko/ 에 들어가서 콘솔 홈에서 'EC2'를 클릭합니다.2. 왼쪽메뉴의 EC2 대시보드에서 리소스 - 인스턴스(실행 중) 을 클릭합니다. (또는 왼쪽메뉴에서 바로 인스턴스를 클릭)3. 우측상단에 있는 주황색버튼 '인스턴스 시작' 버튼을 클릭합니다.4. 인스턴스에 생성할 OS(Ubuntu)를 선택합니다. Ubuntu 버전 : 22.045. 인스턴스 유형은 프리티어(무료)로 사용가능한 t2.micro 로 설정합니다.6. 키 페어를 생성합니다. (프라이빗 키 .pem 키를 생성)7. 인스턴스에 사용될 방화벽(보안 그룹)을 새로 생성합니다. 8. 볼륨(인스턴스 용량)은 프리티어로 최대 30GB사용 가능하므로 30GB를 입력합니다. 스크립트오류가좀있어 입력시 튕길수 .. 2023. 8. 8.
AWS 무료회원가입하기 aws에 가입하면 클라우드 호스팅서비스를 1년동안 무료사용가능합니다. 필요한 준비사항은 가.이메일주소 나.신용카드 만 있으면 가입할수 있습니다 추가로 영문주소가 필요한데 네이버에 주소를입력하면 변환해줍니다 1. AWS에 가입할 이메일계정 및 계정이름을 하나 지어줍니다. AWS 계정이름은 가입 이후에 변경도 가능합니다. 2. 가입에 필요한 이메일주소로 인증메일이 발송됩니다. 이메일로 들어가면 '확인코드'를 볼수있습니다 3. 해당 인증번호를 입력한 다음 계정에 사용될 비밀번호와 보안번호를 입력합니다.4. AWS회원가입에 필요한 개인정보를 입력합니다.5. AWS에 연결할 카드정보를 입력합니다. 무료가 아닌 서비스를 사용하면 과금될수있으므로 신용카드는 반드시 등록해야합니다 6. 입력한 카드번호의 휴대폰번호 인증.. 2023. 8. 8.
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.

티스토리툴바