반응형

작성일자 : 2019.11.03

환경 : npm 6.12.0

 

 

1. create-react-app 설치

 

> npm -g install create-react-app 

 


2. Project 생성

 

> create-react-app "ProjectName"

 

# VSCode 내 터미널에서는 명령어 안먹힘 -> CMD 사용


3. Project 실행

 

> cd "PrjoectName"
> npm start

 

확인 

Port : 3000

 

 

 

 

반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

[vue] vuetify 사용 설정  (1) 2019.07.21
SVN 저장소 설정  (0) 2018.07.21
GIT 저장소 설정  (0) 2018.07.15
node.js 설치  (0) 2018.06.10
VSCode 설치  (0) 2018.06.10
반응형

[vue] vuetify 사용 설정

 

작성일자 : 2019.07.21

환경 : Vue 2.6.10, Vue-Cli 2.9.10, npm 6.9.0, webpack 3.12.0

 

 

1. vuetify 추가

 

%ProjectPath%> npm install vuetify

 

node_modules 밑에 vuetify 생성 확인

 

 

 

2. vuetify 사용 설정

 

%ProjectPath%> vue add vuetify

 

아래 설정이 자동으로 추가됨

 

main.js

...
import vuetify from './plugins/vuetify'
new Vue({
  render: h => h(App),
  vuetify,
  router
}).$mount('#app')
...

 

src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
});

 

src/components/HelloWorld.vue

<template> 
   ...
   ...
</template>

<script>
   export default {
      ...
      ...
   }
</script>

 

app.vue template 수정

 

 

3. 확인

 

vuetify 버튼 적용 확인

 

 

<template>
  <v-app id="app">
    <v-btn color="success">Success</v-btn> 
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
  </v-app>
</template>

 

접근 시 vuetify 버튼 확인 가능

 

4. 사용 예시

 

vuetify 홈페이지에서 추가하고 싶은 Component를 찾기

https://vuetifyjs.com/ko/components/api-explorer

 

'Footer를 만들어보자'

 

예제 우측 상단 <> 버튼을 누르면 template과 script 코드가 나온다

 

 

foorter.vue 생성 후 template, script 복붙

 

 

 

컴포넌트를 사용할 vue에 추가

 

...
<script>
import vfooter from '@/components/footer'
export default {
   name: 'App',
   components: {
      vfooter
   }
}
</script>
...

 

template에 추가 

# vuetify 컴포넌트는 <v-app> 태그 안에 존재해야함

 

 

footer 추가 확인

반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

[React] 기본 프로젝트 띄우기  (0) 2019.11.03
SVN 저장소 설정  (0) 2018.07.21
GIT 저장소 설정  (0) 2018.07.15
node.js 설치  (0) 2018.06.10
VSCode 설치  (0) 2018.06.10
반응형

SVN 저장소 설정


작성일자 : 2018년 07월 16일

환경 : Amazon Linux AMI 2018.03 / SVN 1.9.7

 


1. SVN 서버 설정


# Root 계정으로 작업 권고


 

1.1 SVN 설치


설치 명령어 입력


$ yum install subversion

 


설치완료




 

1.2 저장소 설정


SVN 최상위 루트폴더 설정


$ mkdir /var/svn

 


repository 생성


$ svnadmin create --fs-type fsfs /var/svn/repos

 


생성완료



 


1.3 환경 설정


$ vi /var/svn/repos/conf/svnserve.conf

 

# 공백 주의



$ vi /var/svn/repos/conf/passwd

 

ID=PASSWORD 형식




$ vi /var/svn/repos/conf/authz

 


 

환경변수 설정


$ vi /etc/profile

..

SVN_EDITOR=/usr/bin/vim

export SVN_EDITOR

..

$ source /etc/profile

 



1.6 서비스 시작


$ svnserve -d -r /var/svn/repos

// svnserve -d -r <path to repository>

 

++ 아래와 같은 오류 출력 시



/etc/sysconfig/svnserve 에서 환경에 맞게 경로 수정




SVN 기본 디렉터리 구조 생성


$ svn mkdir --parents svn://127.0.0.1/var/svn/repos/trunk

$ svn mkdir --parents svn://127.0.0.1/var/svn/repos/branches

$ svn mkdir --parents svn://127.0.0.1/var/svn/repos/tags

 

// svn mkdir svn://”IP”/”Repository Path”/”Directory”

// trunk, branches, tags 3개 디렉터리 생성

// 명령어 입력 시 자동으로 VIM이 활성화 되며, :q , c 차례로 입력 후

// root 비밀번호, svn 계정 입력( Write 권한 있는 계정 필수 )

 

 

svn list svn://”IP”/”Repository” 입력 후 아래 내용 확인

 


 


2. Client 서버 설정


# Window 기준


2.1 로컬 저장소 설정


Tortoise SVN 설치 ( https://tortoisesvn.net/downloads.html )



저장소로 사용할 폴더 우클릭 후 SVN Checkout 클릭


URL 입력 후 계정 입력




연결 확인



 


2.2 Commit


테스트를 위한 저장소 수정



 

디렉터리 우클릭 후 Commit


 



  

Commit 내용은 TortoiseSVN Repository Browser에서 확인 가능




반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

[React] 기본 프로젝트 띄우기  (0) 2019.11.03
[vue] vuetify 사용 설정  (1) 2019.07.21
GIT 저장소 설정  (0) 2018.07.15
node.js 설치  (0) 2018.06.10
VSCode 설치  (0) 2018.06.10
반응형

GIT 저장소 설정

작성일자 : 2018년 07월 15일

환경 : Windows 10 Pro, Git CLI 2.18

시나리오 : GIT 저장소 생성 후 로컬에서 사용할 수 있도록 설정


1. GIT 저장소 생성


www.github.com 접속

계정 생성 후 로그인

 



저장소 명, 설명 입력 후 생성




생성 저장소 확인




빈 저장소 초기화면 ( URL 확인 )

 




2. Local 저장소 설정


GIT CLI 설치


https://git-scm.com/downloads




설치 이후 폴더를 우클릭 하면 Git 관련 옵션이 새로 추가


저장소로 사용할 폴더 우클릭 후 Git Bash Here 클릭




git clone “URL” 명령어로 저장소 로드


저장소를 로드는 했으나 해당 저장소는 Empty




GIT 저장소로 설정 된 디렉토리는 (master)가 뒤에 붙는다



 



3. 최초 커밋


로드한 저장소 내 테스트 파일 생성




설정한 저장소에서 GIT CLI로 다음 명령어 실행


$ git add –A

$ git commit –m “Commit Message”

$ git push origin master



 


확인



+++

Git Tags 삭제

> git push origin :tags/"Tag_Name"




반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

[vue] vuetify 사용 설정  (1) 2019.07.21
SVN 저장소 설정  (0) 2018.07.21
node.js 설치  (0) 2018.06.10
VSCode 설치  (0) 2018.06.10
CentOS 설치  (0) 2018.05.31
반응형

node.js 설치


작성일시 : 2018년 06월 10일

환경 : Window 10 Pro, node.js v8.11.2



1. 설치파일 준비

https://nodejs.org/ko/download/


2. 설치

Default 설치




3. 확인




반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

SVN 저장소 설정  (0) 2018.07.21
GIT 저장소 설정  (0) 2018.07.15
VSCode 설치  (0) 2018.06.10
CentOS 설치  (0) 2018.05.31
PyCharm 설치  (0) 2018.04.22
반응형

VSCode 설치 

작성일시 : 2018년 06월 10일

환경 : Window 10 Pro, Visual Studio Code(VSCode) 1.24.0



1. 설치파일 준비


https://code.visualstudio.com/


2. 설치


따로 설정할 필요없이 ‘다음’ 만 눌러도 설치 가능                                               


3. 화면



1. 탐색기 : Root 폴더이며 workspace가 된다

2. 검색 : workspace 전체범위로 검색 및 바꾸기

3. 소스제어 : 파일 히스토리, 형상관리연동시 사용

4. 디버그 : 디버깅시 사용

5. 확장 : 특정 플러그인을 검색하여 설치할수 있다

 

권장 플러그인

esLint - js linter

tsLint - ts linter

Intellisense for css class names - css 클래스명 자동 완성 기능

auto rename tag - htmlxml,jsx의 태그를 수정할 때 페어태그를 자동수정

auto close tag - 자동으로 html/xml,jsx 태그의 close 태그를 만들어 준다

beautrify – 코드정리

rainbow brackets - 색 괄호

 

추천 플러그인

debugger for chrome - 구글 크롬과 통합된 디버깅 환경을 제공

project manager - workspace를 프로젝트 별로 관리 할 수 있다

settigs sync - 설정을 동기화

html snippets - snippets 제공, (<a 타이핑 시 <a href=""></a>까지 출력 )

open in brower - 브라우저로 열기

minify - js 파일을 min.js파일로 생성

bookmarks - 이클립스의 북마크

git history - git 로그

git project manager - git 프로젝트 매니저

setting sync – 설정공유

 

 

4. 참조

http://gomcine.tistory.com/entry/VS-Code-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

http://poiemaweb.com/typescript-vscode

 


반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

GIT 저장소 설정  (0) 2018.07.15
node.js 설치  (0) 2018.06.10
CentOS 설치  (0) 2018.05.31
PyCharm 설치  (0) 2018.04.22
Python 설치  (0) 2018.04.22
반응형

CentOS 설치


작성 일시 : 2018년 05월 31일

환경 : CentOS 6.3 (CentOS-6.3-x86_64-bin-DVD1.iso)


Install system with basic video driver



Skip


하드웨어 미지원 경고. 무시해도 설치는 가능


Next


Next(Default)


Next(Default)


Basic Storage Devices


Yes, discard any data


Hostname 설정 (설치 후 변경 가능)


위치 설정


Root 패스워드 설정


파티셔닝 설정 

본 과정에서는 Layout을 설정, Use All Space 선택 시 / 하나 통째로 잡힌다




swap - 메모리 * 2 권장


/home, /data, / 각각 구분


Next


Next


GUI 필요시 Desktop, Minimal Desktop 설정. 용도가 존재할 시 Minimal 권장



OS 설치 완료


반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

node.js 설치  (0) 2018.06.10
VSCode 설치  (0) 2018.06.10
PyCharm 설치  (0) 2018.04.22
Python 설치  (0) 2018.04.22
Tomcat / MySQL 연동  (0) 2018.03.17
반응형

PyCharm 설치


작성일자 : 2018년 04월 22일

환경 :  Window 10 Pro 64bit, PyCharm 2018.1.1


설치파일 다운로드 링크

https://www.jetbrains.com/pycharm/download/#section=windows










PyCharm 실행




Default 선택



반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

VSCode 설치  (0) 2018.06.10
CentOS 설치  (0) 2018.05.31
Python 설치  (0) 2018.04.22
Tomcat / MySQL 연동  (0) 2018.03.17
Apache , Tomcat 연동 ( mod_jk 사용 )  (0) 2018.03.17
반응형

Python 설치


작성 일시 : 2018년 04월 22일

환경 : Window 10 Pro 64bit, Python 3.6.5


설치 파일 다운로드 

https://www.python.org/downloads/windows/



설치 파일 실행




설치 완료



설치 확인







반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

CentOS 설치  (0) 2018.05.31
PyCharm 설치  (0) 2018.04.22
Tomcat / MySQL 연동  (0) 2018.03.17
Apache , Tomcat 연동 ( mod_jk 사용 )  (0) 2018.03.17
[Ubuntu] MySQL 설치  (0) 2018.03.17
반응형

Tomcat/MySQL 연동

 

작성일시 : 2018년 03월 02일

환경 : Window 2012 R2 Datacenter – Tomcat 7.0.84 / Ubuntu 14.04 – MySQL 5.7

시나리오 :

물리적으로 구분 된 서로 다른 서버간의 WAS ( Tomcat ) / DB ( MySQL ) 연동

Tomcat 서버에서 MySQL 서버의 Connector 포트인 3306(Default)에 연결

 

1. 필요 라이브러리 준비


Connector/J

경로 : https://dev.mysql.com/downloads/connector/j/




다운로드 파일 구성



 

mysql-connector-java-5.1.45-bin.jar 파일을 %Tomcat_Home%\lib 아래에 복사

 



2. 확인


서버 재시작 후 연동 확인

%Tomcat_Home%\webapps\ROOT 디렉터리에 테스트.jsp파일 생성

테스트.jsp파일의 이름은 브라우저에서 접근하기위한 URL 값이 되며 본 글에서는 db.jsp를 사용

 

db.jsp -

 

<%@ page contentType="text/html;charset=euc-kr" pageEncoding="EUC-KR" %>

<%@ page import="java.sql.*"%>

<html>

<head>

<title>MySQL select 예제</title>

</head>

<body>

<%

 

String DB_URL = "jdbc:mysql://"IP":3306/mysql";

// DB URL Format = "jdbc:mysql://'DB IP':'Connector Port'/'DB_Name'";

 

String DB_USER = "test";

String DB_PASSWORD= "test";

// DB ID/PASSWORD

 

Connection conn;

Statement stmt;

ResultSet rs = null;

String query = "select * from test";

try {

  Class.forName("com.mysql.jdbc.Driver");

  // Load JDBC Class

 

  conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);

  // Make Connection

 

  stmt = conn.createStatement();

  rs = stmt.executeQuery(query);

  // Do Query -> ( SELECT * FROM "test" )

 

  out.print("result: </br>");

  String s;

 

  while (rs.next())

  {

   out.println(rs.getString(1));

   out.println(" ");

  

   s = rs.getString(2);

 

   out.println(s);

   out.println("<br>");

  }

  //Print result to query

 

  rs.close();

  stmt.close();

  conn.close();

 }

 catch(Exception e){

  out.print("Exception Error...");

  out.print(e.toString());

 }

 finally {

 }

%>

</body>

</html>

 

브라우저에서 http://’WAS_URL’:’Service_Port’/’test.jsp' 접근


 




DB 현황


DB 종류 : MySQL

DB Instance name : mysql

DB ID/Password : test/test

DB table : test

Table column : idx, name

 





반응형

'도구, 툴 > 세팅' 카테고리의 다른 글

PyCharm 설치  (0) 2018.04.22
Python 설치  (0) 2018.04.22
Apache , Tomcat 연동 ( mod_jk 사용 )  (0) 2018.03.17
[Ubuntu] MySQL 설치  (0) 2018.03.17
[Window] Tomcat 설치  (0) 2018.03.17

+ Recent posts

티스토리툴바