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

1. 리터럴(literal)

실제 값.
변수의 값이 변하지 않는 데이터(메모리 위치안의 값)이다.

참고링크 : 상수와 리터럴차이

2. byte + byte가 왜 에러날까

b1과 b2는 연산결과는 잘 나오지만 b3의 연산결과는 에러가 난다.

1
2
3
4
5
6
7

byte b1 = 10;
byte b2 = 20;
System.out.println(b1+b2); //30

byte b3 = b1+b2;
System.out.println(b3); //Type mismatch: cannot convert from int to byte

산술연산자는 기본적으로 int형이다. 그래서 type mismatch가 나타난다
int형으로 산술하면 잘~출력된다

1
2
3
4

int i1 = 100;
int i2 = 200;
int i3 = i1+i2;
System.out.println(i3); //300

3. int VS Integer

아래 데이터형의 차이점이 뭘까?

• int a; 기본데이터형
• Integer i; 참조데이터형
  • 라이브러리
  • 매서드사용가능

1
2
3
4
5
6

int a1 = 100;
Integer a2 = 100;

System.out.println(a2.toString()); //100
System.out.println(Integer.MAX_VALUE); //2147483647
System.out.println(Integer.MIN_VALUE); //-2147483648

4. void와 int차이

void와 int 매서드의 차이를 알아보자
public static 뒤에 void가 오기도하고 int등 다른 데이터타입이 올 수 있다.

• void의 의미 : myPrint가 가지고 있는 값이 없을때, 돌려줄값이 없을때 return이 없을때 사용.
• int의 의미 : 반대로 가지고있는 값이 있을때, 돌려줄값이 있을때. return과 함께 사용

1
2
3
4
5
6
7

public static void 매서드이름(매개변수){ //void 매서드 정의하기
	System.out.println("void 매서드")
}

public static int 매서드이름(int 변수명1, int 변수명2){ //int 매서드 정의하기
	return 변수명1 + 변수명2;
}

파이썬 인강 : Web 기초 (프론트엔드 VS 백엔드, Codepen, MDN, devdocs, 크롬검색꿀팁)

1. 프론트엔드 (Front‑end) VS 백엔드 (Back-end)

가장 많이 들었던 프론트엔드와 백엔드 그 차이점은 무엇일까?

간단한 도식표로 쉽게 확인할 수 있다.

1. 프론트엔드 (Front‑end)
   파란색영역으로 HTML, CSS, Javascript를 주로 다룬다.
   사용자와 웹브라우저사이에서 입력과 출력을 주로 담당하며 가독성이나 사용성을 높여 사용자가 편리하게 이용할 수 있도록 해야한다.

2. 백엔드 (Back-end)
   주황색영역으로 웹브라우저요청에 웹서버와 데이터베이스를 통해서 응답해준다.

• OS(operating system 운영체제) : windows, linux, unix, mac, ios, android 등등
• DB(DataBase 데이터베이스) : oracle, mysql, mongoDB, mssql 등등
• Framework(프레임워크) : spring, flast/Django 등등
• 프로그래밍 언어 : java, php, python 등등

3. 풀스택 (Full-stack)
   하지만 요즘은 점점 경계가 모호해지고 있는 추세이다.
   따라서 프론트엔드와 백엔드를 모두 포함하여 풀스택 (Full-stack)이라고 부르기도 한다.

실습을 하기 앞서 강사님이 여러 좋은 사이트를 알려주었다

2. Codepen 코드펜

프론트엔드를 위해 굳이 에디터를 다운로드하지않아도 웹상에서도 쉽게 다룰 수 있다.
바로 codepen에서 HTML과 CSS, Javascript가 가능하다.
가입하지 않아도 바로 쓸 수 있는 장점이 있다.

원래 알고있던 사이트이다.
다른 개발자들이 만들어 놓은 멋진 그리고 화려한 코드를 볼 수만 있는 줄 알았다.
그런데 인강에서 코드 수정도 가능하다길래 직접 들어가보니 완전 신세계!!!
코드를 수정할 수 있다는 것을 처음 알았다. 좋은 프론트엔드 공부자료가 될 것이다.

Codepen Topics

특히 codepen에 topic에는 Vue나 React를 이용해서 만든 멋진 코드들도 볼 수 있다.
보는 재미가 쏠쏠해서 시간가는 줄도 몰랐다.
특히 슉슉 날아다니는 디자인을 보면 감탄밖에 나오지 않았다.
정말 멋있다 사람들……
나도 언젠가 그러한 코드를 공유할 수 있는 실력있는 개발자가 되고싶다.

3. MDN(the Mozilla Developer Network)

개발자들의 교과서라고 불리는 MDN이다
MDN은 FIREFOX를 운영하는 회사에서 만들었다고 한다.
사이트에 접속해서 technologies를 클릭하면 다양한 언어들이 있다.
이 중에 관심있는 언어를 클릭하고 궁금한 내용을 검색하면 쫘라락- 관련정보들이 엄청난 양으로 쏟아져나온다.
차근차근 주워먹기만 하면 끝!
물론 주워먹는 일이 힘들지만…..

4. Devdocs

데브독스는 위의 MDN을 가독성있게, 즉 보기쉽고 빠르게 찾을 수 있다.
UI가 MDN보다 훨씬 깔끔하고 쉬워서 깜짝 놀랬다.
이렇게 좋은 사이트가 있었다니!!! 왜 다들 MDN만 추천해줬던 것인가…
이젠 MDN보단 DEVDOCS를 더 잘 이용할 것같다.

데드독스의 또 한가지 장점은 원하는 언어만을 설정해서 검색할 수 있다는 점이다.
데브독스의 검색창 옆에 점3개아이콘을 클릭하면 Preferences가 나온다
여기에 수많은 언어들과 툴들이 있고 이 중 관심있는 것들만 틱해주고 저장해주면 앞으로 검색시에 내가 원하는 정보만 쏙쏙 쉽게 찾을 수 있다.

위의 이미지처럼 체크박스에 체크를 해주면 된다. 완전 꿀팁!!
이렇게 수많은 언어들이 있다니 세상 놀람다.

5. Can I use _?

Can I use는 사용하고자 하는 기술이 어떤 운영체제나 기반에서 제대로 작동하는 지를 알려주는 사이트이다.
이 사이트가 중요한 이유는 프로그램을 만들고 배포하기 전에 상용이 가능한 지를 확인해야하기때문에 꼭 알아야한다.
열심히 만든 프로그램이 제대로 작동 안하면 얼마나 속상할지… 절레절레

위의 예시처럼 sticky라는 기술은 구글에서 검색한 모습이다
붉은 색이 많을수록 지원 안되는 곳이 많으니 대체가능한 기술이 있는지 체크해야한다.

처음 본 사이트인 줄 알고 즐겨찾기 추가 버튼을 눌렀는데…
아니 이미 저장되어 있는 사이트였다.
띠용?!?!?!?!?!

그말인 즉슨 좋은 사이트라서 즐겨찾기해놓고 한 번도 안 들어갔나보다…허허;;

6.크롬 검색 꿀팁

덤으로 크롬검색꿀팁을 알게되었다

크롬에서 settings에 들어가서 search를 검색하여 Manage search engines을 클릭한다
default값으로는 google을 해놓으면 되고 Other search engines에 위의 세 사이트를 추가한다

크롬 검색창에 추가한 키워드를 입력후 tab을 치면 해당사이트내에서 검색결과를 바로 확인할 수 있다.

와… 대박!

SQL select as from where

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

1. 기본 반복문암기

1. 1~10까지 나열하기

1
2
3

for(int i=1; i<=10; i++){
	System.out.print(i);
} //12345678910

2. 누적합구하기

1
2
3
4
5

int sum = 0;
for(int i=0; i<=10; i++){
	sum+=i
} 
System.out.println(sum) //55

3. 카운트세기
   자주 사용하는 카운트 세기 반복문

1
2
3
4
5

int count = 0;
for(int i=1; i<=10; i++){
	count+=1;
}
System.out.println(count); //10

2. 자바에서의 String인지 체크(typeof)

자바에서는 typeof는 없고 각 데이터별로 체크할 수 있는 방법이 있다

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

// 1. 사용자로부터 입력받아오자
String [] str = new String[3];
Scanner sc = new Scanner(System.in);

for(int i=0; i<str.length; i++){
	str[i] = sc.next();
}

// 2. 사용자가 입력한 데이터가 string인지 체크

String s = Arrays.toString(str);
if( s instanceof String) {
	System.out.println('참');
}else{
	System.out.println("거짓");
}

3. N개의 양수를 받아 최대값 출력

scanner로 사용자로부터 양수 n개를 받아 그 중 최대값을 화면에 출력해보자
기본적으로 양수 n개를 받는 코드를 작성하면 아래와 같다

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

Scanner sc = new Scanner(System.in);
System.out.println("양수 5개를 입력하세요");
int [] num = new int[5];

for(int i=0; i<num.length; i++){ //1. 숫자 5개 입력받기
	num[i] = sc.nextInt();
}

for(int i=0; i<num.length; i++){ //2. 양수인지 체크(정수전체에서 max를 구하고싶다면 이부분을 없애면된다)
	if( num[i] > 0){
		System.out.print(num[i]+ " ");
	}else{
		System.out.print("양수아님 ");
	}	
}System.out.println();

이제 두가지 방법으로 최대값을 구해보자

1. 첫번째 방법 : 삼항연산자 사용

1
2
3
4
5
6
7

int max = num[0];

for( int i = 1;  i < num.length; i++) { //최대값구하기
	max = num[i] > max ? num[i] : max;
} 

System.out.println("최대값은 : "+ max);

2. 두번재 방법 : if문 사용

   1 2 3 4 5 6 7 8 9 10

   int max = num[0]; for(int i=1; i<num.length; i++){ if(max > num[i]){ max = max; }else{ max = num[i]; } } System.out.println("최대값은 : "+ max);

위의 코드를 자세히보자. 리팩토링할 부분이 보인다.
max가 가장 큰 수 인 경우 굳이 동일값(max = max;)을 대입할 필요가 없다

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

int max = num[0];

for(int i=1; i<num.length; i++){
	if(max < num[i]){
		max = num[i];
	}
}
System.out.println("최대값은 : "+ max);


// 위의 식을 간단하게 {} 중괄호를 생략할 수 있다
// 중괄호생략은 블록안의 내용이 한줄일때 생략가능하다


for(int i=1; i<num.length; i++){
	if(max < num[i]) max = num[i];
}
System.out.println("최대값은 : "+ max);

중괄호를 생략하니 세상 간단간단해보인다

4. char와 String의 차이점 산술연산자

char는 연결연산자가 사용이 안된다.
String이 어느 한 변수 이상에 있는 경우에는 연결연산자가 사용이 된다.
캐릭터에서 연결연산자를 사용하고싶으면 변수들 사이에 “”를 입력해줘야한다.

1
2
3
4
5
6

char c1= 'a', c2= 'b';
System.out.println(a + b); //195


String c1= 'a', c2= 'b';
System.out.println(a + b); //ab

만약 char를 ab로 나타내고 싶다면 변수들 사이에 “”해주면 된다

1
2

char c1= 'a', c2= 'b';
System.out.println(a +""+ b); //ab

반복문 : for

반복문의 기본식은 아래와 같다

1
2
3

for(초기식; 조건식; 증감식){
	반복문장
}

if나 for 문은 중괄호{} 없이도 반복이 된다. 하지만 세미콜론;전까지의 한줄만 반복한다

반복문의 순서

1. 초기식

2. 조건식

3. 반복문장

4. 증감식

5. 조건식

6. 반복문장

7. 증감식

8. 위의 3가지 반복

9. 조건식 (조건이 충족된 경우)

10. 반복문 종료

개발자 도구를 이용하여 간단한 디버깅을 할 수 있다

1. Sources탭에서 디버깅원하는 소스코드파일을 클릭 후 디버깅원한느 코드의 줄번호 앞부분 클릭 -> 빨간 점으로 표시됨
2. Block기준으로 변수의 값이 변화 확인 가능
3. 4번에 보이는 회색점을 클릭하면 빨간색점으로 변경됨 -> 점마다 break point가 걸려 순서를 세세하게 볼 수 있음
4. 옅은 파란 블럭이 이동하면서 코드 실행순서를 가시적으롭 보여줌
5. 디버깅이 끝났으면 꼭 줄번호 옆의 빨간색점을 체크해제해줘야 디버깅 모드가 중단된다

기본 반복문암기

기본적인 반복문은 암기해서 바로바로 쓰는 것이 좋다

몇씩 증감하는 반복문

1~10까지 짝수만 출력하는 반복문을 생각하자마자 나는 if조건이 들어간 for문을 생각했다

1
2
3
4
5

for(let i=0; i<=10; i++){
	if(i%2 !==0){
		document.write(' '+i);
	}
} // 1 3 5 7 9

강사님이 보더니만 결과값은 일치하지만 효율을 위해서 간단한건 조건문이 안들어간 반복문으로 나타내는 것이 좋다고했다.

음 그렇군! 오케이 접수!

1
2
3

for(let i=1; i<=10; i+=2){
	document.write(' '+i)
} // 1 3 5 7 9

for문안의 증감식을 변경하여 몇씩 증감한다고 하면 주로 위의 코드를 이용하면 된다!

누적합

정말 많이봐서 이제 익숙하다

1
2
3
4
5

let sum = 0
for(let i=0; i<=10; i++){
	sum+=i
} 
document.write(sum) //55

카운트

횟수를 셀 때 자주 사용한다

1
2
3
4
5

let count = 0;
for(let i=1; i<=10; i++){
	count+=1;
}
document.write(count); //10

for문과 if문의 자리바꿈에 따른 변화

사용자가 입력하는 숫자의 구구단을 출력하는 예시를 보자

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

for(let i=1; i<=9; i++){
	if(num > 0){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}else{
		alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
		break;
	}
}

위에서 num을 0이하로 입력했다면 alert창 띄우고 다시 숫자를 입력하도록 하게 하고싶었다. 근데 이 로직으로는 감이 잡히지않았다.
고민하다가 if와 for문의 자리를 바꿨다.
자리만 바꿨을 뿐인데 reload가 가능해서 굳이 새로고침하지않아도 다시 num을 입력할 수 있어 편하다

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

if(num>0){
	for(let i=0; i<=9; i++){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}
}else{
	alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
	location.reload();
}

반복문 : While

반복문 while의 기본식은 아래와 같다

1
2
3
4
5

초기식;
while(조건식){
	반복할문장;
	증감식;
}

증감식을 꼭 적어줘야 무한실행이 되지 않는다!

전위연산 VS 후위연산

전위연산과 후위연산은 잘 비교해야한다

1. 전위연산

   1 2 3 4

   let i=1; while(i++ <=4){ document.write(i+", ") } // 2, 3, 4, 5

   1. i = 1 -> 조건식 : 참 -> i++ -> write : 2
   2. i = 2 -> 조건식 : 참 -> i++ -> write : 3
   3. i = 3 -> 조건식 : 참 -> i++ -> write : 4
   4. i = 4 -> 조건식 : 참 -> i++ -> write : 5
   5. i = 5 -> 조건식 : 거짓 -> 종료

2. 후위연산

   1 2 3 4

   let i=1; while(++i <=4){ document.write(i+", ") } // 2, 3, 4,

   1. i = 1 -> ++1 라서 2 -> 조건식 : 참 -> write : 2
   2. i = 2 -> ++1 라서 3 -> 조건식 : 참 -> write : 3
   3. i = 3 -> ++1 라서 4 -> 조건식 : 참 -> write : 4
   4. i = 4 -> ++1 라서 5 -> 조건식 : 거짓 -> 종료

do-while()문

조건 비교하기 전에 한 번 실행후 조건을 비교한다

기본형태이다

1
2
3
4
5

초기식;
do{
	반복문장;
	증감식;
}while(조건식)

초기식과 증감식 없더라도 확인가능하다
아래는 예시이다

1
2
3
4
5
6

let i = 1;
do{
	document.write(i+" ");
	i++;
}while(i<=10);
// 1 2 3 4 5 6 7 8 9 10

예시: 구구단 세로로 나타내기

구구단을 가로가 아닌 세로로 나타내보자
세로로 만들려면 일단 가로로 먼저 만들수있어야한다

1. 구구단 가로출력

   1 2 3 4 5 6

   for(let dan=2; dan<=9; dan++){ document.write('<br>') for(let num=1; num<=9; num++){ document.write(dan+'*'+num+'='+(dan*num)+' ') } }

가로출력의 첫번째 반복은 dan이 고정이고 num이 1부터 9까지 변화한다
세로출력의 첫번째 반복은 num이 고정이고 dan이 2부터 9까지 변화한다

이 두 사실을 가지고 변수와 숫자를 적절히 바꾸어주면 된다

2. 구구단 세로출력

for문과 이중for문으로 만든 코드이다

1
2
3
4
5
6
7
8
9
10

for(let i=2; i<=9; i++){
	document.write('    <' + i +'단>  ')
}

for(let dan=1; dan<=9; dan++){
	document.write('<br>') 
	for(let num=2; num<=9; num++){
		document.write(num+'*'+dan+'=   '+(dan*num)+', ')
	}
}

아래 이미지파일을 보면 왼쪽이 출력값이고 오른쪽이 소스코드이다

이중for문 하나로 만들 순 없을까?

당연히 만들수있다! if를 이용하면 된다!

1
2
3
4
5
6
7
8
9
10
11

for(let num=0; num<=9; num++){	
	for(let dan=2; dan<=9; dan++){
		if(num == 0){
			document.write('    <' + dan +'단>  ')
		}else{
			document.write(dan+'*'+num+'=   '+(dan*num)+', ')
		}
	}
	document.write('<br>') 
}

반복문으로 테이블만들기

테이블만드는 방법도 다양하다

테이블은 행x열(4x3)이고 각 칸안에는 1~12까지의 수를 넣은 테이블을 만들어보자

1. 이중 for문 사용

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" document.write(tageOpen) let count = 0; for(let tr=1; tr<=4; tr++){ document.write('<tr>') for(let td=1; td<=3; td++){ document.write('<td>' + (count+=1) + "</td>") } document.write('</tr>') } document.write(tageClose)

2. tag로 테이블만들기

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" let trtdtag; let count1 = 0; for (let i=1; i<=4; i++){ trtdtag += "<tr>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "</tr>" } document.write(tageOpen + trtdtag + tageClose )

아래와 동일 테이블이 만들어진다.

파이썬 인강 : Web 기초 (클라이언트 VS 서버, 웹프로그래밍, HTTP, 크롬 개발자도구)

15회차까지는 파이썬 기초를 배웠다.
이번에는 web기초를 후루룩 배워보자
자주 접했지만 아직 암기까진 못한 웹기초!
이번엔 기초를 탄탄히 쌓아서 다시 보는 일이 없었으면 좋겠다 ㅋㅋㅋㅋㅋ

1. 클라이언트 (client) VS 서버 (server)

클라이언트와 서버, 이 둘은 절대적인 개념이 아니라 상대적인 개념이다.
웹 브라우저가 설치된 컴퓨터에서 다른 컴퓨터에 요청을 하는 클라이언트이면서도 또다른 웹 브라우저에 요청을 받는 서버컴퓨터일 수 도 있다.

1. 클라이언트 : 요청을 보내는 주체

• 크롬, 사파리, 엣지 파이어폭스 등과 같은 웹브라우저
• 데스크톱 앱 혹은 모바일 앱
• 다른 서버에 요청을 보내는 서버
• 개발자가 개발한 별도의 소프트웨어
• 등등등

2. 서버 : 네트워크를 통해 클라이언트에 정보 혹은 제공하는 프로그램 또는 컴퓨터

• 웹 페이지, 웹 사이트, 앱 등을 저장한 컴퓨터
• 웹 서버 애플리케이션을 통해 만들어진 애플리케이션
• 등등등

이번 강의에서 배울 파이썬기반의 프레임워크인 Flask와 Django로 만들어진 어플리케이션이 서버역할을 수행할 수 도 있다.
이처럼 요즘에는 웹 프레임워크를 이용하여 웹 서버를 개발한다.

2. 웹프로그래밍 (Web Programming)

웹 프로그래밍이란 HTTP로 통신하는 클라이언트와 서버를 개발하는 것을 말한다.

클라이언트와 서버는 앞에서 배웠는데 HTTP 프로토콜은 무엇일까?

3. HTTP (HyperText Transfer Protocol)

HTTP(HyperText Transfer Protocol)란 웹서버와 클라이언트 즉, 브라우저가 인터넷에서 서로 테이터를 주고 받기 위한 약속체계이다.

그럼 실질적으로 HTTP 요청과 HTTP 응답에 대해 자세히 알아보자

1. HTTP 요청

• 매서드 Method
  • 실제 서버가 수행해야하는 동작들이다.
    • get : 정보를 가져오기
    • post : 정보를 올리기
    • delete : 삭제하기
• URL주소
• 헤더 Header
  • 브라우저 정보
  • 언어
  • 등등 여러정보가 포함된다.
• 본문 body
  • 있을 수도 있고 없을 수도 있다.
  • 페이스북으로 예를 들자면, 아이디나 패스워드 입력창이나 새글내용등이 본문에 해당된다.

2. HTTP 응답

• 상태코드

  • 요청의 성공여부가 가장 먼저 표시된다.
  • 예시
  • 200은 성공했다는 의미이다.
  • 404 Not Found …는 실패했다는 의미이다.

• 헤더 Header

• 본문 body

  • HTML(Hypertext Markup Language)코드등의 파일
  • 에러가 났다면 생략될 수 있다.

4. 크롬 개발자도구 (chrome developer tools)

위의 이미지에서 볼수있듯이 크롬 개발자도구로 많은 것들을 할 수 있다

1. Elements
   엘리먼트탭에서는 각 요소에 대해 알수있으며, 속성값을 다르게 입력하는 등 간단하게 일시수정도 가능하다.
   일시수정이라서 영영 저장되거나 보존되는 것이 아닌 그냥 임시적으로 수정가능하다.

2. Console
   콘솔탭에서는 자바스크립트 (javascript)를 다룰 수 있다.

3. Sources
   소스탭에서는 현재 웹페이지가 가지는 모든 소스코드들중 공개된 코드들을 마음껏 볼 수 있다.

4. Network
   네트워크탭은 페이지를 로딩하는데 필요한 네트워크작업에 대한 결과를 시간순으로 표시해준다.
   이를 통해서 웹서버와 주고받는 실제 데이터 모습을 볼 수 있다.

• 위의 이미지 오른쪽 하단부분에 Method를 확인 할수있다. 위에서 배웠던 get과 post매서드를 확인할 수 있다.
• 위에서 status를 확인할 수 있다 200으로 성공이 되었음을 의미한다.
• type에서도 해당 웹사이트가 불러온 데이터의 타입이 gif 이미지파일인지, script파일인지 아니면 text/html파일인지 등등을 확인할 수 있다.

제약조건명 생성시 문법 2가지

제약조건명 생성시 oracle에서 권장하는 이름작성 방법이 두가지(컬럼레벨문법과 테이블레벨문법)가 있다.