[패스트캠퍼스python] 데이터베이스 연동(SQLite)

파이썬 인강 : 데이터베이스 연동(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.')

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

[패스트캠퍼스python] 외부파일 CSV, 엑셀 읽기 및 쓰기

파이썬 인강 : 외부파일 CSV, 엑셀 읽기 및 쓰기

1. CSV 읽기, 쓰기

위의 예제를 차근차근 보자
with open(작성한 파일을 저장할장소/저장할 파일명, ‘w’(작성한다는는 의미), newline=’’) as f:

  1. newline=’’
    이 의미는 이 부분이 없으면 한 줄씩 띄어쓰기로 for문을 순회하면서 데이터가 자동저장된다
    하지만 데이터 양이 많을수록 용량도 커지고 쓸데없이 불편할 수 있다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1,2,3

    4,5,6

    7,8,9,

    10,11,12

    13,14,15

    16,17,18
    그래서 ‘’빈칸을 넣어서 띄어쓰기를 없애는 것이다
    newline=’’을 적용하면 아래와 같이 결과값이 출력된다

  1. writerow()와 writerows()의 차이점
  • writerow()는 한줄씩 띄어쓰기하여 입력된다 -> for문을 썼기에 순회하면서 전체 내용이 출력되었다.
  • writerows() 한줄씩이 아닌 전체데이터가 입력된다.(for문 반복없이 한번에 입력)

한줄씩 순회하면서 입력 방법(writerow)와 한꺼번에 전체데이터를 입력하는 방법(writerows)은 각각의 장점이 있다
예시로 회원가입목록에서 1950년생이하는 빼고 데이터를 출력하고싶을때 if조건문으로 필터링을 걸어줘서 writerow이 유용하게 쓰인다

2. 엑셀 쓰기 읽기

엑셀을 처리하는 오픈소스 : openpyxl, xlsxwriter, xlrd, xlwt, xlutils
여러가지 방법이 있지만 pandas를 가장 많이 사용한다
그 이유는 pandas는 최다사용오픈소스인 openpyxl, 랭킹 1위인 xlrd를 내부적으로 만능으로 사용할 수 있기때문이다

pandas를 이용하기 위해서는 아래 3가지를 다운로드해줘야한다
1. pip install xlrd
2. pip install openpyxl
3. pip install pandas


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

SQLite는 기본적으로 설치가 되어있다. 따라서 따로 설치할 필요없이 바로 import하면 된다

1. 테이블 생성 및 삽입

import datetime
import sqlite3

2. 삽입 날짜 생성

많이 쓰니까 꼭 알기

1
2
now = datetime.datetime.now()
print('now', now)

보기 불편하니까 포맷을 만들면 익숙한 시간형식으로 나타낼수있다

1
2
nowDatetime = now.strftime('%Y-%m-%d %H:%M:%S')
print('nowDatetime', nowDatetime)

3. DB생성 & Autocommit 그리고 커밋

본인 DB 파일 경로로 설정해주면된다
isolation_level=None 을 넣었을 경우 자동으로 커밋 반영(Auto Commit)해준다.
설정하지 않았다면 수정 후 conn.commit() 명령어를 입력해야지만 반영된다

1
conn = sqlite3.connect('본인DB파일경로/database.db', isolation_level=None)

4. Cursor연결

1
2
c = conn.cursor()
print('Cursor Type : ', type(c))

5. 테이블 생성

데이블에서 쓰일 수 있는 Datatype에는 총 5가지가 있다

  • TEXT
  • NUMERIC
  • INTEGER
  • REAL
  • BLOB
1
2
3
c.execute(
"CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, username text, email text, phone text, website text, regdate text)")
#AUTOINCREMENT

6. 데이터 삽입

삽입에는 크게 두가지 방식이 있다

  1. 첫번째방법
    ? 를 넣는 이유는 위에서 만들었던 데이터(“nowDatetime,”)를 넣게되면 스트링형식으로 들어가기때문에 ?를 주고 뒤에 매개변수로 튜플형태로 입력한다
1
c.execute("INSERT INTO users VALUES (1 ,'Kim','Kim@naver.com', '010-0000-0000', 'Kim.com', ?)", (nowDatetime,))
  1. 두번째 방법
    ?의 갯수와 삽입할데이터의 갯수를 순서대로 일치시켜줘주면된다
1
c.execute("INSERT INTO users(id, username, email, phone, website, regdate) VALUES (?, ?, ?, ?, ?, ?)", (2, 'Park', 'Park@naver.com', '010-1111-1111', 'Park.com', nowDatetime))

7. Many 삽입(튜플, 리스트형태를 삽입가능)

가장 중요한 부분이다!
Many는 이름 그대로 대용량 데이터를 삽입하는 방법으로 튜플이나 리스트형태를 삽입가능하다

1
2
3
4
5
6
7
userList = (
(3, 'Lee', 'Lee@naver.com', '010-2222-2222', 'Lee.com', nowDatetime),
(4, 'Cho', 'Cho@naver.com', '010-3333-3333', 'Cho.com', nowDatetime),
(5, 'Yoo', 'Yoo@naver.com', '010-4444-4444', 'Yoo.com', nowDatetime)
)

c.executemany("INSERT INTO users(id, username, email, phone, website, regdate) VALUES (?, ?, ?, ?, ?, ?)", userList)

웹상에서 입력받은 데이터를 sqlite를 통해서 장고의 경우, orm을 통해서 대용량데이터를 입력할 수 있다

8.테이블 데이터 삭제

지우는 명령어는 conn.execute(“delete from users”)지만 몇개의 행을 지웠는지까지 확인할 수 있는 아래 명령어를 쓰는 것이 더 좋다

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

9. 롤백

되돌리기를 뜻하며 커밋한 걸 되돌리는 것이다.

1
conn.rollback()

10. 접속 해제

DB를 다 사용했을때는 꼭 접속 해제 명령어를 입력해줘야한다.

1
conn.close()
데이터베이스기초활용

데이터베이스기초활용

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

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

Read More
HTML 목록 태그, 정의태그, 글자관련태그

HTML 목록 태그, 정의태그, 글자관련태그

목록 태그

HTML 목록 종류 3가지

-<ol>태그 : Ordered List 순서 있는 목록
-<ul>태그 : Unordered List 순서 없는 목록
-<li>태그 : 정의 목록

목록을 <ol>태그로 만들든 <ul>태그만들든간에 <li>태그는 항목을 나타내므로 모든 곳에 필수로 들어가야한다

1
2
3
4
5
6
7
8
9
10
11
12
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

목록태그 앞의 모양 바꾸기

  • ol태그 : 1/a/A/i/I
    ol태그 전체 비교
  • ul태그 : disc/circle/square/non
    ul태크 전체 비교




정의 태그

<dl>태그<dt>태그 <dd>태그가 세트이다

<dt>태그 는 정의내리는 대상
<dd>태그 는 정의 내용

사실 잘 사용하지 않는 태그지만 기억해두면 필요할때 요긴하게 쓸 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h2> 자신을 4가지 관점으로 정의</h2>
<dl>
<dt>E</dt>
<dd>외향적 : 에너지가 밖으로 흐르며 사람을 만나는 것을 좋아하고 사람을 만남으로써 에너지를 얻는다.<br>
반대성향으로는 I 내향적이 있다.
</dd>
<dt>N</dt>
<dd>직관적 : 숲을 보려는 경향이 있고 아이디어나 육감에 의존하며 주의 초점은 미래와 가능성이다. 따라서 미래지향적으로 새로운 시도를 하는 것을 좋아하며 가능성과 의미를 추구하고 변화와 다양성을 좋아한다<br>
반대성향으로는 S 감각형이 있다. 이는 나무를 보려는 경향으로 실재의 경험, 오감에 주의초점이 있어 현실 수용과 관례를 따르는 결향이 있다.
</dd>
<dt>F</dt>
<dd>감정형 : 주관적 판단에 의존하며 주된 관심주제는 사람, 관계이다<br>
반대성향은 T 사고형이있으며 객관적 판단에 의존하고 주된 관심주제는 사실과 진실이다.
</dd>
<dt>J</dt>
<dd>판단형 : 정리정돈과 계획성이 있다 뚜렷한 기준과 자기의사가 있으며 신속한 결론을 내리고 분명한 목적의식이 있다.<br>
반대성향으로는 P 인식형이 있고 상황에 맞추는 개방성과 목적과 방향의 변화가 상대적으로 쉽다.
</dd>
</dl>
</dl>




글자 관련 태그

1
2
3
4
5
6
7
8
small tag : <small>Make font size smaller </small>

sup tag : <sup>supppp 윗첨자</sup>(ex)300m<sup>2</sup>의 땅이 있었으면 좋겠다

sub tag : <sub>subbbb 아래첨자</sub>
(ex)내가 아는 원소기호는 H<sub>2</sub>O

mark tag : <mark>형광펜효과</mark>
DDL vs DML vs DCL

DDL vs DML vs DCL

SQL 명령어

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

Read More

[패스트캠퍼스python] 예외처리

파이썬 인강 : 예외처리

완벽한 코딩은 없다. 여러 사람이 함께 작업한다한들 예외는 언제든지 나타날수있다
만약 미세한 코딩으로인해 수백명이 결제하는 회사 시스템에 예외가 발생해버린다면 그 손해는 막심할 것이다.

1. 예외 종류

  • SyntaxError
  • TypeError
  • NameError
  • IndexError
  • ValueError
  • KeyError.. 등등

요즘은 문법적으로 에러는 없지만 코드 실행(런타임) 프로세스에서 발생하는 예외 처리가 중요하다
에디터에서 linter가 문법적인 에러를 잡아주기때문에 걱정없지만 런타임에서 발생하는 에러에 주의해야한다

항상 예외가 발생하지 않을 것으로 가정하고 먼저 코딩
그 후 런타임 예외 발생 시 예외처리 권장(EAFP 코딩 스타일)

1. SyntaxError : 잘못된 문법

문법적인 에러는 보통 linter가 잡아준다

1
2
3
4
5
print('test)     # ' 누락

if True # : 누락
pass
x => y # 작거나 같다는 >=로 해야함

2. NameError : 참조 변수 없음

1
2
3
a = 10
b = 15
print(c) # 예외 발생

3. ZeroDivisionError : 0 나누기 에러

모든 언어에 있는 에러이고 런타임에서 발생하는 에러이기에 중요하다

1
print(10 / 0)

4. IndexError : 인덱스 범위 오버

자주 발생하는 에러

1
2
3
4
5
6
7
8
9
x = [10, 20, 30]

print(x[1])
print(x[3]) # 예외 발생
print(x.pop())
print(x.pop())
print(x.pop())
print(x.pop()) # 예외 발생
print(x.pop(50)) # 예외 발생

5. KeyError

주로 딕셔너리에서 나오는 에러이다

1
2
3
dic = {'name': 'Kim', 'Age': 33, 'City': 'Seoul'}

print(dic['hobby']) # 키가 존재하지 않으면 예외

이런 에러를 방지하기 위해 get매서드를 사용하면 좋다

1
print(dic.get('hobby')) # 안전

6. AttributeError : 모듈, 클래스에 있는 잘못된 속성 사용시에 예외

1
2
3
4
x = [1, 2, 3]
print(x.append(4))
print(x)
print(x.add(10))

출력값은

list는 add가 없기에 AttributeError발생한다

7. ValueError : 참조 값이 없을 때 예외

1
2
3
4
t = (10, 100, 1000)

print(t.index(100))
print(t.index(7)) # 예외 발생

8. FileNotFoundError

외부파일을 불러와서 처리할때 자주 발생

터미널에 보면 디렉토리 내에 찾을 수 없다고 나온다

9. TypeError : 자료형에 맞지 않는 연산을 수행 할 경우

1
2
3
4
5
6
x = [1, 2]
y = (1, 2)
z = 'test'

print(x + y) # 예외 발생(튜플과 리스트를 결합할수없다 -> 그래서 형변환이 중요)
print(sum([1,2,3],10,1)) # 예외 발생(자료형불일치)

2. 예외 처리 기본

아래 예외 처리는 기본중의 기본이므로 꼭 알아둬야한다.

1
2
3
4
5
6
try               에러가 발생 할 가능성이 있는 코드 실행
except 에러명1: 에러가 발생하면 여기서 처리(여러 개 가능)
except 에러명2:
except 에러명3:
else: try 블록의 에러가 없을 경우 실행
finally: 항상 실행

이를 활용한 예시

1
2
3
4
5
6
7
8
try:
z = 'Kim' # 'Cho' 예외 발생
x = name.index(z)
print('{} Found it! {} in name'.format(z, x + 1))
except: # 모든 에러를 처리(Exception)
print('Not found it! - Occurred ValueError!')
else:
print('ok! else!')

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 + "학점")