스파르타코딩클럽 웹개발종합반 1주차 개발일지

Hanal·2021년 9월 19일

CSS JavaScript html 개발일지 스파르타코딩클럽 웹개발 종합반

스파르타코딩클럽 웹개발종합반 필기

목록 보기

1/5

0. window 기준 단축키 모음

-전체선택: ctrl+A
-잘라내기: ctrl+X
-코드정렬: ctrl+alt+L
-들여쓰기: Tab
-들여쓰기 취소: shift+Tab
-주석: ctrl+/ (다시 ctrl+/를 누르면 주석이 취소된다.)
-모든 토글을 열고 닫는 단축키: ctrl+alt+t
-줄 바뀜: Shift+Enter

1.서버/클라이언트/웹의 동작 개념

1-1. 웹의 동작 개념 (HTML을 받는 경우)

-우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 '받아서','그려주는' 것.
즉, 브라우저가 하는 일은 1)요청을 보내고, 2)받은 HTML 파일을 그려주는 일 뿐.

1-2. 웹의 동작 개념(데이터만 받는 경우)

-항상 HTML만 내려주는 건 아니다. 데이터만 내려 줄 때가 더 많다.
-예시: 공연 티켓을 예매하고 있는 상황에서 좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 난감하겠죠? 이럴 때! 데이터만 받아서 끼우게 된답니다.

2. HTML, CSS 기본 내용

2-1. HTML은 뼈대, CSS는 꾸미기!

2-2. HTML 기초

1) HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
2) head 안에 들어가는 대표적인 요소들: meta, script, link, title
3) body 안에 들어가는 대표적인 요소들:
-개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣기.

※정렬의 중요성
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용해보세요.

3. 부트스트랩, 예쁜 CSS 모음집

3-1. bootstrap이란?

예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

3-2. 부트스트랩 시작 템플릿

코드를<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html> 입력하세요

3-3. 부트스트랩 컴포넌트(4.0)

https://getbootstrap.com/docs/4.0/components/alerts/

4. 메모

1) 가운데로 가져오려면 똑같이 width, margin를 활용합니다.

width: 500px;
margin: auto;

2) margin 크기는 시계방향 순서!

margin: px(위) px(오른쪽) px(아래) px(왼쪽);

3) 글 속성을 강제로 박스로 만들어 주는 것

display: block;

4) 이 세 줄은 항상 같이 다닌다.

background-image: url(“);
background-position: center;
background-size: cover;

5) 경계선과 내부 요소의 간격은 padding으로 조절.

6) span은 특정 글자의 크기 등을 만들고 싶을 때.

5. Javascript 맛보기

1) 자바스크립트란?

-프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.
-이론 설명 때, 클라이언트가 서버에 요청하면, 서버가 클라이언트에게
HTML+CSS+Javascript를 준다고 했던 것, 기억하시나요?

♤잠깐 상식!
Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?

A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.

Q. Java와 Javascript는 어떤 차이가 있나요?

A. 인도와 인도네시아..
바다와 바다코끼리..

아무 관련 없습니다.

2)자바스크립트 기초

(1) HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기
(2) 함수 만들어두기

function hey(){
	alert('안녕!');
}

<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다.

(3) 버튼에 함수를 연결하기.

<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

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

3-1. Javascript 기초 문법 맛보기
(1) 크롬 개발자도구를 열어서, console 탭에 작성.
그냥 쉽게, "마우스 오른쪽 클릭 -> 검사 -> console"도 가능

Q. 크롬 개발자도구 콘솔창은 어떤 의미?
A. 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다. 새로고침하면 모두 사라진다는 사실!

윈도우: F12
맥: alt(option) + command + i

(2)console.log(변수)

console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

3-2.변수 & 기본연산

(1)변수
1. let 뭐 하면은 이것은 박스다. 변수는 값을 담는 박스다.
2. 문자열도 담을 수 있는데 문자열은 작은 따옴표가 붙는다.(큰 따옴표 써도 괜찮)
3. 변수 이름을 지정할 때는 그럴싸하게 짓는다. 남이 봐도 알아보기 쉽게 짓는다.

변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"(2를 a라는 변수에 넣는다)
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라고 합니다. 회사마다 규칙이 있죠.

과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!


(2)리스트
- 리스트: 순서를 지켜서 가지고 있는 형태.
 리스트 자료형은 순서가 중요한 담기.
 
 let a_list = ['수박','참외','배']
 리스트는 이렇게 꺽쇠로 쓰는 거예요.

a_list[0]
'수박'
컴퓨터는 셀 때 0부터 세요. 그래서 0번째는 수박이고요.

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, "헤이"] 를 출력

// 리스트의 길이 구하기

(3)딕셔너리:키(key)-밸류(value) 값의 묶음
딕셔너리형은 우리가 정말 일상 생활에서 많이 쓰는 거예요.
예를들면, 제가 너 생일이 언제니? 
이렇게 물어보면 그 생일이라는 단어에 대응되는 날짜를 우리가 얘기를 해달라는 거죠. 
다시 말하면, 생일이라는 키(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}을 출력

가지고 올 때는 [꺽쇠]로, 선언할 때는 {중괄호}로.
**(4)☆리스트와 딕셔너리의 조합**

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'


Q.왜 필요할까요?
A.순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

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

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


#### 4)  Javascript 기초 문법 배우기(2)
4-1. 함수
--기본 생김새

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

--예시

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

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


4-2. 조건문
--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)

--AND 조건과 OR 조건!

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

// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}

is_adult(25,'남')


4-3. 반복문
--예를 들어 0부터 99까지 출력해야 하는 상황이라면!

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!

--반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

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

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.


--그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요

[코드스니펫] 반복문 예제1

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}

--리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
다시 아래를 복사 붙여넣기 해볼까요?

[코드스니펫] 반복문 예제2

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]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,