[스파르타코딩클럽] 웹개발 종합반 - 1주차

1주차 숙제로 만들어본 팬미팅 사이트

 

 

항해99 부트캠프 6기에 합류하기에 앞서 사전준비로 웹개발종합반을 듣게 되었다.

전반적으로 수강시간이 짧은 편이라 수강하는데 부담감이 덜해서 좋았고,

이전에 배워서 대략적으로 기억하고 있던 프런트엔드를 다시 복습하는 겸 공부하고

기초 다지기로 실습까지 할 수 있어서 좋았다 : )

TIL 형식의 블로그는 처음이라 어색하기도 하지만, 오늘부터 꾸준히 잘 사용해봐야겠다!

티끌모아 태산이라고, 내가 오늘 배운 내용들을 복습 겸 정리로 잘 사용한다면 미래의 나에게 

큰 도움이 될 수 있지 않을까 싶다 😊

 

 

[수업 목표]

• 서버와 클라이언트의 역할에 대해 이해한다.
• HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
• Javascript 기초 문법을 익힌다.

 

1. HTML, CSS 

간단하게 HTML은 뼈대이고, CSS는 꾸미기이다.

• HTML은 크게 head와 body로 구성된다.
• head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
• html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다!

 

HTML과 CSS로 만들어본 로그인 페이지 

 

 

* 구글폰트 사용법 👍

• https://fonts.google.com/?subset=korean (구글폰트 사이트)

 

- 예전에 학원에서 배웠는데 까먹고 있다가, 다시 사용할 수 있게 되서 좋았다 : ) 

이제 잊지 않고 잘 써먹어야겠다 !! 😊

 

* 부트스트랩 사용 👍

 

부트스트랩을 사용하여 만든 페이지 

 

- 예전에 혼자서 부트스트랩을 사용해보려고 했는데 잘 안되었던 기억이 있다. 

그런데 강의를 차근 차근히 따라가다보니 부트스트랩 사용법을 쉽게 익힐 수 있어서 좋았다 ! 

 

* 모바일 처리하기 👍

 

 

- 모바일 처리를 함으로써, PC화면과 더불어 모바일에서도 유연하게 화면을 보여줄 수 있다. 

 

2. JavaScript 

1) 기초문법 배우기(1)

* let 으로 변수를 선언해줍니다.
let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

* 사칙연산, 문자열 더하기가 기본적으로 가능합니다.
let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

* 변수명 정하기
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
다른 특수문자 또는 띄워쓰기는 불가능합니다!

* 리스트 
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) 값의 묶음
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'

 

* 왜 필요할까 ? 

순서를 표시할 수 있고, 정보를 묶을 수 있기 때문에 ! 

예를들어... 

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 함수를 이용해 간단하게 대응할 수 있습니다.

 

* 특정 문자로 문자열을 나누고 싶은 경우

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 -> 간단하게 쓸 수도 있다!

 

2) 기초문법 배우기(2)

* 함수 
// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

EX) 
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

* 조건문 
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

* if, else if, else if, else if else
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

* 반복문 
for (let i = 0; i < 100; i++) {
	console.log(i);
}

* 딕셔너리가 들어가 리스트와 for문 
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점 미만인 사람들의 이름만 출력할 수도 있습니다.

 

* 미세먼지 측정하기 

예제로 JavaScript를 사용하여 실제 서울의 미세먼지 데이터를 가져와서 consol.log에 찍어보았다.

이런 방식으로 다양한 데이터를 나의 요구의 맞춰서 추출해내서 유용하게 사용할 수 있을 것 같다.