👩🏻‍💻 웹개발종합반 수업 1주차.

나는 시각디자인 >> 웹디자인 >> 프론트엔드 >> 코딩배우자! 라는 루트를 타고 와서 이렇게 웹개발 수업을 듣고 있다. 긴 시간은 아니지만 디자인 에이전시에서 잠깐 일하는 동안 한계와 부족함을 많이 느꼈고, 어떻게 하면 좀 더 넓은 커리어를 만들 수 있을까 고민하다보니 자연스레 개발에 눈을 돌리게 된 것 같다.

개발자는 계속해서 공부해야 하는 직업인 만큼 기록이 중요한 것 같아 개발일지를 꾸준히 써보려고 한다. 공부한 내용도 확실히 정리하고, 나중에 봤을 때 내가 얼마나 발전했는지 알 수 있도록 자세히 기록할 계획이다.

#공부노트

HTML & CSS 개념

HTML : 뼈대. 구역과 텍스트를 나타내는 코드.

CSS : 꾸미기. 뼈대를 잡은 구역을 꾸며주는 역할.

HTML의 style 속성으로 꾸밀 수도 있지만 별도의 CSS 파일로 분리해서 사용하는 것이 효율적이다.

HTML⭐️

크게 head와 body로 구성.

head : 페이지의 속성 정보. 페이지의 속성을 정의하거나, 정의에 필요한 스크립트들. e.g. meta, script, link, title, etc

body : 페이지의 내용

body에 자주 쓰이는 요소

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

CSS⭐️

자주 쓰이는 CSS 요소

배경관련 : background-color, background-image, background-size

사이즈 : width, height

폰트 : font-size, font-weight, font-family, color

간격 : margin, padding

외에도 수많은 것들이 있고 모두 외울 순 없으니 구글링해서 찾을 것!
(mdn, w3schools 등 참고)

Bootstrap

부트스트랩 : 미리 만들어놓은 예쁜 CSS를 모아둔 것

CSS를 다룰 줄 아는 것과 미적 감각을 발휘해 예쁘게 만드는 것은 다른 문제이기 때문에 현업에서는 미리 완성된 부트스트랩을 가져오는 경우가 많다.

수업에서 부트스트랩을 가져온 사이트는 getbootstrap.com이다. 다운 받아 사용하려면 Starter template를 먼저 html에 붙여넣어야 한다.

Javascript

자바스크립트 : 브라우저가 알아들을 수 있는 프로그래밍 언어. 모든 브라우저는 기본적으로 javascipt를 알아듣도록 설계되어있고, 모든 웹 서버는 html+css+javascript를 주게 되어있다.

Javascript 기초문법⭐️

console.log(변수)

개발자가 결과값을 보기 편하도록 console 창에 괄호 안의 값을 출력해준다. console.log(변수1, 변수2)처럼 여러 변수를 한 번에 출력할 수도 있다.

변수 & 기본연산

변수 대입(a=2)의 의미 : 오른쪽(2)에 있는 것을 왼쪽(a)에 넣는 것! (2를 a라는 변수에 대입한다)
let으로 변수를 선언한다. 사칙연산, 문자열 더하기가 기본적으로 가능하다.

<script>

let num = 20
num = 'Bob'

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

</script>

<script>

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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행.

</script>

변수명을 쓸 때는 쉽게 알아볼 수 있도록 하는 게 중요하다.
(참고로 '_'외의 다른 특수문자나 띄어쓰기는 불가)

<script>

let first_name = 'bob' // snake case라고 부름.

또는,

let firstName = 'bob' // camel case라고 부름. 회사마다 규칙이 상이함.

</script>

리스트 & 딕셔너리

list : 순서를 지켜서 가지고 있는 형태

<script>

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를 출력

</script>

dictionary : key - value 값의 묶음

<script>

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}을 출력

</script>

리스트와 딕셔너리의 조합

<script>

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'

</script>

리스트와 딕셔너리가 필요한 이유
👉 순서를 표시할 수 있고, 정보를 묶을 수 있다.

[예시]
✅'스파르타과일가게'가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였습니다. 변수만을 사용한 모습은 다음과 같습니다.
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 함수를 이용해 간단히 추가할 수 있습니다.

기본 함수들

사칙연산 외에도 기본적으로 제공하는 여러 함수가 존재한다.

- 나눗셈의 나머지를 구하고 싶은 경우

<script>

let a = 20
let b = 7

a % b = 6

</script>

- 스펠링을 모두 대문자로 바꾸고 싶은 경우

<script>

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB

</script>

- 특정 문자를 기준으로 문자열을 나누고 싶은 경우 (1)
<script>

let myemail = '[email protected]'

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 -> 어떤 도메인인지 알고 싶을 때 사용 가능.

</script>

- 특정 문자를 기준으로 문자열을 나누고 싶은 경우 (2)
<script>

let txt = '서울시-마포구-망원동'

let names = txt.split('-'); // ['서울시','마포구','망원동']

</script>

- 특정 문자로 합치고 싶은 경우
<script>

let txt = '서울시-마포구-망원동'

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기)

</script>

.join([separator])는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 
separator는 매개변수로, 배열의 각 요소를 구분할 문자열이다. 
이 구분자는 필요한 경우 문자열로 변환되고, 생략하면 배열의 원소들의 쉼표로 구분된다.

<script>

const arr = ['바람', '비', '물'];

console.log(arr.join());
// 바람,비,물

console.log(arr.join(''));
// 바람비물

console.log(arr.join('-'));
// 바람-비-물

</script>

함수

함수 기본 생김새

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

기본 생김새 예시

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

if 조건문

if, (else if, else if, ...) else

<script>
    function is_adult(age){
        if(age > 20){
            alert('성인이에요')
        } else {
            alert('청소년이에요')
        }
    }
    is_adult(25)
</script>
-
-
<script>
    function is_adult(age){
    	if(age > 20){
    		alert('성인이에요')
    	} else if (age > 10) {
    		alert('청소년이에요')
    	} else {
    		alert('10살 이하!')
    	}
    }
    is_adult(12)
</script>

AND, OR 조건문

AND 조건

<script>
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}
</script>

OR 조건

<script>
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,'남')
</script>

반복문

예를 들어 0에서 99까지 출력해야하는 상황이라면 반복문을 이용해 아래와 같이 세 줄로 간단히 출력할 수 있다.

// 일일이 반복한 경우
<script>
  console.log(0)
  console.log(1)
  console.log(2)
  console.log(3)
  console.log(4)
  console.log(5)
  ...
  console.log(99)
</script>
// 이렇게 쓰기엔 무리가 있으니 반복문이라는 것이 존재한다.

//반복문을 이용한 경우
<script>
  for (let i = 0; i < 100; i++) {
      console.log(i);
  }
</script>

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

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

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

그리고 반복문은 주로 (딕셔너리가 들어간) 리스트와 함께 쓰인다.

- (딕셔너리가 없는) 리스트의 원소를 출력할 때
<script>
  let people = ['철수','영희','민수','형준','기남','동희']

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

- 리스트 내의 딕셔너리를 하나씩 출력할 때

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

</script>



- 조건(점수가 70점 미만)에 해당하는 사람의 이름만 출력하고 싶을 때

<script>

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

</script>

#과제노트

첫 과제 결과물..!
기획서에 적힌 레이아웃을 토대로 간단한 쇼핑몰 메인페이지를 만드는 과제였다. 생애 첫 코딩이라 이거 하나 하는데도 엄청난 집중력이 필요했지만, 아무튼 만드는 동안 시간 가는 줄 모르고 재밌게 했다. 이제 겨우 개발의 길로 새끼발가락(?) 정도 뗀 것 같은데 앞으로도 꾸준히 공부해보자! 👩🏻‍💻👻

Author And Source

이 문제에 관하여([스파르타] WEB 1주차 일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sylee37281/스파르타-WEB-1주차-일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[스파르타] WEB 1주차 일지