웹개발 종합반 1주차 수강일지

* 코드는 화려한 것보다 동작하게 짜는것이 가장중요
1. 어떻게 더 깔끔하게 짜는지
2. 왜 깔끔하게 짜야하는지 순으로 배워나가면 된다

 

* 함수 : 부르면 정해진 동작을 하는 것

 

* 팁

• ctrl+alt+L : 줄정렬(블록지정한 후)
• css 구글링시 w3schools, mdn 활용

1주차 첫 수업

브라우저의 역할: 서버에게 요청하고 정보를 받아와서 보여주는 역할

HTML : 뼈대
CSS : 예쁘게 꾸미는것
JavaScript : 움직이게 하는역할
(유일하게 browser가 알아들을 수 있는 언어)

tag종류
div : 구역을 나눌때 사용
span : 특정글자를 꾸밀때 사용
a href: 하이퍼링크

CSS
padding: 안쪽여백, margin: 바깥쪽여백
"*" : 모든 태그에적용 시키고 싶을때
- 폰트 적용
head안 (title밑에) 폰트링크 복붙
style안 css복붙

forms 는 div로 바꿔서 사용(강의진행중에는)

*자바스크립트문법
let : 변수선언
console.log() : 출력

---

• 리스트: 순서를 지켜서 가지고 있는 형태입니다.

리스트 내의 각각의 데이터에는 순서가 있으며, 이를 인덱스(index) 라고 한다.

인덱스는 0부터 카운트한다. (1부터 아님)

```jsx
let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력
```

• 딕셔너리: 키(key)와 값(value)이 한 쌍이 하나의 대응 관계를 가지고 있는 자료형
  딕셔너리 = { 키: 값 }
  주의해야할 점:
  - 키 값은 중복 될 수 없습니다.
  - 키 값에 list, set이 올 수 없습니다.

  ```jsx
  let a_dict = {}  // 딕셔너리 선언. 변수 이름은 아무렇게나 가능!
  
  // 또는,
  
  let b_dict = {'name':'Bob','age':21} // 로 선언 가능
  b_dict['name'] // 'Bob'을 출력
  b_dict['age'] // 21을 출력
  
  b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
  b_dict // {name: "Bob", age: 21, height: 180}을 출력
  ```

 

• 리스트와 딕셔너리의 조합 
• names = [{'name':'bob','age':20},{'name':'carry','age':38}] // names[0]['name']의 값은? 'bob' // names[1]['name']의 값은? 'carry' new_name = {'name':'john','age':7} names.push(new_name) // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] // names[2]['name']의 값은? 'john'

정리

• 리스트 : names = ['bob', 'carry', 'andy]
  딕셔너리 : names = { 'name' : 'bob', 'age' : 20}, {'name' : 'carry', 'age' : 38 }
• 조합
  articles = [ { 'title' : '그린북', 'url' : '12313'}, {'title' : '가버나움', 'url' : 17575} ]
• 불러오기
  articles[0] -> { 'title' : '그린북', 'url' : '12313'}
  articles[0][title] -> 그린북

 

 

💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듭니다.)

👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]

✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.

리스트형식(대괄호)
데이터추가: 변수.push(데이터)

let a_list = ['수박', '참외', '배']
a_list[0]
'수박'

사전형식(중괄호)
데이터추가: 변수['age'] = 27

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

나머지 : %(짝수, 홀수 구분)
같다 : ==
같지않다 : !=
데이터분리 : 변수.split(데이터)

let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com'] 
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다

-> let result2 = result[1].split('.')에서
나눠준다음 [1]꼭 붙여줘야 나눠진게 result2에 들어간다

 

* 함수

if.else

// AND 조건은 이렇게
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

반복문 for ++뒤에 ;안붙임

let people = ['철수','영희','민수','형준','기남','동희']
for (let i =0; i < people.length; i++){
    console.log(people[i])
}

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
	console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

참고

for (let i =0; i < mise_list.length; i++){
    let gu_name = mise_list[i]['MSRSTE_NM']
    let gu_mise = mise_list[i]['IDEX_MVL']
    if (gu_mise > 40){
    console.log(gu_name,gu_mise)
    }
}