파이썬 인강 자기계발 챌린지 18회차 미션

HTML은 자주 공부했기때문에 약간 지루했지만…. 여전히 내가 몰랐던 내용이 있어서 해당 부분을 정리하고자한다.
알고있는 내용들은 이번 기회에 아예 외워버려야겠다.

1. 정의태그 dl, dt, dd 태그

어떠한 정의를 내리고 싶을 때 dl, dt, dd 태그를 사용한다.
자동으로 들여쓰기가 40px이 되어있다. 이때문에 들여쓰기의 거리를 조절하고 싶으면 text-indent나 margin-left, padding-left 속성값을 변경하면 된다.

• dl : definition list의 약자이다. 내부에 2개의 태그(dt, dd)를 포함하며 dt는 생략가능하지만 dd는 꼭 포함되어야한다.

• dt : definition term의 약자이며 정의하고싶은 용어의 제목을 나타낸다

• dd : definition description의 약자이며 용어의 내용을 나타내며 dl안에 필수로 들어가야한다.

1
2
3
4

<dl>
	<dt>정의하고싶은 용어의 제목</dt>
	<dd>정의할 내용</dd>
</dl>

아래 이미지는 왼쪽은 코드, 오른쪽은 그 코드출력값을 나타낸다.
1번 부분처럼 dl dt, dd를 단순하게 활용할 수 있다.

실제 포털사이트에서 이용하는 예시도 아래 링크에서 찾을 수 있다.
스크린리더이용자를 위해 dl dt dd태그를 남용해서는 안되겠다.
모두에게 공정한 정보를 제공할 수 있는 사이트를 만들고싶다.

참고링크 : dl dt dd 태그예시와 dl dt dd 태그를 남용하지마세요

2. code 태그

코드태그는 컴퓨터 코드(code)의 일부분을 나타내주는 코드이다. 그래서 컴퓨터나 프로그래밍코드일부를 그대로 표시하고자할때 유용하다.

1
2

<p>다음은 자바 코드의 일부분입니다. </p>
<code>System.out.println("헬로자바"); </code>

위의 이미지에서 2번부분을 보면 code태그안에서 html태그를 표현하고싶을때, 여전히 꺽쇠는 표현이 되지 않는다. 그래서 왼쪽꺽쇠(<)의 유니코드인 <를 사용했고
오른쪽꺽쇠인(>)의 유니코드인 >를 사용했다.

나는 마크다운으로 블로그를 작성하는데 항상 code표현을 백틱으로 이용해왔다. code태그 알아두면 html에서 유용하게 쓸 수 있다.

3. block요소와 inline요소 그리고 inline-block요소의 차이

• block 요소
  • 줄바꿈이 이루어진다.
  • 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.
  • width, height, padding, margin 등을 적용 가능.
  • text-align이 적용 불가능.
  • vertical-align이 적용 불가능.
  • 예시 : article, dd, div, dl, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, noscript, ol, p, pre, section, table, ul 등등

1
2
3

div {
display : inline
}

• inline 요소
  • 줄바꿈이 이루어지지않는다.
  • 기본적으로 콘텐츠가 끝나는 지점까지의 길이를 가진다.
  • width, height, margin, padding-top, padding-bottom 적용 불가능.
  • height 대신 line-height로 높이조절가능. 대신 span태그에서는 불가능.
  • text-align 사용 가능
  • 예시 : a, b, br, button, code, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

1
2
3

div {
display : inline
}

• inline-block
  위의 블럭과 인라인을 합친 것이라고 생각하면 되지만 그 특징이 조금 차이난다

  • width, height 적용 가능
  • margin, padding-top, padding-bottom 적용 가능
  • line-height 적용 가능
  • inline-block 끼리 공백 생성됨 -> 상위 div에 { font-size: 0; } 를 적용하면 해결가능.
  • inline-block 끼리 높이 불일치될수있음 -> vertical-align 값 적용하면 해결가능.

파이썬 인강 : 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파일인지 등등을 확인할 수 있다.

파이썬 인강 : 테이블 데이터의 수정 및 삭제

데이터베이스 다루기의 기본 명령어 CRUD를 알아야한다

• C : Create
• R : Retrieve 조회
• U : Update 수정
• D : Delete

1. 데이터베이스 사용 기본 3가지 명령어

데이터베이스를 사용할때 기본이 되는 3가지 명령어가 있다

1
2
3
4
5
6
7
8

# 1. SQLITE 불러오기
import sqlite3

# 2. DB생성(파일)
conn = sqlite3.connect('C:/Users/ratia/Documents/코딩/Fastcampus Python/Python/db/database.db')

# 3. Cursor연결
c = conn.cursor()

무엇을 하든지 위의 3가지는 기본으로 깔고 시작해야한다

2. 데이터 수정

데이터 수정 명령어에는 크게 3가지가 있다
다양한 방법으로 1번로우의 username을 kim에서 seo로 바꾸어보자

1
2
3
4
5
6
7
8
9
10
11

# 1. 데이터 수정1
c.execute("UPDATE users SET username = ? WHERE id = ?", ('seo', 1))
conn.commit()

# 2. 데이터 수정2 : 딕셔너리형태로 수정
c.execute("UPDATE users SET username = :name WHERE id = :id", {"name": 'seo', 'id': 1})
conn.commit()

# 3. 데이터 수정3 : 스트링포맷로 수정
c.execute("UPDATE users SET username = '%s' WHERE id = '%s'" % ('seo', 1))
conn.commit()

3. DB Browser for SQLite를 이용한 데이터 수정

DB Browser for SQLite를 이용해서 손쉽게 데이터를 수정할수도있다
아래 이미지에서 1번 로우의 username을 seo에서 so로 바꾸어보자

1. 먼저 데이터보기탭에서 username을 더블클릭한 뒤 오른편 인풋창에 so로 바꿔준 후 적용을 클릭한다

2. 까먹지말고 꼭 SQL실행탭에서 commit을 입력 후 run버튼을 누른다

3. 아래 터미널에 질의가 성공적으로 실행되었다는 안내메세지가 나타나면 끝!

4. 수정이 잘되었는지 확인을 위해 아래 명령어를 출력하면 수정이 잘되었음을 확인할 수 있다

1
2
3
4
5
6
7

# 1. 수정한 로우만 확인
c.execute("SELECT * FROM users WHERE id= :Id", {"Id": 1})
print('수정 잘 되었는 감?', c.fetchone())

# 2. 수정한 로우포함 전체 데이터확인
for user in c.execute('SELECT * FROM users'):
    print(user)

4. 데이터 삭제

데이터 삭제에도 다양한 방법이 있다

1. 한 줄 데이터삭제 방법
   먼저 한줄데이터를 삭제해보자
   다음 세가지는 2번째 줄 전체를 삭제하는 명령어이다

1
2
3
4
5
6
7
8
9
10
11

# 1. Row Delete1 #튜플형식
c.execute("DELETE FROM users WHERE id = ?", (2,))
conn.commit()

# 2. Row Delete2 #딕셔너리형식
c.execute("DELETE FROM users WHERE id = :id", {'id': 2})
conn.commit()

# 3. Row Delete3 #스트링포맷
c.execute("DELETE FROM users WHERE id = '%s'" % 2)
conn.commit()

2. 테이블 전체 데이터 삭제
   이번에는 테이블 전체를 삭제해보자
   간단한 명령어지만 위험하니… 신중히 사용하자 ㅋㅋㅋㅋㅋ

1

print("users db deleted : ", conn.execute("delete from users").rowcount, "rows")

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

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

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

1. Method

괄호가 있으면 다 메서드라고 부른다
매서드는 항상 Class라는 주인이 있어야 한다.

다른 사람이 만들어 놓은 매서드를 사용할 수 있다. = 라이브러리라고 부른다

예시

• main() : 메인매서드
• println() : OutputStream이라는 라이브러리안에 정의되어있는 매서드
• Scanner sc = new Scanner(System.in) sc.next(); InputStream 라이브러리에 정의되어 있는 next()매서드

2. 변수와 상수

1. 변수
   변하는 값.
   값을 저장할 수 있는 메모리 위치.
   변수를 사용하기위해서는 항상 변수선언을 데이터타입과 함께 먼저 해줘야한다.

2. 상수
   변하지 않는 하나의 값
   앞에 final이 붙는다

• 예시 PI : 3.141592…
• 사용법 : final double PI = 3.141592;

3. 배열 Array

배열이란 쉽게말해 여러개의 변수를 한꺼번에 선언하는 것이다
변수를 선언한다는 것은 메모리에 a변수가 생성이 된다는 의미이다.
배열에서는 변수갯수를 선언할 수 있다 -> int [] ar = new int[10]는 메모리에 10개의 정수 변수 생성된다는 의미이다

여기서 주의할 점은 ar1의 데이터타입은 int가 아님을 명심하자!
int[]의미는 int를 관리한느 배열타입이지 int타입이 아니다.
ar1의 데이터타입은 기본형에 포함되지않는 참조형의 데이터타입이다.

배열객체를 생성하기 위해서는 new키워드와 함께 어떤 데이터를 몇개나 저장할지에 대한 정보가 필요하다.
그렇다면 new키워드란 무엇일까?
아래 잘 설명한 블로그가 있어서 가져왔다.
참고링크 : 자바 변수들의 메모리 구조,new 키워드

배열변수선언에는 두가지 방법이 있다

3-1. 첫번째 배열선언 방법

배열생성과 배열갯수만 선언하는 방법이다
int [] ar1 = new int[3]로 배열과 배열갯수를 한꺼번에 선언. 초기화는 안됨!

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

int [] ar1;  //배열생성 : 메모리에 a변수 생성

ar1 = new int[3];  //배열갯수선언. 메모리에 3개의 정수 변수 생성. 값을 넣어주지않기때문에 초기화는 아니다

// 1번과 2번을 합쳐서 한줄로 많이 쓴다
int [] ar1 = new int[3]; // 초기화하지 않은 배열은 기본적으로 0의 값을 가진다
	ar1[0] = 0;
	ar1[1] = 0;
	ar1[2] = 0;
	
for(int i=0; i<ar1.length; i++){
	System.out.print(ar1[i]);
} //000

데이터형마다 기본값이 다르다
기본데이터형이 아닌 참조데이터형인 경우 기본값이 다르다

• 기본데이터형의 기본값은 데이터형에 따라 다르다
  • int 는 0
  • double은 0
  • char는 ‘’(빈칸)

1
2
3
4

char [] chs = new char[2];
	for (int i=0; i<chs.length; i++){
		System.out.println(chs[i]);	
	} //00 - 유니코드 -> ''''(빈칸2개)

• 참조데이터형의 기본값은 null (자바언어의 예약어이고 실제 값이 없다는 의미이다)
  • string은 null

1. String형

1
2
3
4

String [] str = new String[3];
for (int i=0; i<str.length; i++){
	System.out.print(str[i]);
} // nullnullnull

2. 참조형
   기본적으로 같은 타입을 한 배열에 넣을 수 있다.

1
2
3
4
5

Person[] p = {new Person, new Person};

SpiderMan[] sp = {new SpiderMan, new SpiderMan};

AquaMan[] aq = {new AquaMan, new AquaMan};

타입이 다른 참조형데이터를 하나의 배열에 넣을 순 없을까?
다형성을 이용하면 가능하다.
상속관계인 경우에만 타입이 다른 참조형데이터를 하나의 배열에 묶을 수 있다.

1
2
3
4
5
6

Person[] p = {new Person. new Person}

Dobject d = new Dobject[3];
d[0] = new Line();
d[1] = new Circle();
d[2] = new Reat();

3-2. 두번째 배열선언 방법

배열생성과 초기화를 한꺼번에 선언하는 방법이다

int [] ar2 = {10, 20, 30}

여기서는 new int[5]를 하지않아도 된다 왜냐면 위의 코드 자체에 변수갯수선언이 포함되어있다
이 방법은 테스트용으로 주로 사용할뿐 실무는 new int[]형태로 사용한다

1
2
3
4
5

int [] ar2 = {10, 20, 30}; //배열생성과 초기화 한꺼번에!

for(int j=0; j<ar2.length; j++){
	System.out.println(ar2[j]);
}

3. 위의 두 방법의 차이점
   일반적으로는 new int[]형태를 더 많이 쓰인다
   왜냐하면 보통 다른 파일이나 데이터베이스의 내용을 가져오기 때문에 변수갯수가 정해져있다.
   배열을 사용하려면 항상 크기를 미리 알아야한다.
   만약 배열의 크기를 모른다면 쓸 수 있는 가장 큰 수를 적어주면되지만 대신 메모리를 많이 잡아먹는다.
   그래서 사용하는 것이 Collection(컬렉션)이다

• Collection 컬렉션 :
  • 참조형데이터형태
  • 배열과 같은 역할을 하지만 크기를 모를때 사용
  • 정적 메모리 할당이 아닌 동적 메모리 할당이 되어서 필요한 만큼 공간을 계속 추가할수있다
  • 컬렉션참고링크

파이썬 인강 : 데이터베이스 연동(SQLite)

1. 커서의 위치

데이터베이스는 커서의 위치가 중요하다
데이터를 불러오고 난 다음에 커서는 해당 데이터 뒤에 위치하기때문이다

1
2
3
4
5
6
7
8

# 1개 로우 선택
print('One -> \n', c.fetchone())

# 지정 로우 선택 : size위의 숫자로 로우 갯수를 선택
print('Three -> \n', c.fetchmany(size=3))

# 전체 로우 선택
print('All -> \n', c.fetchall())

위의 명령어를 활용한 예시는 아래 이미지와 같다

터미널에서 볼 수 있듯이 1개 로우 명령어 뒤라서 커서는 1번 로우를 지난 2번로우 앞에 있다
그리고 size=3인 로우를 출력하니 2,3,4번 로우가 터미널에 출력되었음을 알 수 있다

위의 상태에서 전체 로우 print(‘All -> \n’, c.fetchall()) 명령어를 입력하면 어떻게 될까?
커서는 지금 4번로우 뒤에 위치해있기때문에 마지막 로우인 5번 데이터만 출력된다

만약 위의 상태에서 print(‘All -> \n’, c.fetchall())를 한번 더 호출하면 어떻게 될까?
커서의 위치는 마지막 로우인 5번 뒤에 있다. 따라서 호출해도 [] 빈리스트만 터미널에 출력된다.

그렇다면 처음 1번 로우를 호출하고 싶을때는 어떻게 할 수 있을까?
바로 순회하면 된다

2. 순회

순회에는 3가지방법이 있다.

1. 순회 : 변수선언 후 for in 반복문 사용
   데이터조회 명령어 c.execute(‘SELECT * FROM users’) 뒤에 실행해야 출력된다

   1 2 3

   rows = c.fetchall() for row in rows: print('retrieve1 >', row) # 조회 없음

2. 순회 : 변수선언 없이 for in 반복문 바로 사용
   데이터조회 명령어 c.execute(‘SELECT * FROM users’) 뒤에 실행해야 출력된다
   간편하기때문에 제일많이 사용된다

   1 2	for row in c.fetchall(): print('retrieve2 >', row) # 조회 없음

3. 순회
   execute(“SELECT * FROM users)는 users에 있는 전체 데이터를 조회하는 명령어이다 따라서 fetchall() 명령어와 동일한 결과값을 가진다.
   데이터조회 명령어 c.execute(‘SELECT * FROM users’) 까지 포함된 명령어로 데이터조회명령어가 따로 필요없다
   코드가 길어져서 가독성이 떨어지는 지는 단점이 있다.
   “ORDER BY id desc” 명령어를 넣어주면 역순출력이 된다

   1 2	for row in c.execute("SELECT * FROM users ORDER BY id desc"): print('retrieve3 > ', row)

순회1번과 순회2번은 함께 쓰일수없기때문에
순회2번과 순회3번의 출력값을 아래 이미지와 같다

3. WHERE Retrieve

6가지 방법이 있고 핵심이므로 꼭 다 알고 있어야한다.

1. WHERE Retrieve1
   튜플형태로 3번로우인 Lee를 출력
   fetchone()에서 3번 로우 하나만 불러왔기때문에 그 다음 명령어로 fetchall()로 전체를 불러와도 [] 빈 리스트만 출력된다

   1 2 3 4

   param1 = (3,) c.execute('SELECT * FROM users WHERE id=?', param1) print('param1', c.fetchone()) print('param1', c.fetchall())

2. WHERE Retrieve2
   튜플형태로 1번로우인 Kim을 출력
   %s :문자열형, %d:정수형, %f: 실수형
   fetchone()에서 1번 로우 하나만 불러왔기때문에 그 다음 명령어로 fetchall()로 전체를 불러와도 [] 빈 리스트만 출력된다

   1 2 3 4

   param2 = 1 c.execute("SELECT * FROM users WHERE id='%s'" % param2) print('param2', c.fetchone()) print('param2', c.fetchall())

3. WHERE Retrieve3
   이번엔 딕셔너리형태로 1번 로우출력
   id= 뒤에 :Id를 넣어준뒤 컴마찍고 딕셔너리형태로 {“Id”: 1} 첫번째로우를 호출하면 된다

   1 2 3

   c.execute("SELECT * FROM users WHERE id= :Id", {"Id": 1}) print('param3', c.fetchone()) print('param3', c.fetchall())

4. WHERE Retrieve4
   리스트형태로 파라미터 2개를 받아서 1번로우와 4번로우 출력
   파라미터 여러가지를 가져오려면 IN(?,?)로 넣으면 된다
   이젠 한개가 아니니까 fetchone()은 쓸 수 없고 fetchall()로 출력하면 된다

   1 2 3

   param4 = (1, 4) c.execute('SELECT * FROM users WHERE id IN(?,?)', param4) print('param4', c.fetchall())

5. WHERE Retrieve5
   위와 똑같은 결과값이지만 다르게 표현할 수 있다 물음표대신 정수값($d)을 넣어주면 된다
   간단하기때문에 많이 사용한다

   1 2	c.execute("SELECT * FROM users WHERE id In('%d','%d')" % (1, 4)) print('param5', c.fetchall())

6. WHERE Retrieve6
   딕셔너리형태로 1번과 4번로우 출력
   OR 사용

   1 2	c.execute("SELECT * FROM users WHERE id= :id1 OR id= :id2", {"id1": 1, "id2": 4}) print('param6', c.fetchall())

지금까지 id를 이용했지만 username, date등을 이용해서도 출력할수있다

4. Dump 출력

데이터베이스 백업 시 중요하다
아래 명령어를 실행하면 새로운 dump.sql이라는 파일이 형성되고 그 안에 작성한 데이터테이블이 백업된다.
이를 활용하여 sql에 붙여넣으면 다른 컴퓨터나 환경에서도 데이터사용가능하다
실무에서 흔히 ‘덤프떠와’ 라고 말한다.

with문을 사용하면 자동으로 close()를 해줘서 편리하다

• with open() as f: 를 실행했으므로 f.close()가 자동으로 되었고
• with conn: 을 실행했으므로 conn.close()가 자동으로 되었다

1
2
3
4
5

with conn: 
    with open('본인이 원하는 경로/dump.sql', 'w') as f:
        for line in conn.iterdump():
            f.write('%s\n' % line)
        print('Dump Print Complete.')

위의 코드를 실행시키면 출력값은 아래 이미지와 같다.