'분류 전체보기'에 해당하는 글 11건

풀스택 개발자를 위한 MEAN 스택 입문 4. gulp

기타 2018. 8. 17. 01:10


gulp 모듈을 Mac OS에 설치하는 경우 책에서는 언급하지 않는 오류가 있다.



1. gulp 설치


npm config set prefix /usr/local

npm install gulp gulp-cli --global

npm install gulp gulp-cli --save


보통 예제들은 첫 번째 커맨드 없이 gulp 설치를 안내하는데 내 경우는 npm이 잘못 깔린 건지 명령만으로는 gulp가 정상적으로 작동하지 않아 별도로 명령을 추가했다. npm이 모듈을 설치할 때 강제로 해당 prefix를 이용하도록 한다. (Mac OS 키워드로 검색되는 결과가 많은 걸로 보아 OS의 특성인 것도 같다.)



2. gulpfile.js 작성


1
2
3
4
5
6
7
8
9
var gulp = require('gulp');
 
gulp.task('griting', function () {
    console.log('hello, gulp!')
});
 
gulp.task('default', function () {
    gulp.start('griting')
});
cs


걸프가 어떻게 작동하는지 코드만 봐도 짐작하리라 생각된다.

파일명을 바꾸지 않도록 주의한다.



3. gulp 실행


gulp


예제나 기타 웹 자료에서는 gulp {파일명} 인 경우가 많았으나 실제로 해당 커맨드를 실행하면 gulpfile.js의 포맷팅이 적절하지 않다고 출력된다. (이것도 OS의 문제인지, 내가 잘못 설치한 탓인지 짐작도 가지 않는다.)

실행 결과는 아래와 같다.


 


4. 복수의 css 파일 통합


걸프는 파이프/스트림을 활용하는 아키텍처의 비동기식 작업 실행기다. 스트림 기반의 빌드 시스템이라고도 하던데, 나는 책에서 언급한 복수의 css 파일을 통합해 min 버전을 출력하는 걸프 코드를 소개하려 한다.

코드 작성에 앞서 필요한 걸프 플러그인을 설치한다.


npm install gulp-stylus gulp-concat --save


설치가 끝났다면 임의의 styl 파일 두 개를 작업 경로/assets/ 아래에 작성하자. 스타일러스가 낯선 사람은 아주 간략한 수준의 css를 확장자만 styl로 바꾸어 작성하도록 한다. 나는 스타일러스가 낯설었기 때문에 아래와 같이 작성했다.


1
2
3
4
#table1 {
    text-align: center
    
}
cs

▲ ./assets/sample1.styl

1
#table2 {        text-shadow: 0ch}
cs


▲ ./assets/sample2.styl


공백 압축이 적절하게 이루어지는지 알고 싶었기 때문에 의도적으로 포맷팅을 적용하지 않았다.

다음은 두 개의 스타일러스를 css로 컴파일 후 하나의 min 버전 css로 출력하는 걸프 스크립트다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp')
var stylus = require('gulp-stylus')
var concat = require('gulp-concat')
gulp.task('css', function () {
    gulp.src('./assets/*.styl')
        .pipe(stylus({
            compress: true
        }))
        .pipe(concat('main.min.css', {
            newLine: ' '
        }))
        .pipe(gulp.dest('./public/stylesheets'))
})
gulp.task('default', function () {
    console.log('test')
    gulp.start('css')
})
cs


▲ gulpfile.js


해당 코드는 assets 경로 아래 모든 styl 파일을 압축 후 public/stylesheets 경로 아래 main.min.css로 출력한다.

실행 결과로 생성된 main.min.css의 내용은 다음과 같다.


1
#table1{text-align:center} #table2{text-shadow:0}
cs


깔끔하게 압축된 것을 확인할 수 있다.



5. 파일 변경 감시 처리


보통 개발자라면 원본 파일 수정 후 gulp를 매번 직접 수행하고 싶지는 않을 것이다.

이제 작업 경로를 늘 감시하다 파일이 변경되면 자동적으로 원하는 태스크를 수행하는 걸프 코드를 작성해보자.


1
2
3
4
5
6
7
gulp.task('watch', function () {
    gulp.watch('./assets/*.styl', ['css'])
})
 
gulp.task('default', function () {
    gulp.start('watch')
})
cs


이제 gulp를 실행하면 종료하지 않는 이상은 프로세스가 계속 지정한 경로를 감시할 것이다.

상기 코드는 assets 아래에 위치한 styl 확장자를 가진 모든 파일의 변화를 감시하고, 변화가 있을 때마다 'css' 태스크를 실행한다.

개발자는 minify와 concat을 위해 최초의 스크립트만 작성하면 되는 것이다.

 



이전 회사에서 사이트 최적화 작업 때 min 파일을 수기로 만든 기억이 있는데 역시 개발자는 공부만이 답이라는 걸 알 수 있다. 지식이 없으면 손발이 고생하는 건 만고불변의 진리인가 싶다.


추가로 css를 대상으로 한 플러그인도 여럿 있는 듯하니 필요한 사람은 찾아보도록 하고 기타 걸프 상세는 공식 문서를 참고하기를 추천한다. 언제든 역시 공식 레퍼런스가 최고다…. 책에서는 javascript 압축 예제도 안내하고 있으니 관심 있는 사람은 책도 읽어보자.




'기타' 카테고리의 다른 글

풀스택 개발자를 위한 MEAN 스택 입문 3. mongodb와 mongoose 적용하기  (0) 2018.08.16
풀스택 개발자를 위한 MEAN 스택 입문 2. express 적용하기  (0) 2018.08.14
풀스택 개발자를 위한 MEAN 스택 입문 1. Node.js로 간단한 웹서버 작성  (0) 2018.08.14
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

풀스택 개발자를 위한 MEAN 스택 입문 3. mongodb와 mongoose 적용하기

기타 2018. 8. 16. 23:46



참고 서적: 풀스택 개발자를 위한 MEAN 스택 입문

개발 환경: Mac OS


책을 읽고 관련한 정보가 잊혀지기 전에 간략하게 작성한다.






1. mongodb 설치


brew install mongodb

mongo --version > v4.0.1


로컬에 디비를 설치하지 않는 경우는 호스팅 사이트를 이용할 수 있다.

내 경우는 책에서 추천한 mlab에서 제공하는 무료 500mb 플랜을 받아 연결했다.

몽고디비 인스턴스 관리 외에 데이터 관리를 위한 GUI도 제공하기 때문에 여러모로 쉘 작업보다 편리하다.




2. mongoose 설치


※ 전역으로 설치하지 않는 경우는 작업 경로로 이동해서 작업해야 하며 전역으로 설치시에는 --save 대신 -global(-g) 옵션이 필요하다.


npm install mongoose --save




3. mongoose 사용


몽구스 사용은 스키마 정의부터 시작된다. 스키마를 정의하고 나면 해당 스키마를 통해 모든 CRUD 작업을 코드에서 통제할 수 있다.

(개인적으로는 java 웹 애플리케이션에서 작성하던 Entity와 유사하게 여겨졌다. 다만 Entity는 단순히 테이블 명세를 객체화 하기 위한 POJO 클래스에 지나지 않아 정보를 담는 것 외에는 특별한 일을 하지 않는다.)

책에서 작성한 HR앱을 베이스로 한 간단한 스키마 예제를 첨부한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var EmployeeSchema = new Schema({
    id: {
        type: String,
        required: true,
        unique: true
    },
    name: {
        first: {
            type: String,
            required: true
        },
        last: {
            type: String,
            required: true
        }
    },
    team: {
        type: Schema.Types.ObjectId,
        ref: 'Team'
    },
    image: {
        type: String,
        default: 'images/user.jpg'
    },
    address: {
        lines: {
            type: [String]
        },
        city: {
            type: String
        },
        zip: {
            type: Number
        }
    }
})
 
module.exports = mongoose.model('Employee', EmployeeSchema)
cs


▲ models/EmployeeSchema.js


코드는 매우 쉽고 직관적이다. 언급하고 넘어갈 만한 부분은 연관성을 나타낸 team에 대한 정보다.

Schema.Types.ObjectId는 team을 위한 값이 몽고디비의 유일한 식별자라는 뜻으로 team을 위해 사용할 모델명은 Team임을 알 수 있다. TeamSchema의 정의는 아래와 같다.


1
2
3
4
5
6
7
8
9
10
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var TeamSchema = new Schema({
    name: {
        type: String,
        required: true
    }
})
 
module.exports = mongoose.model('Team', TeamSchema)
cs


▲ models/TeamSchema.js


모델 정의 때 사용된 값이 ref에서 사용되는 것을 확인할 수 있다. 이제 스키마를 통해 간략한 CRUD 코드를 작성해 보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var mongoose = require('mongoose')
var Team = mongoose.model('Team')
 
exports.findOne = findOne
exports.insert = insert
exports.update = update
exports.remove = remove
 
function findOne(team, callback) {
    Team.findOne(team, function (err, data) {
        callback(data)
    })
}
 
function insert(team, callback) {
    Team.create(team, function (err, target) {
        callback(null, '[inserted]')
    })
}
 
function update(team, changing, callback) {
    team.name = changing
    Team.update(team, function (err, target) {
        callback(null, '[updated]')
    })
}
 
function remove(team, callback) {
    Team.remove(team, function (err, target) {
        callback(null, '[deleted]')
    })
}
cs


▲ lib/team.js


TeamSchema와 연관된 CRUD 코드를 모아둔 서비스다.

예제 코드이므로 별도의 에러 처리는 모두 생략했으나 실제 서비스에서는 반드시 작성하도록 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
require('./models/team')
var mongoose = require('mongoose')
var Team = mongoose.model('Team')
var teamService = require('./lib/team')
 
var dbUrl = 'mongodb://{url}:{port}/{db name}'
mongoose.connect(dbUrl, function (err) {
    if (err) {
        return console.log('[DB 연결 실패] ' + err)
    } else {
        console.info('[DB 연결] ' + Date.now())
 
        var data = { name: 'Development' }
        teamService.insert(data, logger)
        
        // teamService.findOne(data, function (record) {
        //     console.info('[updating...]')
        //     console.info('[before] ' + record.name)
        //     teamService.update(record, 'new Development', logger)
        //     console.info('[after] ' + record.name)
        // })
    }
})
 
function logger(err, act) {
    console.log(act)
}
 
process.on('SIGINT', function () {
    mongoose.connection.close(function () {
        console.info('[DB 연결 해제] ' + Date.now())
        process.exit(0)
    })
})
cs


▲ 서비스 호출 예시


현재 코드에서는 새로운 행을 추가하는 코드만 활성화되어 있다.

수정, 삭제에 관한 코드 호출과 해당 CRUD를 제공하는 RestfulAPI를 작성은 이제까지의 포스팅을 참고해 작성할 수 있다.




몽고디비가 아닌 다른 데이터베이스(관계형을 아우르는)를 연결하고 싶은 경우는 관련한 노드 모듈을 찾아볼 것을 추천한다. 책에서는 별도로 MySQL을 언급하고 있다.


'기타' 카테고리의 다른 글

풀스택 개발자를 위한 MEAN 스택 입문 4. gulp  (0) 2018.08.17
풀스택 개발자를 위한 MEAN 스택 입문 2. express 적용하기  (0) 2018.08.14
풀스택 개발자를 위한 MEAN 스택 입문 1. Node.js로 간단한 웹서버 작성  (0) 2018.08.14
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

풀스택 개발자를 위한 MEAN 스택 입문 2. express 적용하기

기타 2018. 8. 14. 19:39



참고 서적: 풀스택 개발자를 위한 MEAN 스택 입문

개발 환경: Mac OS


책을 읽고 관련한 정보가 잊혀지기 전에 간략하게 작성한다.






1. 익스프레스 생성기 설치 및 실행


npm install express-generator -g


-g는 global을 의미한다. 익스프레스 생성기 설치가 완료되었다면 작업 경로로 이동 후 express 를 실행한다.



▲ express 실행 결과


bin: 명령행에서 수행할 의도가 있는 파일


npm start 혹은 node ./bin/www 로 서버를 시작할 수 있다.




2. 기존 노드 앱 익스프레스 적용


이전 포스팅 3번 항목에서 기초적인 라우팅을 제공하는 간단한 노드 앱을 작성했었다.

해당 코드에 익스프레스를 적용해 리팩토링한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var express = require('express')
var app = express()
 
app.get('/employees', function (req, res, next) {
    res.send('직원 목록')
})
 
 
app.get('/employees/:employeeId', function (req, res, next) {
    res.send('직원 코드 ' + employeeId + '의 정보')
})
 
var server = app.listen(1337, function () {
    console.info('Server started on port 1337')
})
cs


▲ express_server.js


리팩토링이 끝났다면 node express_server.js 로 실행해보자. 정적 파일 외에는 이전과 동일한 결과를 얻을 것이다.

익스프레스는 이 외에 POST, DELETE, PUT에 해당하는 모듈도 제공한다.

express 실행 후 생성된 bin/www와 app.js를 보며 우리가 작성한 express_server.js가 npm start를 통해 적용되도록 작성해볼 것을 권한다.




3. 라우트


라우트는 http 동사와 경로를 포함한다. 상기 예시 코드에서 쓴 바와 같이 정적 경로만으로 이루어질 수도 있으며 인자 혹은 옵션 인자를 포함하는 경우도 있다.


  • 정적 경로 예시: /employees > http://.../employees
  • 인자 경로 예시: /employees/:employeeId > http://.../employees/1003
    함수 내에서 옵션 값은 req.params를 통해 접근할 수 있다. 상기 예시의 경우 인자 employeeId에 접근하기 위해서는 req.params.employeeId를 호출한다.
  • 옵션 인자 경로 예시: /employees/:employeeId/:subEmployeeId? > http://.../employees/1003/12 OR http://.../employees/1003
    다만 옵션 인자는 문서화가 어렵고 다양한 인자 옵션 기반 탓에 디버깅이 어려우므로 사용을 권장하지 않는다.

이외 라우트에는 정규 표현식 또한 사용 가능하다. 상기 예시 중 인자 경로 예시를 정규 표현식으로 표현하면 /^\/employees\/(\w+)$/i가 될 것이다. 정규 표현식을 사용할 때는 미들웨어 함수에서 해당 값에 접근하기 위해 ()를 사용한 캡처 그룹을 생성해야 한다. 익스프레스는 모든 라우트 정의를 정규 표현식으로 변환한다.




'기타' 카테고리의 다른 글

풀스택 개발자를 위한 MEAN 스택 입문 4. gulp  (0) 2018.08.17
풀스택 개발자를 위한 MEAN 스택 입문 3. mongodb와 mongoose 적용하기  (0) 2018.08.16
풀스택 개발자를 위한 MEAN 스택 입문 1. Node.js로 간단한 웹서버 작성  (0) 2018.08.14
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

풀스택 개발자를 위한 MEAN 스택 입문 1. Node.js로 간단한 웹서버 작성

기타 2018. 8. 14. 18:56



참고 서적: 풀스택 개발자를 위한 MEAN 스택 입문

개발 환경: Mac OS


책을 읽고 관련한 정보가 잊혀지기 전에 간략하게 작성한다.






1. 노드 설치


brew install node

node --version > v10.7.0


node와 노드 패키지 관리자인 npm이 함께 전역으로 설치된다.




2. 노드 디버깅


서적에서는 별도의 디버깅 툴을 안내하고 있지만 현재 시점에서 해당 프로젝트는 지원되지 않으므로 아래 URL을 참고한다.

https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

노드 내장 디버거를 크롬의 DevTools 인터페이스에 연결해서 사용할 수 있도록 하는 외부 모듈이다.




3. 간단한 노드 서버 작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var http = require('http')
http.createServer(function (req, res) {
 
    req.method = req.method.toUpperCase()
 
    if (req.method !== 'GET') {
        writeContents(res, 403, 'Forbidden')
    }
 
    var _url
    if (_url = /^\/employees$/i.exec(req.url)) {
        writeContents(res, 200, '직원 목록')
    } else if (_url = /^\/employees\/(\d+)$/i.exec(req.url)) {
        writeContents(res, 200, '직원 상세')
    } else {
        writeContents(res, 200, '정적 파일')
    }
}).listen(1337, '127.0.0.1')
 
function writeContents(res, code, msg) {
    res.writeHead(code, { 'Content-Type': 'text/plain' })
    res.end(msg)
}
cs


▲ 파일명 server.js


로컬 1337 포트를 듣는 노드 서버로, 아주 기초적인 라우팅만을 지원한다.

작업 후 터미널에서 node server.js 를 호출, 브라우저에서 127.0.0.1:1337/employees에 접속해보자.

'직원 목록' 이라고 표시되어야 한다.




4. package.json


깨끗한 작업 경로에서 npm init을 실행하면 package.json이 생성되며, 해당 파일에는 앞으로 개발자가 작성할 노드 앱에 관한 정보가 기술된다.



▲ npm init 실행 결과


나는 이미 express 앱으로 작성 후 npm init 을 실행했기 때문에 클린한 경로에서 호출한 경우와는 결과가 상이할 수 있다.

package.json 은 특별한 경우가 아니라면 손으로 수정하는 것을 지양해야 한다.


  • name: 모듈명. 'node'나 'js'가 들어가서는 안 되며, 해당 값이 npm 레지스트리에서 사용할 URL에 포함되므로 URL에 사용 불가능한 문자는 피한다.
  • version: 패키지 버전. 주버전.부버전.패치, 즉 시멘틱 버전으로 표현한다.
  • scripts: package.json 파일이 위치한 경로에서 실행할 수 있는 추가적인 npm 명령을 제공한다. 예시의 경우 "start"가 정의되어 있으므로 npm start와 node ./bin/www 는 같은 것을 의미한다.
  • dependencies: 현재 모듈이나 앱이 기능하기 위해 필요한 모든 모듈의 정보로. 자세한 것은 https://github.com/npm/node-semver를 참고한다. dependencies에 의존 정보가 모두 있기 때문에 개발자는 npm install을 실행하는 것만으로도 프로그램 작성 준비를 끝낼 수 있다.






'기타' 카테고리의 다른 글

풀스택 개발자를 위한 MEAN 스택 입문 4. gulp  (0) 2018.08.17
풀스택 개발자를 위한 MEAN 스택 입문 3. mongodb와 mongoose 적용하기  (0) 2018.08.16
풀스택 개발자를 위한 MEAN 스택 입문 2. express 적용하기  (0) 2018.08.14
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

postgreSQL 연동 및 MyBatis 적용

Spring Boot 2018. 1. 3. 14:43

application.properties 기존 H2 DB 연결 정보 >> postgreSQL


#postgreSQL

spring.datasource.url=jdbc:postgresql://{url}:{port}/{sid}

spring.datasource.driverClassName=org.postgresql.Driver

spring.datasource.username={username}

spring.datasource.password={password}

spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect



MyBatis 연동


1. sqlSession과 Mapper 연동을 위해 Application.java에 빈을 등록

@Bean

public SqlSessionFactory sqlSessionFactory(DataSource ds) throws Exception {

    SqlSessionFactoryBean factory = new SqlSessionFactoryBean();

    factory.setDataSource(ds);

    factory.setMapperLocations(

        new PathMatchingResourcePatternResolver().getResources("classpath:/mappers/*_SQL.xml") // A

    );

    return factory.getObject();

}


@Bean

public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory factory) {

    return new SqlSessionTemplate(factory);

}




2. Mapper interface 생성


package com.jt.lotto.mapper;


import org.apache.ibatis.annotations.Mapper;


@Mapper

public interface LottoMapper {


public List<Map<String, String>> findAll();


}




2. A 경로에 SQL 등록

/resources/mappers/Lotto_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">


<mapper namespace="com.jt.lotto.mapper.LottoMapper">


    <select id="findAll" resultType="HashMap">

            select * from lotto

    </select>


</mapper>




3. 사용

@resource

public LottoMapper mapper;


public void test() {

Object result = mapper.findAll();

}


참 쉽죠?

문득 설정하다보니 mapper와 dao의 궁극적인 차이가 뭔지 싶다.

일하면서는 단순히 dao 쪽이 코딩할 게 (대체로 보일러플레이트 코드) 많아 번거로운 정도로만 인식했는데

dao는 어쨌든 개발자가 의도적으로 sql 실행을 위한 sqlSession 생성 시점에 접근할 수 있으니 

사용 목적은 같더라도 어떤 시점에서는 구분해서 사용해야 하는 게 아닐까 하는 생각도 들고. 







참고 URL: http://iotsw.tistory.com/77









'Spring Boot' 카테고리의 다른 글

Spring Boot 웹페이지 만들기 & H2 DB 연결  (1) 2017.08.05
Spring Boot 시작하기  (0) 2017.08.05
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

대구 약령시 풀밀

카테고리 없음 2017. 11. 26. 23:00

대구 약령시에 있는 풀밀에 다녀왔습니다

​

​

​

​



음식점이니 사진에 보정을하진 않았습니다

충분히 맛있었고 충분히 배불리 먹고 왔습니다


WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

JSON parser JSONIC 사용법

Tools 2017. 11. 12. 16:01

적절한 카테고리가 없으니 일단 여기에다가😅


간단한 JAVA용 JSON 파서 라이브러리 하나를 소개한다.

JSONIC이다.


참고 URL: http://jsonic.osdn.jp/


JSONIC은 심플, 고기능을 제공하는 JAVA용 JSON 인코더/디코더 라이브러리입니다. 

JSONIC은 RFC-7159 형식의 JSON 인코딩/디코딩 작업을 수행하면서도 프로그래밍 언어에 의존하는 정보를 JSON내에 포함할 필요 없이 POJO로 손쉬운 변환이 가능합니다.

(중략)

JSONIC은 Apache License, Version 2.0 이하에서 배포되었습니다.


사용법은 아래와 같다. 


1. Maven 설정 추가


<dependency>

    <groupId>net.arnx</groupId>

    <artifactId>jsonic</artifactId>

    <version>1.3.10</version>

</dependency>



2. JAVA → JSON 문자열


import net.arnx.jsonic.JSON;


Map<String, String> target = new HashMap();

target.put("key1", "value1");

target.put("key2", "value2");


String encoded = JSON.encode(target);


System.out.print(encoded);


결과: {"key1":"value1","key2":"value2"}


encode시 Boolean 옵션을 추가로 주면 beautify를 적용할 수 있다.


String encoded = JSON.encode(target, true);


System.out.print(encoded);


결과: {

"key1": "value1",

"key2": "value2"

}



3. JSON 문자열 → JAVA


Map<String, String> decoded = JSON.decode(encoded);

System.out.println(decoded.get("key1"));


결과: value1





사용법은 소개와 마찬가지로 정말 심플하다. 그저 encode, decode를 호출하고 객체를 지정하는 것뿐이다.

클래스 타입 등을 지정하면 해당 타입으로 캐스팅도 가능하다.

사용해보면 알겠지만 상당히 복잡한 형태의 객체로도 쉽게 캐스팅된다.

조금 까다로운 부분은 제네릭 타입을 이용하는 컬렉션 객체가 중첩된 구조인 경우인데, 이 경우도 캐스팅 자체는 가능했다.


※ JSONエンコーダー 항목 참고




일을 하다 보면 JSON을 파싱할 일이 생각보다 많은데 org.json에서 제공하는 파서는 너무 단적인 모델만 지원을 해서 사용이 번거롭다.

단일 객체는 JSONObject, 배열 객체는 JSONArray로 객체 타입이 달라지기도 하고, JACKSON은 사용법이 JSONIC 만큼 심플하지 않고.

물론 속도적 측면에서는 JACKSON이 우수한 걸로 알고 있다. 실제로 이전 회사에서 역시 초기에는 JSONIC을 사용했지만 성능 이슈로 후에 JACKSON으로 넘어갔다.


하지만 대량의 데이터를 파싱해야 하는 경우가 아니라면 성능 이슈는 그다지 문제가 되지 않는다. (고 생각하는 편)

사용해보면 심플한 사용법에 감탄하게 되는 라이브러리 중 하나라고 (왜인지 알 수 없지만 내가) 자부한다.




'Tools' 카테고리의 다른 글

맥용 gui git 도구 SourceTree  (0) 2017.07.31
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

Spring Boot 웹페이지 만들기 & H2 DB 연결

Spring Boot 2017. 8. 5. 16:23

일단 웹페이지 요청을 처리하는 컨트롤러를 만들어보자.

hello, world!는 어디서나 튜토리얼의 기본이니까.


1. HelloWorldController 작성



늘 spring mvc로 개발을 해서 잠시 헤맨 부분은 @RestController 부분.

습관처럼 @Controller 를 사용하고서 404 에러가 떠서 오잉?? 하고 있었다.

알아보니 @RestController가 @Controller + @ResponseBody 의 역할을 한다고 한다.

실제로 @RestController 대신 @Controller @ResponseBody 를 연달아 사용하면 똑같이 작동한다.


2. 실행 후 접속




이렇게 뜨는 걸 확인할 수 있다.

포트는 기본값이 8080이며 변경하고 싶다면 resource 아래 위치한 

application.properties에 >> server.port=포트번호 << 를 추가하면 된다. 


3. 연달아서 h2 설정

페이지에 접근이 되었으니 이제 값을 저장할 서버를 연결해야 한다.

나는 최종적으로는 postgreSQL을 사용할 예정이지만 서버가 마련되기 전에 

해당 프로젝트를 세팅했던 터라 일단 가장 기본적인 H2로 시작했다.

연결은 후에 바꾸면 되니까.

H2를 쓰기 위해서는 두 가지 설정이 필요하다.


첫 번째는 H2 연결 설정을 위해 조금 전 포트 번호를 설정한 application.properties에 아래 설정을 추가


spring.datasource.url=jdbc:h2:~/test

spring.datasource.driverClassName=org.h2.Driver

spring.datasource.username=sa

spring.datasource.password=

spring.jpa.database-platform=org.hibernate.dialect.H2Dialect


가장 기본적인 H2 설정이다. 

내가 알아볼 때 찾은 페이지에서는 Spring Boot의 기본값이 H2이기 때문에

H2를 이용하는 경우는 별도의 설정이 필요없다고 했었지만 나는 설정을 해야만 했다.

안 쓰니까 이용이 안 되더라고🤔  

뭐가 문제였는지는 모르겠지만 일단 설정을 추가해주는 걸로 해결을 봤다.

어차피 후에 postgreSQL로 바꾸려면 설정을 해야 하는 입장이기도 하고.


두 번째는 H2 데이터베이스 콘솔에 붙기 위한 설정

아래와 같이 설정 파일을 추가한다.



이걸로 H2 데이터베이스를 이용할 준비가 끝이 난다. 

서버를 실행해서 http://localhost:8080/console/에 접근해보자.


이렇게 데이터베이스도 연결되었다.








'Spring Boot' 카테고리의 다른 글

postgreSQL 연동 및 MyBatis 적용  (0) 2018.01.03
Spring Boot 시작하기  (0) 2017.08.05
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

Spring Boot 시작하기

Spring Boot 2017. 8. 5. 15:38

아주 단순하게 url을 통해 db에 값을 저장하는 프로젝트를 만들어보자.

맥북에서 진행합니다.


1. sts 다운로드 (https://spring.io/tools/sts/all)

내가 사용한 버전은 아래와 같다.


Spring Tool Suite 


Version: 3.9.0.RELEASE

Build Id: 201707061823

Platform: Eclipse Oxygen (4.7.0)


2. spring starter project를 생성

Service URL은 건드리지 말고 Name에 프로젝트명을 세팅한다.




3. 필요한 디펜던시를 선택하고 finish를 클릭

나는 url 호출을 통해 값을 저장하고 값을 가져오는 정도를 구현할 예정이라 몇 가지만 선택했다.



4. 프로젝트를 실행

Run As > Spring Boot App 또는 SampleApplication.java 파일을 Run As > Java Application



실행이 된 걸 볼 수 있다. 



처음에 스타터 프로젝트를 생성하고 에러가 난다면 당황하지 말고 조금 기다려 보자.

처음 프로젝트를 생성할 때 본 Service Url을 통해 필요한 파일 등을 받아오는 것 같은데 약간 시간이 걸릴 때가 있는 듯하다.

(따로 Progress에 출력되지도 않음)


나 같은 경우는 당황해서 maven프로젝트로 전환했더니 그 순간 설정이 끝났는지 프로젝트에서 에러가 사라졌다.

카페 와이파이로 해서 그런가🤔




'Spring Boot' 카테고리의 다른 글

postgreSQL 연동 및 MyBatis 적용  (0) 2018.01.03
Spring Boot 웹페이지 만들기 & H2 DB 연결  (1) 2017.08.05
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,

맥용 gui git 도구 SourceTree

Tools 2017. 7. 31. 20:22



서버에 git을 설치했다면 사용을 해봐야할텐데 어떤 도구를 사용할까 하다가 SourceTree를 사용해봤습니다.


SourceTree 홈페이지 (https://www.sourcetreeapp.com/)에 접속하여 다운로드 받을 수 있습니다.



홈페이지에 접속하여 Download for Mac OS X에서 다운로드 받아주세요.


다운로드 후 압축을 풀고 다른 앱들 처럼 Application 폴더에 넣고 실행하면됩니다.


그러면 회원가입 등.. 안내가 나올텐데 가입해야 사용할 수 있는 것 같아서 가입했습니다.


로그인하고 나면 다음과 같은 창이 나올텐데요





원격 탭에 New > URL에서 복제 항목을 선택해주세요.




URL에서 복제 항목을 선택하면 위와 같이 접속 정보를 입력하는 창이 나타납니다.


Source URL에는 이전에 설치했던 git 서버의 정보를 넣어야하는데


ssh://유저명@서버IP:포트/서버 내에 설정한 경로/이름.git

예) ssh://taeseong@127.0.0.1:22/usr/local/git/test.git


그리고 나면 패스워드를 묻는 창이 나타나는데 패스워드를 입력해주시고


맥에 저장 할 목적지 경로를 [...] 버튼을 눌러 선택해주면 URL에서 복제가 완료됩니다.



위와 같은 창이 나타나면 성공입니다.


나머지 사용법은 차차 익혀나가볼게요.



끝.















'Tools' 카테고리의 다른 글

JSON parser JSONIC 사용법  (0) 2017.11.12
WRITTEN BY
Project JT
2명의 개발자가 팀 프로젝트를하며 사용한 기술들을 남기는 팀 블로그입니다.
,