스파르타 코딩클럽 웹 개발 종합반이 2월 7일 개강했다. 맛보기가 아닌 완주를 목표로 수강하기 시작한 첫 번째 강의이다. 디자이너로 커리어를 시작하여 정신 차려보니 3년 째 워드프레스로 웹사이트를 만들고 있었고, CSS 와 잡다한 지식은 많이 늘었지만 사수 없이 일하다보니 프로젝트를 계속 해도 전혀 성장하지 못하는 기분이었다. 프론트엔드 개발자로 커리어 전환을 결심하고 여러가지 계획을 세우고 첫 강의를 수강하기 시작하니 즐거워졌다. 매일 퇴근 후 지쳐서 유투브만 보던 때보다 훨씬 생산적인 일상을 보내고 있다.

---

1. 웹의 동작 개념

• 서버와 클라이언트 / 브라우저의 역할
• HTML / CSS / Javascript 의 역할
• 서버는 클라이언트에게 데이터를 보낸다

2. HTML / CSS

• PyCharm 은 Python 을 사용하기 편한 프로그램
• h1 은 문서의 제목이니 꼭 필요하다
• HTML 요소들은 글 속성과 박스 속성으로 나뉘기 때문에 글 속성 요소를 박스처럼 꾸미고 싶다면 display: block 을 적용해야 한다
• 구글 웹 폰트를 링크 연결하여 사용하는 방법
• CSS 를 외부 파일로 작성해 링크 연결하는 방법

background-size: cover / contain

✔️ 항상 헷갈리던 CSS 개념이었는데 이번 기회에 정리할 수 있었다.

cmd + option + L : 코드 정렬 in PyCharm
cmd + / : 코드 선택하고 누르면 주석으로 변경

✔️ VS Code 만 사용해보았는데 PyCharm 을 사용해보니 또 새롭고 단축키는 공통으로 사용 되는 것도 있고 아닌 것도 있는 듯 하다.

3. Bootstrap

• Bootstrap 템플릿으로 시작하기
• getbootstrap
• 다른 사람이 만든 CSS 시스템과 HTML 예시를 링크로 가져와서 사용하는 것
• 홈페이지의 Documentation 탭에서 원하는 요소를 선택하여 복사하여 사용한다
• 기존 class 를 지우지 않고 새로운 class 를 추가하여 여러 개의 class 를 중첩하여 적용 시키는 것이 좋다
• 코드가 길어져 보기 불편하다면 div 를 접어서 간단하게 만들어두자

✔️ 버전이 계속 업데이트 되니 확인해야 한다

Quiz

• CSS 검색 추천 사이트
• w3schools
• MDN Web Docs

4. Javascript

• 브라우저가 알아들을 수 있는 프로그래밍 언어
• 최초로 브라우저와 서버를 개발할 때 Javascript 를 표준으로 설계하였기 때문이다
• Java 와 Javascript 는 전혀 다른 언어이다
• 개발자 도구의 Console 탭은 HTML 파일의 script 코드와 이어지므로 파일 내에서 선언한 함수를 불러와서 사용할 수 있다

4-1. 변수

• 변수는 값을 담는 박스
• 숫자 뿐만 아니라 문자열도 담을 수 있다
• 문자열을 담을 때에는 큰 따옴표 “” / 작은 따옴표 ‘’ 안에 문자열을 넣어야 한다
• 문자열을 더하면 문자열이 순서 대로 배치 된다

let first_name = 'eunyoung'
let last_name = 'kim'

first_name+last_name

‘eunyoungkim'

✔️ 문자열과 숫자를 더하면 문자열 뒤에 숫자가 나온다

4-2. 자료형 - List

• List 자료형은 순서가 중요한 담기
• 괄호 [] 안에 쉼표 ,로 구분하여 작성한다
• 프로그래밍 언어는 항상 0 부터 순서를 시작한다

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

a_list[0]
'수박'

a_list[1]
'참외'

a_list[2]
'배'

• List 에 새로운 것을 추가할 수 있다

a_list.push('감')

4-3. 자료형 - Dictionary

• Dictionary 자료형은 해당 key 값에 대응 되는 value 값을 담는 것이다
• List 자료형과 다르게 순서가 중요하지 않다
• 선언할 때는 괄호 {}와 기호 :를 사용하고 값을 불러올 때는 괄호 []를 사용한다

let a_dict = {'name':'bob','age':27}

a_dict['name']
'bob'

a_dict['age']
27

• Dictionary 에도 새로운 것을 추가할 수 있다

a_dict['height'] = 180

a_dict
{name: 'bob', age: 27, height: 180}

✔️ 확실히 이 부분부터 잘 이해가 안 되기 시작했다
✔️ 처음 선언할 때는 {} 괄호를 사용하는데 왜 추가할 때는 [] 괄호를 사용할까?
✔️ 그래도 이 부분은 이 글을 작성하며 다시 읽어보니 이해가 되는 듯 하다

• Dictionary 에 List 를 추가할 수 있다
• Dictionary 와 List 는 서로의 요소로 사용 될 수 있다

a_dict['fruits'] = a_list
(4) ['수박', '참외', '배', '감']

a_dict
{name: 'bob', age: 27, height: 190, job: 'female', fruits: Array(4)}

a_dict['fruits'][2]
'배'

4-4. 함수

• %는 나눗셈의 나머지를 구하는 함수
• 트래픽을 균등하게 나눌 때나 짝수와 홀수를 구분할 때 사용한다

let a = 100

a % 8
4

• 등호도 여러가지가 존재한다
• 변수를 선언할 때 = 기호를 사용하기 때문에 서로의 값이 같다는 것을 표현할 때는 == 기호를 사용한다
• 변수의 값이 서로 같지 않다는 것을 표현할 때는 != 기호를 사용한다

let a = 100

a < 150
true

a > 200
false

a == 100
true

a != 100
false

• split 은 어떤 문자열을 기준으로 문자열을 나누는 함수이다
• 예시와 같이 사용하면 어떤 도메인의 이메일인지 판별할 수 있다

let myemail = 'sparta@gmail.com'

myemail.split('@')
(2) ['sparta', 'gmail.com']

myemail.split('@')[1]
'gmail.com'

myemail.split('@')[1].split('.')
(2) ['gmail', 'com']

myemail.split('@')[1].split('.')[0]
'gmail'

• 꼭 위와 같은 풀이 과정을 거쳐서 최종 코드를 작성하는 습관을 기르자
• 한 번에 최종 코드를 만들겠다는 욕심을 버리자

• 프로그래밍 언어에서 함수는 정해진 동작을 수행하는 것이다

function mysum(num1, num2){
    alert('안녕!')
    return num1+num2
}

let result2 = mysum(2, 3)

result2
5

✔️ 이 부분도 조금 의문이었다
✔️ 변수를 선언한 단계에서 이미 alert 가 실행 된다
✔️ 이 부분은 조금 더 찾아봐야 이해할 수 있을 듯 하다

• 괄호 () 안에 아무것도 넣지 않아도 함수 실행이 가능하다
• alert 창이 연속으로 실행 된다

4-5. 조건문

• if / else 구문

let sex = '남성'

if (age > 20 && sex == '남성') {
    console.log('성인 남성입니다')
} else {
    console.log('청소년입니다')
}

성인 남성입니다

• && 는 양쪽 모두 조건을 만족한다는 뜻의 AND 의 기호이다
• || 는 양쪽 중 하나의 조건을 만족할 때 사용하는 OR 의 기호이다
• 세 가지 조건 중 하나일 때는 if / else if / else 구문을 사용한다

if (age > 20) {
    console.log('성인입니다')
} else if (age > 7) {
    console.log('청소년입니다')
} else {
    console.log('아동입니다')
} 

4-6. 반복문

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

0
1
2
3
4
5
6
7
8
9 

• ++ 는 1 씩 추가하는 기호이다
• i 가 10 과 같아질 때까지 함수 실행을 반복한다

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

people.length
6

for (let i = 0; i < people.length; i++) {
    console.log(people[i])
}

철수
영희
민수
형준
기남
동희

✔️ 또 궁금한 것이 생긴 부분
✔️ List 에 담긴 개수를 세는 함수 같은데 왜 length 라고 부를까?

• List 를 한 바퀴 돌아라 라는 뜻의 반복문으로 자주 사용 된다

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30}
]

scores[0]
{name: '철수', score: 90}

scores[1]
{name: '영희', score: 85}

scores[1]['score']
85

• List 에 들어가는 하나의 요소에 여러 값을 넣을 때에는 괄호 {}를 사용한다
• List 에 Dictionary 를 요소로 넣은 형태

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i])
}

{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++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name, score)
}

철수 90
영희 85
민수 70
형준 50
기남 68
동희 30

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    if (score < 70) {
        console.log(name, score)
    }
}

형준 50
기남 68
동희 30

for (let i = 0; i < bikes.length; i++) {
    let name = bikes[i]['stationName']
    let bike = bikes[i]['parkingBikeTotCnt']
    if (bike < 1) {
        console.log (name, bike)
    }
}

161. 무악재역1번 출구 0
163. 명지전문대학교 정문 앞 0
176. 명지대학교 도서관 0
178. 증산3교 앞 0
192. 연서어린이공원 0

• 데이터에서 특정 조건의 데이터만 추출하는 방법으로 자주 사용 되니 연습하자

---

Javascript 에서 모르는 부분이 너무 많아 예시를 모두 적다보니 글이 길어지게 되었다. 그래도 강의를 듣는 것도, 숙제를 하는 것도, 또 이 글을 쓰는 것도 너무 즐거웠다. 이런 글을 쓰는 것 자체가 정말 오랜만이라 어떻게 해야 할지 고민이었는데 수업 중에 필기를 열심히 해둔 보람이 있다. velog 도 항상 읽기만 했었는데 마크다운 (markdown) 작성법도 찾아보고 사용해보니 더욱 보람차다. 이 글을 쓰느라 2주차 강의도 벌써 지각이지만, 이번 주도 화이팅! 👍