DDL vs DML vs DCL
Database3 minutes read (About 520 words)

DDL vs DML vs DCL

SQL 명령어

관계형 데이터베이스 작동을 위해 사용하는 표준언어이고 모든 프로그램 및 유저가 데이터베이스의 데이터를 엑세스학 위해 사용하는 일련의 명령문이다.

Read More
데이터베이스기초활용
Database3 minutes read (About 425 words)

데이터베이스기초활용

데이터베이스 용어정리 (P63)

  1. 개체 = 엔티티(Entity) = 유무형의 객체
    테이블이라는 개체를 사용해서 DB에 데이터를 분류해서 저장해야한다.=> 데이터베이스관리자의 역할이 아닌 개발자의 역할이다
    즉 데이터 모델링과정을 잘해야 좋은 개발자이다.

Read More
JAVA12 minutes read (About 1834 words)

[ITWILL : java]Scanner라이브러리와 equals()를 이용한 사칙연산계산기, if문과 switch문 변환 예시, 반복문과 break

ITWILL학원 : 3강 JAVA BY 윤미영강사

1. Scanner 라이브러리

기능 : 키보드로부터 데이터를 받아온다.
java.util 패키기에 있는 중요한 라이브러리이므로 사용법은 암기필수.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//1. 선언
import java.util.Scanner;
// import라는 예약어는 
// 단축키는 ctrl + shift + O 누르면 자동으로 import 생성됨

Scanner sc = new Scanner(System.in); 
// 의미는 나는 이제부터 스캐너라이브러리를 변수명(ex: sc)이라는 이름으로 불러서 사용하겠다는 의미
// System.in 자바의 표준입력으로 키보드를 의미한다. 즉 키보드로부터 데이터를 받아오겠다라는 의미

System.out.println("단어를 입력하세요");


//2. 변수 s에 저장
String s = sc.next();
// 콘솔창에 입력한 것들이 변수 s에 저장된다.


//3. 출력
System.out.println(s);


//4. 예시
System.out.println("이름을 입력해주세요");
String s = sc.next(); 
		
System.out.println("연락처를 -없이 입력해주세요");
int i = sc.nextInt();
		
System.out.println("입력하신 "+ s +"님의 휴대폰번호 0"+ i +" 가 맞습니까?");

다른 명령어들은 아래와 같다

1
2
3
4
5
6
7
8
sc.nextInt()
//키보드로부터 정수데이터를 가지고 옴

sc.next()
//키보드로부터 string(한단어)를 가지고 옴

sc.nextLine()
//키보드로부터 string(공백을 포함한 한줄전체)를 가지고 옴

2. Scanner 라이브러리를 이용한 사칙연산계산기 만들기

처음 떠오른 코드는 아래와 같다.

1
2
3
4
5
6
7
8
Scanner sc = new Scanner(System.in);
System.out.println("원하는 사칙연산 수식을 입력하세요");
int data1 = sc.nextInt();
String operator = sc.next();
int convertOper = int(operator);
int data2= sc.nextInt();

System.out.println("입력하신 " + data1 + operator + data2 +"의 값은 "+ (data1 + convertOper+ data2)+"입니다")

그런데 string으로 연산자를 받으니까 연산이 되지않으니까 int로 형을 바꿀려고했는데 Cannot cast from String to int 에러가 났다.

사칙연산자들의 데이터타입이 무엇인지 구글링했는데 그래도 잘 모르겠어서
강사님께 여쭈어보니 string을 int로 받아도 해결할 수 없다고 한다.

if문을 써서 equals()를 쓰는게 낫다고 했다
equals()를 어떻게 쓰는지 찾아본 뒤 바로 적용해보았다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Scanner sc = new Scanner(System.in);
System.out.println("원하는 사칙연산 수식을 입력하세요");
int data1 = sc.nextInt();
String operator = sc.next();
int data2= sc.nextInt();

if("+".equals(operator)){
	System.out.println("입력하신 " + data1 + operator + data2 +"의 값은 "+ (data1 + data2)+"입니다");
}else if("-".equals(operator)){
	System.out.println("입력하신 " + data1 + operator + data2 +"의 값은 "+ (data1 - data2)+"입니다");
}else if("*".equals(operator)){
	System.out.println("입력하신 " + data1 + operator + data2 +"의 값은 "+ (data1 * data2)+"입니다");
}else if("/".equals(operator)){
	System.out.println("입력하신 " + data1 + operator + data2 +"의 값은 "+ (data1 / data2)+"입니다");
}else{
	System.out.println("또 잘못입력함? 다시 입력해주세요")
}

작동 잘된다! 역시 가르쳐주는 사람이 있으니까 좋다
switch문으로 바꾸어보자

1
2
3
4
5
6
7
8
9
10
11
switch(operator){
case "+" : System.out.println("덧셈결과는 " + (data1+data2));
break;
case "-" : System.out.println("뺄샘결과는 " + (data1-data2));
break;
case "*" : System.out.println("곱셈결과는 " + (data1*data2));
break;
case "/" : System.out.println("나눗셈결과는 " + (data1/data2));
break;
default : System.out.println("또 잘못입력함? 다시 입력해주세요");
}

3. 제어문 종류

  • 조건문
    • if(조건문)
    • switch(값)
  • 반복문
    • for(반복횟수)
    • while(조건식)

4. 조건문 : Switch문

정수식안에는 변수, 숫자, 문자, 조건들이 들어갈 수 있다.
case안의 값에는 and연산자, Boolean, 실수는 아예 들어갈 수 없다.
break;문이 없을 경우 다음 break;를 찾을때까지 모든 문장을 실행한다.
default문은 가장 마지막 작업으로 위의 case 이외의 값인 경우 default문은이 출력되고 Switch문은 끝난다

1
2
3
4
5
6
7
8
9
switch( 정수식 ){ //숫자,문자
	case 값 : 출력값1;
		break;
	case 값 : 출력값2;
		break;
	case 값 : 출력값3;
		break;
	default : 출력값4;
}

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

switch(season){
case "spring" : 
	System.out.println("봄 사랑 벚꽃 말고 by 아이유");
	break;
case "summner" : 
	System.out.println("party by 소녀시대");
	break;
case "autumn" : 
case "fall" : 
	System.out.println("11:11 by 태연");
	break;
case "winter" : 
	System.out.println("Santa tell me by Ariana grande");
	break;

default : System.out.println("잘못입력하셨거나 스페..펠..ㄹ..잉 틀리셨나봐요?");
}

5. 조건문 : switch문과 if문 비교

임의의 노래방 점수를 터미널에 입력하면 점수대별로 아래 문구를 출력하고싶다.

100점의 문구 : 실화냐? 가수다! 가수가 나타났다!

80 ~ 99점의 문구 : 노래실력이 아주 좋으신데요~

40 ~ 79점의 문구 : 매력이~ 넘쳐요

40점미만의 문구 : 노ㄹ..아니 박수실력이 나날이 늘어가네요!
그외의 점수들 : 잘못된 숫자를 입력하셨습니다.다시 입력해주세요

  1. if일때

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    Scanner sc = new Scanner(System.in);
    System.out.println("점수를 입력하세요");
    int inputScore = sc.nextInt(10);

    if (inputScore == 100){
    	System.out.println("WOW " + inputScore + "점 실화냐? 가수다! 가수가 나타났다!");
    }else if(inputScore >= 80 && inputScore < 100 ){
    	System.out.println(inputScore + "점! 노래실력이 아주 좋으신데요~");
    }else if(inputScore >= 40 && inputScore < 80 ){
    	System.out.println("내 노래 점수는 " + inputScore + "점! 매력이~ 넘쳐요");
    }else if(inputScore < 40 && inputScore >= 0){
    	System.out.println(inputScore + "점! 노ㄹ..아니 박수실력이 나날이 늘어가네요!");
    }else{
    	System.out.println("잘못된 숫자를 입력하셨습니다.다시 입력해주세요");
    }

  2. switch일때

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    switch(inputScore/10){
    case 10 : 
    	System.out.println("100점 실화냐? 가수다! 가수가 나타났다!");
    	break;
    case 9 :
    case 8 : 
    	System.out.println("노래실력이 아주 좋으신데요~");
    	break;
    case 7 : 
    case 6 : 
    case 5 : 
    	ystem.out.println("매력이~ 넘쳐요");
    	break;
    case 4 : 
    case 3 :
    case 2 : 
    case 1 : 
    	System.out.println("노ㄹ..아니 박수실력이 나날이 늘어가네요!");
    	break;
    default : 
    	System.out.println("잘못된 숫자를 입력하셨습니다.다시 입력해주세요");
    }

6. 반복문 : for문

for문의 기본은 아래와 같다

1
2
3
for(int i=0; 조건식; 증감식){
	출력값
}

간단한 예시를 보면서 어떻게 컴파일이 되는지 순서를 보자

1
2
3
for(int i=1; i<10; i++){
	System.out.println("Hi");
}
  1. 조건문 확인 : i는 1이고 10보다 작다 ->true
  2. 괄호안의 코드출력
  3. 증감식 확인 : 이제 i는 2
  4. 조건문 확인 : i는 2이고 10보다 작다 ->true
  5. 괄호안의 코드출력
  6. 증감식 확인 : 이제 i는 2
  7. 계속반복
  8. 조건문 확인 : i는 10이고 10보다 작다 -> false
  9. for문 종료

7. 반복문 : break

반복문에서 break를 사용하면 반복문이 바로 종료된다.

구구단 3단 예시를 들어보자

1
2
3
4
5
6
7
8
int multiply;
int result;
multiply = 3;
for(int x=1; x<=9; x++){
	result = multiply * x;
	System.out.print(result + ",");
}
//출력값 : 3,6,9,12,15,18,21,24,27,

출력값의 마지막 컴마를 없애고 싶다.
어떻게 하면 좋을까? if와 break를 사용해보자.

1
2
3
4
5
6
7
8
9
10
11
12
int multiply;
int result;
multiply = 3;
for(int x=1; x<=9; x++){
	result = multiply * x;
	if(x==9){
		System.out.println(result);
		break;
	}
	System.out.print(result + ",");
}
//출력값 : 3,6,9,12,15,18,21,24,27

break를 입력하면 if조건이 만족되는 순간 바로 반복문이 종료된다
아래 예시는 구구단 3단 나타내지만 if조건문을 5까지 입력했다
즉 3*5까지 진행하는 구구단이다.

1
2
3
4
5
6
7
8
9
10
11
12
int multiply;
int result;
multiply = 3;
for(int x=1; x<=9; x++){
	result = multiply * x;
	if(x==5){
		System.out.println(result);
		break;
	}
	System.out.print(result + ",");
}
//출력값 : 3,6,9,12,15

x가 6,7,8,9가 남았지만 if조건을 만족하고 break때문에 반복문이 종료된다.

JavaScript6 minutes read (About 929 words)

ITWILL : 아이디와 비번입력, 새로고침location.reload(), 주석한번에 단축키, switch문 출력문 한줄리팩토링

ITWILL학원 : 5강 JS기초 BY 정규태강사

1.아이디와 비번체크

location.reload()는 새로고침의 역할을 한다

  1. 아이디와 비번을 존재유무 동시에 체크
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")
let inputPw = prompt("비밀번호를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}
  1. 아이디 존재유무 먼저 체크후 비번 체크
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const id = "itwill001"
const pw = "it8030909"
let inputId = prompt("아이디를 입력하세요", "")

if(id === inputId){
	if(pw === inputPw){
		alert(inputId+"님 환영합니다")
		let inputPw = prompt("비밀번호를 입력하세요", "")
	}else{
		alert("비밀번호가 일치하지 않습니다")
		location.reload();
	}
}else{
	alert("존재하지 않는 회원입니다.")
	location.reload();
}

DB를 쓰면 알게되겠지만 2번방법은 아이디한번 비번한번 두번을 가져와야해서 비효율적이다
1번을 사용하는 것을 권장한다

  1. html내에서 id로 가져와서 로그인페이지 완성
    내가 궁금해져서 네이버처럼 로그인페이지를 만들어봤다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기


<script type="text/javascript">

let id = document.querySelector('#id');
let id = document.querySelector('#id');
let loginbtn = document.querySelector('login')

loginbtn.addEventListener('click', ()=>{
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

querySelector로 input태그 ID와 PW를 가져오려고 했으나 “존재하지 않는 회원입니다”라는 에러만 겁나 났다

querySelector가 안되는 이유는 Jquery태그를 추가해야한다고했다

그래서 다른 방법인 getElementById()로 진행해봤다.

  1. getElementById(‘id’)만 가지고 왔는데도 전혀 입력값을 가져오지못했고 “존재하지 않는 회원입니다”라는 에러
  2. getElementById(‘id’).value : 그래서 value를 끝에 추가했지만 그래도 가져오지 못했다
    왜지….
  3. 알고보니 결국 스코프 문제였다 addEventListener안에 넣었더니 정상적으로 실행되었다 뿌듯!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<img src="https://lh3.googleusercontent.com/proxy/kn4y-1fat85W8voylUnkZF1DBTCAwtNwaTwxKJZ-GYiWk83N6rAd2fKqIzdaPSSZKupHKxA-xyZttfXhyO6EQHKxEQ2NTEeByNqAEZaCdJScbyZcUB3nak6TlxWlKv_lRgwfZtY8gWCwjusDnUmRThBUCTYf7ElOwOvnnj772zC02yDGOB5uI-B4rkSeKZjcw0i6FpG3xsATsSvDIw4A28QN"
	width=100%, height=100%>
<input id="id" type="text" size="40px" placeholder="아이디를 입력하세요"><p>
<input id="pw"type="text" size="40px" placeholder="비밀번호를 입력하세요"><p>
<button id="login"> 로그인 </button><p>
<input type="checkbox" checked>항상 아이디 기억하기

<script type="text/javascript">

let loginbtn = document.getElementById('login')

loginbtn.addEventListener('click', ()=>{
	let id = document.getElementById('id').value;
	let pw = document.getElementById('pw').value;
	console.log(id, pw)

 	if( id === "it"){
 		if(pw === "321"){
 			alert(id1 + "님, 반갑습니다")
 		}else{
 			alert("비밀번호가 일치하지 않습니다")
 			location.reload();
 		}
	}else{
		alert("존재하지 않는 회원입니다.")
		location.reload();
	} 
})

2. JS주석 한번에 단축키

  • ctrl + shift + / : 한번에 주석설정
  • ctrl + shift +\ : 한번에 주석제거

3. switch문 출력문 한줄 리팩토링

입력받은 정보를 가지고 학점을 나타내는 switch문을 만들어보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let score = prompt('점수를 입력하시면 학점이 계산됩니다')

switch (Math.floor(score/10)){
case 10 :
case 9 :
	document.write("A학점")
	break;
case 8 :
	document.write("B학점")
	break;
case 7 :
	document.write("C학점")
	break;
case 6 :
	document.write("D학점")
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	document.write("F학점이라니")
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}

자세히보면 반복되는 출력문이 보인다
이걸 리팩토링해보자
아주 간단하다! 변수만 만들어주면 된다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//switch case 출력문 한번쓰기
document.write('<hr>')
let score = prompt('점수를 입력하시면 학점이 계산됩니다')
let grade = ""; //변수만들기

switch (Math.floor(score/10)){
case 10 :
case 9 :
	grade ="A"
	break;
case 8 :
	grade ="B"
	break;
case 7 :
	grade ="C"
	break;
case 6 :
	grade ="D"
	break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
	grade ="F"
	break;
default : document.write("0~100사이의 점수를 입력하세요")
}
document.write(grade + "학점")
JavaScript6 minutes read (About 868 words)

ITWILL : JS를 문서에 나타내는 3가지방법, undefined VS null, 백의자리 Math.floor(), 복합대입연산자로table생성, A++과 ++A차이점, ==과===차이점, 논리표

ITWILL학원 : 3강 JS기초 BY 정규태강사

1. 문서에 js를 나타내는 3가지 방법

  1. document.write();

  2. console.log();

  3. alert();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a = 100;

// 1번 방법
document.write(a);

// 2번 방법
console.log(a);

// 3번 방법
alert(a)

// 출력값은
셋 다 동일하게 100이 출력된다.
표시되는 곳이 다를 뿐.

2. undefined VS null

  • undefined : 변수에 아무런 값도 등록되어 있지 않은 경우
    • var value;
  • null : 아무것도 없음을 표현하는 값 따라서 주로 변수를 초기화할때 사용함.
    • var value = null;
    • 객체를 생성하고 사용할 수 있게 하기 위해 null로 초기화한다

3. 변수명 작성

  1. 변수명은 영문자로 작성 (첫번째 글자에 $, _ 사용가능)
  2. 예약어는 변수명으로 사용할 수없다 ex) False, typeof
  3. 변수명은 가능하면 의미를 가지고 생성
  4. 대소문자 구분 필수

4. 산술 연산자

예제문제를 푸는데 나는 두가지 방법이 떠올라서 두가지방법으로 풀어보았다

예제문제
Math.floor를 사용하여 세자리 숫자를 연산하면 100의 단위로만 나타내세요
input 456
output 400

1
2
3
4
let num3 = 778;

	console.log('첫번째방법은 ' + (num3 - num3%100));
	console.log('두번째방법은 ' + (Math.floor(num3*0.01))*100);

5. 대입 연산자

변수에 데이터(값)을 저장하는 연산자
ex) A = B ; 연산의 방향이 오른쪽에서 왼쪽이다

복합대입연산자는 산술연산자에 복합연산자를 함께 사용하는 것으로 그 예에는 +=, -=, *=, /=, %=가 있다
ex) A += B; <=> A = A + B;
ex) A -= B; <=> A = A - B;
ex) A *= B; <=> A = A * B;

복합대입연산자를 활용해 테이플을 편하게 만들 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let name = "곽두팔";
let age = 77;
let addr = '제주';
	
let tableTag;
tableTag = '<table border="1">';
tableTag += '<tr>';
tableTag += '<td>'+name+'</td>';
tableTag += '<td>'+age+'</td>';
tableTag += '<td>'+addr+'</td>';
tableTag += '</tr>';
tableTag += '</table>';
	
document.write(tableTag)

물론 HTML로 만드는 것이 훨씬 편하지만…ㅋㅋㅋ

6. 증감 연산자(단항연산자)

변수의 앞, 뒤에서 사용하며 값을 1증가 또는 1감소

  1. ++A 또는 –A (전위연산) : 변수의 값을 사용할때 1증가 또는 1감소 실행
  2. A++ 또는 A– (후위연산) : 변수의 값을 먼저 사용하고 나서 1증가 또는 1감소 실행
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let A = 100;
 
//1차 비교
++A;
console.log(A); // 101
A++;
console.log(A); // 102


//2차 비교
console.log('++A : ' + (++A) + ' ' + A); // 101
console.log(A); //101
console.log('A++ : ' + (A++) + ' ' + A); // 101
console.log(A); //102

//3차 비교
let temp = ++A;
console.log(temp) // 103
console.log(A) //103
temp = A++
console.log(temp) // 103
console.log(A) // 104

세미콜론의 위치때문에 1번과 2번의 값이 차이가 생겼다
++A는 A의 값을 변화시키지 않고 콘솔을 찍었고
A++은 A의 값을 1씩 더한 뒤(세미콜론찍고) 콘솔을 찍었다.
즉 변수의 값을 변하시키는 건 A++후위연산이다.

7. 비교연산자

데이터를 비교하는 연산자.
연산의 결과는 boolean 으로 나온다.
<, >, <=, >=, ==, !=, ===, !==

1
2
3
4
5
6
7
8
num1 = 10;
num2 = '10';

console.log(num1 === num2) // false
console.log(num1 == num2) // true

console.log(num1 !== num2) // true
console.log(num1 != num2) // false

왜 서로 값이 다르게 나올까?

  • == : 데이터의 값만 서용해서 비교
  • === : 데이터의 값 + 데이터의 타입을 모두 비교 (높은 정확도)

참고로 위의 개념은 js에만 해당됨

8. 논리연산자

총 3가지의 연산자가 있다

  • && AND 두개 넣어서 AND연산자
  • || 버티컬바 두개 넣어서 OR연산
  • ! 느낌표 넣어서 NOT연산

논리연산자진리표를 꼭 기억해야한다.

JavaScript11 minutes read (About 1576 words)

ITWILL : JS기초이론, Compile VS Interprete, 변수, js라이브러리,객체타입

ITWILL학원 : 2강 JS기초이론 BY 정규태강사

1. 자바스크립트

JAVA와 이름은 비슷하지만 어떠한 연관성도 없는 언어이다.
JS 특징

  • 객체기반의 스크립트 프로그래밍 언어.
  • C언어 기반의 문법 사용
  • 넷스케이프에서 개발
  • HTML 문서 내부에 포함되어 있는 기능
  • 웹 브라우저를 통해서 실헹
  • 인터프리터를 사용해서 실행 : 컴파일러가 필요없고 위에서 아래로 순차적 실행
  • 서버의 작업처리부담을 덜어준다(클라이언트에서 처리가 되기 때문에)
  • JS소스코드는 오픈소스로 누구나 코드를 볼 수 있다.(보안측면상 100% 오픈은 아님)
  • 다양한 JS라이브러리를 제공한다

2. 스크립트 프로그래밍 언어란?

스크립트 언어 - 어플리케이션에 명령을 전달하기 위한 것.

  • ex) sql, awk, 자바스크립트 등

3. 인터프리터언어와 컴파일러 언어란?

Compile VS Interpreter
둘 다 고급언어로 작성된 원시 프로그램(Source Program)을 목적 프로그램(Object Program)으로 번역하는 번역 프로그램이며, 프로그램 번역 방식에 따라 구분된다.

  1. 컴파일
  • 목적프로그램을 생성
  • 번역과정과 번역시간이 복잡하고 오래 걸리지만 한번 번역 후에는 다시 번역하지 않아도되므로 실행속도 빠름
  • 대표적 JAVA, C언어
  • 예시: 소스코드(.java) -> 자바 컴파일 -> 바이트코드(.class) -> JVM 의 JIT 컴파일러 -> 머신코드 -> 실행
  1. 인터프리터
  • 목적프로그램을 생성하지않고 위에서 아래로 순차적으로 실행(웹 브라우저에 포함되어있음)
  • 번역속도는 빠르지만 프로그램 실행시 매번 번역해야해서 실행속도가 느리다
  • 대표적 php, PYTHON
  • 예시 : 소스코드(스크립트) -> 인터프리터 -> 실행

참고링크1

참고링크2

4. JS라이브러리란?

라이브러리란 특수한 기능을 모아놓은 것을 말한다
ex) jQuery, Ajax, JSON

5. 왜 JS를 쓸까?

자바는 서버에서 사용되는 언어이다. 서버에서 처리를 한 후 돌려줘야 한다.
반면 JS는 서버가 아닌 클라이언트에서 처리된다. 그래서 서버의 부담이 줄어든다

그렇다면 전부 JS로 하면 안될까??

하지만 JS에 한계가 있기 때문에 서버의 언어와 클라이언트의 언어를 같이 사용하게 된 것이다.

6. JS 사용시 주의점

  1. 항상 대/소문자 구문해서 사용한다.
    아래 코드는 같은 의미를 가지고 있는 것 같지만 출력값은 다르게 출력된다

    1
    2
    new Date();
    New DATE();

  2. 실행문을 끝낼때 항상 ;을 사용한다.
    세미콜론이 없이 실행가능할 수 있지만 실행중에 문제가 발생할 수도 있기에 붙이는 것을 권장한다

  3. 사용자(개발자)의 편의성을 위해 한 줄에 하나의 문장을 작성한다.

  4. 큰 따옴표와 작은 따음펴 사용에 주의한다

  • 자바의 경우, ""는 String만 가능, ''는 char만 가능
  • js의 경우, 구분없이 다 사용가능하고 항상 짝으로 사용하면 된다.
    1
    2
    // ex)
    document.write('안녕하세요 |'js|'입니다')
  1. 마우스를 사용할 수 없는 환경에 대한 고려를 해야한다.(키보드 접근성 준수)

7. 변수

  1. 변수란 무엇일까?
    하나의 공간에 하나의 데이터만 저장하는 공간(메모리)이다

만약 하나의 공간에 다른 데이터를 추가적으로 넣게되다면?
새로운 데이터가 들어올 시 기존 데이터에 덮어쓰여지게 된다.

저번시간에 꼭 기억해야하는 한 문장이 있다고 했다
바로 모든 프로그램은 주기억장치에서만 실행된다!

  1. 변수의 종류는 크게 아래와 같다
  • 문자형데이터(String) : 문자 또는 숫자를 (“”)(‘’)표현한 데이터.
    • 만약 document.write(‘100’+200+300)이라면 출력값은 어떻게 될까?
    • 100500이라고 답했다면 땡! 정답은 100200300이다.
  • 숫자형(Number) : 변수에 숫자만 저장되는 데이터.
  • 논리형(Boolean)
  • Null : 비워진 데이터 값
  1. 변수를 사용하기 위해서는 아래와 같이 세 가지의 동작이 필요하다
    1. 변수를 선언
    2. 변수를 초기화
    3. 변수를 사용

다만 경우에 따라서는 1번 선언과 2번 초기화를 같이 진행할 수도 있다.
- 변수 선언만 한 경우 : var 변수명;
- 선언과 초기화 같이 하는 경우 : var 변수명 = 값;

8. 변수 선언 후 초기화를 안한다면?

아래를 출력하면 언디파인드가 뜨는데 consol창에는 아무메세지도 나타나지않는다
즉 에러가 아니다 

1
2
3
4
5
6
let tmp
document.write(tmp);


//출력값은
undefined

왜 이런 현상이 일어날까?

메모리가 할당된 tem안에 값이 없기때문에?

땡!

tem안에 값이 있는지 없는지 모르기때문에!

이게 무슨 양자역학같은 소리냐면…

메모리는 유한하다. 8기가나 16기가 등등.
컴퓨터는 여러 작업을 하면서 한정된 메모리안에서 데이터를 썼다가 지웠다가를 반복한다.
재사용된 메모리위치에 아직 쓰레기값이 들어있을 수도 있다.
내가 대입하지 않았더라도 어떤 쓰레기값이 들어가 있을수있기때문에 undefined가 나온 것이다.
따라서 변수선언 후에는 항상 초기화를 해줘야된다.

9. 객체타입

var타입은 객체타입이라고 한다. 모든 타입을 저장할 수 있다.
비교하자면, java의 변수선언은 정수인 경우 int num = 1이라고 하지만 js는 데이터타입을 정의하지않고 변수를 선언할 수 있다.

HTML&CSS7 minutes read (About 1061 words)

[ITWILL : WEB]`<pre>`태그, html특수문자입력, `<b>태그` 와 `<strong>태그`의 차이점

ITWILL학원 : 1강 WEB(HTML, CSS) BY 김영희

1강 HTML 기초

WEB(HTML, CSS)을 담당하며 일주일에 1번 4시간 수업

HTML은 웹페이지를 만들어 주는 프로그래밍 언어이며 웹페이지의 구조를 담당한다
enter나 space bar(2칸 이상)는 명령으로 해결한다.

1. tag는 원칙상 대소문자의 구별이 없으나 소문자로 입력한다

2. !DOCTYPE html의 의미는 html5 문서임을 선언

3. <pre>태그

<pre>태그는 html문서안에서 <p>나 <br>를 쓰지않아도 html상의 Enter나 Tab, Space를 다 표현할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있다.
더불어서 자동적으로 모든 문자의 width 간격을 일치시켜준다
ex) i와 w의 크기가 같다

1
2
3
4
5
6
7
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

위 내용을 html상에 적고 브라우저로 열어보면

1
만날 수 없어만나고 싶은데이런 슬픔처음인걸말할 수 없어말하고 싶은데속마음만 들키는 걸

우리가 원하는 건 이게 아니다!
<p>와<br>태그를 이용할 수 있으나 여간 귀찮은 일이아니다.
이때 사용하는 것이 <pre>태그이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<pre>
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸
</pre>
``` 

위의 내용을 출력하면 아래와 같이 편~안하게 우리가 원하는대로 나타낼 수 있다

```html
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

4. 특수문자(기호태그)

특수문자(기호)표현을 위한 특수문자 태그들.

  • &lt;는 < 를 나타내고 &gt;는 > 를 나타낸다.
    위의 태그들을 사용하면 html이 자신의 태그로 인식하지않고 특수문자로 인식해서 그대로 표현해준다
1
2
이것은 <br> 태그입니다
이것은 &lt;br&gt; 태그입니다

각 두 줄의 코드를 동일한 값이 나오길 기대하며 브라우저 출력물해보자
아래와 같이 표시된다

1
2
이것은 
태그입니다이것은 <br>태그입니다

띠용~ 그래서 이럴때 특수문자를 사용해준다

자주 사용하는 특수문자는 result 1번부터 5번까지는 기본으로 암기해야한다

1
이것은 &lt;br&gt; 태그입니다

// 출력물은 아래와 같다 

1
이것은 <br>태그입니다

  • &nbsp;는 space bar를 넣는 태그이고 자주 사용 하지만 css를 사용하면 굳이 사용할 필요없기도 한 모호한 녀석이다.

  • &#9977를 하면 운동하는 사람 아이콘이 나온다. 컬러풀하고 귀여운 symbols를 확인하고 사용할 수 있다

  • &amp;는 &를 나타낸다

1
운동하는 사람 &amp;#9977이  &amp;#9748가 와서 운동을 그만하고  &amp;#9749를 마셨다

출력값은 아래 이미지처럼 짜잔!

출력값

5. <b>태그 와 <strong>태그의 차이점

  • b태그 : 단순히 굵게 표시

  • strong태그 : 굵게와 중요한 내용이라는 표시가 내포되고있고 더불어 스크린 리더를 사용하는 경우, 음성으로도 강조해서 알려주니까 b태그보단 strong태그 이용할 것.

이와 동일하게 작용하는 것이 기울임태그이다

  • i태그는 단순히 기울이게 표시
  • em태그는 기울임과 강조하는 애용이라는 표시가 내포되어있고 더불어 스크린 리더를 이용할 경우, 음성으로 강조해서 알려준다.

참고링크

6. <center>태그는 더이상 사용하지않으며 대신 CSS로 text-align:center를 이용한다

7 .<hr>태그는 구분선을 그어준다

Follow

Categories

Recent

Archives

Tags

APK1
Backjoon12
Book1
BookReview1
C#3
CORS1
CSRF1
ChatGPT1
Codeup10017
DBeaver1
DB설계1
DataStructure5
Discord1
Docker2
EL2
Eclipse10
Facebook1
GIT31
GeekNews1
Gson4
HTML&CSS30
Hackerrank10
Hexo5
HttpEntity1
ITWILL(JAVA)263
IntelliJ1
JAVA1
JSON2
JSTL4
JavaScript1
Journal22
Leetcode6
List11
Lombok1
MSA1
MariaDB9
Moment.js3
MyBatis6
MySQL11
NoSQL1
Node.js3
Oracle48
Port2
Programmers2
RESTfulAPI3
Redis1
RestTemplate2
Review20
SQLD2
SQL퀴즈2
STS7
SVN4
SpringBoot6
TIL359
Tomcat4
VanillaJS2
VueJS2
WEB2
Web Development1
Web Game9
Websocket3
YouTube1
ajax1
jQuery13
java.util.Calendar1
xAPI1
구글애드센스1
디자인패턴4
생활코딩5
설치1
오늘또못알아듣고말았습니다14
오류일지18
정규표현식3
차이17
패스트캠퍼스(초격차Java/Spring)12
패스트캠퍼스(파이썬웹개발)37
회고록10

Advertisement

×