곰돌이요원의 인생 2막

오늘은 gitgub에 올린 프로젝트를 다른 환경에서 연결하는 작업을 진행하려고 합니다.

성공적으로 진행된다면, 집과 사무실에서 같이 개발이 가능할 것입니다. 

지난번 git을 설정한 곳과 다른 환경이기 때문에, 설치부터 다시 진행됨을 양해 부탁드립니다.

단, 다양성을 위해서 조금은 다른 방법들을 섞어서 진행해보겠습니다.

2. Git 설치

https://git-scm.com/download/win

다운로드 받아서 설치해줍니다. 선택하는 항목은 모두 기본으로 했습니다.

3. Git clone

github repository에 올려져 있는 파일을 내려받습니다.

중간중간 github 로그인이 필요한 부분에서는 로그인을 해주시면 됩니다.

위와 같이 실행하거나  시작메뉴에서 Git GUI 프로그램을 실행시킵니다.

Clone Existing Repository 를 선택하고, 

Source Location에는 github URL,  Target Directory에는 연결할 상위 폴더를 선택합니다.

(저의 경우에는 https://github.com/(아이디)/flutter.git 을 입력하였고, C:\project 를 찾아서 선택하였습니다.)

그러면 C:\project 하위에 flutter라는 디렉토리가 생성되며 파일이 로컬에 저장됩니다.

// email은 github 가입 시 email, name은 github 가입 시 id로 하였습니다.
// 이전 github 설정시와 동일하게 입력합니다.

git config --global user.email "email_address"

git config --global user.name "name"

//branch를 동일하게 맞춰줍니다.

git branch -M main

추가 설정을 해줍니다.

4. vscode에서의 수정 및 적용

받은 프로젝트를 열고 main.dart에 느낌표 하나를 더 추가하여 프로그램을 수정하였습니다.

(프로젝트를 열었을때 처음에는 오류가 났었으나, 우측 아래에 pub get 을 실행하겠냐는 alert이 떴고,

클릭하여 실행 한 후 오류가 사라졌습니다.)

파일 수정 후 메시지를 위와 같이 작성하고 스테이지에 올린 후 커밋&푸시를 진행했습니다.

정상적으로 적용된 것을 확인했습니다.

다음 포스팅에서는 개발을 위한 실행 및 디버깅에 대하여 간단히 설명하겠습니다.

오늘은 프로젝트를 git에 연결하는 작업을 진행하려고 합니다.

소스관리의 중요성은 특별히 설명하지 않아도 다들 알고 계시겠지만,

저의 경우는 특별히 집과 사무실에서의 소스의 동일성을 유지하는 것을 목표로 하고 있습니다.

1. gitgub 가입 및 저장소 생성

https://github.com/

(가입 과정의 설명은 건너뛰겠습니다.)

[Create New] - [New repository] 를 선택하여 생성 페이지로 진입합니다.

Repository name을 입력하고 나머지는 원하시는 대로 선택하고 [Create repository] 버튼을 눌러 repository를 생성합니다.

설치 후 위와 같은 화면이 나오면 됩니다. 표시해 놓은 부분을 복사해놓고 테스트 시에 사용합니다.

2. Git 설치

https://git-scm.com/download/win

다운로드 받아서 설치해줍니다. 선택하는 항목은 모두 기본으로 했습니다.

3. 설정 및 테스트

local repository로 사용할 폴더를 생성합니다.(저는 C:\project\flutter 로 생성했습니다.)

해당 폴더에서 git bash 창을 엽니다.

위와 같이 순서대로 명령어를 입력하여 설정 및 테스트를 진행합니다.

github repository 생성 시 복사해 둔 코드를 사용하면 편합니다.

// email은 github 가입 시 email, name은 github 가입 시 id로 하였습니다.
// 그 외 url의 가린 부분은 가입시 id입니다.

git config --global user.email "email_address"

git config --global user.name "name"

git init

//테스트 파일 생성
echo "# flutter" >> README.md

git add README.md

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/(아이디)/flutter.git

git push -u origin main

위의 코드를 사용하셔도 무방합니다.

다시 로컬 폴더에 와 보면, .git 설정 폴더와 bash에서 테스트로 생성한 readme.md 파일이 보입니다.

github에서 확인해봤을때 main branch에 README.md 파일이 작성한 comment와 같이 올라가 있다면 정상입니다.

4. vscode에서의 flutter 프로젝트 생성 및 git 연결 

실제 vscode에서의 소스코드 관리 테스트를 위하여 프로젝트를 생성합니다. 

저는 git 설정을 테스트를 위해서 기본 제공 프로젝트를 하나 사용하도록 하겠습니다.

먼저 vscode를 재실행합니다.

왼쪽 메뉴 아이콘 중 Source Control 부분을 선택합니다. 현재는 아무 것도 없는 것이 정상입니다.

VS Code 화면에서 [Ctrl + Shift + P]를 눌러서 입력창에 flutter를 입력하고 Flutter: New Project를 선택합니다.

원하는 템플릿을 선택하여 프로젝트를 생성하면 됩니다. 꼭 제가 선택한 것이 아니어도 됩니다.

프로젝트 생성시의 폴더를 git을 설정한 폴더로 하면 됩니다.

저는 flutter_git 이라는 이름으로 새로 프로젝트를 생성하였습니다. 

기존과 다르게 Source Control 부분에 변경된 갯수가 같이 보이고, 소스에도 관리상태가 표시됩니다.

왼쪽 메뉴 아이콘 중 Source Control 부분을 다시 선택합니다. 생성된(변경된)내용이 보여집니다.

보는 방법은 취향에 따라 선택할 수 있습니다. 저는 트리뷰가 보기 편해서 트리뷰로 변경해서 보고 있습니다.

1) 플러스 버튼을 눌러서 변경된 파일을 Stage에 올립니다.

2) Stage에 올라간 것을 확인합니다.

3) Message(Comment)를 입력하고, Commit&Push 를 진행합니다.

( Commit과 Push를 동시에 진행하는 것은 제 개인적인 취향입니다. 각자 원하시는 대로 하시면 됩니다.)

* 정상적으로 처리되면, 해당 창의 내용이 clear됩니다.

github 페이지에서 확인 가능합니다.

수정 테스트도 진행하였습니다.

main.dart 파일에 느낌표 하나를 추가하여 업데이트 해보았습니다.

이전과 마찬가지로 스테이지에 올리고 커밋,푸시 하면 됩니다.

마찬가지로 github에서 수정 및 상세내용을 확인할 수 있습니다.

다음 포스팅에서는 사무실에서 checkout 받는 방법과 기타 다른 source control 방법에 대하여 짧게 확인하도록 하겠습니다.

이번에는 Android Studio를 개발 툴로 하는 플러터(Flutter) 개발환경을 구축하려고 합니다.

글의 내용 중 일부 VS Code 개발환경과 유사한 부분은 동일한 글 및 이미지를 사용하였습니다.

1. Flutter SDK 다운로드

(1) 아래 사이트로 들어갑니다.

https://docs.flutter.dev/get-started/install/windows/mobile?tab=download

(2) 페이지를 아래로 스크롤하여, Flutter SDK를 Download합니다.

(3) 원하는 경로에 압축을 풉니다.

저는 C:\ 에 압축해제하였습니다. 각자 원하시는 위치에 하시면 됩니다.

(4) 환경변수에 등록합니다. 

윈도우 시작 메뉴에서 [설정]을 클릭하고 [환경]으로 검색하여 [시스템 환경 변수 편집] 화면으로 들어갈 수 있습니다.

[환경변수]를 클릭하고, 

[Path]를 선택한 후 [편집]버튼 클릭,

[새로 만들기]버튼 클릭 후 위에서 압축해제 한 플러터 SDK의 경로에 [\bin]을 추가하여 등록한 후 [확인]을 클릭하여

설정을 완료합니다.

2. Visual Studio 설치

(1) 아래 사이트로 들어갑니다.

https://visualstudio.microsoft.com/ko/downloads/

다운로드를 진행합니다. 버튼을 누르면 다른 페이지로 이동하며 자동으로 다운로드가 진행됩니다. 

(2) 설치를 진행합니다.

[C++를 사용한 데스크톱 개발]을 체크하고 설치합니다.

실행할 필요는 없으니, [설치 후 시작]체크박스는 해제합니다.

3. Android Studio 다운로드 및 설치

(1) 아래 사이트로 들어갑니다.

https://developer.android.com/studio?hl=ko

최신 버전을 다운로드 합니다.

(2) 설치를 진행합니다.

설치 후 실행하여, Setup Wizard까지 진행합니다.

실행 후 설정아이콘 - Plugins... 를 선택합니다.

flutter를 검색하여, Flutter 플러그인을 설치합니다. Dart 플러그인 까지 같이 설치됩니다.

File - New - New Flutter Project(혹은 New Project) 를 선택합니다.

좌측메뉴에서 Flutter를 선택하고, SDK를 설정한 경로를 설정해줍니다. SDK는 한번만 설정해주면 됩니다.

프로젝트명을 입력하고 Create 버튼을 누르면 프로젝트가 생성됩니다.

4. 설치 완료 체크 및 Trouble Shooting

(1) 설치 완료 체크

터미널 창을 열고 flutter doctor -v 를 입력하여 실행합니다.

위와 같은 화면이 나온다면 설치에 문제가 없는 것입니다.

(2) 체크 중 오류 수정

위와 같은 toolchain 오류가 나는 경우

Android Studio를 실행하고 상단 메뉴에서 [Settings]를 선택합니다.

Android SDK -> SDK Tools 탭 -> Android SDK Command-line Tools 항목의 체크박스를 체크하고

[Apply]버튼을 눌러 설치합니다.

다시 체크했을때도 위와 같은 메시지가 보인다면,

터미널 창에서 

flutter doctor --android-licenses

를 입력하고,

질문에 y 를 입력합니다.

이것으로 VS Code로 flutter 개발환경을 구축하는 것을 마치겠습니다.

플러터(Flutter) 개발을 위해 개발환경을 구축하려고 합니다.

기존에 집과 사무실 두 곳에 개발환경을 설정해 두었으나, 비슷한 시기에 초기화를 진행하게 되었습니다.

그래서, 개발 환경 설정을 다시 진행함과 동시에 어느 장소에서든 개발을 이어갈 수 있도록

Git을 이용한 소스관리까지 설정해볼까 합니다.

아울러, 한 곳에는 VS Code를 이용하여 설정하고 한 곳에는 Android Studio를 이용하여 설정하여

두가지를 비교해보며 개발을 진행하고, 병행하여 사용했을 때 문제가 없을지도 확인해보려 합니다.

1. Flutter SDK 다운로드

(1) 아래 사이트로 들어갑니다.

https://docs.flutter.dev/get-started/install/windows/mobile?tab=download

(2) 페이지를 아래로 스크롤하여, Flutter SDK를 Download합니다.

(3) 원하는 경로에 압축을 풉니다.

저는 C:\ 에 압축해제하였습니다. 각자 원하시는 위치에 하시면 됩니다.

(4) 환경변수에 등록합니다. 

윈도우 시작 메뉴에서 [설정]을 클릭하고 [환경]으로 검색하여 [시스템 환경 변수 편집] 화면으로 들어갈 수 있습니다.

[환경변수]를 클릭하고, 

[Path]를 선택한 후 [편집]버튼 클릭,

[새로 만들기]버튼 클릭 후 위에서 압축해제 한 플러터 SDK의 경로에 [\bin]을 추가하여 등록한 후 [확인]을 클릭하여

설정을 완료합니다.

2. Android Studio 다운로드 및 설치

(1) 아래 사이트로 들어갑니다.

https://developer.android.com/studio?hl=ko

최신 버전을 다운로드 합니다.

(2) 설치를 진행합니다.

설치 후 실행하여, Setup Wizard까지 진행합니다.

3. Visual Studio Code 다운로드 및 설치

(1) 아래 사이트로 들어갑니다.

https://code.visualstudio.com/docs?dv=win

자동으로 최신의 VS Code가 다운로드 됩니다.

(2) 다운로드 받은 파일을 실행하여 설치합니다.

(3) Flutter extension for VS Code 설치

확장(Extensions) 아이콘을 클릭하고 [flutter]를 검색하여, Flutter 확장프로그램을 설치합니다.

4. Visual Studio 설치

(1) 아래 사이트로 들어갑니다.

https://visualstudio.microsoft.com/ko/downloads/

다운로드를 진행합니다. 버튼을 누르면 다른 페이지로 이동하며 자동으로 다운로드가 진행됩니다. 

(2) 설치를 진행합니다.

[C++를 사용한 데스크톱 개발]을 체크하고 설치합니다.

실행할 필요는 없으니, [설치 후 시작]체크박스는 해제합니다.

5. 설치 완료 체크 및 Trouble Shooting

(1) 설치 완료 체크

VS Code 화면에서 [Ctrl + Shift + P]를 눌러서 입력창에 flutter를 입력하고 Flutter: Run Flutter Doctor를 선택합니다.

혹은, 터미널 창에서 flutter doctor -v 를 입력해도 됩니다.

위와 같은 화면이 나온다면 설치에 문제가 없는 것입니다.

(2) 체크 중 오류 수정

위와 같은 toolchain 오류가 나는 경우

Android Studio를 실행하고 상단 메뉴에서 [Settings]를 선택합니다.

Android SDK -> SDK Tools 탭 -> Android SDK Command-line Tools 항목의 체크박스를 체크하고

[Apply]버튼을 눌러 설치합니다.

다시 체크했을때도 위와 같은 메시지가 보인다면,

터미널 창에서 

flutter doctor --android-licenses

를 입력하고,

질문에 y 를 입력합니다.

이것으로 VS Code로 flutter 개발환경을 구축하는 것을 마치겠습니다.

개발툴의 선택지는 크게 세가지였습니다. 

• IntelliJ - 강력한 기능, 자동 코드생성의 편의성, 유료
• Eclipse - 10여년을 쓴 익숙함, 무료, 무거움
• Visual Studio Code - 적당한 편리함, 가벼움, 무료

개인적인 코멘트에서도 느끼실 수 있겠지만, Visual Studio Code(이하 vscode)가 최선의 선택이라고 생각했습니다. IntelliJ가 제일 낫다는 평가였지만, 아직 돈을 쓰고 싶지는 않았습니다. Eclipse는 제일 익숙한 툴이긴 하지만, 원하는 설정을 만들기에는 너무 복잡할 것 같았습니다. 결론은 뭐 특별한 근거도 이유도 없습니다.

1) Visual Studio Code

https://code.visualstudio.com/

파일을 받아서 원하는 곳에 설치하시면 됩니다. 어짜피 workspace는 따로 설정할 수 있으니 큰 문제는 없습니다.

한국어 언어팩을 설치합니다. 물론 선택사항입니다. 저는 아무래도 툴을 익히는데 도움이 되지 싶어서 설치했습니다.

일단 여기까지 설치가 되었다면 성공입니다. 

2) node.js

https://nodejs.org/en/download/

node.js로 backend를 만들지 않음에도 불구하고 설치는 했습니다. 설치 안해도 된다고 생각했는데, 차후에 react 설치시에 문제가 생겼습니다. npm 명령어를 실행하기 위해 필요한 듯 합니다. 자세한 건 잘 모르겠습니다.

설치는 installer 버전과 binary 버전이 있는데 큰 차이는 없어보입니다. 저는 installer 버전을 사용했습니다. 

설치 과정의 이미지는 생략합니다. 

설치 후 설치폴더를 확인 했을때 아래와 같으면 정상적으로 설치되었다고 보아도 무방합니다.

위의 폴더를 path에 추가합니다.

• [제어판] - [시스템] - [고급시스템 설정] - [고급] 탭 - [환경변수] - PATH 에 추가

[파일] - [작업영역에 폴더 추가] 한 후 터미널로 해당 작업폴더에 접근한다.

아래와 같이 터미널에서 [node -v], [npm -v] 명령어를 입력했을때 아래와 같이 출력되면 정상

이 이후의 작업은 하지 않아도 무방합니다.

그냥 재미삼아 해볼 분들만 따라하세요.

터미널에서 아래와 같이 npm init -y 를 입력합니다.

실행 후에 package.json 파일이 생성됩니다.

해당 폴더에서 app.js라는 이름의 새 파일을 작성하고

테스트 소스코드를 작성한다.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Node.js\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

[실행] - [디버깅 시작] 하면 디버그 콘솔에 아래와 같이 console.log의 내용이 찍히고,

브라우저로 접근했을때 res.end 의 내용이 출력되면 정상.

디버그 콘솔의 제일 아랫 줄에 표시 된 대로 브라우저에 접속

(위 화면 기준으로 Server running at http://127.0.0.1:3000/)

1) node.js

https://nodejs.org/en/download/

파일 - 작업영역에 폴더 추가 한 후

터미널에서 해당 작업폴더에 접근한다.

해당 폴더에서 app.js라는 이름의 새 파일을 작성하고

테스트 소스코드를 작성한다.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Second\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

디버그 - 디버깅 시작 하면

디버그 콘솔에 아래와 같이 console.log의 내용이 찍히고,

브라우저로 접근했을때 res.end 의 내용이 출력되면 정상.

2) mysql / sql mapper

먼저 mysql 을 설치.

업무용으로 사용하는 것이 전제되었기 때문에 sql 관리는 필수이다.

다행히도 mybatis의 node.js 버전을 찾았다.

설치 후 mapper 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_emp">  
  <select id="SEL001">
    SELECT *
    FROM COM_EMP_INFO
    WHERE EMP_NO = #{EMP_NO}
  </select>
</mapper>

app.js로 콘솔에 json 데이터 출력

const mysql = require('mysql');  //My-sql
const mybatisMapper = require('mybatis-mapper');  //mybatis
 
const connection = mysql.createConnection({  //create connection
    host: '127.0.0.1',
    port: '3306',
    user: 'study',
    database: 'study',
    password : 'study1!'
});
 
//mapper load
mybatisMapper.createMapper([ './sql/com/com_emp.xml' ]);
 
//param
var param = {
    EMP_NO : '10000002'
}
 
//create query
var format = {language: 'sql', indent: '  '};
var query = mybatisMapper.getStatement('com_emp', 'SEL001', param, format);
//getStatement([map namespace], [sql id], [param], format);

console.log(query);  //qury print

connection.connect();
connection.query(query, function (error, results, fields) {  
    if (error) {
        console.log(error);
    }
    console.log(results); //result print
});
connection.end();

1) Visual Studio Code

https://code.visualstudio.com/