웹개발 1주차

웹개발 1주차

항해 99 사전 웹개발 1~5주차

항해99의 사전교육 웹개발 종합반 5주강의가 시작됐다.

패스트캠퍼스 프론트엔드강의를 듣고 항해에 참여하였다.

패스트캠퍼스 강의는 원리와 이해에 강했다면 항해99의 웹개발 종합반은 사전교육이라 그런지 핵심만 짚으며 이해보단 경험을 강조하였다. 장단점이 있지만 빠르게 코딩에 대한 전반적인 흐름과 반복 학습으로 숙달할 수 있었다.

팬명록 html & css(부트스트랩)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic&display=swap" rel="stylesheet">
    <title>빈지노 팬명록</title>
<style>
     * {
         font-family: 'Jua', sans-serif;
     }
    .title {

        width: 100%;
        height: 250px;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.healingnlife.com/news/photo/202012/843_1329_941.jpg");
        background-position: center;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .post {
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0 auto;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;
    }
    .btn {
        margin-top: 15px;
    }
    .memo {
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0 auto;
    }
    .card {
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>
</head> <body> <div class="title"> <h1>빈지노 팬명록</h1> </div> <div class="post"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">닉네임</label> </div> <div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea> <label for="floatingTextarea">응원댓글</label> </div> <div class="btn"> <button type="button" class="btn btn-dark">응원하기</button> </div> </div> <div class="memo"> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>멋져요.</p> <footer class="blockquote-footer">호빵맨</cite> </footer> </blockquote> </div> </div> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>멋져요.</p> <footer class="blockquote-footer">식빵맨</cite> </footer> </blockquote> </div> </div> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>멋져요.</p> <footer class="blockquote-footer">카레빵맨</cite> </footer> </blockquote> </div> </div> </div> </body> </html>

자주 쓰이는 css

** //가운데정렬시 display: flex; flex-direction: column; justify-content: center; align-items: center;

//백그라운드이미지 background-image: background-size: cover; Background-position: center;

//Margin: auto; 가로 값이 존재할때 마진이 오토인 경우 가운데 정렬 **

**자바스크립트 기초 **

  • 변수 & 기본연산

    • 변수 대입( 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라고 합니다. 회사마다 규칙이 있죠.

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

  • 리스트 & 딕셔너리

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

      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'

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

    1. 더 본격적으로 문법을 배워볼까요!

    • 함수

      • 기본 생김새

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

      • 예시

        // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
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)

    • 반복문

      • 예를 들어 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 = ['철수','영희','민수','형준','기남','동희']
        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},
]
        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점 미만인 사람들의 이름만 출력할 수도 있습니다.
JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기→