'도구, 툴/세팅' 카테고리의 글 목록

도구, 툴/세팅

[React] 기본 프로젝트 띄우기 2019.11.03
[vue] vuetify 사용 설정 2019.07.21 1
SVN 저장소 설정 2018.07.21
GIT 저장소 설정 2018.07.15
node.js 설치 2018.06.10
VSCode 설치 2018.06.10
CentOS 설치 2018.05.31
PyCharm 설치 2018.04.22
Python 설치 2018.04.22
Tomcat / MySQL 연동 2018.03.17

[React] 기본 프로젝트 띄우기

2019. 11. 3. 01:04

728x90

작성일자 : 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

728x90

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

[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. 7. 21. 12:32

728x90

[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 추가 확인

728x90

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

[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. 7. 21. 20:40

728x90

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에서 확인 가능

728x90

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

[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. 7. 15. 20:47

728x90

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"

728x90

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

[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. 6. 10. 12:39

728x90

node.js 설치

작성일시 : 2018년 06월 10일

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

1. 설치파일 준비

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

2. 설치

Default 설치

3. 확인

728x90

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

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. 6. 10. 12:21

728x90

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 - 색 괄호

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

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. 5. 31. 21:47

728x90

CentOS 설치

작성 일시 : 2018년 05월 31일

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

Install system with basic video driver

Skip

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

Next(Default)

Basic Storage Devices

Yes, discard any data

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

위치 설정

Root 패스워드 설정

파티셔닝 설정

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

swap - 메모리 * 2 권장

/home, /data, / 각각 구분

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

OS 설치 완료

728x90

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

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. 4. 22. 13:49

728x90

PyCharm 설치

작성일자 : 2018년 04월 22일

환경 : Window 10 Pro 64bit, PyCharm 2018.1.1

설치파일 다운로드 링크

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

PyCharm 실행

Default 선택

728x90

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

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. 4. 22. 01:00

728x90

Python 설치

작성 일시 : 2018년 04월 22일

환경 : Window 10 Pro 64bit, Python 3.6.5

설치 파일 다운로드

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

설치 파일 실행

설치 완료

설치 확인

728x90

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

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. 3. 17. 22:34

728x90

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

728x90

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

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

PREV 1 2 NEXT

개인히스토리저장소