지금도 개발중

Vue.js : Vue 개발환경 세팅하기

홍시쿼카 — Mon, 10 Feb 2025 13:55:16 +0900

1. Visual Studio Code 설치
VSCode 설치는 크게 어렵지 않으니 본인의 OS에 맞게 설치를 진행하시면 됩니다.
- 참고로 VSCode에서 추가적인 Extensions 사용 및 디버깅을 하기 위해서 크롬(Chrome)도 필요합니다.

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

2. Node.js 설치
Vue.js 개발을 위해서는 반드시 Node가 필요합니다.
만약 프로젝트 내에 따로 원하는 버전이 있으면 해당 버전은 공식홈페이지에서 선택할 수 있으니
환경에 맞는걸로 선택하시면 될 것 같습니다.
- 2025년 2월 기준 최신 버전은 v22입니다.

-- 터미널
node -v
-- 콘솔
node --version

node버전 확인은 터미널(콘솔)에서 확인해보시면 바로 알 수 있습니다.
만약 버전 확인이 잘 안된다면 환경변수 설정 및 재부팅한 다음 다시 확인해주세요.

Node.js — Node.js® 다운로드

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

3. VSCode 실행 및 Extensions 설치
VSCode를 설치하면 기본적으로 설정된 것들도 있는데 더욱 쓰기 편함을 위해 아래와 같은 플러그인을 권장합니다.
필수로 설치해야 하는 것은 아닙니다.

플러그인 명	상세
Vue VSCode Snippets	Vue
Vue 3 Snippets	Vue
Error Lens	Code상의 Error, Warning 표시해주는 플러그인
ESLint	Code Style
Stylelint	Code Style
Prettier - Code formatter	Code Style
Night Owl	Code Theme
aries Theme	Theme
Material Theme Icons — Free	Tool Style
Material Icon Theme	Tool Style
Import Cost	import하는 패키지에 대한 사이즈 표시
GitLens — Git supercharged	Git관련 플러그인
Git History	Git관련 플러그인
Git Graph	Git관련 플러그인
Commit Message Editor	Git관련 플러그인

Git을 쓰시는분들은 Git관련 플러그인도 같이 참고하시면 좋을 것 같네요!

선형 자료구조 : 스택(Stack)과 큐(Queue)에 대해 파악하기

홍시쿼카 — Tue, 4 Feb 2025 14:29:27 +0900

스택(Stack)과 큐(Queue)는 프로그래밍에서 자주 사용되는 선형 자료구조로,
데이터의 삽입과 삭제 순서가 서로 다릅니다.

1. 스택(Stack)
스택은 후입선출(LIFO, Last In First Out) 원칙을 따르는 선형 자료구조로,
데이터의 삽입(push)과 삭제(pop)가 한쪽 끝(top)에서만 이루어집니다.
이는 책을 쌓아 놓고 가장 위에 있는 책을 먼저 꺼내는 것과 같이 마지막에 추가된 요소가 가장 먼저 제거됩니다.

1) 주요연산

'push' : 스택의 최상단(top)에 요소 추가
'pop' : 최상단 요소 제거 및 반환
'peek' / 'top' : 최상단 요소 확인 (제거하지 않음)
'isEmpty' : 스택이 비었는지 확인

# 배열기반 : 고정된 크기로 구현이 간단하지만, 동적 크기 조절이 어려움
stack = []
stack.append(1) # push
stack.pop()     # pop

# 연결 리스트 기반 : 동적 메모리 관리가 가능하지만 구현 복잡도가 높음
class Node:
	def __init__(self, data):
    	self.data = data
        self.next = None

2) 구현 : 배열이나 연결 리스트로 구현 가능하며, 'top' 포인터로 최상단 위치를 추적
→ 스택은 상대적으로 구현이 간단함
→ 단순한 구조로 인해 메모리 사용이 효율적

3) 사용예시

브라우저 뒤로 가기 기능
함수 호출 스택(재귀 함수 실행)
실행 취소(Undo)기능

2. 큐(Queue)
큐는 선입선출(FIFO, First In First Out) 원칙을 따르는 자료구조이며,
데이터가 들어오는 쪽을 rear(뒤), 나가는 쪽을(front)라고 합니다.
새로운 요소는 큐의 뒤쪽(rear)에 추가되고, 요소를 제거할 때는 앞쪽(front)에서 이루어지기에
가장 먼저 추가된 요소가 가장 먼저 제거됩니다.

1) 주요연산

'enqueue' : 큐의 후단(rear)에 요소 추가
'dequeue' : 전단(front) 요소 제거 및 반환
'peek' / 'front' : 전단(front) 요소를 확인(제거하지 않음)
isEmpty : 큐가 비었는지 확인
isFull : 큐가 가득 찼는지 확인

2) 구현 : 배열 또는 연결 리스트로 구현되며, 'front'와 'rear' 두 개의 포인터를 사용
→ 큐는 두 개의 포인터를 관리해야 하므로 구현이 더 복잡함
→ front와 rear 포인터 관리로 인해 메모리 사용이 덜 효율적일 수 있다

3) 사용예시

프린터 작업 대기열
CPU 작업 스케줄링
은행 번호표 시스템

스택 VS 큐 차이점

구분	스택(Stack)	큐(Queue)
작동원리	LIFO(Last In First Out)	FIFO(First In First Out)
삽입/삭제	한 끝(top)에서만 발생	삽입은 rear, 삭제는 front에서 발생
포인터	'top'	'front'
연산 이름	Push, Pop	Enqueue, Dequeue
사용 사례	실행 취소, 함수 호출관리	작업 대기열, 데이터 버퍼링

요약정리
1. 스택은 마지막에 추가된 데이터를 우선 처리할 때 유용합니다.(예 : 최근 작업 취소)
2. 큐는 순서대로 처리해야 하는 작업에 적합합니다.(예 : 주문 처리 시스템)
3. 두 구조 모두 데이터의 순차적 접근을 관리하지만, 삽입/삭제 지점과 처리 순서에서 근본적인 차이가 있습니다.

JavaScript : map, filter

홍시쿼카 — Mon, 8 Jan 2024 15:16:07 +0900

          // result [] 배열인 경우
          result = result.map(item => {
            let stateColor = ""
            let stateName = ""
            if (item.state === "0" || item.state === "1" || item.state === "8") {
              stateName = "대기"
              stateColor = "gray"
            } else if (
              item.state === "3" ||
              item.state === "4" ||
              item.state === "6" ||
              item.state === "7" ||
              item.state === "9"
            ) {
              stateName = "취소"
              stateColor = "red"
            } else {
              stateName = "완료"
              stateColor = "blue"
            }
            return {
              ...item,
              처리상태: item.state,
              결과명: stateName,
              결과컬러: stateColor
            }
          })
        }
        const redData = result?.filter(item => item.결과컬러 === "red")
        console.log(redData)

JavaScript : for문, forEach문 차이점

홍시쿼카 — Wed, 26 Apr 2023 15:24:46 +0900

// for문
for(let i=0; i<length; i++) {
 ...
}

// foreach문
object.forEach(function(var) {
 ...
});
또는
object.forEach(function(var) => {
 ...
});

1. 동기(sync), 비동기(async)의 차이

for문은 동기(sync) 방식이기 때문에 for문 안에서 오류가 나면 에러난 위치 이후의 이벤트들은 동작하지 않고 멈춰버립니다. foreach문은 ES6문법으로 콜백함수를 뿌리기 때문에 비동기(async) 방식으로 진행됩니다. 그래서 foreach문 안에 에러가 발생하더라도 멈추지 않고 그 다음 프로세스를 진행합니다.

2. 성능차이

forEach문은 for문의 향상된 버전이라고 칭할 수 있습니다. 가변적인 배열이나 리스트 크기를 따로 구할 필요가 없어 복잡한 반복문에서 사용성이 용이합니다. 또한 인덱스를 생성하여 접근하는 for문보다 수행속도가 빠릅니다. 단, 반복문 내에서 배열이나 리스트 값을 변경하거나 추가할 수 없다는 점과 읽기 전용으로 불러오기때문에 데이터를 수정하는 행위가 불가능합니다. 또한 배열을 역순으로 탐색할 수 없다라는 단점이 있습니다.

JavaScript : 자바스크립트 Errors (Try, Catch, Finally, Throw)

홍시쿼카 — Wed, 16 Mar 2022 15:22:51 +0900

▶ JavaScript Errors

Try : 실행할 코드 블록을 정의합니다.
Catch : 오류를 처리하기 위한 코드 블록을 정의합니다.
Finally : 명령문 결과와 관계없이 실행할 코드 블록을 정의합니다.
Throw : 사용자 정의 오류를 정의합니다.

// 일반적인
try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is empty"; //빈 값인 경우
    if(isNaN(x)) throw "is not a number"; // 숫자가 아닌 다른 값을 넣을 경우
    x = Number(x);
    if(x > 10)   throw "is too high"; // 10보다 큰 경우
    if(x < 5)  throw "is too low"; // 5보다 작은 경우
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
  	document.getElementById("p01").innerHTML = document.getElementById("demo").value;
    document.getElementById("demo").value = "";
  }
}
</script>

▶ Error 오류

Error Name	Description
EvalError	eval()함수에서 에러
RangeError	범위를 벗어난 숫자 발생
ReferenceError	잘못된 참조
SyntaxError	구문 오류
TypeError	유형 오류
URIError	encodeURI()에서 오류

// RangeError
let num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

// referenceError
let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

// SyntaxError
try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

// TypeError
let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

// URIError
try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

JavaScript : 자바스크립트 Set(), Map()

홍시쿼카 — Tue, 15 Mar 2022 14:55:12 +0900

▶ Set()

Set()은 value들로 이루어진 컬렉션
Array와는 다르게 Set은 같은 value를 2번 포함할 수 없다. 따라서 Set에 이미 존재하는 값을 추가하려고 하면 아무 일도 없다.

Method	Description
new Set()	새로운 Set을 생성
add()	Set안에 있는 새 요소를 추가
delete()	Set에 있는 요소 삭제
has()	Set에 해당 요소가 있으면 true를 반환
forEach()	Set 각 요소에 대한 콜백을 호출
values()	Set의 모든 값이 있는 반복자 반환
Property	Description
size	Set안에 있는 요소들의 수를 return

<script>
const letters = new Set();	//1. 새로운 set을 만든다.
letters.add('a');		//2. 새로운 요소를 추가한다.
letters.add('b');
letters.add('c');
letters.add('a'); 		// 이미 존재하는 값을 넣어도 Array처럼 추가되지 않는다.
// letters.size : 3
// letters.has('a') : true

// 3. forEach()
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})
document.getElementById("demo").innerHTML = text;
// text 결과
/*
a
b
c
*/

// 4. values()
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;

</script>

※ has()는 indexOf()보다 빠르다고 하지만, Set에는 index가 존재하지 않기 때문에 index를 가지고 value를 접근할 수 없다.

▶ Map()

Map()은 키가 모든 데이터의 유형이 될 수 있는 키-값으로 이루어진 컬렉션
Map()은 키의 원래 삽입 순서를 기억한다.
key를 사용해서 value를 get, set할 수 있다. key들은 중복될 수 없다. 하나의 key에는 하나의 value만 존재한다.

Method	Description
new Map()	새로운 Map을 생성
set()	Map의 키 값을 설정
get()	Map의 키 값을 가져오기
delete()	키로 지정된 Map요소 삭제
has()	해당 키가 Map에 있으면 true반환
forEach()	Map의 각 키/값 쌍에 대한 함수를 호출
entries()	Map에서 [key, value] 쌍이 있는 반복자를 반환
Property	Description
size	Map의 요소 수를 반환

<script>
// 1. Map생성
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
// 결과값 : 500

// 2. Map set사용
fruits.set("apples", 500);

// 3. Map get사용
fruits.get("apples"); // 500 return

// 4.그 외
fruits.size 	// 3 return
fruits.delete("apples");	//apples없어지고 나머지 보임
fruits.has("apples");	//있으면 true, 없으면 false
</script>

▶ Map과 Object의 차이

	Object	Map
반복	직접 반복할 수 없음	직접 반복이 가능
크기	크기 속성이 없다	크기 속성이 있다
키 유형	키는 문자열(또는 symbol)이어야 한다	키는 모든 데이터 유형이 될 수 있다
키 순서	키가 정렬되어 있지 않다	키는 삽입 순서로 정렬된다
기본값	기본 키 보유	기본 키가 없다

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
/* 결과
apples = 500
bananas = 300
oranges = 200
*/

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
/* 결과
apples,500
bananas,300
oranges,200
*/
</script>

JavaScript : 자바스크립트 조건문, 반복문

홍시쿼카 — Thu, 3 Mar 2022 11:55:37 +0900

▶ JavaScript 조건문(if else / else if)

const time = new Date().getHours();
let greeting;

// 시간이 10:00 미만이면 "Good morning" 인사말을 만들고, 
// 그렇지 않은 경우 시간이 20:00 미만이면 "Good day" 인사말을 만들고, 
// 그렇지 않으면 "Good morning"을 만듭니다.
if (time < 10) {		// 조건문1이 true이면
  greeting = "Good morning";
} else if (time < 20) {		// 조건문1은 false, 조건문2가 true이면
  greeting = "Good day";
} else {			// 조건문1,2 false
  greeting = "Good evening";
}

▶ JavaScript 조건문(switch)

let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

switch는 일치하는 항목이 있으면 연결된 코드블록이 실행됩니다. 만약 일치하는 항목이 없으면 default 기본 코드블록이 실행됩니다. 또한 여러 케이스가 일치하는 경우 첫 번째 케이스가 선택됩니다.

▶ JavaScript 반복문

JavaScript는 다양한 종류의 루프를 지원합니다. for, for/in, for/of, while, do/while

for - 크도 블록을 여러 번 반복
for/in - 객체의 속성을 통해 루프
for/of - 반복 가능한 객체의 값을 반복
while - 지정된 조건이 참인 동안 코드 블록을 반복
do/while - 또한 지정된 조건이 참인 동안 코드 블록을 반복

▶ JavaScript - for문

// 일반적인 for문 예시
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

// 루프가 시작되기 전에 값이 설정된 경우에는 문1을 생략할 수 있습니다.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}

▶ JavaScript - for..in 문

// for..in문 기본 - object
const person = {fname:"John", lname:"Doe", age:25}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

// for..in - array
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

// forEach
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}

▶ JavaScript - for..of문

// for..of문
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

* for..in문과 for..of문의 차이 : 둘다 반복문으로 사용되는데 for..in은 객체를 탐색하고, for..of문은 배열 요소를 탐색합니다.

// for ...in (객체 순환)
var obj = {
  a: 1000,
  b: 2000,
  c: 3000
};

for (var item in obj) {
  console.log(item) // a, b, c
}

for (var item of obj) {
  console.log(item) // 오류가 남.
}
//---------------------------------------------------------------
// for ...of (배열 순환)
var arr = [1, 2, 3];

for (var item of arr) {
  console.log(item); // 1, 2, 3
}

for (var item in arr) {
  console.log(item); // 0, 1, 2
}

▶ JavaScript - while문

// while문은 지정된 조건이 true인 한 코드 블록을 반복합니다.
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}

// 결과값
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

▶ JavaScript - Do while문

Do while문은 while문의 변형입니다. 이 루프는 조건이 참인지 확인하기 전에 코드블록을 한 번 실행한 다음 조건이 true인 동안 루프를 반복합니다.

let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);

// 결과값
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

JavaScript : 날짜함수(Date Get Methods), 공식(Math)

홍시쿼카 — Tue, 1 Mar 2022 21:01:56 +0900

▶ JavaScript Date get Method

const d = new Date();	// 2022-03-01 기준
document.getElementById("demo").innerHTML = d.getTime();		// 1646135932392
document.getElementById("demo").innerHTML = d.getFullYear(); 		// 2022 년
document.getElementById("demo").innerHTML = d.getMonth() + 1; 		// 3 월
let month = months[d.getMonth()];
document.getElementById("demo").innerHTML = month;				// March 3월
document.getElementById("demo").innerHTML = d.getDate();			// 1 일
document.getElementById("demo").innerHTML = d.getHours();			// 20 시
document.getElementById("demo").innerHTML = d.getMinutes();			// 0 분
document.getElementById("demo").innerHTML = d.getSeconds();			// 32 초
document.getElementById("demo").innerHTML = d.getMilliseconds();		// 99
document.getElementById("demo").innerHTML = d.getDay();				// 2

▶ JavaScript Math

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Math.round(x)	가장 가까운 정수로 반올림된 x를 반환합니다.
Math.ceil(x)	가장 가까운 정수로 반올림된 x를 반환합니다.
Math.floor(x)	가장 가까운 정수로 내림한 x를 반환합니다.
Math.trunc(x)	x의 정수 부분을 반환합니다.
Math.sign(x)	x가 음수, null 또는 양수이면 반환합니다.
Math.pow(x, y)	x의 값을 y의 거듭제곱으로 반환합니다.
Math.sqrt(x)	x의 제곱근을 반환합니다.
Math.abs(x)	x의 절대값(양수)를 반환합니다.
Math.min(), Math.max()	인수 목록에서 가장 낮거나 높은 값을 찾는 데 사용할 수 있습니다.

JavaScript : 데이터형식, 이벤트, 템플릿 이용 방법

홍시쿼카 — Thu, 17 Feb 2022 22:40:54 +0900

▶ JavaScript Data Type

JavaScript의 데이터 유형에 대해서 말하자면, Number, String, Object, Array 등이 있다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string:</p>

<p id="demo"></p>
<script>
let length = 16;                               // Number
let lastName = "Johnson";                      // String
let x = {firstName:"John", lastName:"Doe"};    // Object
const cars = ["Saab","Volvo","BMW"];	   	// Array
	
document.getElementById("demo").innerHTML =
length + "<br>" + 
lastName + "<br>" + 
x + "<br>" + // 그대로 x라고 넣어버리면 [object Object]로 보여준다.
x.firstName + "<br>" + //값을 보기 위해서는 x.firstName
cars[0] + "<br>";  // 배열은 index 위치를 설정해줘야한다.

/* 결과값
16
Johnson
[object Object]
John
Saab
* /
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const a = 0;
const fruits = ["Banana", "Orange", "Apple"];
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = 
fruits[0] + "<br>" + 
fruits[a] + "<br>" + 		// a가 숫자이기에 사용이 가능하다.
fruits["Banana"] + "<br>" + 	// Object처럼 사용하면 undefined
person + "<br>" + 		// 그대로 쓰면 [object Object]로 보여준다.
person.firstName + "<br>" + 
person["firstName"];  		// John이 출력된다.
</script>

</body>
</html>

Array와 Object쓰는 방식에 대해 헷갈리시면 안됩니다. Array는 cars[0] 괄호 안에 index(숫자)만 사용이 가능하며 0부터 시작합니다.

▶ JavaScript와 jQuery의 이벤트

Event	Description	jQuery 비교
onchange	HTML 요소가 변경되었을 때
onclick	사용자가 HTML요소를 클릭했을 때	$("p").click(function(){ // action goes here!! }); $("p").dblclick(function(){ $(this).hide(); });
onmouseover	사용자가 HTML요소 위로 마우스를 이동 했을 때
onmouseout	사용자가 HTML요소에서 마우스를 멀리 이동했을 때
onkeydown	사용자가 키보드 키를 누를 때
onload	브라우저가 페이지 로드를 완료했을 때

// jQuery의 on()메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });
});

▶ JavaScript 문자열

// slice(strat, end)
// 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13); //Banana
document.getElementById("demo").innerHTML = str.slice(7); //Banana, Kiwi

// substring(start, end)
// slice()와 비슷한 substring(). 차이점으로 음수 인덱스를 허용할 수 없다는 차이점이 있다.
document.getElementById("demo").innerHTML = str.substring(7,13); // Banana

// substr(start, length)
// 두 번째 매개변수 가 추출된 부분 의 길이를 지정한다.
document.getElementById("demo").innerHTML = str.substr(7,6);

// replace(old, new)
// 지정된 값을 문자열의 다른 값으로 바꾼다.
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

// trim()
// 문자열의 양쪽에서 공백을 제거
let text1 = "      Hello World!      ";
let text2 = text1.trim();

// split()
// 문자열을 배열로 변환
let text = "a,b,c,d,e,f";
const myArray = text.split(",");

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
//일반적으로 쓰는 방식
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;

//배열에 있는 값을 뽑아서 쓰는 방식
let tags = ["template literals", "javascript", "es6"];
let text = `Welcome ${tags[0]}`;
document.getElementById("demo").innerHTML = text;

</script>

</body>
</html>

▶ JavaScript 숫자

let x = 3.14;    // A number with decimals
let y = 3;       // A number without decimals

let x = 100;         // x is a number
let y = "100";       // y is a string

// toString()
// 문자열로 반환
let x = 123;
x.toString();
(123).toString();

// toExponential()
// toExponential()반올림되고 지수 표기법을 사용하여 작성된 숫자가 있는 문자열을 반환
let x = 9.656;
document.getElementById("demo").innerHTML =
  x.toExponential() + "<br>" + 		// 9.656e+0
  x.toExponential(2) + "<br>" + 	// 9.66e+0
  x.toExponential(4) + "<br>" + 	// 9.6560e+0
  x.toExponential(6);			// 9.656000e+0
  
// toFixed()
// 지정된 소수 자릿수로 작성된 숫자와 함께 문자열을 반환
let x = 9.656;
document.getElementById("demo").innerHTML =
  x.toFixed(0) + "<br>" +		// 10
  x.toFixed(2) + "<br>" +		// 9.66
  x.toFixed(4) + "<br>" +		// 9.6560
  x.toFixed(6);					// 9.656000

// Number(), parseFloat(), parseInt()
document.getElementById("demo").innerHTML = 
  Number(true) + "<br>" +			// 1
  Number(false) + "<br>" +			// 0
  parseInt("  10") + "<br>" +		// 10
  Number("10.33") + "<br>" + 		// 10.33
  parseInt("10.33") + "<br>" + 		// 10
  parseFloat("11.1") + "<br>" + 	// 11.1
  Number("John");					// NaN

▶ JavaScript 배열

// toString();
// 배열을 (쉼표로 구분된) 배열 값의 문자열로 변환
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

// join()
// 모든 배열 요소를 문자열로 결합
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); // Banana * Orange * Apple * Mango

// pop()
// 배열에서 마지막 요소를 제거
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Banana,Orange,Apple

// push()
// 배열에 새 요소를 추가합니다(끝에)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Banana,Orange,Apple,Mango,Kiwi

// shift()
// 첫 번째 배열 요소를 제거하고 다른 모든 요소를 더 낮은 인덱스로 "이동"합니다
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Orange,Apple,Mango

// unshift()
// 배열에 새 요소를 추가하고(처음에) 이전 요소를 "이동 해제"
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon"); // Lemon,Banana,Orange,Apple,Mango

// delete
// 배열 삭제()
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

// concat()
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);	// Cecilie,Lone,Emil,Tobias,Linus

JavaScript : 자바스크립트 기초 배우기 with jQuery

홍시쿼카 — Wed, 16 Feb 2022 21:55:51 +0900

jQuery의 목적은 웹사이트에서 JavaScript를 훨씬 더 쉽게 사용할 수 있도록 도와주는 경량 JavaScript 라이브러리입니다. jQuery를 이용하면 AJAX 호출 및 DOM 조작과 같은 JavaScript의 복잡한 많은 부분을 단순화시켜줍니다.

* jQuery 라이브러리 기능 : HTML/DOM조작, CSS조작, HTML이벤트메소드, 효과 및 애니메이션, AJAX 등

<!DOCTYPE html>
<html>
<body>
<!-- JavaScript onClick를 이용해서 content를 직접 변경-->
<p id="memo">JavaScript</p>
<button type="" onclick='document.getElementById("memo").innerHTML = "Hello JavaScript!"'> JavaScript Button</button>

<p id="memo2">jQuery</p>
<button id="btn">jQuery Button</button>
</body>

<!-- jQuery를 사용하기 위해선 import -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
<!-- $(document).ready(function(){ 쓰는 이유는 문서 로드가 완료되기 전 jQuery코드가 실행되는 것을 방지하기 위함입니다 -->
$(document).ready(function(){
  $("#btn").click(function(){
      $("#memo2").text("Hello jQuery!");
  });
});
</script>
</html>

위의 소스는 JavaScript를 이용해서 <p>의 text를 바꾸는 방법과 jQuery를 이용해서 바꾸는 방법을 비교해보았습니다.

<!DOCTYPE html>
<html>
<body>
<p id="memo">JavaScript</p>
<!-- onclick에 직접 입력이 아닌 function으로 빼서 작업 -->
<button type="" onclick="javaScriptFunction()"> JavaScript Button</button>

<p id="memo2">jQuery</p>
<button id="btn">jQuery Button</button>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
<!-- JavaScript Button을 클릭 시 호출되는 함수 -->
function javaScriptFunction() {
	document.getElementById("memo").innerHTML = "Paragraph changed.";
};

$(document).ready(function(){
  $("#btn").click(function(){
      $("#memo2").text("Hello jQuery!");
  });
});
</script>
</html>

물론 JavaScript도 jQuery에서 사용한 function처럼 함수를 만들어 사용할 수 있습니다. 참고로 JavaScript는 <head>, <body> 등 HTML 페이지 섹션 어디에든 배치할 수 있으며, 외부 파일에 배치할 수도 있습니다.

▶ JavaScript구문과 jQuery구문

/* JavaScript 구문
 * JavaScript 구문은 두 가지 유형의 값을 정의합니다.
 * 고정값, 변수값
 */
var x, y;
x = 5 + 6;
y = x * 10;
 
/* jQuery 구문
 * 기본 구문은 $( 선택기 )입니다. 액션 ()
 * jQuery를 정의/액세스하기 위한 $ 기호
 * HTML 요소 "쿼리(또는 찾기)"를 위한 ( 선택기 )
 * 요소에 대해 수행할 jQuery 작업 ()
 */
$(this).hide()- 현재 요소를 숨깁니다.
$("p").hide()- 모든 <p> 요소를 숨깁니다.
$(".test").hide()- class="test"인 모든 요소를 숨깁니다.
$("#test").hide()- id="test"인 요소를 숨깁니다.

▶ JavaScript 키워드

Keyword	Description
var	변수 선언 변수는 데이터를 저장하기 위한 컨테이너
let	블록 변수 선언 변수의 값이 변경될 수 있으면 let * let으로 정의된 변수는 재선언할 수 없음
const	블록 상수 선언 일반적인 규칙을 원할 경우 const
if	조건에서 실행할 명령문 블록을 표시
switch	다른 경우에 실행할 명령분 블록을 표시
for	루프에서 실행할 명령문 블록을 표시
function	함수 선언
return	기능 종료
try	명령문 블록에 대한 오류 처리를 구현

* var, let, const 차이점 체크하기

// var는 변수를 다시 선언하면 문제가 발생할 수 있다.
var  x = 10;
// Here x is 10
{  
var x = 2;
// Here x is 2
}
// Here x is 2
//--------------------------------------------------------
// let은 재선언할 수는 없지만
// 블록 내부에 선언된 변수는 블록 외부에서 엑세스할 수 없기 때문에
// 내부에 변수를 다시 선언해도 문제가 발생하지 않는다.
let  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
//--------------------------------------------------------
// const는 재할당할 수가 없다.
const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

▶ jQuery 선택기 예시

Syntax	Description
$("*")	Selects all elements
$(this)	Selects the current HTML element
$("p.intro")	Selects all <p> elements with class="intro"
$("[href]")	Selects all elements with an href attribute

Node.js : webkitSpeechRecognition 를 이용해서 Speech-to-text

홍시쿼카 — Tue, 25 Jan 2022 20:39:22 +0900

이번 글에서는 google의 Speech-to-Text API 정보를 찾아보다가 알게 된 webkitSpeechRecognition에 대해 포스팅해보도록 하겠습니다. webkitSpeechRecognition을 이용하면 내가 녹음하는 동안 연결했던 html의 text에 자동으로 출력되는 것을 확인할 수 있습니다.

1) html에 녹음버튼과 결과값 출력할 text 만들기

<a href="#" id="record_start" style="text-decoration:none;color:black;">녹음시작</a> 
<span id="record_msg" style="margin-left: 50px;"></span>

2) webitSpeechRecognition으로 출력하기

var r=document.getElementById('record_msg');

        function webkitSpeech()
        {
            if('webkitSpeechRecognition'in window){
                //Web speech API Function
                var speechRecognizer = new webkitSpeechRecognition();
                speechRecognizer.continuous = true;
                speechRecognizer.interimResults = true;
                //lang : language (ko-KR : Korean, en-IN : englist)
                speechRecognizer.lang="ko-KR";
                speechRecognizer.start();
    
                var finalTranscripts = '';
                speechRecognizer.onresult=function(event){
                    var interimTranscripts='';
                    for(var i=event.resultIndex; i < event.results.length; i++)
                    {
                        var transcript=event.results[i][0].transcript;
                        transcript.replace("\n","<br>");

                        //isFinal : if speech recognition is finished, isFinal = true
                        if(event.results[i].isFinal){
                            finalTranscripts+=transcript;
                        }
                        else{
                            interimTranscripts+=transcript;
                        }
                    }
                    //insert into HTML
                    r.innerHTML=finalTranscripts+'<span style="color:#999">'+interimTranscripts+'</span>';
                };
                speechRecognizer.onerror = function(event){
                };
            }
            else{
                //if browser don't support this function. this message will show in your web
                r.innerHTML ="your browser is not supported. If google chrome. Please upgrade!";
            }
        }

MS-SQL : PRIMARY 파일 그룹이 꽉 찼으므로 데이터베이스 tempdb 공간 할당 오류

홍시쿼카 — Mon, 19 Jul 2021 13:18:03 +0900

'PRIMARY' 파일 그룹이 꽉 찼으므로 데이터베이스 'tempdb'의 개체 'dbo.SORT ~ '에 공간을 할당할 수 없습니다. 필요없는 파일을 삭제하거나, 파일 그룹의 개체를 삭제하거나, 파일 그룹에 파일을 추가하거나, 파일 그룹의 기존 파일에 대해 자동 증가를 설정하여 디스크 공간을 만드십시오.

원인 : 하드 디스크 공간 또는 디비 파일자동증가가 설정되지 않은 이유
해결방법 : 디비 파일 자동증가 설정을 하거나, 하드디스크 확보, 로그파일 삭제가 있다.

1) 로그파일 줄이기

-- 디비의 ㅍ로그파일명과 줄이고자 하는 파일의 사이즈를 입력합니다.
BACKUP LOG [디비명] WITH NO_LOG
DBCC SHRINKFILE ([디비로그파일], [파일사이즈KB])

-- 로그파일 줄이는 예시
EX) BACKUP LOG tempdb WITH NO_LOG
DBCC SHRINKFILE (templog, 512)

-- db size 체크하는 쿼리
Sp_helpdb 'tempdb'

HTTP 상태 코드

홍시쿼카 — Wed, 14 Jul 2021 17:51:15 +0900

모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분된다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다. 마지막 두 자리는 클래스나 분류 역할을 하지 않는다. 첫자리에 대한 5가지 값들은 다음과 같습니다.

1xx (정보): 요청을 받았으며 프로세스를 계속한다
2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다
3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다
4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다
5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다

1xx (조건부 응답 - Information Responses)

이 상태의 상태 코드는 상태-라인과 선택적 헤더(컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분)만을 포함하는 임시의 응답을 나타내고 빈 라인에 의해서 종결된다. HTTP/1.0이래로 어떤 1XX 상태 코드들도 정의 되지 않았다. 서버들은 1XX 응답을 실험적인 상태를 제외하고 HTTP/1.0 클라이언트(서버에 연결된 컴퓨터)로 보내면 안 된다.

100(Continue, 계속) : 요청자는 요청을 계속해야 한다. 서버는 이 코드를 제공하여 요청의 첫 번째 부분을 받았으며 나머지를 기다리고 있음을 나타낸다.

101(Switching Protocol, 프로토콜 전환) : 요청자가 서버에 프로토콜 전환을 요청했으며 서버는 이를 승인하는 중이다.

102(Processing WebDAV, 처리) : 이 코드는 서버가 요청을 수신하였으며 이를 처리하고 있지만, 아직 제대로 된 응답을 알려줄 수 없음을 알려준다.

2xx (성공 - Successful Responses)

이 클래스의 상태 코드는 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다.

200(OK, 성공) : 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.

201(Created, 작성됨) : 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.

202(Accepted, 허용됨) : 서버가 요청을 접수했지만 아직 처리하지 않았다.

203(Non-Authoritative Information, 신뢰할 수 없는 정보) : 서버가 요청을 성공적으로 처리했지만 다른 소스에서 수신된 정보를 제공하고 있다.

204(No Content, 콘텐츠 없음) : 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.

205(Reset Content, 콘텐츠 재설정) : 서버가 요청을 성공적으로 처리했지만 콘텐츠를 표시하지 않는다. 204 응답과 달리 이 응답은 요청자가 문서 보기를 재설정할 것을 요구한다(예: 새 입력을 위한 양식 비우기).

206(Partial Content, 일부 콘텐츠) : 서버가 GET 요청의 일부만 성공적으로 처리했다.

207(Multi-Status, 다중 상태) : 다중 상태는 여러 리소스가 여러 상태 코드인 상황이 적절한 경우에 해당되는 정보를 전달한다. 해당 코드는 WebDAV(Web Distributed Authoring Versioning)에 사용된다.

208(Already Reported, 이미 보고됨) : prostat(property와 status의 합성어) 응답 속성으로 동일 컬렉션으로 바인드된 복수의 내부 멤버를 반복적으로 열거하는 것을 피하기 위해 사용된다. 해당 코드는 WebDAV(Web Distributed Authoring Versioning)에 사용된다.

226(IM Used - HTTP Delta encoding) : 서버가 GET요청에 대한 리소스의 의무를 다 했고, 그리고 응답이 하나 또는 그 이상의 인스턴스 조작이 현재 인스턴스에 적용되었음을 알려준다.

3xx (리다이렉션 완료 - Redirection Messages)

클라이언트는 요청을 마치기 위해 추가 동작을 취해야 한다.

300(Multiple Choice, 여러 선택항목) : 서버가 요청에 따라 여러 조치를 선택할 수 있다. 서버가 사용자 에이전트에 따라 수행할 작업을 선택하거나, 요청자가 선택할 수 있는 작업 목록을 제공한다.

301(Moved Permanently, 영구 이동) : 요청한 페이지를 새 위치로 영구적으로 이동했다. GET 또는 HEAD 요청에 대한 응답으로 이 응답을 표시하면 요청자가 자동으로 새 위치로 전달된다.

302(Found, 임시 이동) : 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.

303(See Other, 기타 위치 보기) : 요청자가 다른 위치에 별도의 GET 요청을 하여 응답을 검색할 경우 서버는 이 코드를 표시한다. HEAD 요청 이외의 모든 요청을 다른 위치로 자동으로 전달한다.

304(Not Modified, 수정되지 않음) : 마지막 요청 이후 요청한 페이지는 수정되지 않았다. 서버가 이 응답을 표시하면 페이지의 콘텐츠를 표시하지 않는다. 요청자가 마지막으로 페이지를 요청한 후 페이지가 변경되지 않으면 이 응답(If-Modified-Since HTTP 헤더라고 함)을 표시하도록 서버를 구성해야 한다.

305(Use Proxy, 프록시 사용) : 요청자는 프록시를 사용하여 요청한 페이지만 액세스할 수 있다. 서버가 이 응답을 표시하면 요청자가 사용할 프록시를 가리키는 것이기도 하다.

~~306(unused)~~ : 이 응답 코드는 더 이상 사용되지 않으며, 현재는 추후 사용을 위해 예약되어 있다. 이것은 HTTP 1.1 기술사양 이전 버전에서 사용되었다.

307(Temporary Redirect, 임시 리다이렉션) : 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.

308(Permanent Redirect, 영구 리다이렉션) : 이것은 리소스가 이제 HTTP 응답 헤더의 Location에 명시된 영구히 다른 URI에 위치하고 있음을 의미한다. 이것은 301 Moved Permanently HTTP 응답 코드와 동일한 의미를 가지고 있으며, 사용자 에이전트가 반드시 HTTP 메소드를 변경하지 말아야 하는 점만 다르다. 만약 첫 요청에 POST가 사용되었다면, 두번째 요청도 반드시 POST를 사용해야 한다.

4xx (요청 오류 Client Error Responses)

4xx 클래스의 상태 코드는 클라이언트에 오류가 있음을 나타낸다.

400(Bad Request, 잘못된 요청) : 서버가 요청의 구문을 인식하지 못했다.

401(Unauthorized, 권한 없음) : 이 요청은 인증이 필요하다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있다. 상태 코드 이름이 권한 없음(Unauthorized)으로 되어 있지만 실제 뜻은 인증 안됨(Unauthenticated)에 더 가깝다.

402(Payment Required, 결제 필요) : 이 요청은 결제가 필요합니다.

403(Forbidden, 금지됨) : 서버가 요청을 거부하고 있다. 예를 들자면, 사용자가 리소스에 대한 필요 권한을 갖고 있지 않다. (401은 인증 실패, 403은 인가 실패라고 볼 수 있음)

404(Not Found, 찾을 수 없음) : 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.

405(Method Not Allowed, 허용되지 않는 방법) : 요청에 지정된 방법을 사용할 수 없다. 예를 들어 POST 방식으로 요청을 받는 서버에 GET 요청을 보내는 경우, 또는 읽기 전용 리소스에 PUT 요청을 보내는 경우에 이 코드를 제공한다.

406(Not Acceptable, 허용되지 않음) : 요청한 페이지가 요청한 콘텐츠 특성으로 응답할 수 없다.

407(Proxy Authentication Required, 프록시 인증 필요) : 이 상태 코드는 401(권한 없음)과 비슷하지만 요청자가 프록시를 사용하여 인증해야 한다. 서버가 이 응답을 표시하면 요청자가 사용할 프록시를 가리키는 것이기도 한다.

408(Request Timeout, 요청 시간초과) : 서버의 요청 대기가 시간을 초과하였다.

409(Conflict, 충돌) : 서버가 요청을 수행하는 중에 충돌이 발생했다. 서버는 응답할 때 충돌에 대한 정보를 포함해야 한다. 서버는 PUT 요청과 충돌하는 PUT 요청에 대한 응답으로 이 코드를 요청 간 차이점 목록과 함께 표시해야 한다.

410(Gone, 사라짐) : 서버는 요청한 리소스가 영구적으로 삭제되었을 때 이 응답을 표시한다. 404(찾을 수 없음) 코드와 비슷하며 이전에 있었지만 더 이상 존재하지 않는 리소스에 대해 404 대신 사용하기도 한다. 리소스가 영구적으로 이동된 경우 301을 사용하여 리소스의 새 위치를 지정해야 한다.

411(Length Required, 길이 필요) : 서버는 유효한 콘텐츠 길이 헤더 입력란 없이는 요청을 수락하지 않는다.

412(Precondition Failed, 사전조건 실패) : 서버가 요청자가 요청 시 부과한 사전조건을 만족하지 않는다.

413(Payload Too Large, 요청 속성이 너무 큼) : 요청이 너무 커서 서버가 처리할 수 없다.

414(URI Too Long, 요청 URI가 너무 긺) : 요청 URI(일반적으로 URL)가 너무 길어 서버가 처리할 수 없다.

415(Unsupported Media Type, 지원되지 않는 미디어 유형) : 요청이 요청한 페이지에서 지원하지 않는 형식으로 되어 있다.

416(Requested Range Not Satisfiable, 처리할 수 없는 요청범위) : 요청이 페이지에서 처리할 수 없는 범위에 해당되는 경우 서버는 이 상태 코드를 표시한다.

417(Expectation Failed, 예상 실패) : 서버는 Expect 요청 헤더 입력란의 요구사항을 만족할 수 없다.

418(I'm a teapot) : 서버는 커피를 찻 주전자에 끓이는 것을 거절합니다.

421(Misdirected Request) : 서버로 유도된 요청은 응답을 생성할 수 없다.

422(Unprocessable Entity, 처리할 수 없는 엔티티, WebDAV) : 요청은 잘 만들어졌지만, 문법 오류로 인하여 따를 수 없다.

423(Locked 잠김, WebDAV) : 접근하려는 리소스가 잠겨 있다.

424(Failed Dependency 실패된 의존성, WebDAV) : 이전 요청이 실패하였기 때문에 지금의 요청도 실패하였다.

~~425(정렬되지 않은 컬렉션, 인터넷 초안)~~

426(Upgrade Required, 업그레이드 필요) : 클라이언트는 업그레이드 헤더 필드에 주어진 프로토콜로 요청을 보내야 한다.

428(Precondition Required, 전제조건 필요) : 오리진 서버는 요청이 조건적이어야 한다. 클라이언트가 리소스를 GET해서 수정하고 그리고 PUT으로 서버에 돌려놓는 동안 서드파티가 서버의 상태를 수정하여 발생하는 충돌인 '업데이트 상실'을 예방하기 위한 목적이다.

429(Too Many Rquests, 너무 많은 요청) : 사용자가 일정 시간 동안 너무 많은 요청을 보냈다.

431(Request Header Fields Too Large, 요청 헤더 필드가 너무 큼) : 요청한 헤더 필드가 너무 크기 때문에 서버는 요청을 처리하지 않는다. 요청은 크기를 줄인 다음에 다시 전송해야 한다.

~~444(응답 없음, Nginx)~~

~~449(다시 시도, 마이크로소프트)~~

~~450(윈도 자녀 보호에 의해 차단됨, 마이크로소프트)~~

451(Unavailable For Legal Reasons, 법적인 이유로 이용 불가, 인터넷 초안) : 사용자가 요청한 것은 정부에 의해 검열된 웹 페이지와 같은 불법적인 리소스이다.

~~494(요청 헤더가 너무 큼, Nginx)~~

~~495(Cert 오류, Nginx)~~

~~496(Cert 없음, Nginx)~~

~~497(HTTP to HTTPS, Nginx)~~

~~499(클라이언트가 요청을 닫음, Nginx)~~

5xx (서버 오류)

서버가 유효한 요청을 명백하게 수행하지 못했음을 나타낸다.

500(Internal Server Error, 내부 서버 오류) : 서버에 오류가 발생하여 요청을 수행할 수 없다.

501(Not Implemented, 구현되지 않음) : 서버에 요청을 수행할 수 있는 기능이 없다. 예를 들어 서버가 요청 메소드를 인식하지 못할 때 이 코드를 표시한다.

502(Bad Gateway, 불량 게이트웨이) : 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 잘못된 응답을 받았다. 인터넷상의 서버가 다른 서버로부터 유효하지 않은 응답을 받은 경우 발생한다.

503(Service Unabailable, 서비스를 사용할 수 없음) : 서버가 요청을 처리할 준비가 되지 않았다. 일반적인 원인은 유지보수를 위해 작동이 중단되거나 과부하가 걸린 서버이다. 이 응답과 함께 문제를 설명하는 사용자 친화적인 페이지가 전송되어야 한다는 점에 유의. 이 응답은 임시 조건에 사용되어야 하며, Retry-After:HTTP 헤더는 가능하면 서비스를 복구하기 전 예상 시간을 포함해야 한다. 웹마스터는 또한 이러한 일시적인 조건 응답을 캐시하지 않아야 하므로 이 응답과 함께 전송되는 캐싱 관련 헤더에 대해서도 주의해야 한다.

504(Gateway Timeout, 게이트웨이 시간초과) : 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 제때 요청을 받지 못했다. 이 오류는 대개 인터넷상의 서버 간의 네트워크 오류이거나 실제 서버의 문제이다. 컴퓨터, 장치 또는 인터넷 연결에 문제가 아닐 수 있다.

505(HTTP Version Not Supported, HTTP 버전이 지원되지 않음) : 서버가 요청에 사용된 HTTP 프로토콜 버전을 지원하지 않는다. 대부분의 웹 브라우저는 웹 서버가 1.x버전의 HTTP 프로토콜을 지원한다고 가정한다. 실제로 1.0이하의 매우 오래된 버전은 요즘 거의 사용하지 않는다. 특히 최신 버전의 프로토콜보다 보안 및 성능이 좋지 않기 때문이다. 따라서 웹 브라우저에서 이 오류가 표시되는 경우 웹 서버 소프트웨어에서 지원하는 HTTP 버전을 확인해봐야 한다.

506(Variant Also Negotiates) : 서버에 내부 구성 오류가 있는 경우 발생한다. 요청을 위한 투명한 컨텐츠 협상이 순환 참조로 이어진다.

507(Insufficient Storage, 용량 부족, WebDAV) : 서버에 내부 구성 오류가 있는 경우 발생한다. 요청을 위한 투명한 컨텐츠 협상이 순환 참조로 이어진다.

508(Loop Detected, 루프 감지됨, WebDAV) : 서버가 요청을 처리하는 동안 무한 루프를 감지한 경우 발생한다.

~~509(대역폭 제한 초과, Apache bw/limited extension)~~

510(Not Extended, 확장되지 않음) : 서버가 요청을 이행하려면 요청에 대한 추가 확장이 필요하다.

511(Network Authentication Required, 네트워크 인증 필요) : 511 상태코드는 클라이언트가 네트워크 엑세스를 얻기 위해 인증할 필요가 있음을 나타낸다.

520(Unknown Error, 알 수 없음)

598(네트워크 읽기 시간초과 오류, 알 수 없음)

599(네트워크 연결 시간초과 오류, 알 수 없음)

C# : Clickonce does not support the request execution level 'requireadministrator'

홍시쿼카 — Wed, 2 Jun 2021 17:58:33 +0900

<?xml version="1.0" encoding="utf-8"?>
<asmv1:assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv1="urn:schemas-microsoft-com:asm.v1" xmlns:asmv2="urn:schemas-microsoft-com:asm.v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <assemblyIdentity version="1.0.0.0" name="MyApplication.app" />
  <trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">
    <security>
      <requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">
        <!-- UAC 매니페스트 옵션
             Windows 사용자 계정 컨트롤 수준을 변경하려면 
             requestedExecutionLevel 노드를 다음 중 하나로 바꾸십시오.

        <requestedExecutionLevel  level="asInvoker" uiAccess="false" />
        <requestedExecutionLevel  level="requireAdministrator" uiAccess="false" />
        <requestedExecutionLevel  level="highestAvailable" uiAccess="false" />

            이전 버전과의 호환성을 위해 파일 및 레지스트리 가상화를 사용하려면 
            requestedExecutionLevel 노드를 삭제하십시오.
        -->
        <requestedExecutionLevel level="requireAdministrator" uiAccess="false" />
      </requestedPrivileges>
      <applicationRequestMinimum>
        <defaultAssemblyRequest permissionSetReference="Custom" />
        <PermissionSet class="System.Security.PermissionSet" version="1" Unrestricted="true" ID="Custom" SameSite="site" />
      </applicationRequestMinimum>
    </security>
  </trustInfo>
</asmv1:assembly>

C# : 이 행은 이미 다른 테이블에 속해있습니다. System.ArgumentException 오류

홍시쿼카 — Mon, 26 Apr 2021 12:46:43 +0900

DataTable dt = flexGrid1.DataTable.Copy();
COPY_DT = dt.Clone();
// 이미 갖고 있는 DataTable에 특정 index의 Row만 add하고 싶은 경우
COPY_DT.Rows.Add(dt.Rows[index]);
COPY_DT.AcceptChanges();

예시 소스와 같이 dt.Rows[index]를 해버리면, [이 행은 이미 다른 테이블에 속해 있습니다] 라는 System.ArgumentException 오류가 발생하게 됩니다. 이런 경우에는 dt.Rows.Add에 바로 dt.Rows[index]를 넣지 말고 다른 방법으로 add를 해주어야 합니다.

1. COPY_DT.ImportRow(dt.Rows[index]); 
2. COPY_DT.Rows.Add(dt.Rows[index].ItemArray);

C# : Convert 금액 정수 형식의 특성

홍시쿼카 — Thu, 15 Apr 2021 15:07:52 +0900

sbyte, byte경우 기본값은 short, ushort, int, uint, long, ulong, 0입니다. char 기본값은 '\x0000', float 기본값은 0.0f, double 기본값은 0.0d, decimal 기본값 0.0m 입니다.

Types - C# language specification

형식Types 이 문서의 내용 --> C # 언어의 형식은 value types _ 및 _참조 형식*_ 이라는 두 가지 주요 범주로 구분 됩니다.The types of the C# language are divided into two main categories: value types _ and _reference types*.

docs.microsoft.com

CMD : Shutdown 명령어 정리

홍시쿼카 — Wed, 14 Apr 2021 15:59:01 +0900

shutdown 명령어
shutdown -s : 시스템 종료
shutdown -r : 시스템 리부팅
shutdown -s -f : 실행 중인 응용프로그램을 강제로 종료하고 시스템 종료
shutdown -s -t 0 : 시스템 즉시 종료
shutdown -r -t 0 : 즉시 리부팅
shutdown -r -t 60 : 1분 후에 시스템 리부팅
shutdown -s -t 3600 : 1시간 후에 시스템 종료
shutdown -r -f -t 0 : 실행 중인 응용프로그램을 강제로 종료하고 시스템 리부팅
shutdown -a : shutdown 명령 취소

cmd창에서 shutdown -r -t 3600을 입력했을 때 60분 후 windows가 종료됩니다.라는 알림이 정상적으로 뜨는 것을 확인할 수 있습니다.

C# : 실행프로그램(exe)만 있어도 BouncyCastle.CryptoExt.dll 참조 가능하도록 설정 (dll을 포함한 단일 exe배포)

홍시쿼카 — Tue, 30 Mar 2021 14:26:06 +0900

이번 글에서는 실행프로그램(exe)만 있어도 dll참조하여 사용할 수 있는 dll포함 단일 exe배포방법에 대해서 공부하도록 하겠습니다. 저 같은 경우 BouncyCastle.CryptoExt.dll때문에 이번 공부를 하게 되었는데요. 다양한 방법을 정리하여 올려놓았으니 원하시는 방법으로 사용하시면 될 듯 싶습니다!

1. Assembly를 이용한 dll참조 단일 실행프로그램(exe)만들기

사용하고자하는 dll(예시 BouncyCastle.CryptoExt.dll)을 우선 프로젝트에 참조 추가합니다. 그 다음 프로그램 진입점(Program.cs)에 코드를 아래와 같이 변경합니다.

[STAThread]
static void Main()
{
    AppDomain.CurrentDomain.AssemblyResolve += new ResolveEventHandler(ResolveAssembly);

    Application.EnableVisualStyles();
    //Application.SetCompatibleTextRenderingDefault(false);
    Application.Run(new MainForm());
}

// .NET 4.0 이상
static Assembly ResolveAssembly(object sender, ResolveEventArgs args) {
  Assembly thisAssembly = Assembly.GetExecutingAssembly();
  var name = args.Name.Substring(0, args.Name.IndexOf(',')) + ".dll";

  var resources = thisAssembly.GetManifestResourceNames().Where(s => s.EndsWith(name));
  if (resources.Count() > 0) {
      string resourceName = resources.First();
      using (Stream stream = thisAssembly.GetManifestResourceStream(resourceName)) {
          if (stream != null) {
              byte[] assembly = new byte[stream.Length];
              stream.Read(assembly, 0, assembly.Length);
              Console.WriteLine("Dll file load : " + resourceName);
              return Assembly.Load(assembly);
          }
      }
  }
  return null;
}

// LINQ가 지원되지 않는 .NET 버전
static Assembly ResolveAssembly(object sender, ResolveEventArgs args)
{
    Assembly thisAssembly = Assembly.GetExecutingAssembly();
    string resourceName = null;
    string fileName = args.Name.Substring(0, args.Name.IndexOf(',')) + ".dll";
    foreach (string name in thisAssembly.GetManifestResourceNames())
    {
        if (name.EndsWith(fileName))
        {
            resourceName = name;
        }
    }

    
    if (resourceName != null)
    {
        using (Stream stream = thisAssembly.GetManifestResourceStream(resourceName))
        {
            if (stream != null)
            {
                byte[] assembly = new byte[stream.Length];
                stream.Read(assembly, 0, assembly.Length);
                Console.WriteLine("Dll file load : " + resourceName);
                return Assembly.Load(assembly);
            }
        }
    }
    return null;
}

단, 위의 소스는 exe파일과 Application이 호출하는 dll파일이 동일한 경로에 위치해 있어야 한다는 기준입니다. 만약 exe파일 경로가 아닌 다른 경로의 dll파일을 사용하고 싶은 경우 Assembly의 경로를 다르게 지정해주시면 됩니다.

Assembly thisAssembly = Assembly.GetExecutingAssembly();
string AppPath = @"특정 경로";
if (System.IO.File.Exists(String.Format("{0}{1}", AppPath,  "BouncyCastle.CryptoExt.dll")))
{
    thisAssembly = Assembly.LoadFile(String.Format("{0}{1}", AppPath, "BouncyCastle.CryptoExt.dll"));
}

2. EnterpriseServices Internal Publish에서 GacInstall을 이용하여 특정경로의 dll 참조걸기

[STAThread]
static void Main()
{
    string AppPath = @"";
    System.EnterpriseServices.Internal.Publish dllImport = new System.EnterpriseServices.Internal.Publish();
    dllImport.GacInstall(String.Format("{0}{1}", AppPath, "BouncyCastle.CryptoExt.dll"));
            
    Application.Run(new MainForm());
}

단, 위의 방법을 사용하기 위해서는 특정경로에 해당 dll이 필수로 있어야 하며, System.EnterpriseServices를 참조해야 합니다.

* GACInstall : 전역 어셈블리 캐시에 어셈블리를 설치하는 방식 GacInstall(string AsssemblyPath) : 해당 메소드를 사용하시려면 실행프로그램(exe)이 관리자 권한으로 실행되어야 합니다. 권한이 없는경우 SecurityException 오류가 발생할 수 있습니다.

* SecurityException : 호출 체인에 있는 호출자에게 비관리 코드에 액세스할 수 있는 권한이 없는 경우

C# : HttpWebRequest sync 동기식, async 비동기식

홍시쿼카 — Mon, 29 Mar 2021 13:09:23 +0900

//------------------------------------------------------------------
// http - sync 동기식
//------------------------------------------------------------------
HttpWebRequest httpReq = (HttpWebRequest)HttpWebRequest.Create(TargetURi);
httpReq.Method = "POST";
httpReq.ContentType = "application/json;";
using (StreamWriter streamWriter = new StreamWriter(httpReq.GetRequestStream()))
{
    streamWriter.Write(RequestJson);
    streamWriter.Flush();
    streamWriter.Close();
}

httpRes = (HttpWebResponse)httpReq.GetResponse();
Stream RESULT_STREAM = httpRes.GetResponseStream();

//------------------------------------------------------------------
// http - async 비동기식
//------------------------------------------------------------------
httpReq = (HttpWebRequest)HttpWebRequest.Create(TargetURi);
httpReq.Method = "POST";
httpReq.ContentType = "application/json;";

// 비동기식 방법을 사용하게 될 경우 두 번이상의 호출 프로세스를 가질 수 있기 때문에
// 런타임 오류 발생 가능성이 있다. 한 UITread에서 하나의 HttpWebRequest를 허용하기 ㄸ때문에
// 그러므로, request가 종료되기 전에 새로운 request가 발생하지 않도록 로직 주의
httpReq.BeginGetRequestStream(new AsyncCallback((IAsyncResult reqAsyncResult) =>
{
    try
    {
        HttpWebRequest request = (HttpWebRequest)reqAsyncResult.AsyncState;

        // End the operation
        Stream postStream = request.EndGetRequestStream(reqAsyncResult);

        // Convert the string into a byte array.
        byte[] byteArray = Encoding.UTF8.GetBytes(RequestJson);

        // Write to the request stream.
        postStream.Write(byteArray, 0, byteArray.Length);
        postStream.Close();

    }
    catch (Exception e)
    {
        Trace.WriteLine(e.ToString());
    }

}), httpReq);


httpReq.BeginGetResponse(new AsyncCallback((IAsyncResult resAsyncResult) =>
{
    try
    {
        using (HttpWebResponse response = (HttpWebResponse)httpReq.EndGetResponse(resAsyncResult))
        {
            Stream RESULT_STREAM = response.GetResponseStream();
            response.Close();
        }
    }
    catch (Exception e)
    {
        Trace.WriteLine(e.ToString());
    }

}), httpReq);

C# : MDIControl TabControl안에 자식 프레임 MDIForm 넣기

홍시쿼카 — Fri, 26 Mar 2021 08:56:55 +0900

이번 글에서는 메인프레임 안에 여러 개의 자식프레임을 가질 수 있게 MDI형태를 만들어 보도록 하겠습니다. 단, MDI는 TabControl로 구성할 것이며, 자식프레임은 TabPage별로 개별화면을 생성하도록 하겠습니다.

* MDI(Multiple Document Interface) : MDI는 메인프레임에 여러 개의 자식프레임(도큐먼트)를 가지고 있는 형태를 말합니다.

1. 새로운 프로젝트 생성 : TestProject라는 이름의 프로젝트를 생성하였습니다.

2. 메인폼 디자인 변경 및 메뉴추가 : 초기 화면크기로는 화면을 비교하기에 너무 작은 것 같아 화면크기를 조금 키웠습니다. 그리고 MDIForm들이 잘 들어갔는지 비교하기 위해 메뉴바(MneuStrip)도 추가로 넣었습니다.

3. MDIControl, MDIForm 생성 : TabControl로 사용할 MDIControl와 TabPage로 사용할 MDIForm을 생성합니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace TestProject
{
    public partial class MDIControl : TabControl
    {
        public MDIControl()
        {

        }
    }
}

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace TestProject
{
    public partial class MDIForm : TabPage
    {
        public MDIForm()
        {

        }

    }
}

class 파생클래스이름 : 접근제어지시자 기초클래스이름[, 접근제어지시자 기초클래스이름, ...]{}

MDIControl은 앞서 말씀드린 것과 같이 TabControl, MDIForm은 TabPage의 파생클래스가 됩니다.

4. MainForm에 MDIControl 추가 : 메인폼 안에 자식폼들을 띄우려면 MDIControl이 밑바탕에 깔려져있어야 합니다. MainForm 디자인에 들어가서 TestProject 구성요소에 있는 MDIControl을 추가해주세요. 추가하시면 MDIControl는 TabControl을 파생하는 클래스이기에 화면과 같이 TabControl이 생기는 것을 확인할 수 있습니다. TabPage1, TabPage2는 TabControl을 추가하면 default로 나오는 페이지이기에 없애도록 하겠습니다. TabPage 제거는 디자인의 TabPages의 (컬렉션)에서 제거하실 수 있습니다.

5. 자식폼(SiteForm, DownLoadForm) 생성 : 앞서 만들었던 MneuStrip의 메뉴를 클릭하면 해당 메뉴의 화면을 메인폼의 TabPage에 뿌려주도록 하겠습니다. 우선 자식폼으로 사용할 Form들을 생성합니다.

// 자식폼이 TabPage와 어울릴 수 있도록 디자인 수정
1. FormBorderStyle을 None으로 설정
2. MaximizeBox, MinmizeBox False로 설정
3. ShowIcon, ShowInTaskbar False로 설정

저는 자식폼으로 DownLoadForm과 SiteForm을 생성해보았습니다. 그리고 각각의 자식폼을 구분하기 위해 Label을 하나씩 붙였습니다.

6. MDIControl(TabControl)의 MDIForm(TabPage)에 자식폼(DownLoadForm, SiteForm) 추가 : MDIControl CS소스에서 MDIForm 생성자를 생성 후 그 안에 자식폼들을 Add시키는 메소드를 만듭니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace TestProject
{
    public partial class MDIControl : TabControl
    {
        public MDIControl()
        {

        }

        public int Add(Form sb)
        {
            if (sb == null)
                return -1;

            sb.TopLevel = false;

            MDIForm page = new MDIForm();
            page.Text = sb.Text + "        ";
            page.Controls.Clear();
            page.Controls.Add(sb);
            base.TabPages.Add(page);
            sb.Show();

            base.SelectedTab = page;

            return 0;
        }

    }
}

7. MainForm CS소스에 자식폼들 Add : 이제 메인폼 CS소스에 들어가서 MenuItem Click 이벤트 안에 각각 Add할 자식폼들을 연결시킵니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace TestProject
{
    public partial class MainForm : Form
    {

        SiteForm sf = new SiteForm();
        DownLoadForm df = new DownLoadForm();

        public MainForm()
        {
            InitializeComponent();
        }

        private void MainForm_Load(object sender, EventArgs e)
        {

        }

        private void 사이트ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            // SiteForm을 호출할 예정

            mdiControl1.Add(sf);
        }

        private void 다운로드목록ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            // DownLoadForm을 호출할 예정
            mdiControl1.Add(df);
        }

    }
}

그럼 정상적으로 자식폼들이 TabControl에 추가되는 것을 확인할 수 있습니다!

이번 글을 TabControl, TabPage 파생클래스 MDIControl, MDIForm을 이용해서 Tab별로 자식폼이 생기는 것을 공부해보았습니다. 단, 해당 글은 MDI의 기초적인 부분만 다룬 것이라 자식폼에 대한 싱글톤이나 다른 추가적인 기능에 대해서는 다루지 않았으니 참고하여 주시기바랍니다.

C# : DataGridView DataSource를 DB에서 가져온 DataTable 정보로 세팅

홍시쿼카 — Thu, 11 Mar 2021 12:35:26 +0900

DB에서 가져온 데이터를 DataTable에 담아서 DataGridView에 DataSource를 했는데 내가 원하는 방향대로 매핑되는 것이 아니라 위의 사진과 같이 나온다면 DataGridView 옵션 중 DataPropertyName를 확인해주시기 바랍니다.

dgvLogList.Columns.Add("log_date", "로그일자");
dgvLogList.Columns.Add("log_time", "로그시간");
dgvLogList.Columns.Add("log_time_msec", "로밀리세컨드");
dgvLogList.Columns[0].DataPropertyName = "log_date";
dgvLogList.Columns[1].DataPropertyName = "log_time";
dgvLogList.Columns[2].DataPropertyName = "log_time_msec";

C# : 체크콤보박스 창사이즈 늘리기 CheckedComboBoxEdit Popup Resize

홍시쿼카 — Wed, 3 Mar 2021 12:42:20 +0900

만약 내가 만든 CheckComboBox의 창이 작아 데이터가 짤려서 보인다면 우리는 Properties의 PopupFormSize 옵션을 통해 사이즈를 조절할 수 있습니다.

디자인으로 들어가서 CheckComboBox를 클릭 후 [속성]-[Properties]-[PopupFormSize]를 조정해주세요. Width는 가로 사이즈의 너비, Height는 세로 사이즈의 높이를 뜻합니다.

CheckComboBox는 컬럼의 수가 높이를 초과하게 되면 자동으로 스크롤이 생기기에 높이는 따로 지정하지 않았습니다. Width만 제가 원하는 사이즈로 조절하니 위의 사진과 같이 모든 글이 다 보이는 것을 확인할 수 있습니다.

C# : LookUpEdit SelectIndex=0 첫 번째 Row 선택하기

홍시쿼카 — Wed, 3 Mar 2021 11:27:22 +0900

private void set콤보박스()
{
    DataTable dt조회데이터 = null;

    // 콤보박스는 key, value 형식으로 column을 생성하였습니다.
    DataTable dt콤보박스 = new DataTable();
    DataHelper.DataTable_AddColumn(dt콤보박스, "key", "");
    DataHelper.DataTable_AddColumn(dt콤보박스, "value", "");

    DataRow dr = dt콤보박스.NewRow();
    dr["value"] = string.Empty;
    dr["key"] = "- 전체 -";
    dt콤보박스.Rows.Add(dr);

    // 만약 DB상에서 가져온 조회 데이터를 넣고 싶은 경우
    if (dt조회데이터 == null)
    {
        return;
    }

    for (int i = 0; i < dt조회데이터.Rows.Count; i++)
    {
        dr = dt콤보박스.NewRow();
        dr["value"] = dt조회데이터.Rows[i]["value"];
        dr["key"] = dt조회데이터.Rows[i]["key"];
        dt콤보박스.Rows.Add(dr);
    }

    cbo콤보박스.Properties.DataSource = dt콤보박스;
    cbo콤보박스.Properties.ValueMember = "value";
    cbo콤보박스.Properties.DisplayMember = "key";
    cbo콤보박스.Properties.DropDownRows = dt콤보박스.Rows.Count + 1; // 해당 코드를 안넣으면 스크롤 생김
    cbo콤보박스.ItemIndex = 0; // 제일 첫번째 row로 보여줌
}

LookUpEdit에는 SelectIndex 옵션이 아닌 ItemIndex를 사용해야 합니다. 또한 해당 메소드는 생성자 안에 넣지 않고 Form_Load()와 같은 폼 로드 메소드에 넣어야 정상적으로 selectIndex = 0이 되는 것을 확인할 수 있습니다.

C# : DataGridView Cell 밑줄 넣기 Underline

홍시쿼카 — Fri, 26 Feb 2021 15:53:23 +0900

만약 DataGridView에서 특정 Cell들만 밑줄(underline)을 넣고 싶은 경우 참고하시기 바랍니다.

// 내가원하는 Columns의 index값과 기본 font의 값이 필요
DataGridView.Columns[i].DefaultCellStyle.Font = new Font(DataGridView.Columns[i].DefaultCellStyle.Font, FontStyle.Underline);

// 만약 특정 셀의 Font가 없는 경우는 아래의 코드 참고
DataGridView.Columns[i].DefaultCellStyle.Font = new Font(DataGridView.DefaultCellStyle.Font, FontStyle.Underline);

// 실제 예시
dgvODBCList.Columns[1].DefaultCellStyle.Font = new Font(dgvODBCList.DefaultCellStyle.Font, FontStyle.Underline);

레드마인 텍스트 포맷 바꾸기 : Redmine Textile formatting

홍시쿼카 — Wed, 17 Feb 2021 10:34:46 +0900

1. 폰트 스타일

h1. h1의 크기

h2. h2의 크기

h3. h3의 크기

*굵게*

_기울임_

+밑줄+

-취소선-

@코드@

* 글머리 기호

# 번호 매기기 

> 인용

<pre>
있는 그대로 표현
</pre>

[[Wiki 페이지에 연결]]

!그림!

:) 이모티콘

참고로 <pre></pre> 안에서는 *굵게* 와 같은 폰트 스타일을 사용할 수 없습니다.

2. 색상

* %{color:red}red% %{color:green}green% %{color:yellow}yellow% %{color:#82B6E1}blue'ish%

* %{color:red}red%<notextile></notextile>%{color:green}green%<notextile></notextile>%{color:yellow}yellow%<notextile></notextile>%{color:#82B6E1}blue'ish%

* %{background:lightgreen}Lightgreen Background% %{background:yellow}Yellow Background%

* %{background:lightgreen}Lightgreen Background%<notextile></notextile>%{background:yellow}Yellow Background%

3. 단락

p. 왼쪽 정렬

p(. 왼쪽 정렬에서 1칸 들여쓰기

p((. 왼쪽 정렬에서 2칸 들여쓰기

p>. 오른쪽 정렬

p)))>. 오른쪽 정렬에서 3칸 들여쓰기

p=. 가운데 정렬

4. 표 생성

|_.UserID      |_.Name          |_.Group     |_. attribute list   |
|Starting with | a              |   simple   |row                 |
|\3=.IT                                      |<. align left       |
|1             |Artur Pirozhkov |/2.Users    |>. align right      |
|2             |Vasya Rogov     |=. center   |
|3             |John Smith      |Admin
                                 (root)      |^. valign top       |
|4             |-               |Nobody
                                 (anonymous) |~. valign bottom    |

참고사항 : www.redmine.org/projects/redmine/wiki/KoreanWikiFormatting

KoreanWikiFormatting - Redmine

KoreanWikiFormatting¶ 텍스트 서식(작업중:Working)¶ 링크 넣기¶ 레드마인에 링크넣기¶ 레드마인에는 어디에나 텍스트 형식의 리소스(일감, 변경내용, 위키 페이지...)에 하이퍼 링크를 사용하실 수 있

www.redmine.org

러스트 프로그래밍 언어 (Rust Programming Language)

홍시쿼카 — Thu, 7 Jan 2021 14:04:24 +0900

러스트(Rust)는 모질라 리서치에서 개발한 범용 프로그래밍 언어로, C, C++, Go언어와 같이 컴파일 기반의 언어이자 시스템 프로그래밍 언어에 속한다. 러스트(Rust)와 Go는 비슷한 시기에 등장하고 두 언어 모두 C, C++을 서로 다른 방향에서 대체하려 한다는 점때문에 많이들 이 두 언어를 비교한다.

러스트(Rust)는 인터넷에서 실행되는 서버 및 클라이언트 프로그램을 개발하는데 적합한 언어를 목표로 설계되었다. 그렇기에 러스트 = 안전하고, 병렬적이며, 실용적인 언어. 순수 함수형 프로그래밍, 액터 기반 병렬 프로그래밍, 명령형 프로그래밍, 객체 지향 프로그래밍 스타일을 지원.

* Rust의 장점들

빠르다	러스트 코드는 여러 플랫폼에 걸쳐 기본 시스템 코드로 컴파일된다. 바이너리는 자체 포함되며 런타임이 없고, 생성된 코드는 C 또는 C++로 작성된 코드와 함께 기능한다.
안전하다	러스트는 안전하지 않은 메모리 사용을 시도하는 프로그램을 컴파일링 하지 않는다. 대부분의 메모리 오류는 프로그램이 실행 중일 때 발견된다. 러스트의 구문과 언어 은유는 다른 언어에서 흔히 나타나는 메모리 관련 문제(null 또는 댕글링 포인터, 데이터 레이스 등)가 절대 생산까지 영향을 미치지 않도록 보장한다. 컴파일러는 이러한 이슈에 플래그를 지정하고 프로그램이 실행되기 전에 수정하도록 강제한다.
간접비용이 적게 발생한다	러스트는 엄격한 규칙을 통해 메모리 관리를 통제한다. 러스트의 메모리 관리 시스템은 '소유'라고 불리는 메타포를 통해 언어 구문으로 표현된다. 러스트 언어에서 주어진 가치는 한 번에 하나의 변수에 의해서만 소유되거나 유지, 조작될 수 있다. 러스트 프로그램의 모든 메모리는 소유권 메타포를 통해 추적되고 자동으로 방출된다.
융통성이 있다	러스트는 필요하다면 어느 정도의 위험도 감수할 수 있도록 되어 있다. 러스트의 안전 장치는 C, C++의 'raw pointer'와 같이 메모리를 직접적으로 조작해야 하는 경우 부분적으로 비활성화 시키는 것이 가능하다. 러스트의 메모리 안전 오퍼레이션은 절대로 완전히 비활성화 될 수 없다. 안전 오퍼레이션을 부분적으로 비활성화 한다고 해도 일반적인 사용 사례에서는 '안전벨트'를 풀을 필요가 거의 없으므로, 결과적으로는 안전의 기본 값이 훨씬 높은 소프트웨어가 탄생하게 된다.
사용하기 쉽다	러스트 바이너리를 생산하는 데 필요한 모든 것은 같은 패키지에 담겨 있다. GCC와 같은 외부 컴파일러는 러스트 생태계(소스로부터 컴파일하는 C 라이브러리 등) 밖에서 다른 구성요소를 컴파일하는 경우에만 필요하다. 마이크로소프트 윈도우 사용자들 역시 이등 시민 취급을 받지 않아도 된다. 러스트 툴 체인은 윈도우에서도 리눅스 및 맥OS에서와 같은 기능을 한다.
크로스-플랫폼 언어이다	러스트는 리눅스, 윈도우 및 맥OS의 세 가지 주요 플랫폼에서 모두 작동한다. 만약 개발자가 교차 컴파일하거나, 현재 실행하고 있는 것과 다른 아키텍처나 플랫폼에 대한 바이너리를 생산하고 싶다면 조금 더 많은 작업이 수반되지만, 러스트의 일반적인 임무 중 하나는 그러한 작업에 필요한 무거운 짐을 덜어 주는 것이다.
강력한 언어 기능을 제공한다	기존 사용하던 익숙한 언어보다 더 적은, 혹은 빈약한 기능을 가진 새로운 언어를 가지고 작업하고 싶어 하는 개발자는 거의 없을 것이다. C++ 같은 언어와 비교했을 때, 러스트가 지닌 기능들은 훨씬 개발자의 구미를 당기게 할 만하다. 매크로(Macros), 일반론(generics), 패턴 매칭(patternmatching) 및 구성은 러스트의 중요 기능들이다.
유용한 표준 라이브러리를 가지고 있다	러스트의 주요 목표 중 하나는 C와 C++ 개발자들이 가능하면 러스트를 사용하도록 장려하는 것이다. 그러나 C와 C++ 사용자는 컨테이너, 컬렉션 및 반복기를 사용하고, 문자열 조작을 수행하고, 프로세스와 스레딩을 관리하고, 네트워크 및 파일 I/O를 수행하는 등 적절한 표준 라이브러리를 원하고 있다. 러스트는 그 모든 것, 그리고 그 이상을 표준 라이브러리 안에서 할 수 있다. 크로스-플랫폼 언어인 러스트의 표준 라이브러리는 플랫폼 간에 신뢰성 있게 포팅할 수 있는 것들만 포함할 수 있다. 리눅스의 epoll과 같은 플랫폼별 기능은 libc, mio 또는 Tokio와 같은 타사 라이브러리의 기능을 통해 지원될 수 밖에 없다.
다양한 서드파티 라이브러리 '크레이트'를 가지고 있다	프로그래밍 언어의 유용성을 평가하는 한 가지 척도는 서드파티를 사용해 얼마나 많은 것을 할 수 있느냐이다. 러스트 라이브러리의 공식 저장소인 카고(Cargo)는 약 1만 개의 크레이트를 열거하고 있다. 이들 중 상당수가 공통라이브러리 및 프레임워크에 API 결합하고 있기 때문에 러스트는 그러한 프레임워크와 함께 하나의 언어 옵션으로 사용될 수 있다. 그러나 러스트 커뮤니티에서는 아직까지 전체적인 품질 및 효용성에 기초한 상세한 소개나 크레이트 순위를 공개하고 있지 않기 때문에, 직접 사용해 보거나 커뮤니티에서 설문조사를 해 보지 않고는 어떤 크레이트가 최선인지 선택할 방법이 없다.
IDE 지원이 훌륭하다	러스트 컴파일러로부터 마이크로소프트 비주얼 스튜디오 코드와 같은 IDE에 실시간 피드백을 제공하는 러스트 랭기지 서버(Rust Language Server)를 도입했다. 러스트 랭기지 서버는 기본 구문 체킹 이상의 피드백을 제공한다.

출처 : blog.naver.com/sundooedu/221706592707

Go언어와 비교해보는 시스템 프로그래밍 언어 러스트(Rust)

러스트 언어(Rust Language)는 모질라 리서치에서 개발한 범용 프로그래밍 언어로, 최근 인기가 급상승하...

blog.naver.com

C# : TreeList 특정 노드 찾기 및 TreeListNode 추가하기 : FindNodeByFieldValue

홍시쿼카 — Thu, 31 Dec 2020 12:25:32 +0900

이번 글에서는 TreeList 중 특정 Node를 찾는 방법에 대해 설명해보도록 하겠습니다. 우선 위의 사진을 보면 알 수 있듯이 TreeList에는 FindNodeByFieldValue, FindNodeByID, FindNodeByKeyID 등 다양한 옵션들을 갖고 있습니다.

public TreeListNode SearchNode(TreeListNodes objNodes, string strKey, string strValue)
{
	foreach (TreeListNode node in objNodes)
	{
		// TreeList 중 fieldName이 strKey이면서 cellValue값이 strValue인 Node 찾기
		node.TreeList.FindNodeByFieldValue(strKey, strValue);
	}
	return null;
}

1) FindNodeByFieldValue : FindNodeByFieldValue는 특정 FieldName에서 찾고자 하는 Value가 있으면 해당 Node를 찾는 옵션입니다.

public TreeListNode SearchNode(TreeListNodes objNodes, int szId)
{            
	foreach (TreeListNode node in objNodes)
	{
		// TreeList 중 ID가szId인 경우
		node.TreeList.FindNodeByID(szId);
	}
	return null;
}

2) FindNodeByID : FindNodeByID는 특정Id의 Node를 찾는 옵션입니다.

C# : OpenFileDialog 파일 불러오기 엑셀 열기 및 DataTable 데이터 받기 How to export Excel file to DataTable

홍시쿼카 — Wed, 30 Dec 2020 15:21:17 +0900

이번 글에서는 SaveFileDialog에 이어 파일을 불러올 수 있는 OpenFileDialog에 대해 배워보도록 하겠습니다. 만약 SaveFileDialog 사용하는 방법에 대해 알고 싶으신 분들은 아래의 링크를 참고해주세요.

C# : SaveFileDialog 엑셀 저장 및 열기 How to open Excel File after save in C#

이번 글에서는 SaveFileDialog를 이용해서 엑셀을 저장하고 난 뒤, 해당 저장한 엑셀 파일을 여는 방법에 대해 설명하도록 하겠습니다. 단순 저장만 하려고 했는데 어쩌다보니 해당 엑셀 파일을 열

milkoon1.tistory.com

// using 참조
using Excel = Microsoft.Office.Interop.Excel;

private DataTable get엑셀데이터가져오기()
{
	try
	{
    		//-------------------------------------------------------------------------
		string path = @"";
		OpenFileDialog dialog = new OpenFileDialog();
		dialog.InitialDirectory = @"D:\";             // 디폴트 경로

		if (dialog.ShowDialog() == DialogResult.OK)
		{
			path = dialog.FileName;
		}
		//-------------------------------------------------------------------------
		DataTable _printData = new DataTable();
		if (!_printData.Columns.Contains("source_name")) { _printData.Columns.Add("source_name"); };
		if (!_printData.Columns.Contains("source_type")) { _printData.Columns.Add("source_type"); };
		if (!_printData.Columns.Contains("file_type")) { _printData.Columns.Add("file_type"); };
		if (!_printData.Columns.Contains("url_path")) { _printData.Columns.Add("url_path"); };
		if (!_printData.Columns.Contains("file_path")) { _printData.Columns.Add("file_path"); };

		DataRow row;
		int index = 0;
		object rowIndex = 2;

		Excel.ApplicationClass app = new Excel.ApplicationClass();
		Excel.Workbook workBook = app.Workbooks.Open(path, 0, true, 5, "", "", true, Excel.XlPlatform.xlWindows, "\t", false, false, 0, true, 1, 0);
		Excel.Worksheet workSheet = (Excel.Worksheet)workBook.ActiveSheet;

		while (((Microsoft.Office.Interop.Excel.Range)workSheet.Cells[rowIndex, 1]).Value2 != null)
		{
			rowIndex = 2 + index;
			row = _printData.NewRow();
			row[0] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 1]).Value2);
			row[1] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 2]).Value2);
			row[2] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 3]).Value2);
			row[3] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 4]).Value2);
			row[4] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 5]).Value2);
			index++;
			_printData.Rows.Add(row);
		}
		app.Workbooks.Close();

		return _printData;
	}
	catch (Exception ex)
	{
		return null;
	}
}

1) 파일 불러오기(OpenFileDialog) : 이미 저장되어 있는 파일을 불러오고 싶은 경우에는 OpenFileDialog 클래스를 사용하면 됩니다.

string path = @""; // OpenFileDialog에서 받은 경로를 담을 변수
OpenFileDialog dialog = new OpenFileDialog(); // 생성자 생성
dialog.InitialDirectory = @"D:\";             // 화면을 띄웠을 때 처음 보여줄 경로

if (dialog.ShowDialog() == DialogResult.OK) // ShowDialog()로 화면 띄우기
{
	path = dialog.FileName; // 선택한 파일의 경로 받기
	// 그 외 필요한 내용 적기
}

사용방법은 우선 생성자를 생성한 다음 ShowDialog()를 이용해서 파일을 불러오면 되는데 dialog.FileName이 선택한 파일의 경로를 말합니다.

2) 선택한 엑셀을 DataTable에 담기

그 다음 설명할 내용은 선택한 엑셀의 데이터를 DataTable에 옮겨놓는 작업입니다.

DataTable _printData = new DataTable();
if (!_printData.Columns.Contains("source_name")) { _printData.Columns.Add("source_name"); };
if (!_printData.Columns.Contains("source_type")) { _printData.Columns.Add("source_type"); };
if (!_printData.Columns.Contains("file_type")) { _printData.Columns.Add("file_type"); };
if (!_printData.Columns.Contains("url_path")) { _printData.Columns.Add("url_path"); };
if (!_printData.Columns.Contains("file_path")) { _printData.Columns.Add("file_path"); };

우선 엑셀의 Cells(컬럼)과 동일하게 DataTable Columns를 생성해주세요. 컬럼명은 동일할 필요는 없지만 저는 한눈에 보기 쉽게 해놓았습니다.

DataRow row;
int index = 0;
object rowIndex = 2;

Excel.ApplicationClass app = new Excel.ApplicationClass();
Excel.Workbook workBook = app.Workbooks.Open(path, 0, true, 5, "", "", true, Excel.XlPlatform.xlWindows, "\t", false, false, 0, true, 1, 0);
Excel.Worksheet workSheet = (Excel.Worksheet)workBook.ActiveSheet;

while (((Microsoft.Office.Interop.Excel.Range)workSheet.Cells[rowIndex, 1]).Value2 != null)
{
	rowIndex = 2 + index;
	row = _printData.NewRow();
	row[0] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 1]).Value2);
	row[1] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 2]).Value2);
    row[2] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 3]).Value2);
	row[3] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 4]).Value2);
	row[4] = Convert.ToString(((Excel.Range)workSheet.Cells[rowIndex, 5]).Value2);
	index++;
	_printData.Rows.Add(row);
}
app.Workbooks.Close();

그 다음은 엑셀의 데이터를 가져오는 작업입니다. 아까 전에 받았던 dialog.FileName을 얻은 이유가 이제 나오네요. app.Workbooks.Open(path, ~) 중 path를 설정하려고 위의 작업을 했던 것입니다.

While문은 엑셀의 Value값이 null이 아닌 경우 반복해서 작업합니다. row는 위의 코드를 보면 알 수 있듯이 각각 열마다 있는 데이터를 가져오고 있죠.

코드를 정확하게 입력하셨으면 위의 사진과 같이 데이터를 가져올 수 있습니다.

Android with Kotlin : 안드로이드 기초편 - ListView 기초 리스트뷰 클릭 시 상세화면 이동

홍시쿼카 — Mon, 21 Sep 2020 13:12:15 +0900

저번 글에서는 ListView를 생성 및 데이터를 출력하는 것까지 배워보았습니다. 이번 글에서는 리스트뷰 중 내가 원하는 리스트를 선택했을 때 상세화면으로 이동하는 방법 및 데이터 출력을 배워보도록 하겠습니다.

* 연습내용 : 직방 목록화면에서 리스트를 하나 클릭 시 해당 목록에 대한 상세화면으로 이동 및 데이터 출력을 연습할 계획입니다. - 프로젝트명 : Review_ListView

순서	위치	프로세스
1	java > RoomDetailActivity 생성 res > layout > activity_room_detail.xml 생성	리스트를 클릭했을 때 넘어갈 상세화면 부분 ▶ 오른쪽 버튼 Activity 생성하면 자동으로 xml도 생성 ※ 역할 : 상세화면(디자인)
2	res > layout > activity_room_detail.xml	▶ activity_main.xml에서 한 것과 비슷하게 상세화면에 뿌려줄 디자인 구성 ※ 역할 : 상세화면(디자인)
3	java > MainActivity	리스트 클릭 이벤트를 넣는 작업 ▶ setupEvents() 함수 안에 리스트뷰 클릭이벤트를 넣기 ※ 역할 : 상세화면으로 이동할 이벤트를 설정(소스)
4	java > datas > Room	리스트 클릭 이벤트에서 담은 정보를 사용할 수 있게 작업 ▶ putExtra에서 ArrayList<Room>를 가져갈 수 있게 Room 상속 설정 ※ 역할 : Serializable 상속(소스)
5	java > RoomDetailActivity	메인화면에서 가져온 리스트 정보를 받고 처리작업 ▶ 1) RoomDetailActivity은 AppCompatActivity를 상속받는게 아니고 전에 설정했던 BaseActivity로 변경 2) setupEvents(), setValues() override 하기 3) setValues()에서 받은 roomInfo를 가지고 매핑시키기 ※ 역할 : 상세화면 데이터 뿌리기(소스)

1. RoomDetailActivity 생성

상세화면을 만들기 위해 새로운 Activity를 생성해줍니다. * 참고로 Actvity.kt 파일과 xml 파일은 각각 생성하는 것이 아니라 위의 사진과 같이 Activity > Empty Activity를 클릭해서 생성하면 kt, xml 둘다 자동 생성됩니다.

<!-- activity_room_detail.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".RoomDetailActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/ic_launcher_foreground"
        android:scaleType="centerCrop"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="15dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/priceTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8,000(보증금) / 30(월세)"
            android:textSize="25sp"
            android:textColor="#000000"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/descTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="설명문구 쓰는 자리입니다."
            android:layout_marginTop="5dp"/>

    </LinearLayout>


    <TextView

        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#DFDFDF"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="주소 정보"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/addressTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="서울시 은평구"
            android:textColor="#000000"/>

    </LinearLayout>

    <TextView

        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#DFDFDF"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="층수 정보"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/floorTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1층"
            android:textColor="#000000"/>

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#DFDFDF"/>

</LinearLayout>

2. activity_room_detail.xml 수정

kt, xml파일을 생성하셨으면 우선 디자인과 관련된 xml파일부터 수정하도록 합니다. 디자인은 위의 소스를 참고해주세요.

* 참고 : ListView기초와 활용에서 ImageView를 사용하긴 하지만 실제 데이터를 넣어주진 않을겁니다. ImageView관련된 내용은 나중에 상세하게 올릴 예정이니 참고해주세요.

package com.mwsniper.review_listview

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.mwsniper.review_listview.adapters.RoomAdapter
import com.mwsniper.review_listview.datas.Room
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : BaseActivity() {

    val mRoomList = ArrayList<Room>()
    lateinit var mRoomAdapter: RoomAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setupEvents()
        setValues()

    }

    override fun setupEvents() {

        //메인화면의 이벤트관련 코드를 모아두는 장소
        // 리스트 클릭 이벤트 - 리스트뷰의 각 줄이 눌리는 시점의 이벤트
        roomListView.setOnItemClickListener { adapterView, view, i, l ->

            // 눌린 위치에 해당하는 목록이 어떤 목록인지 가져오기
            val clickedRoom = mRoomList[i]
            // 선택된 목록정보를 가져왔으면 이제 화면 이동
            val myIntent = Intent(mContext, RoomDetailActivity::class.java)
            // 정보를 담아주기
            // 2번에서는 해당 부분 오류남. 3번하고 난 다음 여기로 다시 와야함
            myIntent.putExtra("roomInfo", clickedRoom)
            // 화면 전환
            startActivity(myIntent)
        }
    }

    override fun setValues() {
        mRoomList.add(Room(8000, 30, "서울시 마포구", 1, "마포구 1층 방입니다."))
        mRoomList.add(Room(10000, 50, "서울시 은평구", 10, "은평구 10층 방입니다."))
        mRoomList.add(Room(3000, 80, "서울시 영등포구", 5, "영등포구 5층 방입니다."))
        mRoomList.add(Room(5000, 15, "서울시 종로구", 4, "종로구 4층 방입니다."))
        mRoomList.add(Room(9000, 20, "서울시 강서구", 8, "강서구 8층 방입니다."))
        mRoomList.add(Room(12000, 40, "서울시 강북구", 17, "강북구 17층 방입니다."))
        mRoomAdapter = RoomAdapter(mContext, R.layout.room_list_item, mRoomList)
        roomListView.adapter = mRoomAdapter

    }
}

3. setOnItemClickListener 이벤트

상세화면 디자인을 하셨으면 이제 메인화면에서 상세화면으로 이동할 수 있는 코딩을 해보도록 하겠습니다. 메인화면 → 상세화면으로 이동할 것을 짜는거니 실행 이벤트는 MainActivity에서 해야합니다. 옛날 글에서 우리는 setOnClickListener를 배운 적이 있는데 이번 글에서는 그 이벤트가 아닌 새로운 이벤트를 써야합니다. ListView의 리스트를 클릭했을 때 태울 이벤트 setOnItemClickListener 이벤트

package com.mwsniper.review_listview.datas

import java.io.Serializable

class Room(
    val deposit: Int,
    val monthlyRent: Int,
    val address: String,
    val floor: Int,
    val description: String
// 상속받는 것처럼 구현
) : Serializable {
}

4. Serializable 설정

3번까지 했으면 분명 myIntent.putExtra 부분이 빨간색으로 바뀌면서 오류를 내뱉을 것입니다. 이 오류는 우리가 만든 데이터 클래스에 첨부할 때 발생하는 에러로, 해당 오류를 해결하기 위해서는 모든 데이터들을 한꺼번에 넘기도록 처리해줍니다.

package com.mwsniper.review_listview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.mwsniper.review_listview.datas.Room
import kotlinx.android.synthetic.main.activity_room_detail.*

class RoomDetailActivity : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_room_detail)

        setValues()
        setupEvents()

    }

    override fun setupEvents() {
    }

    override fun setValues() {

        // roomInfo를 serializable로 받는다
        // 그냥 받은 채로 변수에 넣으면 오류가 나는데 이 때 Casting을 해줘야 한다
        val room = intent.getSerializableExtra("roomInfo") as Room

        // activity_room_detail.xml에 설정했던 view에 따라 매핑
        priceTxt.text = "${room.deposit} / ${room.monthlyRent}"
        addressTxt.text = room.address
        descTxt.text = room.description
        floorTxt.text = room.floor.toString()

    }
}

5. 상세화면 데이터 매핑

MainActivity에서 putExtra로 roomInfo를 보내줬으니 이제 상세화면에서 해당 정보를 받고 화면에 보일 수 있도록 매핑하는 작업을 하도록 하겠습니다. Serializable로 보낸 데이터는 받을 때 intent.getSerializableExtra로 받아야하며 "roomInfo"는 앞서 정한 name을 넣은 것 입니다. 여기서 주의해야할 점은 as Room인데요 그냥 받은 상태로 변수 넣고 작업을 하면 앱이 죽거나 오류가 납니다. 그렇기에 오류가 안나도록 우리는 Room(데이터클래스)로 캐스팅을 해줘야합니다.

여기까지 잘 따라오셨으면 위의 화면과 같이 정상적으로 상세화면 이동 및 데이터출력을 확인하실 수 있습니다. 원래는 리스트목록보다 더 많은 데이터들을 상세화면에 출력해야하는데 아직은 서버 DB를 통해 데이터를 가져오는 작업을 하지 않았기에 똑같은 정보를 가지고 출력하였습니다.

Android with Kotlin : 안드로이드 기초편 - ListView 기초 프로세스 파악하기

홍시쿼카 — Mon, 21 Sep 2020 12:32:29 +0900

* ListsView : 같은 모양의 목록이 반복적으로 나타날 때 여러줄을 비슷한 모양, 자리에 맞는 데이터만 변경해서 출력

* ListView는 Data / ArrayList / Adapter 세 가지를 같이 사용

저번 시간까지는 Intent에 대해 배워보았습니다. 이번 시간부터는 ListView에 대해 공부해보도록 하겠습니다.

* 참고로 최근에는 ListView 대신 RecylerView를 많이 사용하는데 제가 학원에서 배운 부분은 ListView이기에 복습도 ListView로 우선 하도록 하겠습니다.

* 연습내용 : 직방 목록 사진과 같이 보증금, 월세, 주소, 층수, 설명에 대해 ListView를 만들어 보는 연습을 할 계획입니다. - 프로젝트명 : Review_ListView

순서	위치	프로세스
1	java > BaseActivity.kt 생성	공통적으로 사용하는 함수들을 미리 정의해두는 부분 - MainActivity처럼 자동생성하는 것이 아니고 우리가 직접 Kotlin Class로 생성 ▶ mContext, setupEvents(), setValues() 생성 ※ 역할 : 기본 틀 구성(기초작업)
2	java > MainActvity.kt	▶ BaseActivity에서 생성한 setupEvents, setValues함수 override 하기 * 주의사항 : 꼭 TO-DO 주석 제거 및 onCreate함수에 setupEvents, setValues 넣기 ※ 역할 : 기본틀 만든 것과 연결(기초작업)
3	res > layout > activity_main.xml	앱을 실행했을 때 화면에 바로 보여줄 부분 ▶ ListView 태그를 추가 및 id부여 ※ 역할 : 화면 리스트뷰 생성(디자인)
4	java > datas 패키지 생성 java > datas > Room.kt 생성	ListView가 뿌려줄 데이터들을 묶어서 표현하는 데이터 클래스 작업 ▶ 클래스의 생성자에서 val 변수이름 : 자료형 클래스가 가져야하는 정보 항목들로 설정 ※ 역할 : 데이터 항목 설정(DB)
5	res > layout > room_list_item.xml 생성	ListView에 데이터가 뿌려질 모양을 xml로 설정 ▶ 한 줄에 해당하는 모양 설정 ※ 역할 : 한 줄씩 뿌려줄 때 보여줄 모습 생성(디자인)
6	java > adapters 패키지 생성 java > adapters > RoomAdapter 생성	데이터 클래스 객체들을 ArrayList에 담아서 Adapter에게 전달 하나하나의 객체들을 한 줄에 해당하는 XML과 연결해서 ListView에 뿌려주는 역할 ▶ Room 뿌려줄 데이터클래스 상속받고 필요한 데이터 순으로 텍스튜 변수에 담기 ※ 역할 : 매개체 생성
7	java > MainActivity.kt	▶ 액티비티에서 실제 목록을 담아줄 ArrayList만들고 실제 데이터 담아주기 DB와 관련된 데이터를 연결해줘야하는데 현재는 연습용이라 가라 데이터를 가지고 활용 ※ 역할 : 데이터 ArrayList에 담아놓기(소스)
8	java > MainActivity.kt	▶ Adapter 클래스를 액티비티에 있는 리스트뷰와 연결 ※ 역할 : 매개체와 데이터 담아놓은 ArrayList 연결, 리스트뷰의 매개체인 것 지정
9	java > adapters > RoomAdapter	▶ 실제 데이터가 있는 목록이 반영되도록 하기 ※ 역할 : 리스트뷰의 텍스트뷰와 row 안에 있는 데이터와 연결하기

package com.mwsniper.review_listview

import androidx.appcompat.app.AppCompatActivity

abstract class BaseActivity : AppCompatActivity() {

    // 어느 화면인지 알려줄 때 쓰는 용도의 변수 mContext 멤버변수로 지정
    val mContext = this

    // 이벤트 처리 코드를 모아두게 될 함수
    abstract fun setupEvents()

    // 화면에 데이터를 뿌리는데에 관련된 코드를 모아두게 될 함수
    abstract fun setValues()

}

package com.mwsniper.review_listview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : BaseActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setupEvents()
        setValues()
    }

    override fun setupEvents() {
    }

    override fun setValues() {
    }
}

1. BaseActivity 클래스 생성

자주 사용할 함수 와 mContext를 멤버변수로 잡고 MainActivity가 해당 클래스를 상속받도록 설정해줍니다

* BaseActivity는 AppCompatActivity()를 상속받고

* MainActvity는 BaseActivity()를 상속받도록 설정해줘야 합니다

2. MainActivity 클래스에 override 하기

BaseActivity에 2개의 추상메소드를 생성하였으니 상속받고 있는 MainActivity에도 해당 함수들을 상속받아야 합니다.

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    //1. 액티비티 화면 (xml)에 리스트뷰 배치 + id 부여
    <ListView
        android:id="@+id/roomListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

3. activity_main.xml에 ListView태그 추가

실제 화면에서 보여줄 ListView태그를 추가합니다

* 참고로 디자인에서는 ListView의 모습이 보이지만 실제 앱을 실행했을 때는 ListView의 모습이 보이지 않습니다.

이와 같은 이유 : ListView는 Adapter의 도움을 받아서 내용목록을 출력하는데 아직 Adapter가 없어서 그렇습니다.

package com.mwsniper.review_listview.datas

// ListView가 뿌려줄 데이터들을 묶어서 표현하는 데이터 클래스 생성
class Room(
    // 클래스의 생성자에서 변수들을 나열해서 클래스가 가져야하는 정보 항목들로 설정
    val deposit: Int,
    val monthlyRent: Int,
    val address: String,
    val floor: Int,
    val description: String
) {
    
}

4. datas 패키지 생성 및 Room 데이터 클래스 생성

activity_main.xml에 있는 ListView에 뿌려줄 데이터들을 묶어서 표현하는 클래스. 생성자( val 변수명: 자료형 ) 이렇게 표현하며 우리는 앞서 보증금, 월세, 주소, 층수, 설명을 보여주기로 약속했으니 해당과 관련된 변수들을 생성하였습니다.

<!-- room_list_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgTxt"
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:src="@drawable/ic_launcher_foreground"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:paddingLeft="15dp">

            <TextView
                android:id="@+id/priceTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="8,000(보증금) / 30(월세)"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/addressTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="주소, 1층"
                android:textSize="16sp"
                android:layout_marginTop="3dp"/>

            <TextView
                android:id="@+id/descTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="설명문구 쓰는 자리입니다."
                android:layout_marginTop="3dp"/>
        </LinearLayout>
        
    </LinearLayout>

</LinearLayout>

5. room_list_item.xml 추가

room_list_item.xml은 ListView의 List 하나마다 보여줄 모양을 설정하는 xml입니다. res > layout 에 Layout Resource File을 하나 추가해줍니다. 보통 ~_list_item.xml 이라고 이름을 짓습니다.

* 참고로 데이터들이 있는 LinearLayout 속성 중 gravity=center_vertical을 설정 안하면 글씨들이 제일 위에 설정이 되버립니다.

package com.mwsniper.review_listview.adapters

import android.content.Context
import android.content.LocusId
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import com.mwsniper.review_listview.R
import com.mwsniper.review_listview.datas.Room

// 2) 상속받은 뒤, Adapter 주 생성자에서 필요한 재료 받고
class RoomAdapter(
    val mContext: Context,
    val resId: Int,
    val mList: List<Room>

// 1) ArrayAdapater<Room(뿌려줄 데이터클래스)>()를 상속받고
// 3) ArrayAdapter<Room>(mContext, resId, mList) 생성자에서 필요한 재료 순으로 부모에게 넘기기
) : ArrayAdapter<Room>(mContext, resId, mList) {

    // 4) 객체로 변환해주는 변수를 멤버변수로 생성
    val inf = LayoutInflater.from(mContext)

    // 5) getView 오버라이딩
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {

        // 6) convertView 변수를 tempRow에 옮겨닮아서 null인경우 새로운 inflate해서 담기
        // 이렇게 사용하는 이유는 listView를 재사용성하기 위해
        var tempRow = convertView
        if(tempRow == null) {
            tempRow = inf.inflate(R.layout.room_list_item, null)
        }

        // tempRow는 맞지만 null은 절대 아니다 (= !!)
        val row = tempRow!!

        return row
    }

}

6. adapters 패키지 및 adapter 생성

Adapter 클래스는 Data 클래스 + xml을 조합해서 ListView에 뿌리는 역할을 합니다. ArrayAdapter를 상속받는다고 명시를 하고 그 안에 뿌려줄 데이터클래스를 적용합니다.

* ArrayAdapter는 기본생성사 ()를 지원하지 않기때문에 만약 데이터 받는 재료를 적용안하고 넘어가면 오류가 뜹니다.

package com.mwsniper.review_listview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.mwsniper.review_listview.datas.Room

class MainActivity : BaseActivity() {

    // 액티비테이서 실제 목록을 담아줄 ArrayList를 만들고 실제 데이터들을 담기
    val mRoomList = ArrayList<Room>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setupEvents()
        setValues()

    }

    override fun setupEvents() {

    }

    override fun setValues() {

        // 실제로 뿌려줄 데이터들 ArrayList변수에 추가
        // 보증금, 월세, 주소, 층수, 설명
        mRoomList.add(Room(8000, 30, "서울시 마포구", 1, "마포구 1층 방입니다."))
        mRoomList.add(Room(10000, 50, "서울시 은평구", 10, "은평구 10층 방입니다."))
        mRoomList.add(Room(3000, 80, "서울시 영등포구", 5, "영등포구 5층 방입니다."))
        mRoomList.add(Room(5000, 15, "서울시 종로구", 4, "종로구 4층 방입니다."))
        mRoomList.add(Room(9000, 20, "서울시 강서구", 8, "강서구 8층 방입니다."))
        mRoomList.add(Room(12000, 40, "서울시 강북구", 17, "강북구 17층 방입니다."))

    }

}

7. MainActivity에 ArrayList 만들기

액티비티에 실제 목록을 담아줄 ArrayList를 만들고 그 안에서 실제 데이터들을 담아줍니다. val 목록변수이름 = ArrayList<뿌려줄데이터클래스>() 실제로 뿌려줄 데이터들은 원래 서버에서 가져와야하지만 현재는 서버가 없으니 가라데이터를 만들어서 연습하였습니다.

package com.mwsniper.review_listview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.mwsniper.review_listview.adapters.RoomAdapter
import com.mwsniper.review_listview.datas.Room
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : BaseActivity() {

    val mRoomList = ArrayList<Room>()

    // 만들어둔 Adapter 클래스를 액티비티에 있는 리스트뷰와 연결
    lateinit var mRoomAdapter: RoomAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setupEvents()
        setValues()

    }

    override fun setupEvents() {

    }

    override fun setValues() {

        mRoomList.add(Room(8000, 30, "서울시 마포구", 1, "마포구 1층 방입니다."))
        mRoomList.add(Room(10000, 50, "서울시 은평구", 10, "은평구 10층 방입니다."))
        mRoomList.add(Room(3000, 80, "서울시 영등포구", 5, "영등포구 5층 방입니다."))
        mRoomList.add(Room(5000, 15, "서울시 종로구", 4, "종로구 4층 방입니다."))
        mRoomList.add(Room(9000, 20, "서울시 강서구", 8, "강서구 8층 방입니다."))
        mRoomList.add(Room(12000, 40, "서울시 강북구", 17, "강북구 17층 방입니다."))

        // Adapter 클래스를 객체화
        // BaseActivity의 mContext, 어떤 리스트를 보여줄건지, 목록변수의 이름
        // lateinit var로 초기화를 미뤘던 변수의 실제 초기화 코드
        // (mContext=어떤화면에서?, romm_list_item=어떤모양으로그릴지?, mRoomList=어떤목록?)
        mRoomAdapter = RoomAdapter(mContext, R.layout.room_list_item, mRoomList)

        // 객체화된 adapter변수를 리스트뷰의 어댑터로 지정
        // 실제 목록을 리스트뷰에 뿌려준다.
        roomListView.adapter = mRoomAdapter
    }
}

8. Adapter 클래스를 액티비티의 리스트뷰와 연결

RoomAdapter 클래스를 setValues에 만들었던 mRoomList와 연결하고 그것을 실제 화면에 보일 수 있도록 리스트뷰에 연결 시켜줍니다.

* 여기까지하면 리스트뷰에 아까 예시로 지정해둔 문구들이 줄줄이 생성되는 것을 확인할 수 있습니다.

* 참고로 실제 데이터들은 아직 반영되지 않은 상태

package com.mwsniper.review_listview.adapters

import android.content.Context
import android.content.LocusId
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.TextView
import com.mwsniper.review_listview.R
import com.mwsniper.review_listview.datas.Room

class RoomAdapter(
    val mContext: Context,
    val resId: Int,
    val mList: List<Room>
) : ArrayAdapter<Room>(mContext, resId, mList) {

    val inf = LayoutInflater.from(mContext)
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        var tempRow = convertView
        if(tempRow == null) {
            tempRow = inf.inflate(R.layout.room_list_item, null)
        }
        val row = tempRow!!

        // 실제 데이터가 있는 목록이 반영되도록 Adapter 클래스의 getView 함수를 수정
        // 뿌려줄 row 안에 있는 텍스트 뷰 변수로 담기
        val data = mList[position]
        val price = row.findViewById<TextView>(R.id.priceTxt)
        val address = row.findViewById<TextView>(R.id.addressTxt)
        val desc = row.findViewById<TextView>(R.id.descTxt)

        price.text = "${data.deposit} / ${data.monthlyRent}"
        address.text = "${data.address},  ${data.floor}"
        desc.text = data.description

        return row
    }

}

9. 리스트뷰의 id와 row안에있는 실제데이터 연결

마지막 작업으로 리스트뷰 안에 있는 TextView id와 row의 데이터를 연결하는 작업입니다. 해당 작업을 해야 실제 데이터가 리스트뷰에 출력됩니다. 여기까지 하셨으면 이미지를 제외한 나머지 TextView가 정상적으로 출력되는 것을 확인할 수 있을겁니다. 다음 글에서는 상세화면으로 넘어가서 디테일한 정보를 보여주는 연습을 해보도록 하겠습니다.

Android with Kotlin : 안드로이드 기초편 - Intent 활용 전화걸기, 문자발송, 인터넷연결 등

홍시쿼카 — Mon, 21 Sep 2020 11:13:57 +0900

이번 글에서는 옛날 Android + JAVA 했을 때 배웠었던 전화걸기, 주소링크가기 등을 Kotlin으로 해보도록 하겠습니다.

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/phoneNumEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="전화/문자를 연결할 번호 입력"
        android:inputType="phone"/>

    <Button
        android:id="@+id/dialBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="전화걸기 Dial"/>

    <Button
        android:id="@+id/callBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="전화걸기 Call"/>

    <Button
        android:id="@+id/naverLinkBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="네이버로가기"/>

    <EditText
        android:id="@+id/linkEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="주소창 입력"
        android:inputType="textWebEditText"
        android:singleLine="true"/>

    <Button
        android:id="@+id/linkBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="입력한 주소로 이동"/>

    <Button
        android:id="@+id/kakaoPlayStoreBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="카카오톡 앱 다운로드 링크" />
    
</LinearLayout>

package com.mwsniper.review_intent_call

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 전화 다이얼걸기 - 통화연결까지는 X
        dialBtn.setOnClickListener { 
            
            // 어디에 전화를 걸건지 text 정보 받기
            val input = phoneNumEdt.text.toString()
            // Uri를 이용해서 정보 저장
            val myUri = Uri.parse("tel:${input}")
            // 전환할 정보 설정 - ACTION_DIAL
            val myIntent = Intent(Intent.ACTION_DIAL, myUri)
            // 이동
            startActivity(myIntent)
        }
    }
}

1. 전화 다이얼걸기

첫 번째로 할 내용은 전화번호 입력 후 [전화걸기 DIAL] 버튼을 클릭하면 전화가 걸려지기 전 단계까지 가는 다이얼걸기

package com.mwsniper.review_intent_call

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    val mContext = this
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 전화걸기 - 통화연결까지는 O
        callBtn.setOnClickListener {

            // 어디에 전화를 걸건지 text 정보 받기
            val input = phoneNumEdt.text.toString()
            val permissionListener = object : PermissionListener {
                override fun onPermissionGranted() {

                    val myUri = Uri.parse("tel:${input}")
                    val myIntent = Intent(Intent.ACTION_CALL, myUri)
                    startActivity(myIntent)

                }

                override fun onPermissionDenied(deniedPermissions: MutableList<String>?) {
                    Toast.makeText(mContext,"전화 연결 권한이 거부되었습니다.", Toast.LENGTH_SHORT).show()

                }

            }

            TedPermission.with(mContext)
                .setPermissionListener(permissionListener)
                .setDeniedMessage("[설정] 에서 권한을 열어줘야 전화 연결이 가능합니다.")
                .setPermissions(Manifest.permission.CALL_PHONE)
                .check()
        }
    }
}

2. 전화 바로 걸기(집중 ★★★)

그 다음은 전화를 바로 걸도록 해주는 이벤트로 [전화걸기 CALL]버튼을 클릭하면 바로 DAIL처럼 진행될 줄 알았지만!! CALL에서는 추가적으로 처리해야할 내용이 있습니다.

// AndroidManifest.xml에 추가
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mwsniper.review_intent_call">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CALL_PHONE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

1) manifests에 permission 추가해주기

전화연결은 다이얼과는 다르게 사용자의 요금과 관련된 일을 우리가 맘대로 진행하는 부분이라 그에 맞는 권한을 획득해야합니다. 그렇기에 우선 Main > AndroidManifest.xml 들어가셔서 permission을 추가해주기 만약 추가 안하고 앱 돌리면 앱이 죽을거에요.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'gun0912.ted:tedpermission:2.2.3' //추가한 부분
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

2) tedpermission 추가해주기

AVD가 아닌 안드로이드 폰에서 테스트를 하시는 분들은 구글에 tedpermission을 검색하신다음 버전에 맞게 gradle에 추가해주세요.

* build.gradle은 Project와 Moudle 두 가지가 있는데 build.gradle(Module: app)에 들어가시면 됩니다.

package com.mwsniper.review_intent_call

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 문자발송 - 아직 내용은 없음
        smsBtn.setOnClickListener {
            val inputPhoneNum = phoneNumEdt.text.toString()
            val myUri = Uri.parse("smsto:${inputPhoneNum}")
            val myIntent = Intent(Intent.ACTION_SENDTO, myUri)

            // 문자 전송 화면 이동 시 미리 문구를 적어서 보내기
            // myIntent를 가지고 갈 때 -> putExtra로 데이터를 담아서 보내자
            myIntent.putExtra("sms_body", "이 앱을 다운로드 받아주세요.")

            startActivity(myIntent)
        }

    }
}

3. 문자 보내기

그 다음은 버튼은 안만들었지만 알아두면 좋은 SMS 문자보내기 소스. 전화랑은 살짝 다른 부분이 우선 tel: 이 아닌 smsto: 로 사용한다는 것과 문자는 당연 보내는 문구가 있으니 그것을 putExtra로 담고 보낸다는 차이점이 있답니다

package com.mwsniper.review_intent_call

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 인터넷 웹 연결하기 네이버
        naverLinkBtn.setOnClickListener {

            val myUri = Uri.parse("https://www.naver.com")
            val myIntent = Intent(Intent.ACTION_VIEW, myUri)
            startActivity(myIntent)
        }

        linkBtn.setOnClickListener {

            // 어디로 연결할건지 입력
            val input = linkEdt.text.toString()
            // Uri를 이용해서 정보 저장
            val myUri = Uri.parse(input)
            val myIntent = Intent(Intent.ACTION_VIEW, myUri)
            startActivity(myIntent)
        }

    }
}

4. 네이버로 연결하기

인터넷 연결은 앞서 배웠던 tel: / smsto: 와 같이 uriString에 안붙여도 되고 바로 주소창을 입력하면 됩니다. 입력한 주소를 연결하는 방법은 앞서 배웠던 입력한 전화번호로 연결하기랑 비슷한 구조이기 소스만 올리고 패스하겠습니다.

<uses-permission android:name="android.permission.INTERNET"/>

참고로 인터넷도 CALL때와 비슷하게 permission을 부여해줘야합니다.

package com.mwsniper.review_intent_call

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 플레이 스토어 연결spdlqj
        kakaoPlayStoreBtn.setOnClickListener {

            val myUri = Uri.parse("market://details?id=com.kakao.talk&hl=ko")
            val myIntent = Intent(Intent.ACTION_VIEW, myUri)
            startActivity(myIntent)
        }
    }
}

5. 카카오스토어 연결하기

구글 스토어도 네이버주소와 비슷하게 해당 스토어의 주소가 있습니다. 그 주소를 입력한 다음 넘기면 끝!

Android with Kotlin : 안드로이드 기초편 - Intent 활용 데이터 함께 화면전환

홍시쿼카 — Mon, 21 Sep 2020 10:07:03 +0900

저번 글에서는 로그인 화면에 있는 [가입하기]버튼을 클릭 시 가입화면으로 화면을 이동하는 방법에 대해 공부를 해보았습니다. 이번 글에서는 화면을 전환할 때 사용하는 Intent Action에 대해 조금 더 알아보도록 하겠습니다.

// 기본적인 Intent 사용법 - 데이터 포함 안하고 이동한 상태
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 가입하기 버튼을 눌렀을 때 회원가입화면으로 이동하게 버튼 클릭이벤트 만들기
        joinBtn.setOnClickListener {

            // 가입하기 버튼을 누르면 들어오는 로직
            // 회원가입(JoinActivity) 화면으로 이동하게 Intent 사용
            val myIntent = Intent(this, JoinActivity::class.java)

            // startActivity를 해야 화면이동 **
            startActivity(myIntent)
        }
    }
}

위의 소스는 저번 글에서 배웠던 Intent 사용 방법입니다. 우리는 val myIntent라하여 변수를 하나 생성하였고 그 안에 Intent(packageContext, 이동할 Activity::class.java) 넣어서 화면을 이동시켜주는 startActivity를 실행시켰습니다. 하지만 이 소스에서는 어떠한 데이터도 넘기지 않고 그냥 화면이동만 했죠.

val myIntent(변수이름변경가능) = Intent(출발지this, 도착액티비티::class.java) startActivity(myIntent) * 실제로는 액티비티 이동이 아니라, 새 액티비티를 하나 더 만들어서 기존의 액티비티 위에 얹어주는 기능
Intent	비행기 티켓 발권(출발지/도착지가 명시)
startActivity	실제 비행기 탑승(출발)
finish()	현재 액티비티 종료

이번 시간에는 단순히 화면이동만 하는게 아니라 데이터도 같이 담아서 보내보도록 하겠습니다.

새로운 프로젝트를 생성하도록 하겠습니다. 저는 프로젝트를 Review_Intent라고 이름 짓고 생성하였습니다.

* 연습내용 : MainActivity에 총 3개의 버튼을 만들었는데 [액티비티로 이동]버튼은 단순 이동버튼이고 [액티비티로 메시지 들고 이동]버튼은 상단에 있는 Text 내용을 들고 이동할 버튼 그리고 마지막 [닉네임 변경]버튼은 이동한 페이지에서 변경한 닉네임을 들고 다시 MainActivity로 와서 닉네임 보이는 Text에 뿌려주는 연습을 할 계획입니다.

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/moveToBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:text="액티비티로 이동" />

    <EditText
        android:id="@+id/messageEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="화면에 전달할 메세지 입력" />

    <Button
        android:id="@+id/bringToBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:text="액티비티로 메세지 들고 이동" />

    <TextView
        android:id="@+id/nickNameTxt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="닉네임 보이는 Text" />

    <Button
        android:id="@+id/changeNickNameBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="닉네임 변경" />

</LinearLayout>

1. 버튼을 클릭했을 때 화면이동 및 데이터를 주고받을 수 있는 화면을 새로 생성합니다. 저는 데이터를 넘겨받을 액티비티를 DataActivity로 생성하겠습니다. 정상적으로 생성하셨으면 java에는 DataActivity layout폴더에는 activity_data.xml이 생성되셨을겁니다.

<!-- activity_data.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp"
    android:gravity="center"
    tools:context=".DataActivity">

    <TextView
        android:id="@+id/receivedMessageTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="전달 받은 내용 출력 자리"
        android:layout_marginBottom="50dp"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/goBackToMainBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="메인으로 돌아가기" />

</LinearLayout>

2. [액티비티로 이동] 버튼은 화면만 이동하는 버튼이라 출력자리에는 변경사항이 없고

3. 두 번째 [액티비티로 메시지 들고 이동] 버튼은 들고 갈 데이터가 있기 때문 [전달받은 내용을 출력하는 자리]에 해당 내용을 뿌려주는 형식으로 하겠습니다.

package com.mwsniper.review_intent

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //1. 액티비티로 그냥 이동 버튼
        // moveToBtn 클릭이벤트
        moveToBtn.setOnClickListener {

            // 이동할 액티비티 경로 잡기
            val myIntent = Intent(this, DataActivity::class.java)

            // 이동하기
            startActivity(myIntent)

        }

        //2. 이동할 화면에 전달할 메시지 들고가는 버튼
        // bringToBtn
        bringToBtn.setOnClickListener {

            // 우선 들고갈 메시지 변수에 담기
            val inputMsg = messageEdt.text.toString()

            // 이동할 액티비티 경로 잡기
            val myIntent = Intent(this, DataActivity::class.java)

            // 가지고 갈 메시지를 putExtra에 담기
            myIntent.putExtra("message", inputMsg)

            // 이동하기
            startActivity(myIntent)
        }
    }
}

4. 메시지 전달하는 버튼(bringToBtn)은 그냥 화면 이동하는 버튼과는 달리 데이터를 담아야하기 때문에 Intent 변수에 .putExtra("담을데이터name", 데이터) 형식으로 보내기 전 넣어줘야 합니다.

package com.mwsniper.review_intent

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_data.*

class DataActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_data)

        // 액티비티에 들어오자마자 바로 첨부된 값을 받아서 텍스트뷰에 반영
        val receivedMessage = intent.getStringExtra("message")
        receivedMessageTxt.text = receivedMessage

        goBackToMainBtn.setOnClickListener {
            // 메인으로 돌아기기 버튼을 누른 경우 finish()
            finish()
        }

    }
}

5. 그 다음은 데이터를 받는 화면에서 처리해줘야합니다 intent.getStringExtra("데이터이름")을 사용하여 보냈던 메시지를 변수 담고 TextView에 뿌려주면 성공!!

그 다음은 이제 마지막 연습인 닉네임 변경하는 것에 대해 공부해보도록 하겠습니다. 우선 닉네임변경 처리하는 화면을 추가로 생성하도록 하겠습니다. 해당 액티비티의 이름은 EditNicknameActivity

<!-- activity_edit_nickname.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp"
    tools:context=".EditNicknameActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="변경할 닉네임" />

    <EditText
        android:id="@+id/nickNameEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="새 닉네임을 입력해주세요."
        android:singleLine="true"/>

    <Button
        android:id="@+id/okBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="입력 완료" />

</LinearLayout>

package com.mwsniper.review_intent

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //3. 닉네임 변경 버튼 클릭
        //changeNickNameBtn
        changeNickNameBtn.setOnClickListener {

            // 닉네임 변경 액티비티로 이동한다고 명시
            val myIntent = Intent(this, EditNicknameActivity::class.java)

            // 지금까지한 내용과 다르게 여기서는 결과값을 받고 다시 돌아와야함
            // 그래서 기존에는 startActivity를 사용했지만 여기서는 startActivityForResult를 사용함
            // requestCode는 저와 같이 직접 입력하지 않고 멤버변수로 담아서 가독성을 높여주는걸 추천
            startActivityForResult(myIntent, 200)
        }
    }

    // 결과를 받아올 때 실행되는 함수 오버라이딩
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        // resultCode를 우선 검사해야합니다.
        // 화면에 들어가기 전 200이라는 resultCode를 주어줬는데 해당 값이 맞는지 체크
        if(requestCode == 200)
        {
            //setResult(Activity.RESULT_OK, resultsIntent) 에서 부여했던 result_OK 값이 맞는지
            if(resultCode == Activity.RESULT_OK)
            {
                // 모든 것이 맞으면 새로 변경한 닉네임으로 text반영
                val newNickName = data?.getStringExtra("newNickname")

                // 메인화면에 있는 닉네임 TextView 변경
                nickNameTxt.text = newNickName
            }
        }
    }
}

package com.mwsniper.review_intent

import android.app.Activity
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_edit_nickname.*

class EditNicknameActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_edit_nickname)

        // 닉네임 수정 후 완료버튼을 눌렀을 때
        okBtn.setOnClickListener {

            // 돌아갈 때 첨부할 데이터를 들고 있어주는 Intent와는 별개로 생성
            val resultsIntent = Intent()

            // 입력한 닉네임을 resultsIntent에 첨부 = putExtra
            val input = nickNameEdt.text.toString()
            resultsIntent.putExtra("newNickname", input)

            // OK 버튼을 눌렀을 때 데이터 담고있는 resultsIntent를 갖고 복귀처리
            // 기존에는 그냥 finish()처리만 해줬지만 이번에는
            // 결과값을 들고 가야하기에 꼭 필요
            // public static final int RESULT_OK = -1;
            setResult(Activity.RESULT_OK, resultsIntent)

            // 복귀한다는 의미
            finish()
        }
    }
}

닉네임변경 화면으로 이동 후 새로 변경할 닉네임을 입력한 뒤 OK버튼을 누르면 새로 변경할 닉네임 데이터를 resultsIntent에 담고 setResult 함수로 복귀처리 하는 것을 알 수 있습니다.

  // 결과를 받아올 때 실행되는 함수 오버라이딩
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        // resultCode를 우선 검사해야합니다.
        // 화면에 들어가기 전 200이라는 resultCode를 주어줬는데 해당 값이 맞는지 체크
        if(requestCode == 200)
        {
            //setResult(Activity.RESULT_OK, resultsIntent) 에서 부여했던 result_OK 값이 맞는지
            if(resultCode == Activity.RESULT_OK)
            {
                // 모든 것이 맞으면 새로 변경한 닉네임으로 text반영
                val newNickName = data?.getStringExtra("newNickname")

                // 메인화면에 있는 닉네임 TextView 변경
                nickNameTxt.text = newNickName
            }
        }
    }

복귀하면 결과값을 받아올 때 실행되는 오버라이딩 함수 MainActivity에 있어야하는 함수이고 해당 함수를 보면 알 수 있듯이 내가 요청한내용이 맞는지에 대한 requestCode == 200체크와 해당 resultCode가 정상인지에 대한 유무체크를 한 다음 둘다 정상로직을 탔을 때 새로 변경한 닉네임을 적용하는 것을 확인할 수 있습니다.

Android with Kotlin : 안드로이드 기초편 - Intent 기초 setOnClickListener 이벤트

홍시쿼카 — Mon, 21 Sep 2020 09:51:07 +0900

저번 글에서는 회원가입 화면을 만드는 UI에 관련된 내용을 다루어보았습니다. 이번 글에서는 코틀린의 이벤트처리에 대해 배워보도록 하겠습니다.

이벤트명	개념	사용법
setOnClickListener	사용자가 해당 버튼을 누르면 실행할 내용을 지정해주는 코드	이벤트를붙여줄버튼.setOnClickListener { // 버튼이 눌리면 실행 해줄 코드들을 작성. }
Intent	하나의 액티비티에서 다른 액티비티를 불러낼 때 사용하는 코드(이동)	val myIntent(변수이름변경가능) = Intent(출발지this, 도착액티비티::class.java) startActivity(myIntent)

* 연습내용 : MainActivity(로그인화면)에서 가입하기 버튼을 클릭했을 때 새로 생성한 JoinActivity(회원가입화면)으로 이동하는 로직을 짜보겠습니다. 해당 연습에서는 button을 클릭할 때 이벤트를 발생시켜야하고, 화면 이동도 필요합니다.

<!-- activity_main.xml (로그인화면) -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/dolphin_logo_01" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"
        android:layout_marginTop="20dp"
        android:textSize="18sp"/>

    <EditText
        android:id="@+id/idEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력"
        android:inputType="textEmailAddress"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="비밀번호"
        android:layout_marginTop="25dp" />

    <EditText
        android:id="@+id/pwEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호 입력"
        android:inputType="textPassword"/>

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="로그인" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <Button
        android:id="@+id/joinBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="가입하기" />

</LinearLayout>

<!-- activity_join.xml (회원가입화면) -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="top"
    android:padding="15dp"
    android:background="#FFFFFF"
    tools:context=".JoinActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력하세요."
        android:inputType="textEmailAddress"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="비밀번호"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호를 입력하세요."
        android:inputType="textPassword" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="닉네임"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="한글/영어 등을 한 줄로 입력하세요."
        android:singleLine="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="추천인"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="추천한 사람의 닉네임으로 검색하세요. (준비중)"
        android:singleLine="true"
        android:enabled="false"
        android:imeOptions="actionSearch"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_marginTop="15dp"
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 미만" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 이상" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="외국인" />
    </RadioGroup>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="이용약관에 동의합니다."
        android:checked="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="마케팅 활용에 동의합니다."/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/dolphin_logo_01"
            android:scaleType="centerCrop"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="취소"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="회원가입"/>

    </LinearLayout>

</LinearLayout>

앞서 말씀드렸다시피 처음 Main화면에 들어왔을 때 가입하기 버튼을 클릭하면 2번째 페이지(회원가입)화면으로 이동하는 setOnClick이벤트입니다. 안드로이드 / 코틀린에서는 setOnClickListener을 사용해서 이벤트를 태웁니다.

// MainActivity.kt
package com.example.myappwithgit

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        // 가입하기 버튼을 눌렀을 때 회원가입화면으로 이동하게 버튼 클릭이벤트 만들기
        joinBtn.setOnClickListener {

            // 가입하기 버튼을 누르면 들어오는 로직
            // 회원가입(JoinActivity) 화면으로 이동하게 Intent 사용
            val myIntent = Intent(this, JoinActivity::class.java)

            // startActivity를 해야 화면이동
            startActivity(myIntent)
        }

    }// onCreate
}

// JoinAcitivity.kt
package com.example.myappwithgit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_join.*

class JoinActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_join)

        cancelBtn.setOnClickListener {

            // MainActivity에서 넘어온 Activity를 종료하고 싶으면
            finish()
        }
    }
}

위의 소스와 같이 사용하시면 화면이동하는 모습을 확인하실 수 있습니다.

※ kotlinx.android.synthetic.main.activity_main.*이 없어서 연결이 안된다면 아래와 같이 해결하시면 됩니다.

app > build.gradle로 들어가서 plugins에 'kotlin-android-extensions'를 추가합니다. 그리고 망치모양의 Sync Now(=Make Project)로 다시 빌드하면 됩니다.

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-android'
    id 'kotlin-android-extensions' // 해당 내용 추가
}

[2023-04-26기준] 위와 같이 해결하고자 하였으나, The 'kotlin-android-extensions' Gradle plugin is no longer supported. 라는 또다른 오류가 발생하네요. 더이상 extensions 플러그인을 서포트하지 않는다는 오류인데 3년 전에 사용했던 플러그인이라 지금 기준에서는 어떻게 바뀌었는지 구글링이 필요할 것 같습니다.

Android with Kotlin : 안드로이드 기초편 - 회원가입 화면(UI) 만들기

홍시쿼카 — Mon, 21 Sep 2020 09:42:20 +0900

안드로이드 프로젝트를 처음 만들었을 때 우리는 activity_main.xml과 MainActivity.kt 파일을 확인할 수 있습니다. 이 두 파일의 차이점은 무엇일까요? 단순하게 얘기하면 xml 파일은 text, button등을 다룰 수 있는 디자인과 관련된 파일이고요. kt 파일은 button등을 클릭했을 때 동작과 관련된 파일이라고 할 수 있습니다.

종류	폴더	내용
app	manifests	앱의 정보 사항들을 담아두는 xml 파일
	java	앱이 화면에 뜨고 난 이후의 동작 로직을 작성하는 폴더 (kt파일들이 있는 곳)
	res > drawable	화면에 배치될 [그림 파일]이 모여있는 폴더
	res > layout	앱 [화면의 구조]를 결정하는 xml파일
gradle scripts		프로젝트의 개발관련 주요 설정 / 라이브러리 사용목록 편집

동작과 관련된 kt 파일보다 [res] - [layout] 폴더에 가서 activity_main.xml에 우리가 만들 앱의 디자인부터 하도록 하겠습니다.

제가 이번 글에서 만들 화면 디자인입니다. 저도 아직 배우는 단계라 엄청 화려하게는 못만들고 기본적이면서도 있을 내용 다 있는 회원가입화면부터 만들어보도록 하겠습니다.

// 수정 전 원본 소스
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<!--
ConstraintLayout이 아닌 LinearLayout으로 하는 이유
LinearLayout 안에 있는 내용물들은 무조건 일렬로 줄을 서서 배치가 되기에 해당 Layout으로 사용할 예정
 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" //내용물들을 가로(horizontal) / 세로(vertical)로 배치 결정하는 옵션
    android:gravity="top"          //내용물들을 top으로 설정. 만약 bottom으로 설정할 시 화면 제일 밑으로 내용물들이 이동
    android:padding="15dp"         //margin과 비슷한 padding은 Layout으로부터 padding값만큼 내용물들에게 내부 여백을 줌
    android:background="#FFFFFF"   //배경색을 설정
    tools:context=".MainActivity">

   <TextView //사용자에게 문장을 보여주기만 할 때 사용
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"        //text에 보여줄 내용
        android:textColor="#FF0000"  //글씨색 설정
        android:textStyle="bold"     //글씨의 스타일 설정
        android:textSize="20sp"/>    //글씨의 크기를 설정

    <EditText //사용자에게 값을 받아야할 때 사용
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력하세요." //사용자에게 입력값에 대한 안내를 해주는 메시지
        android:inputType="textEmailAddress"/>    //어떤 데이터를 입력할지에 따라 키보드에 보여주는 양식이 다름.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="비밀번호"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호를 입력하세요."
        android:inputType="textPassword" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="닉네임"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="한글/영어 등을 한 줄로 입력하세요."
        android:singleLine="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="추천인"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="추천한 사람의 닉네임으로 검색하세요. (준비중)"
        android:singleLine="true"          //inputType이 따로 지정되지 않은 상태에서 문장을 한줄만 받고 싶을 때 설정
        android:enabled="false"            //사용을 하는지 안하는지를 설정
        android:imeOptions="actionSearch"/>//singleLine이 true일 때 엔터키의 종류 변경(search, done, go 등)

    <RadioGroup //만약 여러 라디오버튼 중 하나만 선택하는 목록을 만드는경우 RadioGroup을 이용하면 쉽게 가능
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"          //visibility:보임, invisibility:안보이지만 공간은 확보, gone:안보임+공간날림
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 미만" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 이상" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="외국인" />
    </RadioGroup>

    <CheckBox 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이용약관에 동의합니다."
        android:checked="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="마케팅 활용에 동의합니다."/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/dolphin_logo_01"
            android:scaleType="centerCrop"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="취소"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="회원가입"/>

    </LinearLayout>

</LinearLayout>

* 지금부터 소스창에서 보이는 //주석은 제거를 해야 빌드가 정상적으로 처리되는 주석입니다. 해당 주석은 이해하는데에 도움을 드리고자 제가 넣은 주석입니다.

TextView와 EditText를 각각 생성해보았는데 만약 둘이 너무 붙어있고 TextView밑에 EditText를 놓고 싶다면, LinearLayout의 속성 중 하나인 orientation을 사용하면 됩니다. 그 외 나머지 내용들은 소스를 참고하시면 좋을듯 싶습니다.

Android with Kotlin : 안드로이드 스튜디오 GitHub 연동해서 소스관리

홍시쿼카 — Mon, 21 Sep 2020 09:29:47 +0900

안드로이드 스튜디오를 통해서 우리는 git / gitHub를 사용할 수 있는데 실제 사용하기에 앞서 git설치 및 세팅하는 방법에 대해서도 같이 포스팅하도록 할게요~

1. 우선 git부터 설치를 진행하기

Git - Downloads

Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific

git-scm.com

위의 링크 또는 구글에 git download를 검색하시면 다운로드 사이트로 바로 접속이 가능하고요. 본인의 OS 사양에 맞는걸로 설치 진행하시면 됩니다.

만약 검색창에 git bash라는 앱이 보이시면 git은 정상적으로 설치완료!

2. gitHub 회원가입하기

Build software better, together

GitHub is where people build software. More than 50 million people use GitHub to discover, fork, and contribute to over 100 million projects.

github.com

git이란 우리가 만드는 앱의 코드를 버전별로 관리하는 도구로써 git을 사용하기 위해서는 gitHub 사이트에 회원가입을 해야 합니다. 만약 본인이 gitHub라는 것을 한번도 사용한 적이 없다고 한다면 gitHub 사이트에 들어가셔서 회원가입을 진행해주세요

* 참고로 회원가입할 때 이메일 인증 완료도 해야합니다.

이메일인증을 완료해야지 안드로이드스튜디오에 연동이 가능합니다.

3. git bash 실행해서 이름, 이메일 설정하기

그 다음은 아까 설치한 git bash를 실행시켜서 이름과 이메일을 설정하도록 합시다.

-- list 검색하기
git config --list

-- 본인이름 변경
git config --global user.name "깃허브때설정한본인이름"
-- 본인이메일 변경
git config --global user.email "깃허브때설정한본인이메일"

4. 안드로이드 스튜디오 git 연동하기

git연동은 새로운 프로젝트마다 한번씩 해주면 됩니다 제일 상단 탭 중 [VCS] - [Import into Version Control] - [Share Project on GitHub]를 선택

그럼 위의 사진과 같이 GitHub 로그인을 하라는 창이 뜨는데 아까 전에 가입했던 또는 기존에 있던 gitHub 회원정보로 로그인을 해주세요.

로그인이 정상적으로 되면 위의 사진과 같이 현재 켜져있는 프로젝트를 gitHub에 공유할 것인지에 대한 창이 뜹니다. Repository name 옆에 있는 private는 다른 사람과 public하게 공유할 것인가 아니면 본인만 가지고 있는 private인지에 대한 유무체크이고요. public이면 체크를 해제하고 제일 아래에 있는 Share버튼을 클릭

최초 Add이기에 목록이 많이 뜨는 것이고요. 다음부터는 커밋할 때마다 본인이 수정한 내역만 뜹니다.

정상적으로 올라갔으면 Successfully 뜨는거 확인완료! 본인의 프로젝트가 정상적으로 진짜 들어갔는지 확인하고 싶으신분들은 gitHub사이트에 들어가셔서 보시면 바로 연동이 잘 된 것을 확인할 수 있습니다.

명령어	내용
Commit (커밋)	저장(SAVE)하는, 내가 작성한 코드들을 작업 내역으로 확정 짓고 여기까지의 코드를 별도로 보관. 단축키 : Ctrl + K
Push (푸시)	커밋된 작업 내역들을 중에서 git에 업로드 되지 않은 커밋 내역들을 업로드 해주는 행위. * Commit말고 Push도 해야 실제 gitHub에 올라가는 겁니다.
Clone (클론)	gitHub에 올려둔 프로젝트를 다운받는 행위. * File > New > Project From Version Control > 본인 gitHub메뉴 > 원하는프로젝트 선택 > Clone
Fetch / Pull (풀)	Fetch : 내 컴퓨터에 잇는 현재 코드보다 다른 컴퓨터에서 올린 더 최신의 코드가 있는지 확인 명령. Pull : 실제로 최신 코드가 있으면 그 변경 내역들을 불러오는 명령.
Fork (포크)	다른 사람의 코드를 그대로 복사해서 내 계정으로 들고 가는 행위. * gitHub 사이트에서 제공 기능

Android with Kotlin : 안드로이드 스튜디오 설치하기 with 코틀린 시작

홍시쿼카 — Wed, 16 Sep 2020 17:46:03 +0900

옛날에는 안드로이드 스튜디오 언어로 JAVA만이 사용가능했었는데 구글이 안드로이드 공식 언어 중 Kotlin을 추가하면서 우리는 새로운 언어를 또 맞붙게 되었어요. 이번 글에서부터는 새로운 언어인 코틀린(Kotlin)을 가지고 안드로이드에 대해 글을 써보도록 하려고 합니다!

새로운 시작인만큼 안드로이드 스튜디오 설치부터 시작하도록 할게요! 안드로이드 스튜디오 설치는 구글에 android studio download라고 하면 바로 설치할 수 있는 링크로 들어갈 수 있으니 다운 받아주시기 바랍니다.

Download Android Studio and SDK tools | Android 스튜디오

developer.android.com

안드로이드 처음 설치하시는 분들은 저처럼 Setup Wizard가 나오실텐데 만약 SDK Components Setup단계에서 경고문 Your Android SDK location contains non-ASCII Characters라는 문구가 보이시면 해당 내용은 User\사용자이름의 폴더명이 한글이기에 나오는 경고문입니다. 이런 경우에는 다양한 방법이 있는데

1) 레지스트리를 건든다(단, 위험부담 높음)

2) 포맷 후 사용자계정을 영어로 표기

3) 사용자계정을 새로 하나 생성

저같은 경우에는 사용자계정을 하나 추가로 만들어서 이용했습니다.

* 안드로이드 스튜디오 설치단계 *

안드로이드 스튜디오 설치프로그램 다운
설치 중 관련 세팅 설치 SDK등
앱을 실행시키는 가상기기 설치

Python with Django : 장고 웹 프로그래밍 수정, 삭제 화면 만들기(6)

홍시쿼카 — Fri, 19 Jun 2020 15:26:56 +0900

이번 글에서는 저번에 다루었던 작업에 이어 수정(Update), 삭제(Delete) 작업을 해보도록 하겠습니다.

1. teamDetail.html 생성 - 수정, 삭제를 할 수 있는 상세화면

우선은 수정과, 삭제를 할 수 있는 상세화면을 따로 만들도록 하겠습니다. 저는 teamDetail.html이라 이름을 붙였고, html의 content내용은 등록화면과 거의 동일합니다. 다른 점이라고는 화면이름과 버튼들뿐입니다. 버튼에 대한 설명은 조금있다가 아래에서 설명하도록 하겠습니다.

2. views.py와 urls.py 추가

메인화면 만드는 글부터 시작해서 여기까지 오신 분들이라면 이제 대충 어떤 문서로 가야할지 파악하실 수 있으실겁니다. 네 맞습니다. html 이후로는 views.py와 urls.py를 설정해주어야합니다.

# views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from .forms import TeamUpload
from django.http import HttpResponse

# Function-Based Views
def index(request):
    return render(request, 'index.html')

def teamInfo(request):
    teams = Team.objects.all()
    context = {'teams': teams}
    return render(request, 'content/teamInfo.html', context)

def teamCreate(request):
    upload = TeamUpload()
    if request.method == 'POST':
        upload = TeamUpload(request.POST)
        if upload.is_valid():
            upload.save()
            return redirect('teamInfo')
        else:
            return redirect('index')
    else:
        upload =  TeamUpload()
        return render(request, 'content/teamAdd.html', { 'form':upload })

# 추가 Update
def teamUpdate(request, team_seq):
    try:
        team_detail = get_object_or_404(Team, pk=team_seq)
    except Team.DoesNotExist:
        return redirect('teamInfo')
    update = TeamUpload(request.POST or None, instance = team_detail)
    if update.is_valid():
        update.save()
        return redirect('teamInfo')
    return render(request, 'content/teamDetail.html', {'form':update })

# 추가 Delete
def teamDelete(request, team_seq):
    try:
        team_detail = get_object_or_404(Team, pk=team_seq)
    except Team.DoesNotExist:
          return redirect('teamInfo')
    team_detail.delete()
    return redirect('teamInfo')

차근차근 설명을 하자면, 우선 수정 함수는 teamUpdate이라고 지었고, 삭제 함수는 teamDelete라고 지었습니다. 각각 함수를 보시면 get_object_or_404라는 함수가 보이실겁니다. 이건 render와 동일하게 django.shortcuts에서 제공하는 함수입니다.

* get_object_or_404 : 모델로부터 객체를 받았을 때 객체가 있으면 받고, 없으면 404 에러 페이지를 보여주도록 하는 것.

# urls.py
from django.contrib import admin
from django.urls import path
from django.conf.urls import url 
import fin.views

app_name = 'fin'
urlpatterns = [
    path('admin/', admin.site.urls),
    # 추가로 생성한 urls
    path('', fin.views.index , name='index'),
    path('team/teamInfo/',  fin.views.teamInfo, name='teamInfo'),
    path('team/teamAdd/',  fin.views.teamCreate, name='teamAdd'),
    path('team/teamUpdate/<team_seq>/',  fin.views.teamUpdate, name='teamUpdate'),
    path('team/teamDelete/<team_seq>/',  fin.views.teamDelete, name='teamDelete'),
]

뷰를 생성하였으니 이제 path를 설정하러 가봅시다. urls.py에 가서 저는 teamUpdate과 teamDelete를 지정해주었습니다. 여기서 우리는 teamAdd때와 다른 모습의 path를 보실 수 있는데 바로 /<team_seq>/ 는 무엇인가?

* 등록화면(teamAdd)같은 경우에는 새로운 팀을 생성하는 화면이니 특정 고유키가 필요하지 않습니다. 엄밀히 말하면 특정 고유키가 아직 있지 않은 상태이죠. 하지만 수정, 삭제화면(teamDetail)은 등록화면과 다르게, 이미 만들어져 있는 팀정보(데이터)를 가지고 수정 또는 삭제 작업을 해야합니다. 그렇기에 해당 데이터임을 알 수 있는 고유키가 필요한 것이죠.

보통은 id(int)를 고유키로 잡고 'team/teamDetail/<int team_id>와 같이 사용하는데 저의 team_seq는 Integer가 아닌 String 형식이기에 저렇게 잡았습니다.

3. teamInfo.html에 상세화면으로 이동할 수 있는 링크 연결하기

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page (TeamInfo)</h1>
          <div class="toptextarea">
              <span>* 팀 목록을 보여주는 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px; text-decoration: underline; font-weight: bold;"><a href="{% url 'teamUpdate' team.team_seq %}">{{ team.team_nm }}</a></div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          
          <!-- Button START -->
          <div style="margin-top: 20px; float: right;">
            <a href="{% url 'teamAdd' %}"><button type="button" class="btn btn-primary">팀추가하기</button></a>
          </div>
          <!-- Button END -->
          
          
      </div>
  </div>
</div>
{% endblock %}

그 다음은 여태까지 만들었던 상세화면을 teamInfo.html에 연결하는 작업입니다. 팀추가하기 버튼과 동일하게 <a>태그를 사용하여 연결하였습니다. 단, 여기서 우리는 팀등록화면으로 이동하는 <a>태그와 팀상세화면으로 이동하는 <a>태그에 차이점이 있다는 사실을 알 수 있습니다.

4. 여태까지의 연결구조에 대해 정리하기

일단 여기까지 그냥 따라 오신분들이라면 teamAdd.html때와는 다르게 teamDetail.html은 team_seq라는 것도 있고 뭔가 복잡해보인다라고 생각하실 수도 있습니다. 근데 자세히 살펴보면 그리 어려운 것도 아닙니다. team_seq가 있어야하는 이유는 이미 위에서 설명했기 때문에 패스하고, 천천히 연결고리에 대해 설명하도록 하겠습니다.

# teamInfo.html에서 urls.py의 teamUpdate로 이동할 것인데 team.team_seq 데이터도 같이 가져가겠다.
<a href="{% url 'teamUpdate' team.team_seq %}">{{ team.team_nm }}</a>

# teamInfo.html으로 부터 urls.py로 넘어왔고, teamUpdate이름을 가지고 있으면, views.py의 fin.views.teamUpdate 함수로 이동한다.
# 참고로 teamUpdate 함수가 정상적으로 처리 될 때는 team/teamUpdate/<team_seq>/ 라는 링크로 처리한다.
path('team/teamUpdate/<team_seq>/',  fin.views.teamUpdate, name='teamUpdate'),

# views.py에서 teamUpdate 함수로 도착. 
def teamUpdate(request, team_seq):
    try:
        # 모델 Team을 가지고 pk가 team_seq인 object를 가져오겠다. 만약 없으면 404 출력
        team_detail = get_object_or_404(Team, pk=team_seq)
    except Team.DoesNotExist:
        return redirect('teamInfo')
    update = TeamUpload(request.POST or None, instance = team_detail)
    if update.is_valid():
        update.save()
        return redirect('teamInfo')
    return render(request, 'content/teamDetail.html', {'form':update })

# 수정버튼(submit)을 클릭하는 경우
# update = TeamUpload(request.POST or None, instance = team_detail) 실행
 <form method="POST">
  ...
  <div style="margin-top: 20px; float: right;">
      <button type="submit" class="btn btn-primary">수정</button>
      <a href="{% url 'teamDelete' form.team_seq.value %}"><button type="button" class="btn btn-primary">삭제</button></a>
      <a href="{% url 'teamInfo' %}"><button type="button" class="btn btn-primary">돌아가기</button></a>
  </div>
</form>

# 함수가 성공적인 경우 return redirect('teamInfo') 이동

삭제 버튼도 동일합니다. submit만 아닐뿐이지 form.team_seq.value를 가지고 해당 team_seq에 맞는 데이터가 있는 경우 teamDelete 함수에서 처리한다는 의미입니다.

여기까지 진행하셨으면 우리는 장고 웹 사이트의 CRUD과정을 모두 마쳤습니다. 다음부터는 다른 화면 만들기 및 로그인 관련해서 공부해보도록 하겠습니다.

Django 클래스 기반 뷰와 함수 기반 뷰 차이점

홍시쿼카 — Fri, 19 Jun 2020 11:21:38 +0900

* 해당 글은 장고(Django)의 클래스형 뷰와 함수형 뷰의 차이점에 대해 공부하고자 기록한 내용입니다. 글의 내용은 한 블로그에서 작성한 내용을 토대로 재정리한 내용이기에 원문을 원하시는 분들은 아래의 링크를 참고해주세요.

Class-Based Views vs. Function-Based Views

If you follow my content here in the blog, you probably have already noticed that I’m a big fan of function-basedviews. Quite often I use them in my examples...

simpleisbetterthancomplex.com

from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from .forms import TeamCreate
from django.http import HttpResponse

# Class-Based Views
class IndexView(TemplateView):
    template_name = 'index.html'

class TeamInfoView(ListView):
    model = Team
    template_name = 'content/teamInfo.html'
    context_object_name = 'teams'

class TeamCreateView(ListView):
    model = Team
    template_name = 'content/teamInsert.html'
    context_object_name = 'teams'

#----------------------------------------------------------------
# Function-Based Views
def index(request):
    return render(request, 'index.html')

def teamInfo(request):
    return render(request, 'content/teamInfo.html')

def createTeam(request):
    return render(request, 'content/teamInsert.html')

현재 공부목적으로 장고 웹 프로젝트를 만들고 있는데 작업하는 도중에 궁금증이 생겨버렸습니다. 그것은 바로 클래스 기반 뷰와 함수 기반 뷰 중 어떤 것이 좋은 것인가! 어떤 블로그는 클래스 기반 뷰로 쭉 사용하고 어떤 블로그는 함수형이 편하기에 함수 기반 뷰로 쭉 사용한다고 하고 참고하는 블로그마다 이렇게 각양각색이다보니 갈피를 못잡겠더라고요. 그래서 공부하자! 도대체 얘네들의 차이점은 무엇인가!

1. 클래스 기반 뷰의 예

# views.py
from django.views import View

class ContactView(View):
    def get(self, request):
        # Code block for GET request

    def post(self, request):
        # Code block for POST request
        
# urls.py
urlpatterns = [
    url(r'contact/$', views.ContactView.as_view(), name='contact'),
]

일반 클래스 기반은 새 개체 작성, 양식 처리, 목록보기, 페이지 매김, 아카이브보기 등과 같은 웹 응용 프로그램의 일반적인 사용 사례를 해결하기 위해 도입되었다고 한다. 그것들은 django.views.generic 모듈에서 구현할 수 있다.

* 내장 클래스 기반 뷰의 문서

Built-in class-based views API | Django documentation | Django

The Django Software Foundation deeply values the diversity of our developers, users, and community. We are distraught by the suffering, oppression, and systemic racism the Black community faces every day. We can no longer remain silent. In silence, we are

docs.djangoproject.com

2. 함수 기반 뷰의 예

# views.py
def contact(request):
    if request.method == 'POST':
        # Code block for POST request
    else:
        # Code block for GET request (will also match PUT, HEAD, DELETE, etc)

# urls.py
urlpatterns = [
    url(r'contact/$', views.contact, name='contact'),
]

3. 클래스기반 뷰와 함수기반 뷰의 장단점

	장점	단점
클래스기반 뷰	- 쉽게 확장하고 재사용할 수 있는 코드 - mixin(다중상속)과 같은 기술을 사용가능 - 별도의 클래스 메소드로 HTTP메소드 처리 - 내장 도니 일반 클래스 기반 뷰	- 읽기가 어렵다 - 암시적 코드 흐름 - 부모클래스의 숨겨진 코드, 믹스 인 - 뷰 데코레이터를 사용하려면 추가 가져오기 또는 메소드 재정의가 필요
함수기반 뷰	- 간단한 구현 - 읽기 쉽다 - 명시적 코드흐름 - 데코레이터의 간단한 사용법	- 코드를 확장하고 재사용하기 어려움 - 조건부 분기를 통한 HTTP 메소드 처리

Python with Django : 장고 웹 프로그래밍 등록 화면 만들기(5)

홍시쿼카 — Thu, 18 Jun 2020 17:06:02 +0900

저번 글에서는 static 디렉터리를 가지고 css, js, img 등의 문서를 어떻게 관리하는지에 대해 알아보았습니다. 이번 글에서는 본격적으로 CRUD에 대해 배워보도록 하겠습니다. 우선 현재까지 만든 화면으로는 메인화면과 팀목록을 보여주는 화면 달랑 두 개 밖에 없기 때문에 팀을 추가할 수 있는 화면을 만들어 보도록 하겠습니다.

1. 팀추가 버튼 생성(teamInfo.html)

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page (TeamInfo)</h1>
          <div class="toptextarea">
              <span>* 팀 목록을 보여주는 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <!-- Button START -->
          <div style="margin-top: 20px; float: right;">
            <a href="{% url 'teamAdd' %}"><button type="button" class="btn btn-primary">팀추가하기</button></a>
          </div>
          <!-- Button END -->
      </div>
  </div>
</div>
{% endblock %}

우선 팀 등록하는 화면을 만들기에 앞서 새롭게 만들 화면 경로에 들어갈 수 있는 버튼을 생성하도록 하겠습니다. 버튼은 teamInfo.html에 버튼을 추가하였습니다.

버튼을 추가한 화면의 모습입니다. 버튼은 부트스트랩의 css을 활용하여 생성하였습니다. 만약 저와 같은 버튼을 만들고 싶으신 분들은 부트스트랩 사이트에 접속하셔서 원하는 코드를 복사붙여넣기 하세요.

2. forms.py 생성

여태까지는 팀을 등록하려면 관리자 페이지에서 등록할 수밖에 없었습니다. 이제는 클라이언트 홈페이지에 등록이 가능하도록 데이터베이스 모델에서 해당 항목들을 가져오는 작업을 해야합니다. 이 작업을 하기 위해서는 forms.py 파일을 생성해줍니다. forms.py는 fin(APP)폴더 안에 생성해줍니다.

from django import forms
from .models import Team

class TeamUpload(forms.ModelForm):
    class Meta:
        model = Team
        fields = [ 'team_seq', 'team_nm', 'team_nick', 'bigo']

우리는 장고에서 기본적으로 지원하는 forms를 impot받고 또한 Team 모델을 사용할 것이라 Team도 가져옵니다. TeamUpload는 팀 정보를 업로드하는데에 쓰는 class를 의미합니다. Meta 클래스는 장고에서 내부 클래스로 활용되며, 이는 기본 필드의 값을 재정의할 때 사용합니다.

# models.py
from django.db import models
from django.urls import reverse

class Team(models.Model):
    # primary_key로 지정할 컬럼들은 꼭 primary_key=True 주기
    team_seq = models.CharField('team_seq', max_length=9, primary_key=True)
    team_nm = models.CharField('team_nm', max_length=50, blank=True)
    team_nick = models.CharField('team_nick', max_length=50, blank=True)
    team_mems_cnt = models.IntegerField('team_mems_cnt', default=0 )
    team_reg_dt = models.DateTimeField(max_length=8, auto_now=True)
    bigo = models.TextField('bigo', blank=True)
    use_yn = models.CharField('use_yn', max_length=1, default='Y')
    reg_dt = models.DateTimeField('reg_dt', max_length=14, auto_now=True)
    sort_order = models.IntegerField('sort_order', default=0 )

    def __str__(self):
        return self.team_nm

혹시 몰라서 models.py에 설정한 Team 모델도 같이 올리도록 하겠습니다.

3. 등록할 화면 생성 (teamAdd.html)

우선 등록화면 html을 생성합니다.

4. views.py와 urls.py(path설정) 등록

# views.py
from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from django.http import HttpResponse

# Function-Based Views
def index(request):
    return render(request, 'index.html')

def teamInfo(request):
    teams = Team.objects.all()
    context = {'teams': teams}
    return render(request, 'content/teamInfo.html', context)

def teamCreate(request):
    return render(request, 'content/teamAdd.html')

# urls.py
from django.contrib import admin
from django.urls import path
from django.conf.urls import url #추가
import fin.views

app_name = 'fin'
urlpatterns = [
    path('admin/', admin.site.urls),
    # 추가로 생성한 urls
    path('', fin.views.index , name='index'),
    path('team/teamInfo/',  fin.views.teamInfo, name='teamInfo'),
    path('team/teamAdd/',  fin.views.teamCreate, name='teamAdd'),
]

그 다음은 views.py에서 뷰를 생성해주도록 합니다. 뷰 생성이 끝났으면 해당 뷰의 url을 추가해주도록 합시다.

5. views.py 수정(forms.py의 폼을 연결하기)

from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from .forms import TeamUpload #추가
from django.http import HttpResponse

# Function-Based Views
def index(request):
    return render(request, 'index.html')

def teamInfo(request):
    teams = Team.objects.all()
    context = {'teams': teams}
    return render(request, 'content/teamInfo.html', context)

def teamCreate(request):
    upload = TeamUpload()
    if request.method == 'POST':
        upload = TeamUpload(request.POST)
        if upload.is_valid():
            upload.save()
            return redirect('teamInfo')
        else:
            return redirect('index')
    else:
        upload =  TeamUpload()
        return render(request, 'content/teamAdd.html', {'form': upload})

해당 내용을 천천히 살펴보면, forms.py에 설정했던 TeamUpload()를 upload이라는 객체 안에 우선 생성합니다. 그 다음 teamAdd.html에서 POST방식으로 요청이 들어오면 TeamUpload() 폼에 값을 전달한 상태로 upload 객체를 만들고 그 데이터들이 올바른 형식으로 들어왔으면 데이터베이스에 저장하는 것을 의미합니다. 작업이 끝났으면 return redirect('teamInfo') 팀정보 화면으로 이동시킵니다.

6. teamAdd.html

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
            <h1 style="margin-top:30px;">Project Management Page (TeamAdd)</h1>
            <div class="toptextarea">
                <span>* 새로운 팀을 등록하는 홈페이지입니다. </span>
            </div>
            <!-- Form START -->
            <form method="POST">
                <div style="margin-top: 20px;">
                    {% csrf_token %}
                    {{ form.as_p }}
                </div>
                <!-- Button START -->
                <div style="margin-top: 20px; float: right;">
                    <button type="submit" class="btn btn-primary">등록</button>
                    <a href="{% url 'teamInfo' %}"><button type="button" class="btn btn-primary">취소</button></a>
                </div>
                <!-- Button END -->
            </form>
            <!-- Form END -->
      </div>
  </div>
</div>
{% endblock %}

{{ form.as_p }}란, views.py에서 return render(request, 'content/teamAdd.html', {'form': upload })의 세 번째 인자 upload 객체를 'form' 키 값으로 전달하였기 때문에 html에서 {{ form }}이라고 다루는 것입니다. .as_p는 폼을 <p>태그로 감싼 형태로 출력한다는 의미입니다.

* csrf_token : 장고에서는 POST 데이터 전달과정에서 보안을 위해 csrf_token이라는 것을 반드시 사용해야합니다.

만약 정상적으로 코딩하셨으면 위의 사진과 같이 등록화면이 생성되는 것을 확인할 수 있습니다. 실제 등록해보시면 테이블에도 정상적으로 들어가는걸 알 수 있었습니다.

7. teamAdd.html 꾸미기

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
            <h1 style="margin-top:30px;">Project Management Page (TeamAdd)</h1>
            <div class="toptextarea">
                <span>* 새로운 팀을 등록하는 홈페이지입니다. </span>
            </div>
            <!-- Form START -->
            <form method="POST">
                <div style="margin-top: 20px;">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="inputTeamSeq">팀 SEQ</label>
                        {{ form.team_seq }}
                    </div>
                    <div class="form-group">
                        <label for="inputTeamNm">팀 이름</label>
                        {{ form.team_nm }}
                    </div>
                    <div class="form-group">
                        <label for="inputTeamNick">팀 닉네임</label>
                        {{ form.team_nick }}
                    </div>
                    <div class="form-group">
                        <label for="inputTeamBigo">비고</label>
                        {{ form.bigo }}
                    </div>
                    
                </div>
                <!-- Button START -->
                <div style="margin-top: 20px; float: right;">
                    <button type="submit" class="btn btn-primary">등록</button>
                    <a href="{% url 'teamInfo' %}"><button type="button" class="btn btn-primary">취소</button></a>
                </div>
                <!-- Button END -->
            </form>
            <!-- Form END -->
      </div>
  </div>
</div>
{% endblock %}

그대로 사용하려고 하니 디자인이 너무 구리네요. 그래서 살짝 바꿔보도록 하겠습니다. 우선 teamAdd.html에서 {{ form.as_p }}를 각각 할당받을 수 있도록 나눠줍니다.

8. forms.py 수정

from django import forms
from .models import Team
class TeamUpload(forms.ModelForm):
    class Meta:
        model = Team
        fields = [ 'team_seq', 'team_nm', 'team_nick', 'bigo']

        widgets = {
            'team_nm': forms.TextInput(
                attrs={'class': 'form-control', 'style': 'width: 100%', 'placeholder': '팀 명을 입력하세요.'}
            ),
            'team_nick': forms.TextInput(
                attrs={'class': 'form-control', 'style': 'width: 100%', 'placeholder': '팀 닉네임을 입력하세요.'}
            ),
            'bigo': forms.Textarea(
                attrs={'class': 'form-control', 'style': 'width: 100%'}
            ),
        }

그 다음은 부트스트랩의 class가 적용될 수 있도록 forms.py에서 widgets을 이용해서 적용시킵니다.

그럼 아까보다는 예쁜 화면으로 바뀌었네요. 팀SEQ는 나중에 안보이게 설정할 데이터라 현재는 저렇게 냅두었습니다. 다음 글에서는 Add에 이어 Update와 Delete를 해보도록 하겠습니다.

Python with Django : 장고 웹 프로그래밍 static(정적) 설정하기(4)

홍시쿼카 — Tue, 16 Jun 2020 17:51:51 +0900

저번 글에서는 클라이언트 사이트를 어떻게 꾸밀건지에 대한 것과 html 소스를 세분화하는 작업(템플릿 상속)에 대해 배워보았습니다. 이번 글에서는 templates(html 파일들을 관리하는 폴더)와 같이 css, fonts, img, js 파일들을 관리할 수 있는 static 폴더를 생성해보도록 하겠습니다.

1. static 폴더 생성

- templates : index, teamInfo 등과 같이 html 문서들을 관리하는 폴더

- static : html 문서들을 제외한 css, fonts, img, js 등 나머지 문서들을 관리하는 폴더

다른 블로그분들이 정리한 내용을 보면 보통 templates와 static폴더는 APP 안에서 관리하시던데 저도 동일하게 APP안에 templates 폴더와 static폴더를 이동하도록 하겠습니다.

원래 fin이라는 APP 밖에 있었던 templates과 static폴더를 fin APP 안으로 옮겼습니다. 그리고 static폴더 안에는 css 문서들을 관리할 수 있는 css폴더도 같이 생성하였습니다.

2. static폴더를 settings.py에 설정하기

static폴더를 생성하였으면 우리는 이제 settings.py에서 static file의 위치를 지정해주는 작업을 해야합니다. [STATICFILES_DIRS]는 fin(APP) 안에 [static] 디렉토리가 있고, 이 디렉토리 안에 static file들을 지정해 놓았다라고 알려주는 내용입니다.

[STATIC_ROOT]는 여러 APP(현재는 fin만 있지만 fin말고 다른 APP도 있는경우) 안에 static 폴더들이 각각 있을 경우 이것을 [STATIC_ROOT]에 설정되어있는 [static] 디렉토리에 모을 것이라는 내용입니다.

3. static file 모아주는 명령어 실행

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py collectstatic

저는 비록 fin이라는 APP뿐이지만 collectstatic 명령어를 써보도록 하겠습니다. CMD창에 해당 명렁어를 실행했을 때 사진과 같이 나오면 정상적으로 처리가 된 것입니다. 만약 정상적으로 처리되었다면, Project ROOT에 [static] - [admin]이라는 폴더가 새로 생성된 것을 확인할 수 있습니다. 또한 fin APP에 있던 css파일도 같이 collection된 것을 확인할 수 있네요!

4, static 활용하기

<!-- teamInfo.html -->
{% extends 'base.html' %}
{% block content %}
<style>
.tableline {border:1px solid #908d8d;display: table;width:100%;}
.tablerow {display:table-row;}
.tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
.tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
.tablecell a:visited {color:#474747;}
.tablecell_e a:visited {color:#474747;}
.tablecell_last a:visited {color:#474747;}
.tablecell_laste a:visited {color:#474747;}
.tablecell a:link {text-decoration: none;}
.tablecell_e a:link {text-decoration: none;}
.tablecell_last a:link {text-decoration: none;}
.tablecell_laste a:link {text-decoration: none;}
.tablebank {height:37px;}
.tablemodule1 {height:37px;}
</style>
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

정적(static) 파일들을 관리할 수 있는 [static]폴더도 생성했겠다 이제는 직접 사용을 해보도록 하겠습니다. 제가 이 [static]폴더를 만든 이유는 바로 teamInfo.html과 같이 html 안에 있는 style들을 따로 빼기 위함인데요. style에 관련된 소스들을 다 정리해보도록 하겠습니다.

1) base.html에 style 소스 빼내기

우선 [fin] - [static] - [css] 폴더 안에 cotent.css 라는 css 문서를 하나 만들겠습니다.

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span>* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

.tableline {border:1px solid #908d8d;display: table;width:100%;}
.tablerow {display:table-row;}
.tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
.tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
.tablecell a:visited {color:#474747;}
.tablecell_e a:visited {color:#474747;}
.tablecell_last a:visited {color:#474747;}
.tablecell_laste a:visited {color:#474747;}
.tablecell a:link {text-decoration: none;}
.tablecell_e a:link {text-decoration: none;}
.tablecell_last a:link {text-decoration: none;}
.tablecell_laste a:link {text-decoration: none;}
.tablebank {height:37px;}
.tablemodule1 {height:37px;}

.toptextarea {color:crimson;}

그리고 teamInfo.html 안에 있던 <style></style> 코드들을 잘라내기 한 다음 아까 만들었던 content.css 안에 붙여넣기 합니다.

2) base.html에 해당 css소스 연결하기

{% load static %}
    <!-- HEAD START -->
    <head>
        <meta charset="utf-8">
        <title>Project Management Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="{% static 'css/content.css' %}">
      </head>

css소스를 나눈다고 해서 자동으로 반영되는 것이 아니라 이제 static을 연결해주 작업이 필요합니다. {% load static %}은 [static] 설정한 것들을 해당 html 문서로 불러 들이는 것을 의미합니다. 그 다음 <link rel="stylesheet" href="{% static 'css/content.css' %}">은 [static]에 있는 파일 중 어떤 것을 적용하는지에 대한 경로를 설정하는 것을 의미합니다.

* 참고 : 제가 참고해서 보는 블로그는 분리한 html 문서에 바로 load static을 넣어 처리하고 있었습니다. 근데 저는 이제 teamInfo.html이 아닌 base.html에 load static을 넣었죠. 제가 이렇게 넣은 이유는 teamInfo.html은 단순히 content만 사용할 html이기 때문입니다. 저도 아직 파이썬 & 장고를 배워가고 있는 입장이기에 이것이 정확하게 맞다라고 말씀드릴 순 없지만 우선 저는 이렇게 진행해보도록 하겠습니다. 훗날 이것이 잘못되었다면 아마 해당 내용을 바꿀 수도 있습니다.

3) 서버 실행해서 확인하기

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

css가 잘 적용되는지 이제 체크해봅시다. python manage.py runserver 명령어를 입력 후 사이트에 들어가 확인해보니 정상적으로 잘 적용되는 것을 확인할 수 있었습니다.

Python with Django : 장고 웹 프로그래밍 템플릿 상속 방법(3)

홍시쿼카 — Fri, 12 Jun 2020 14:25:18 +0900

저번 글까지는 파이썬의 구조에 대해 조금 더 배워가는 시간이었습니다. 이번 글에서는 직접적으로 클라이언트 홈페이지를 다룰 예정입니다.

1. index.html 꾸미기

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

클라이언트 사이트는 이미 꾸며져 있는 관리자사이트(/admin)와 다르게 저희가 직접 소스를 작성하면서 꾸며야합니다. 그렇기에 저는 부트스트랩 사이트를 이용하도록 하겠습니다. 저와 동일하게 부트스트랩 사이트를 이용하실 분들은 해당 사이트에 들어가셔서 원하는 소스를 추가해주세요.

<DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Project Management Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    </head>
    <body>
         <!-- navbar 연결부분 -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand">FINPM</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">초기화면<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">프로그램정보</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
        </nav>
        <style>
            body {font-family: dotum;font-size: 10pt;line-height: 25px;color:#474747;}
            .tableline {border:1px solid #908d8d;display: table;width:100%;}
            .tablerow {display:table-row;}
            .tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
            .tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
            .tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
            .tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
            .tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
            .tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
            .tablecell a:visited {color:#474747;}
            .tablecell_e a:visited {color:#474747;}
            .tablecell_last a:visited {color:#474747;}
            .tablecell_laste a:visited {color:#474747;}
            .tablecell a:link {text-decoration: none;}
            .tablecell_e a:link {text-decoration: none;}
            .tablecell_last a:link {text-decoration: none;}
            .tablecell_laste a:link {text-decoration: none;}
            .tablebank {height:37px;}
            .tablemodule1 {height:37px;}
        </style>
        <div class="container" style="width:100%;">
            <div style="width:1024px;height:400px;margin:0 auto;">
                <div style="margin:0 21 0 22px">
                    <h1 style="margin-top:30px;">Project Management Page</h1>
                    <div class="toptextarea">
                        <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
                    </div>
                    <div style="margin-top: 20px;">
                        <!-- Table Layout -->
                        <div class="tableline">
                            <div class="tablerow">
                                <div class="tablecell_h" style="width:130px;">팀명</div>
                                <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                                <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                                <div class="tablecell_h" style="width:130px;">비고</div>
                            </div>
                            {% for team in teams %}
                            <div class="tablerow">
                                <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                                <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                                <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                                <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!-- Table Layout -->
                    <div style="margin-top:10px;text-align:right;">
                        Copyright(c) 2020 By EMDI All Right Reserved.
                    </div>
                    <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
                </div>
            </div>
        </div>
        <footer class="fixed-bottom bg-info">
            <div>
                Copyright(c) 2020 By EMDI All Right Reserved.
            </div>
        </footer>
    </body>
</html>

내가 마음에 든 navbar도 넣어주고, style도 바꿔주고 이것 저것 넣어본 index.html의 전체 소스입니다.

2. 템플릿 상속받기(base.html만들기)

만약 내가 생성할 화면이 단 하나뿐이라면 전체 소스처럼 모든 내용이 들어가도 무관합니다. 하지만 저희가 만들 프로젝트는 단 하나의 화면만 있진 않겠죠. 여기서 저희가 해야할 작업은 바로 소스 세분화 작업입니다. 소스 세분화작업을 하는 이유는 소스가 중복적으로 발생되는 것을 방지하고자 함인데 예를 들어 설명하도록 하겠습니다. 우리는 화면마다 menu, content, footer 등 여러가지 내용이 복합적으로 들어가 있을 겁니다. 근데 여기서 menu, footer와 같이 똑같은 소스를 화면(html)마다 만들게 되면 중복된 소스가 계속 발생하게 되겠죠? 이러한 중복적인 현상을 방지하기 위해 우리는 세분화작업, 바로 템플릿 상속을 다룰 것 입니다.

* 템플릿 상속 : html 중 기본 뼈대가 될 문서를 기본 템플릿으로 만들어 다른 html이 해당 소스가 필요할 때 상속하여 가져다 쓰는 것을 말합니다. 보통 기본이 되는 템플릿은 base.html로 정합니다.

1) base.html만들기

templates 폴더 안에 기본 뼈대가 될 base.html 문서를 생성합니다. 그리고 index.html(메인화면)에 있었던 소스들을 우선 전체 복사하여 붙여넣기 합니다.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Project Management Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    </head>
    <body>
         <!-- navbar 연결부분 -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand">FINPM</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">초기화면<span class="sr-only"></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">프로그램정보</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
        </nav>
        {% block content %}
        {% endblock %}
    </body>
    <footer class="fixed-bottom bg-primary">
        <div>
            Copyright(c) 2020 By EMDI All Right Reserved.
        </div>
    </footer>
</html>

전체 붙여넣기 한 다음 이제 필요한 소스만 남겨놔야하는데 우리는 navbar만 우선 남겨놓도록 합시다. <body> 소스 중 </nav>까지 남겨놓고 나머지 content 소스들은 지웁니다. base.html문서를 상속받은 템플릿이라면 이제 <nav></nav>는 공통으로 상속받게 됩니다.

{% block content %}{% endblock %}은 base.html에서 상속받기 위해 설정했던 소스를 제외한 나머지 content 부분을 의미합니다.

2) index.html 정리하기

{% extends 'base.html' %}
{% block content %}
<style>
    body {font-family: dotum;font-size: 10pt;line-height: 25px;color:#474747;}
    .tableline {border:1px solid #908d8d;display: table;width:100%;}
    .tablerow {display:table-row;}
    .tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
    .tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
    .tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
    .tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
    .tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
    .tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
    .tablecell a:visited {color:#474747;}
    .tablecell_e a:visited {color:#474747;}
    .tablecell_last a:visited {color:#474747;}
    .tablecell_laste a:visited {color:#474747;}
    .tablecell a:link {text-decoration: none;}
    .tablecell_e a:link {text-decoration: none;}
    .tablecell_last a:link {text-decoration: none;}
    .tablecell_laste a:link {text-decoration: none;}
    .tablebank {height:37px;}
    .tablemodule1 {height:37px;}
</style>
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

base.html에 nav를 설정해두었으니 이제는 index.html에 가서 넣지 않아도 될 nav를 제거하는 작업이 필요합니다. base.html에 설정했던 소스들을 다 지우고 나머지 소스들만 남깁니다. 그리고 위아래로 {% block content %}{% endblock %} 영역을 지정해줍니다.

* {% extends 'base.html' %} : 이 소스는 base.html를 상속받는다는 의미이며, 제일 상단에 붙여넣습니다.

* {% block content %}{% endblock %} : 이 소스는 아까 전 base.html에서도 봤던 소스인데 바로 index.html에서 content를 나타내는 부분을 의미합니다.

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

그 다음 클라이언트 사이트에 들어가서 확인을 해보면 처음에 봤던 화면과 동일하지만 해당 화면은 base.html과 index.html을 활용하여 만들어진 화면입니다. 같은 index.html 창이지만 빨간색 라인은 이제 base.html에서 상속받은 소스를 보여주는 것이고 초록색 라인은 index.html의 content입니다.

3. 템플릿 활용하기(결과)

이번에는 여러 화면이 있다는 가정하에 작업을 해보도록 합시다.

* 필요한 화면 : 기본템플릿(base.html) / 초기화면(index.html) / 팀정보(teamInfo.html)

<!-- base.html -->
<!DOCTYPE html>
    <!-- HEAD START -->
    <head>
        <meta charset="utf-8">
        <title>Project Management Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    </head>
    <!-- HEAD END -->
    <!-- BODY START -->
    <body>
         <!-- navbar START -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand">FINPM</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="{% url 'index' %}">초기화면<span class="sr-only"></span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'teamInfo' %}">팀정보</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
        </nav>
        <!-- navbar END -->
        <!-- content START -->
        {% block content %}
        {% endblock %}
        <!-- content END -->
    </body>
    <!-- BODY END -->
    <!-- FOOTER START -->
    <footer class="fixed-bottom bg-primary">
        <div>
            Copyright(c) 2020 By EMDI All Right Reserved.
        </div>
    </footer>
    <!-- FOOTER END -->
</html>

참고로 여기서 href="{% url 'index' %}"은 urls.py 소스에서 path('', IndexView.as_view(), name='index')의 name을 의미합니다.

<!-- index.html -->
{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">메인화면입니다!</h1>
          <div class="toptextarea">
              <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <h1>메인화면입니다!</h1>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

{% extends 'base.html' %}
{% block content %}
<style>
    /* body {font-family: dotum;font-size: 10pt;line-height: 25px;color:#474747;} */
    .tableline {border:1px solid #908d8d;display: table;width:100%;}
    .tablerow {display:table-row;}
    .tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
    .tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
    .tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
    .tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
    .tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
    .tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
    .tablecell a:visited {color:#474747;}
    .tablecell_e a:visited {color:#474747;}
    .tablecell_last a:visited {color:#474747;}
    .tablecell_laste a:visited {color:#474747;}
    .tablecell a:link {text-decoration: none;}
    .tablecell_e a:link {text-decoration: none;}
    .tablecell_last a:link {text-decoration: none;}
    .tablecell_laste a:link {text-decoration: none;}
    .tablebank {height:37px;}
    .tablemodule1 {height:37px;}
</style>
<!-- teamInfo.html -->
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

위의 소스는 뼈대로 만든 화면, 메인화면, 팀정보를 나타내는 화면입니다. base.html를 제외한 나머지 화면은 {% block content %}로 묶여있는 것을 확인할 수 있습니다.

1) views.py : teamInfoView추가 및 해당 class가 어떤 html을 사용하는지 설정

from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from .forms import TeamCreate
from django.http import HttpResponse

# Create your views here.
def index(request):
    return render(request, 'index.html')

def teamInfo(request):
    teams = Team.objects.all()
    context = {'teams': teams}
    return render(request, 'content/teamInfo.html', context)

2) urls.py : teamInfo.html을 부르기 위해 path설정

from django.contrib import admin
from django.urls import path
from django.conf.urls import url #추가
import fin.views

app_name = 'fin'
urlpatterns = [
    path('admin/', admin.site.urls),
    # 추가로 생성한 urls
    path('', fin.views.index , name='index'),
    path('team/teamInfo/',  fin.views.teamInfo, name='teamInfo'),
]

Python with Django : 장고 웹 프로그래밍 model.py 설정하는 방법(2)

홍시쿼카 — Thu, 11 Jun 2020 14:59:39 +0900

1. 앱 생성하기 전 설정하기(settings.py)

# mySite에 있는 settings.py

TIME_ZONE = 'Asia/Seoul' #한국시간으로 변경

LANGUAGE_CODE = 'ko-kr'  #한국어로 변경

USE_TZ = False           #변경

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], #변경
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2. 앱 생성하기(settings.py)

# FINPM을 만드는 명령어 실행
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py startapp fin

위의 명령어를 실행하면 내 프로젝트 폴더 내에 fin(설정한 앱이름)폴더가 생성되는 것을 확인할 수 있습니다. 또한 해당 폴더 내에는 app, models 등의 파일이 생성된 것도 확인할 수 있습니다.

fin 앱의 설정 클래스는 apps.py 파일에 FinConfig라고 정의되어있습니다. 프로젝트에 포함되는 애플리케이션들은 모두 설정파일에 등록해야하기에 FinConfig를 mySite의 settings.py에 설정하도록 합니다.

# mySite의 settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'fin.apps.FinConfig', #추가
]

3. 테이블정의하기(models.py)

from django.db import models
from django.urls import reverse

class Team(models.Model):
    # primary_key로 지정할 컬럼들은 꼭 primary_key=True 주기
    team_seq = models.CharField('team_seq', max_length=9, primary_key=True)
    team_nm = models.CharField('team_nm', max_length=50, blank=True)
    team_nick = models.CharField('team_nick', max_length=50, blank=True)
    team_mems_cnt = models.IntegerField('team_mems_cnt', default=0 )
    team_reg_dt = models.DateTimeField(max_length=8, auto_now=True)
    bigo = models.TextField('bigo', blank=True)
    use_yn = models.CharField('use_yn', max_length=1, default='Y')
    reg_dt = models.DateTimeField('reg_dt', max_length=14, auto_now=True)
    sort_order = models.IntegerField('sort_order', default=0 )

    def __str__(self):
        return self.team_nm

4. Admin 사이트에도 테이블 반영(admin.py)

from django.contrib import admin
from fin.models import Team

# Register your models here.
@admin.register(Team)
class TeamAdmin(admin.ModelAdmin):
    list_display = ('team_seq', 'team_nm', 'team_nick', 'team_reg_dt')
    search_fields = ('team_nm', 'team_nick')

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py makemigrations fin
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py migrate
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

models.py에 설정한 테이블을 마이그레이션하면 PostgreSQL에 테이블 및 컬럼들이 생성되는 것을 확인할 수 있습니다.

3. 화면 html 생성하기

1) templates 폴더 생성 및 html 파일 만들기

우선 html 파일들을 관리하는 templates폴더를 생성합니다. 앞으로는 html 파일들을 이 폴더 안에 관리하도록 하겠습니다. 그 다음은 templates 폴더 내에 index.html을 만듭니다.

<p>Hello! This is FinPM Page</p>

내용은 간단하게 위와 같이 작성하도록 하겠습니다.

2) views.py에 만든 html 연결하기

from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView

from .models import Team
from .forms import TeamCreate
from django.http import HttpResponse

# Create your views here.
# 클래스 뷰 또는 함수형 뷰 중 하나를 선택해서 쓰세요.
# Class-Based Views
class IndexView(TemplateView):
    template_name = 'index.html'

#----------------------------------------------------------------
# Function-Based Views
def index(request):
    return render(request, 'index.html')

장고의 뷰(view)에서는 클래스 기반 뷰와 함수 기반 뷰가 있습니다. 클래스 뷰는 class IndexView(TemplateView): 와 같이 사용하고 함수형 뷰는 def index(request): 와 같이 사용합니다. 둘 중 어떤걸 쓰든 상관은 없으며, 본인이 원하는 것을 선택하여 사용해주세요.

2) urls.py에 해당 뷰 path 등록하기

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
import fin.views

urlpatterns = [
    path('admin/', admin.site.urls),
    # 추가로 생성한 urls
    path('', IndexView.as_view(), name='index'), # 클래스 기반 뷰를 선언했을 경우 이것
    path('', fin.views.index , name='index'), # 함수 기반 뷰를 선언했을 경우 이것
]

127.0.0.1:8000 홈페이지를 새로고침을 하면 아까 전에 만들었던 html을 확인할 수 있습니다. 여기까지하니 이제 대충 흐름이 이해가 되네요! 다음 글에서는 index.html의 내용에 대해 다루어보도록 하겠습니다.

Python with Django : 장고 웹 프로그래밍 & PostgreSQL 사용해서 만들기(1)

홍시쿼카 — Thu, 11 Jun 2020 11:09:19 +0900

저번 글들은 "파이썬 웹 프로그래밍, 실전편"이라는 책을 참고하여 연습해본 글들입니다. 이번 글부터는 제가 실제 만들고 싶은 웹사이트를 만들어보도록 해보겠습니다. 만약 파이썬 설치 및 PostgreSQL 설치 등 진행이 안되신 분들은 아래의 링크를 참고해주세요.

Python : 파이썬 설치 및 가상환경 만들기

1. 파이썬 설치(현재 최신버전 3.8.3) 파이썬을 배우기에 앞서 파이썬을 설치해봅시다. 파이썬 홈페이지는 아래의 링크를 참고해주시면 됩니다. 현재 2020년 6월기준 파이썬 최신 버전은 3.8.3버전이

milkoon1.tistory.com

PostgreSQL : Window PostgreSQL(포스트-그레스-큐엘) 설치 방법

PostgreSQL은 관계형 데이터베이스 시스템의 일종이며, 오픈소스 DBMS이다. 1. PostgreSQL 다운로드 우선 PostgreSQL 공식홈페이지에 갑니다. 그리고 본인의 PC 사양에 맞는 것을 다운로드 합니다. PostgreSQL:

milkoon1.tistory.com

0. 개발환경

- Python : 3.8.3
- Django : 3.0.7
- PostgreSQL : 12.3
- psycopg2 : 2.8.5
- OS : Windows 10

1. 가상환경 접속 및 프로젝트 생성

# 가상환경으로 접근
C:\dev\Python\VENV>C:\dev\Python\VENV\dJangoVenv\Scripts\activate.bat

# 프로젝트생성
(dJangoVenv) C:\dev\Python>django-admin startproject mySite

# 프로젝트 상위 폴더 이름 바꾸기 - 상위 폴더와 하위폴더명이 동일하기에 상위폴더명을 변경
(dJangoVenv) C:\dev\Python>ren mySite finpmProject

# 서버실행
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

2. 프로젝트 데이터베이스 변경하기

* PostgreSQL 설치 및 데이터베이스, 테이블 생성까지 완료한 상태라고 가정하고 프로젝트를 진행합니다. 만약 데이터베이스 생성을 하지 못하신 분들은 아래의 링크를 참고해주세요.

PostgreSQL : 윈도우(Window)에서 테이블 생성하는 방법

PostgreSQL 데이터베이스 서버를 접속하려면 몇 가지 정보를 지정해야합니다. 그것을 간략하게 말하자면, 실행되고 있는 호스트 이름이나 IP, 서버의 포트 번호, 서버로 접속할 역할 이름(사용자 이

milkoon1.tistory.com

Python 프로젝트를 생성해보시면 데이터베이스는 sqlite3으로 default되어있을겁니다. 저는 이제 sqlite가 아닌 PostgreSQL을 사용할 예정이라 이 부분을 변경하도록 하겠습니다. PostgreSQL로 데이터베이스 설정을 변경하려면 Python 프로젝트의 setting.py를 수정해야합니다.

#  변경 전
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# 형식 
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': ‘<db_name>’,
        'USER': '<db_username>',
        'PASSWORD': '<password>',
        'HOST': '<db_hostname_or_ip>',
        'PORT': '<db_port>',
    }
}

# 변경 후
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'finpm',
        'USER': 'finpm_admin',
        'PASSWORD':'비밀번호',
        'HOST':'127.0.0.1',
        'PORT':'5432',
    }
}

* PostgreSQL의 psycopg2와 sqlalchemy 차이점 : psycopg2는 실행하고자 하는 쿼리를 스트링형태로 그대로 넘겨주면 되서 편하지만 쿼리 실행 결과가 python list형태로 반환되기 때문에 이를 다루기가 까다로운 점이 있습니다. sqlalchemy는 쿼리를 조회하려면 meta를 이용해서 select 클래스를 사용해야 하기에 복잡합니다. 하지만 meta를 사용하지 않고 pandas의 read_sql를 이용해 조회하면 sql구문 그대로 조회가 가능합니다. psycopg2와 sqlalchemy 중 sqlalchemy를 추천하는 이유는 pandas만 이용할 때는 둘 중 아무거나 사용해도 무관하지만 read_sql_table의 경우 sqlalchemy 연결할 때만 동작이 가능합니다.

1) psycopg2 설치

# 가상환경으로 접근
C:\dev\Python\VENV>C:\dev\Python\VENV\dJangoVenv\Scripts\activate.bat

# psycopg2 설치
(dJangoVenv) C:\dev\Python\finpmProject>pip install psycopg2

# psycopg2 실행
(dJangoVenv) C:\dev\Python\finpmProject>python -c "import psycopg2"

2) 마이그레이션 및 슈퍼유저 생성

# 마이그레이션
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py migrate

# django 관리자 생성
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py createsuperuser --username finpm_admin

# 테스트 서버 실행 
(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

3) 데이터베이스 연동확인하기

만약 연동이 성공되었으면 pyadmin4에서 해당 데이터베이스의 schema - Tables에서 Django와 연동된 테이블목록을 확인할 수 있습니다.

4) 127.0.0.1 확인하기

python manage.py runserver을 하면 테스트 서버를 실행하게 되는데 정상적으로 실행되는지 확인합니다.

위의 사이트는 admin 페이지로 아까 전 createsuperuser에서 등록했던 Username과 Password를 입력하면 됩니다.

정상적으로 로그인되는 것을 확인할 수 있었습니다.

PostgreSQL : pgAdmin 화면 영어를 한글로 변경하기

홍시쿼카 — Thu, 11 Jun 2020 09:09:11 +0900

최근 PostgreSQL을 사용할 일이 생겨서 한번 설치해봤는데 pgAdmin에서 모든 글을 다 영어로 보여주고 있더라고요. 아 여기는 한글 지원을 안하는건가 싶어서 구글링해보니 역시 구글은 다 알려줘! 저처럼 한글로 변경하고 싶은 분들은 pgAdmin 상단에 있는 [Preferences]를 클릭하세요.

[Preferences] 창에 들어오시면 Miscellaneous라는 속성이 보이실겁니다. 그 안에 있는 User language를 클릭! 그럼 현재 재 default로 English가 되어있죠? 그걸 Korean으로 변경하고 Save해줍니다.

그리고 Servers를 누른다음 새로고침(F5)를 누르면 이렇게 한글로 보이는걸 확인하실 수 있게됩니다. 아니 처음 깔았을 때 Korean으로 설정했으면 이 language도 한글로 보여달라고ㅠㅠ 아무튼 쉽게 한글로 변경 완료!

PostgreSQL : 윈도우(Window)에서 테이블 생성하는 방법

홍시쿼카 — Thu, 11 Jun 2020 08:59:05 +0900

PostgreSQL 데이터베이스 서버를 접속하려면 몇 가지 정보를 지정해야합니다. 그것을 간략하게 말하자면, 실행되고 있는 호스트 이름이나 IP, 서버의 포트 번호, 서버로 접속할 역할 이름(사용자 이름), 그 역할의 비밀번호, 테이터베이스 이름 등이 있습니다. 위의 사진은 PostgreSQL을 처음 접속할 때 default로 생성되어 있는 데이터베이스입니다.

1. 데이터베이스 생성

테이블을 생성하기에 앞서 우선 test용으로 쓸 데이터베이스를 생성해보도록 합시다. [데이터베이스]를 포인트 잡고 마우스 오른쪽버튼을 누르시면 Create - Database가 보입니다. 그걸 클릭!

그럼 위의 사진과 같이 Database의 이름을 설정하는 화면부터 보이는데 저는 이제 지금 테스트로 만드는 데이터베이스이니 TEST로 설정하겠습니다. 저를 보고 따라하시는 분들은 원하시는 데이터베이스 이름으로 설정해주시기 바랍니다. 그 외 다른 탭들을 확인해보면 Encoding, Tablespace 등 다른 것들을 설정할 수 있는 정보들이 있는데 저는 그냥 Encoding은 UTF-8로 지정한 후 Save버튼을 눌렀습니다. Save버튼을 클릭하면 데이터베이스가 생성됩니다.

그럼 위의 사진과 같이 TEST데이터베이스가 생성된 것을 확인할 수 있습니다. 이제는 테이블을 생성해보도록 합시다. 테이블은 스키마(Schema)를 더블클릭하시면 테이블(Table)이 보이실겁니다.

2. 테이블 생성

해당 테이블에 포커스를 놓고 마우스 오른쪽버튼을 클릭하면 아까 데이터베이스를 만든 과정과 동일하게 Create - Table을 클릭하시면 됩니다.

그럼 아까 데이터베이스 만든 것과 똑같이 Table 이름을 설정하라는 창이 뜨는데 테이블 이름은 member로 지정해서 만들어보도록 하겠습니다.

그 다음 Columns탭으로 가보면 여기는 이제 컬럼들을 지정하는 화면입니다. 처음에 들어갔을 때는 빈 칸으로 보여지실텐데 오른쪽에 보이는 (+)버튼을 클릭하면서 내가 테이블에 넣을 컬럼들을 지정해주면 됩니다.

이건 쿼리용으로 만든 것은 아니고요. 아까 Columns탭에서 만들었던 컬럼들을 보여주는 화면입니다.

테이블 컬럼들이 이상이 없으면 Save! 그러면 member라는 테이블이 생성된 것을 확인할 수 있습니다.

3. 유저 생성

기본유저인 postgres말고 새로운 유저를 생성하고 싶으신 분들은 위의 사진과 같이 로그인/그룹롤(Login/Group Role)에서 추가로 생성하시면 됩니다.

Privileges 탭은 권한을 부여하는 창으로, 저같은 경우 admin에게 모든 권한을 부여하도록 하겠습니다. 이렇게 하면 유저 생성도 완료!!

처음에 생성했던 데이터베이스를 이 admin에게 설정하고 싶으시면 데이터베이스 포커스한 다음 마우스 오른쪽버튼 클릭 후 properties에 들어가서 Owner를 변경해주시면 된답니다.

PostgreSQL : Window PostgreSQL(포스트-그레스-큐엘) 설치 방법

홍시쿼카 — Wed, 10 Jun 2020 17:21:00 +0900

PostgreSQL은 관계형 데이터베이스 시스템의 일종이며, 오픈소스 DBMS이다.

1. PostgreSQL 다운로드

우선 PostgreSQL 공식홈페이지에 갑니다. 그리고 본인의 PC 사양에 맞는 것을 다운로드 합니다.

PostgreSQL: Downloads

Downloads PostgreSQL Core Distribution The core of the PostgreSQL object-relational database management system is available in several source and binary formats. Binary packages Pre-built binary packages are available for a number of different operating sy

www.postgresql.org

2020.06.10 기준 현재 PostgreSQL의 최신버전은 12.3입니다.

다운로드 버튼을 클릭하면 실행파일을 다운받았을 겁니다.

superUser계정에 대한 비밀번호를 설정해야합니다.

Port 번호를 설정해주는 부분으로 기본포트번호는 5432입니다. 특정 포트로 바꾸지 않으실 계획이시면 그대로 패스하면 됩니다.

Locale은 Korean, Korea로 선택합니다.

설치가 완료된 후 Stack Builder를 체크해제 한 후 finish버튼을 누르면 PostgreSQL 설치완료.

2. pgAdmin4 실행하기

pgAdmin4는 PostgreSQL을 확인할 수 있는 플랫폼으로써, 데이터베이스 생성 및 테이블 생성, 조회 등을 작업할 수 있습니다.

3. 번외 CMD창에서 postgreSQL을 사용하려면 환경변수 설정하기

Windows 키 + pause break 클릭해서 시스템창 키고 고급 시스템 설정에 들어갑니다. 그 다음 시스템 속성창에 보이는 환경변수 들어갑니다.

Path에는 psql.exe가 있는 폴더 경로를 추가합니다. 보통 PostgreSQL폴더는 Program Files 안에 있으니 본인이 설치한 버전의 PostgreSQL폴더의 bin까지 경로를 잡아주시면 됩니다.

웹 소켓(WebSocket)

홍시쿼카 — Wed, 10 Jun 2020 16:06:02 +0900

웹 환경은 브라우저(클라이언트)에서 웹 서버에 html문서를 요청하면, 웹 서버는 html를 작성하고 브라우저(클라이언트)에 응답 한 후 연결을 끊는 비동기 소켓 통신입니다. WebSocket은 브라우저(클라이언트)가 접속 요청을 하고 Web 서바가 응답을 한 후 연결을 끊는 것이 아니라 Connection을 그대로 유지하고 브라우저(클라이언트)의 요청이 없어도 데이터를 전송할 수 있는 프로토콜입니다.

1. 일반 웹의 프로토콜과 웹소켓의 예시

일반 웹 프로토콜의 경우는 서버와 브라우저(클라이언트)와 연결이 끊긴 상태이기 때문에 브라우저에서 요청이 오지 않는 이상 다른 사용자에게 응답 메세지를 보낼 수 없다. 하지만 WebSocket의 경우에는 서버와 브라우저(클라이언트)가 끊기지 않은 상태이기 때문에 브라우저(클라이언트)의 요청이 없어도 서버에서 브라우저로 메시지를 보낼 수가 있다.

2. 웹소켓

WebSocket의 경우 HTML5부터 표준이 되어, WebSocket을 지원하지 않는 브라우저는 이제 없는거나 마찬가지입니다. 프로토콜 요청은 ws://~ 로 시작합니다. ssl방식이라면 wss://~ 로 시작합니다.

1) WebSocket(Java)

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.server.ServerEndpoint;

// WebSocket의 호스트 주소 설정
@ServerEndpoint("/websocket")
public class Websocket {

  // WebSocket으로 브라우저가 접속하면 요청되는 함수
  @OnOpen
  public void handleOpen() {
    // 콘솔에 접속 로그를 출력한다.
    System.out.println("client is now connected...");
  }
  
  // WebSocket으로 메시지가 오면 요청되는 함수
  @OnMessage
  public String handleMessage(String message) {
    // 메시지 내용을 콘솔에 출력한다.
    System.out.println("receive from client : " + message);
    // 에코 메시지를 작성한다.
    String replymessage = "echo " + message;
    // 에코 메시지를 콘솔에 출력한다.
    System.out.println("send to client : "+replymessage);
    // 에코 메시지를 브라우저에 보낸다.
    return replymessage;
  }
  
  // WebSocket과 브라우저가 접속이 끊기면 요청되는 함수
  @OnClose
  public void handleClose() {
    // 콘솔에 접속 끊김 로그를 출력한다.
    System.out.println("client is now disconnected...");
  }
  
  // WebSocket과 브라우저 간에 통신 에러가 발생하면 요청되는 함수.
  @OnError
  public void handleError(Throwable t) {
    // 콘솔에 에러를 표시한다.
    t.printStackTrace();
  }
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><title>Web Socket Example</title></head>
<body>
<form>
<!-- 송신 메시지를 작성하는 텍스트 박스 -->
<input id="textMessage" type="text">
<!-- 메시지 송신을 하는 버튼 -->
<input onclick="sendMessage()" value="Send" type="button">
<!-- WebSocket 접속 종료하는 버튼 -->
<input onclick="disconnect()" value="Disconnect" type="button">
</form>
<br />
<!-- 콘솔 메시지의 역할을 하는 로그 텍스트 에리어.(수신 메시지도 표시한다.) -->
<textarea id="messageTextArea" rows="10" cols="50"></textarea>
    <script type="text/javascript">
    
    // 「WebSocketEx」는 프로젝트 명
    // 「websocket」는 호스트 명
    // WebSocket 오브젝트 생성 (자동으로 접속 시작한다. - onopen 함수 호출)
    var webSocket = new WebSocket("ws://localhost:8080/WebSocketEx/websocket");
    
    // 콘솔 텍스트 에리어 오브젝트
    var messageTextArea = document.getElementById("messageTextArea");
    
    // WebSocket 서버와 접속이 되면 호출되는 함수
    webSocket.onopen = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Server connect...\n";
    };
    
    // WebSocket 서버와 접속이 끊기면 호출되는 함수
    webSocket.onclose = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Server Disconnect...\n";
    };
    
    // WebSocket 서버와 통신 중에 에러가 발생하면 요청되는 함수
    webSocket.onerror = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "error...\n";
    };
    
    // WebSocket 서버로 부터 메시지가 오면 호출되는 함수
    webSocket.onmessage = function(message) {
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Recieve From Server => "+message.data+"\n";
    };
    
    // Send 버튼을 누르면 호출되는 함수
    function sendMessage() {
    // 송신 메시지를 작성하는 텍스트 박스 오브젝트를 취득한다.
    var message = document.getElementById("textMessage");
    // 콘솔 텍스트에 메시지를 출력한다.
    messageTextArea.value += "Send to Server => "+message.value+"\n";
    // WebSocket 서버에 메시지를 송신한다.
    webSocket.send(message.value);
    // 송신 메시지를 작성하는 텍스트 박스를 초기화한다.
    message.value = "";
    }
    
    // Disconnect 버튼을 누르면 호출되는 함수
    function disconnect() {
    // WebSocket 접속 해제
    webSocket.close();
    }
    </script>
</body>
</html>

해당 내용은 아래의 링크를 참고하여 공부하려고 재정리한 내용입니다. 자세한 사항은 아래의 링크를 참고해주세요.

[Java] Servlet에서 사용하는 웹 소켓 (WebSocket)

안녕하세요. 명월입니다. 이 글은 Java의 Servlet에서 사용하는 웹 소켓 (WebSocket) 에 대한 글입니다. 보통의 웹 환경은 브라우저(클라이언트)에서 웹 서버에 Html 문서를 요청하면, 웹 서버는 Html를 작

nowonbun.tistory.com

2) WebSocket(C#)

using Fintax.Crypto;
using Fintax.Common.Utility;
using Fintax.Value;
using Newtonsoft.Json.Linq;
using System;
using System.Security.Cryptography;
using System.Text;
using System.Windows.Forms;
using System.Xml;
using WebSocketSharp;
using WebSocketSharp.Server;
using System.IO;

using Newtonsoft.Json.Linq;
using System;
using System.Security.Cryptography;
using System.Text;
using System.Windows.Forms;
using System.Xml;
using WebSocketSharp;
using WebSocketSharp.Server;
using System.IO;

namespace Project
{
    class WSBehavior : WebSocketBehavior
    {
        /// <summary>
        /// 요청에 대한 응답 처리 메소드
        /// </summary>
        protected override void OnMessage(MessageEventArgs e)
        {
            string receivedString = Encoding.UTF8.GetString(e.RawData);
            var json = JObject.Parse(receivedString);

            string type = json["type"].ToString();

            switch (type) {
                //로그인 요청 시
                case "login":
                    try { 

                        //로그인 모듈 호출
                        string result = ShowFormAndReturnResult();

                        //결과값 웹페이지에 전송
                        Send(JObject.Parse(result).ToString());
                    }
                    catch (Exception ex)
                    {
                        JObject createResult = new JObject();
                        createResult.Add("type", "error");
                        Send(createResult.ToString());
                    }
                    break;
            }
        }

        protected override void OnClose(CloseEventArgs e) {}
        protected override void OnError(WebSocketSharp.ErrorEventArgs e) { }
        protected override void OnOpen() {}

        /// <summary>
        /// 로그인 모듈 호출 및 결과 반환(동기식)
        /// </summary>
        public string ShowFormAndReturnResult()
        {
            ProjectMain main = new ProjectMain();
            ProjectMain.WindowState = FormWindowState.Minimized;
            ProjectMain.Shown += delegate (Object sender, EventArgs e) {
                ((Form)sender).WindowState = FormWindowState.Normal;
            };
            ProjectMain.ShowDialog();
            return ProjectMain.Result;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WebSocketSharp.Server;

namespace Project
{
    public class Server
    {
        private WebSocketServer server;

        public Server(int port)
        {
            server = new WebSocketServer(port);
            server.AddWebSocketService<WSBehavior>("/");
        }

        /// <summary>
        /// 서비 실행 
        /// </summary>
        public void Start()
        {
            server.Start();
            Console.WriteLine("Starting websocket server at " + server.Address.ToString() + " : " + server.Port);
        }

        /// <summary>
        /// 서버 소켓 리스닝 여부
        /// </summary>
        /// <returns></returns>
        public Boolean IsListening()
        {
            return server.IsListening;
        }
    }
}

Python with Django : 파이썬을 이용한 단순 웹서버 구축 (Simple Web Server)

홍시쿼카 — Wed, 10 Jun 2020 14:52:20 +0900

해당 Simple Web Server는 서비스 목적이 아닌 개발 및 학습 등의 목적으로 간단한 웹서버를 원할 때 사용하는 웹서버입니다.

1. 화면 index.html 파일 생성하기

<html>
<body>
  Hello my Simple Web Server!
</body>
</html>

2. app.py 파일 생성하기

import http.server
import socketserver

handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(('', 8000), handler) as httpd:
  print('Server listening on port 8000...')
  httpd.serve_forever()

사실 위의 index.html만 띄우는 정적 웹서버인 경우에는 app.py파일도 필요 없이 바로 3번인 웹서버 구동방법을 바로 하시면 됩니다. 하지만 이제 저는 처음 배우는 과정이다보니 이것 저것 한번 해보도록 하겠습니다,

3. 웹서버 구동 방법

# Python 2.X버전인 경우
python -m SimpleHTTPServer 8000

# Python 3.X버전인 경우
python -m http.server 8000

뒤에 8000은 포트 번호입니다. app.py에 설정했던 포트번호와 동일하게 작성해주시면 됩니다.

4. 웹브라우저에 띄우기

1) index.html 웹브라우저에 띄우기

index.html을 정적 웹서버에 띄우기 위해서는 해당 index.html 파일이 있는 경로로 이동한 다음 웹서버를 구동해야합니다.

2) index.html 없는 경우 localhost를 바로 띄우기

만약 index.html 파일이 없거나 cmd창에서 해당 파일 경로로 이동 안한 다음 웹서버를 구동시키면 위의 사진과 같이 파일시스템에 접근하게 됩니다.

Python with Django : 파이썬의 기초 숫자형 부터 응용까지

홍시쿼카 — Wed, 10 Jun 2020 11:24:14 +0900

1. 숫자형( type Number )

항목	파이썬 사용 예
정수(Integer)	123, -345, 0
실수(Floating-Point)	123.45, -1234.5, 3.4e10123, -345, 0
8진수(Octal)	0o34, 0o25
16진수(Hexadecimal)	0x2a, .0xFF

# 1.정수형

>>> a = 123

>>> a = -178

>>> a = 0



# 2.실수형

>>> a = 1.2

>>> a = -3.45



# 3. 사칙연산

>>> a = 3

>>> b = 4

>>> a + b

7

사칙연산	의미	사용법 예) a = 3 , b = 4
a + b	더하기	>>> a + b 7
a * b	곱하기	>>> a * b 12
a / b	나누기	>>> a / b 0.75
a ** b	x의 y제곱	>>> a ** b 81
a % b	나머지	>>> 3 % 4 4
a // b	몫	>>> 3 // b 0

2. 문자열 자료형 (type String)

# 1. 문자열에 작은따옴표(') 포함시키기
>>> food = "Python's favorite food is perl"
>>> food
"Python's favorite food is perl"
// 만약 큰따옴표(")가 아닌 같은 작은따옴표(')를 사용했을 때는 구문오류(SyntaxError)가 발생한다

# 2. 문자열에 큰따옴표(") 포함시키기
>>> say = '"Python is very easy." he says.'

# 3. 백슬리시(\)를 사용해서 작은따옴표(')와 큰따옴표(")를 문자열에 포함시키기
>>> food = 'Python\'s favorite food is perl'
>>> say = "\"Python is very easy.\" he says.'

# 4. 줄을 바꾸는 이스케이프 코드 \n 삽입
>>> multiline = "Life is too short \n You need python"

# 5. 또는 연속된 작은따옴표(')/큰따옴표(") 3개를 사용하기
>>> multiline = '''
... Life is too short
... You need python
... '''

>>> multiline = """
... Life is too short
... You need python
... """

코드	설명
\n	문자열 안에서 줄을 바꿀 때 사용
\t	문자열 사이에 탭 간격을 줄 때 사용
\\	문자 \를 그대로 표현할 때 사용
\'	작은따옴표 표현할 때 사용
\"	큰따옴표 표현할 때 사용
\r	캐리지 리턴(줄 바꿈 문자, 현재 커서를 가장 앞으로 이동)
\f	폼 피드(줄 바꿈 문자, 현재 커서를 다음 줄로 이동)
\a	벨 소리(출력할 때 PC 스피커에서 삑소리가 난다)
\b	백스페이스
\000	널 문자

파이썬 기초부터 보다보면 신기한 것들이 종종 나옵니다.뭐.. 위에까지는 안배워도 대충 알다싶은 내용들이고 이제 오류날 것 같아 보이는 것들이 파이썬에서는 실행이 됩니다.

# 1. 문자열 더하기
>>> head = "Python"
>>> tail = " is fun!"
>>> head + tail
'Python is fun!'

# 2. 문자열 곱하기
>>> a = "p"
>>> a * 2
'pp'

# 3. 문자열 길이 구하기
>>> a = "Python is fun!"
>>> len(a)
14

# 4. 문자열 인덱싱
>>> a = "Python is fun!"
>>> a[3]
'h'
// 파이썬은 0부터 시작
>>> a = "Python is fun!"
>>> a[-1]
'!'

# 5. 문자열 슬라이싱
>>> a = "Python is fun!"
>>> b = a[0] + a[1] + a[2]
>>> b
'Pyt'

>>> a = "Python is fun!"
>>> b = a[0:2]
>>> b
'Pyt'

# 6. 활용하기
>>> a = "20010331Rainy"
>>> date = a[:8]
>>> weather = a[8:]
>>> date
'20010331'
>>> weather
'Rainy'

# 7. 문자열 단어 바꾸기
>>> a = "Pithon is fun!"
>>> a[1]
'i'
>>> a[1] = 'y' // 이렇게 직접 문자열을 대입하면 오류 난다.

>>> a = 'Pithon is fun!'
>>> a = a[0] + 'y' + a[2:]
>>> a
'Python is fun!'

코드	설명
%s	문자열(string)
%c	문자 1개(Character)
%d	정수(Integer)
%f	부동 소수(Floating-point)
%o	8진수
%x	16진수
%%	Literal % (문자 '%' 자체)

# 1. 문자열 포맷팅
>>> "Python %s fun!" % is
'Python is fun!'
>>> "rate is %s" % 3.234
'rate is 3.234'
>> "Error is %d%%" % 98
'Error is 98%'

# 2. 포맷코드와 숫자 함께 쓰기
>>> "%10s" % "hi"
'        hi' // 전체 길이 10개 중 오른쪽 정렬 hi 빼고 나머지 공백

>>> "%-10sJane" % 'hi'
'hi        Jane'

# 3. 소수점 표현하기
>>> "%0.4f" % 3.42134234
'3.4213' //4번째 자리까지만 나타내고 싶은 경우

>>> "%10.4f" % 3.42134234
'    3.4213' //총 10개인 문자에서 4번째 자리까지만 나타내고 싶은 부동 소수 3.4213

# 4. format함수를 사용한 포매팅
>>> "I eat {0} apples".format(3)
'I eat 3 apples'
>>> "I eat {0} apples".format("five")
'I eat five apples'
>>> number = 3
>>> "I eat {0} apples".format(number)
'I eat 3 apples'

>>> number = 2
>>> "I eat {0} apples. It's {check} delicious".format(number, check="really")
"I eat 2 apples. It's really delicious"

정렬	결과값
"{0:<10}".format("hi")	'hi '
"{0:>10}".format("hi")	' hi'
"{0:^10}".format("hi")	' hi '
"{0:=^10}".format("hi")	'====hi===='
관련함수 a = "hobby"	결과값
a.count('b')	2
a.find('b')	2 (0부터시작해서 첫번째 b, 존재하지 않으면 -1)
a.index('b')	2 (0부터 시작, 존재하지 않으면 오류발생)
",".join('abcd')	'a,b,c,d'
a.upper() //소문자를 대문자로	HOBBY
a.lower() //대문자를 소문자로	hobby
a=" hi" a.lstrip() //왼쪽 공백지우기	hi
a="hi " a.rstrip() //오른쪽 공백지우기	hi
a=" hi " a.strip() //양쪽 공백지우기	hi
a="Life is too short" a.replace("Life", "Your leg")	Your leg is too short
a="Life is too short" a.split()	['Life', 'is', 'too', 'short']

3. 함수

// function 함수명()을 파이썬에서는 def 함수명()으로 사용한다
def chat():
  print("Hello!")
  print("Bye")
chat()

// 인자를 주고 메소드 만들어보기
def chat(name1, name2):
  print("%s: 안녕?" %name1)
  print("%s: 만나서 반가워!" %name2)
chat("홍길동","김영희")

// 같은 출력에 여러 인자 넣어보기
def chat(name1, name2, age):
  print("%s: 안녕?" %name1)
  print("%s: 만나서 반가워!" %name2)
  print("%s: 몇살이니?" %name1)
  print("%s: 나는 %d" % (name2,age))
chat("홍길동","김영희", 15)

// 사칙연산을 포함한 메소드 만들기 + 반환값 받기
def dsum(a, b):
  result = a + b
  return result

d = dsum(1, 2)
print(d)

보통 변수를 만들면 string, int와 같은 타입을 꼭 부여를 해야했었는데 파이썬에서는 그렇게 안해도 되는 점이 뭔가 어색하면서도 편하네요ㅎㅎ 계속해서 배워봅시다!

4. 함수 응용 예제 문제풀이

# 먼저 이름과 나이를 받아라
# 나이가 10살 미만이면 "안녕"이라고 말해라
# 나이가 10살에서 20살 사이면 "안녕하세요"라고 말해라
# 그 외에는 "안녕하십니까"라고 말해라

// 여기서 중요한 점! function = def / else if = elif로 쓰는거 까먹지말기!
def sayHello(name, age):
  if age < 10:
    print("안녕" + name)
  elif age >= 10 and age <= 20:
    print("안녕하세요" + name)
  else: print("안녕하십니까" + name)

sayHello("철수", 10)
sayHello("영희", 18)
sayHello("길동", 40)

5. 반복문

# for, while 반복문
# 1. for
for i in range(10):
  print(i)
  print("철수 : 안녕 영희야 뭐해?")
  print("영희 : 안녕 철수야, 그냥 있어.")

# 2. while
i = 0
while i < 3:
  print("철수 : 안녕 영희야 뭐해?")
  print("영희 : 안녕 철수야, 그냥 있어.")
  i = i + 1

# break, continue
# 1. break
i = 0
while True:
  print(i) #0
  print("철수: 안녕 영희야?")
  print("영희: 안녕 철수야")
  i = i + 1
  if i > 2:
    break

for i in range(100):
  print(i) #0
  print("철수: 안녕 영희야?")
  print("영희: 안녕 철수야")
  if i > 2:
    break

# 2. continue
for i in range(3):
  print(i) #0
  print("철수: 안녕 영희야?")
  print("영희: 안녕 철수야")
  continue
  print("태수: 안녕 애들아")
// 위와 같이 쓰면 태수의 말은 나오지 않는다.

6. 리스트와 튜플

# 1. 리스트
x = [1,2,3,4]
y = ["hello", "world"]
print(x + y)

x = [1,2,3,4]
x[3] = 10
print(x[3])

x = [4,3,2,1]
print(x[0]) // 0번째 값을 보여줘
print(len(x)) // x의 길이를 보여줘
print(sorted(x)) // x의 정렬
print(sum(x)) //합계
print(x.index(3)) // 3의 위치를 찾기
print(4 in x) // x안에 4라는 값이 있는가 True or False로 반환

# 2. 튜플
x = (1, 2, 3)
y = ('a', 'b', 'c')
z = (1, 'hello', 'bye')

x[1] = 10 // 오류난다
단, 튜플은 안에 들어있는 애들을 못바꾼다.

7. 딕셔너리

# x = dict{}
x = { "name" : "홍길동",
      "age" : 20}

print(x["name"])
print("age" in x) #포함되어있는지

print(x.keys()) //전체 key값만 보여준다
print(x.values()) //전체 value값만 보여준다

for key in x:
  print("key : " + key)
  print(x[key])


# 과일 숫자 세는 프로그램
fruit = ["사과", "사과", "딸기", "배", "복숭아", "바나나", "키위", "복숭아", "바나나"]
d = {}
for f in fruit:
  if f in d: #"사과"라는 키가 d라는 딕셔너리에 들어있는지?
    #d[f] += 1 
    d[f] = d[f] + 1 #있으면 사과 개수 하나 올리기
  else:
    d[f] = 1 #없으면 딕서녀리에 넣고 밸루 1로 만들어줘
print(d)

8. 클래스 VS 오브젝트 그리고 상속

# 클래스와 오브젝트(인스턴스)
class Person:
  #name = "홍길동" 처음의 전역변수
  #이것을 직접 코딩말고 메소드로 만들어서 받기
  def __init__(self, name, age):
    self.name = name
    self.age = age

  def say_hello(self, to_name):
    print("안녕? " + to_name + " 나는 " + self.name)

  def introduce(self):
    print("안녕? "+ " 나는 " + self.name + " 이고 나이는 " + str(self.age))

hong = Person("홍길동", 20)
hong.say_hello("영희")
hong.introduce()

#만약 홍길동뿐만 아니라 다른 사람의 이름도 하고 싶다면?
michael = Person("마이클", 50)
michael.say_hello("제니")

# 상속
class Police(Person):
  def arrest(self, to_arrest):
    print("넌 체포되었다! " + to_arrest)


class Programmer(Person):
  def program(self, to_program):
    print("다음에는 이걸 만들자! : " + to_program)

# jenny = Police("제니") 이렇게 쓰면 오류남
# 왜냐하면 Police라는 클래스가 Person을 상속하였기 때문에
# Person에서 받는 인수와 동일하게 name과 age가 있어야한다
jenny = Police("제니", 20)
grace = Programmer("그레이스", 30)
wobin = Person("우빈", 21)

# jenny는 경찰이기에 to_arrest가능 
jenny.arrest("톰")
# grace는 프로그래머이기에 to_program
grace.program("ERP데이터 전송 프로그램")

# jenny는 Person을 상속받은 클래스 Police를 생성했기에
# Person에 있는 introduce를 사용가능
jenny.introduce()

# 하지만 Programmer를 상속하지 않아서 program은 사용 못함
jenny.program("테스트") #해당부분을 실행하면 오류

9. 패키지와 모듈

# main
# animal __package__
# dog, cat modules
# dog, cat modules can say "hi"
from animal import dog #dog module 가져오기
from animal import cat #cat module 가져오기
from animal import * # animail에 있는 패키지 다 가져오기

d = dog.Dog()
d.hi()

c = cat.Cat()
c.hi()

----------------------------------------------------------------------------------
#__init__
#모듈을 불러오는 방법
# 이 폴더에 있는 cat.py이라는 파일에서 Cat이라는 클래스를 가져와줘
from .cat import Cat 
# 이 폴더에 있는 dog.py이라는 파일에서 Dog이라는 클래스를 가져와줘
from .dog import Dog
----------------------------------------------------------------------------------
# cat.py
class Cat:
  def hi(self):
    print("meow")
----------------------------------------------------------------------------------
# dog.py
class Dog:
  def hi(self):
      print("bark!")

* 다른 패키지를 불러오는 방법

왼쪽 끝에 패키지라고 써져있는 아이콘을 클릭하면 다른 패키지를 다운로드 할 수 있다.

단, 해당 홈페이지는 Relp.lt라는 홈페이지입니다.

MS-SQL : 날짜 형식 변경 및 날짜 변환표 - date format mmddyyyy

홍시쿼카 — Mon, 1 Jun 2020 09:03:23 +0900

1. FORMAT과 CAST를 이용한 날짜 형식 변경

-- gatDate() 사용해 날짜형식을 변경.
SELECT FORMAT(CAST(GETDATE() AS DATE), 'yyyyMMdd') -- 20200601
SELECT FORMAT(CAST(GETDATE() AS DATE), 'MMddyyyy') -- 06012020
SELECT FORMAT(CAST(GETDATE() AS DATE), 'ddMMyyyy') -- 01062020

-- 특정 컬럼을 사용해 날짜형식을 변경.
SELECT FORMAT(CAST(날짜컬럼 AS DATE), 'yyyyMMdd') -- 20200601
SELECT FORMAT(CAST(날짜컬럼 AS DATE), 'MMddyyyy') -- 06012020
SELECT FORMAT(CAST(날짜컬럼 AS DATE), 'ddMMyyyy') -- 01062020

2. CONVERT를 이용한 날짜 형식 변경

select convert(varchar, getdate(), 100)  --mon dd yyyy hh:miAM (or PM)
select convert(varchar, getdate(), 101)  --mm/dd/yyyy
select convert(varchar, getdate(), 102)  --yyyy.mm.dd
select convert(varchar, getdate(), 103)  --dd/mm/yyyy
select convert(varchar, getdate(), 104)  --dd.mm.yyyy
select convert(varchar, getdate(), 105)  --dd-mm-yyyy
select convert(varchar, getdate(), 106)  --dd mon yyyy
select convert(varchar, getdate(), 107)  --Mon dd, yyyy
select convert(varchar, getdate(), 108)  --hh:mm:ss
select convert(varchar, getdate(), 109)  --mon dd yyyy hh:mi:ss:mmmAM (or PM)
select convert(varchar, getdate(), 110)  --mm-dd-yyyy
select convert(varchar, getdate(), 111)  --yyyy/mm/dd
select convert(varchar, getdate(), 112)  --yyyymmdd
select convert(varchar, getdate(), 113)  --mon yyyy hh:mi:ss:mmm (24h)
select convert(varchar, getdate(), 114)  --hh:mi:ss:mmm (24h)
select convert(varchar, getdate(), 120)  --yyyy-mm-dd hh:mi:ss (24h)
select convert(varchar, getdate(), 121)  --yyyy-mm-dd hh:mi:ss.mmm (24h)
select convert(varchar, getdate(), 126)  --yyyy-mm-ddThh:mi:ss.mmm
select convert(varchar, getdate(), 130)  --dd mon yyyy hh:mi:ss:mmmAM
select convert(varchar, getdate(), 131)  --dd/mm/yyyy hh:mi:ss:mmmAM