TIL 2024-09-04 (Web

TIL/Web(frontend)

TIL 2024-09-04 (Web - 2주차)

myoma 2024. 9. 4. 18:09

Web 기초 2일차.

시작은 어제 배웠던 것들을 복습 및 반복하는 개념으로 간단한 프로젝트 하나를 진행해볼 것 이다.

[Spartaflix] 만들기.

어제 배웠던 내용이 기억이 안나면 보면서 진행해도 문제는 전혀없다.

부트스트랩 사이트에서 'jumbotron' 이라고 검색하고 demo 보기를 클릭하면

위 형태와 비슷한 뼈대를 보여준다.

저기서 왼쪽 클릭 후 검사를 클릭하면 옆에 개발자 도구창이 뜨고 마우스를 가져다대며 우리가 필요한 형태의 div를 찾고, 다시 왼쪽 클릭 후 'Edit as HTML' 을 누르면 박스 형식으로 나타나는데 그걸 전부 복사 후 body에 넣어준다.

<div class="main">
     <div class="p-5 mb-4 bg-body-tertiary rounded-3">
         <div class="container-fluid py-5">
             <h1 id="title" class="display-5 fw-bold">킹덤</h1>
             <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
                 세자뿐이다.</p>
             <button type="button" class="btn btn-outline-light">영화기록하기</button>
             <button type="button" class="btn btn-outline-light">상세보기</button>
         </div>
     </div>
</div>

그리고 원래 내용을 위와 같이 수정해주었다.

버튼도 2개 필요하고 원하는 디자인이 아니었기 때문에 버튼은 부트스트랩에서 다시 가져와서 내용을 수정했다.

배경사진을 넣어야하는데.

.main {
            background-color: green;
            color: white;

            background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
            background-position: center;
            background-size: cover;
        }

맨처음 background-color로 범위를 확인하고 글자 색(color)을 white로 설정했다.

그리고 이미지를 불러오는 3문장은 거의 고정적으로 쓰기 때문에 저번에 썼던 코드에서 복사해불러와 url만 수정.

위에 header도 부트스트랩에서 가장 비슷한 형식을 가져와서 필요한 부분은 복붙으로 추가하고 내용을 변경해준다.

<header class="p-3 text-bg-dark">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                        <use xlink:href="#bootstrap"></use>
                    </svg>
                </a>

                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
                </ul>

                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                    <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
                        aria-label="Search">
                </form>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-danger">Sign-up</button>
                </div>
            </div>
        </div>
    </header>

코드가 너무 길지만, 절대 직접 작성하는 것이 아니고 부트스트랩에서 내가 필요한 디자인을 가져와 간단하게 수정만 하는 방법을 진행하는 방식이니 어렵지 않게 할 수 있으며 아직 눈에 익숙하지 않으니 천천히 진행해야 실수가 적었다.

여기서 버튼 색깔과 텍스트 색깔을 변경할 수 있는데, 'danger'이라고 적힌 부분을 수정하면 내가 원하는 색상으로 변경할 수 있다.

물론 색상은 부트스트랩에서 쉽게 확인할 수 있다.

이 부분까지 했는데 header 글자들이 안보일 것이다 우리는 글자색을 앞에서 white로 설정했기 때문이다.

그렇기에 뒷 배경색을 검정색으로 해줘야한다.

body {
         background-color: black;
     }

body 전체를 배경색을 black으로 설정하는 방법이다. (body는 앞에 . 을 붙이지 않는다. [ex)).body(X)] )

폰트와 부트스트랩 적용법은 1주차에 방법이 나와있으니 보고 따라하면 된다.

이렇게 아래에 카드를 추가할 것인데 이것 역시... 부트스트랩에서 비슷한 디자인을 찾아서 1개를 만들어 복붙으로 4개를 만들어보자.

<div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
        </div>  
</div>

우리는 원하는 디자인을 가져와서, 미리 준비된 url과 text를 하나 더 추가하기만 하고 원하는 내용으로 바꾸어준다.

그리고 우리가 원하는 것은 이러한 카드가 4개 이므로 <div class = "col">...</div> 이 부분을 복사해서 3개를 더 추가해주면 된다.

이 부분은 코드로 보여주면 너무 길어지기 때문에 생략하겠다.

<div class="col">이 끝나는 </div>바로 뒤에 계속 붙여넣기 하면 된다.

그렇다면 우리는 위 사진과 비슷한 형식이 된 것을 확인 할 수 있고 카드가 3개 1개 이런 식으로 나타난다면.

<div class="row row-cols-1 row-cols-md-4 g-4"> 이 부분을 확인한 후 숫자가 3으로 되어있는 부분을 4로 바꾸어주면 된다.

이러면 얼추 비슷하게 되지만 이제 가운데로 정렬하고 카드 크기를 조절해줄 것이다.

이것 또한 앞에서 배운 내용들을 그대로 가져다 쓰는 것과 다르지 않기에 전에 썼던 코드를 가져와 내용만 수정해준다.

 .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

마지막으로 하나 더 추가해줄 것 인데

이런 식으로 가운데 포스팅 박스를 하나 넣어줄 것인데 역시! 부트스트랩에서 비슷한 디자인을 찾아 HTML을 복사해온다 ㅎㅎ

<div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
            <label for="floatingInput">영화 이미지 주소</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 제목 추천">
            <label for="(floatingInput)">영화 제목 추천</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>별점 선택</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
            <label for="floatingInput">추천 이유</label>
        </div>
        <button type="button" class="btn btn-danger">기록하기</button>
 </div>

그리고 우리는 디자인만 수정해줄 것 이다.

이 코드에서 내가 수정한 것은 '영화 이미지 주소', '영화 추천', '별점 선택' , value 옵션 내용, '추천 이유', 버튼 추가 이 정도 밖에 없다.

정말 거의 모든 부분이 원하는 디자인을 잘 찾고 그것을 잘 수정하는 것에서 끝난다.

코드를 다 작성하면 역시 또 디자인을 해줘야 하는데, 사진에서 요구하는 방식대로 디자인 한다면,

.mypostingbox {
            width: 500px;
            margin: 20px auto 20px auto;
            border: 1px solid white;
            padding: 20px;
            border-radius: 5px;
        }

.form-floating>input {
            background-color: transparent;
            color: white;
        }

.form-floating>label {
            color: white;
        }

.input-group>label {
            background-color: transparent;
            color: white;
        }

.mypostingbox>button {
            width: 100%;
        }

내용은 매번 비슷하다.

여기서 저번과 다른 부분만 설명하자면,

form-floating > input 이란 우리가 div에 준 class 명인 것을 확인할 수 있고 그 div 안에 있는 input, label 등 특정 부분만 수정한다는 것을 수정한다고 해석할 수 있다.

그리고 width에 평소에 쓰던 px(픽셀) 단위가 아닌 %로 되어있는데 100%라는 것은 끝까지 다 채운다는 것이다. width이니 가로 기준으로 그 박스 안을 다 채운다는 것이다.

마지막으로 모든 코드를 합한 코드블럭을 작성하며 복습 프로젝트는 끝내겠다.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타플릭스</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Pen+Script&display=swap');

        * {
            font-family: "Jua", sans-serif;
        }

        .main {
            background-color: green;
            color: white;

            background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
            background-position: center;
            background-size: cover;
        }

        body {
            background-color: black;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

        .mypostingbox {
            width: 500px;
            margin: 20px auto 20px auto;
            border: 1px solid white;
            padding: 20px;
            border-radius: 5px;
        }

        .form-floating>input {
            background-color: transparent;
            color: white;
        }

        .form-floating>label {
            color: white;
        }

        .input-group>label {
            background-color: transparent;
            color: white;
        }

        .mypostingbox>button {
            width: 100%;
        }
    </style>
</head>

<body>
    <header class="p-3 text-bg-dark">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                        <use xlink:href="#bootstrap"></use>
                    </svg>
                </a>

                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
                </ul>

                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                    <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
                        aria-label="Search">
                </form>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-danger">Sign-up</button>
                </div>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 id="title" class="display-5 fw-bold">킹덤</h1>
                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
                    세자뿐이다.</p>
                <button onclick="hey()" type="button" class="btn btn-outline-light">영화기록하기</button>
                <button type="button" class="btn btn-outline-light">상세보기</button>

            </div>
        </div>
    </div>

    <div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 이미지 주소">
            <label for="floatingInput">영화 이미지 주소</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 제목 추천">
            <label for="(floatingInput)">영화 제목 추천</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>별점 선택</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="3">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
            <label for="floatingInput">추천 이유</label>
        </div>
        <button type="button" class="btn btn-danger">기록하기</button>
    </div>

    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

VS code로 복사한 것이라 정렬이 틀렸을수도 있으니 만약 복사해서 코드블럭의 코드를 복사해서 확인한다면 꼭! 자동정렬을 한 번 사용한 후에 사용하는 것이 좋다. (자동 정렬 방법 또한 저번 글에 적어놨다.)

Javascript에 대해서

javascript 란?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
왜 브라우저를 움직이게 하기 위해 Javascript를 사용해야 하나?
- 브라우저가 JavaScript를 주로 사용하는 이유는 역사적으로 JavaScript가 웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔기 때문이다. 웹 페이지의 동적인 기능을 구현하기 위해 JavaScript가 개발되었으며, 많은 웹 개발자들이 JavaScript를 사용하여 웹 애플리케이션을 구축하고 유지 관리해왔습니다. 결국, Javascript가 브라우저한테 명령을 내리는 ‘표준’이라고 할 수 있다.
javascript 자체적으로 범용성이 매우 넓다. 또한 브라우저의 동작을 도와준다. (클릭 후 박스 이동 등)

Javascript 기본 문법

<script>
	function hey() {
		console.log('안녕하세요')
	}
</script>

<body>
	<button onclick="hey()">영화 기록하기</button>
</body>

앞에서 했던 복습 프로젝트에서 body부분의 영화 기록하기 버튼을 찾아 위처럼 수정한 후 <style> 바깥에 <scripyt>를 새로 만들어 작성 한 후 저장한 다음 실행보자.

그렇다면 영화 기록하기 버튼을 누른다면 "안녕하세요."가 나오는 것을 확인 할 수 있다.

위에 기본을 통해 어떤 식으로 되는 지만 이해하고 기본 문법에 대해 알아보자.

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

코드만 봐도 어렵지 않게 이해할 수 있다.

let 변수명 = 변수값. 이러한 형태인데 코드를 왼쪽에서 오른쪽으로 읽는 것보단 오른쪽에서 왼쪽으로 읽는 것이 좋다.

'a 는 2다.' 이렇게 읽는 것 보단 '2를 a에 넣는다.' 이렇게 이해해야한다.

console.log(변수명) 인데 이 결과값은 어디서보냐면, 우리가 만들었던 웹의 개발자 도구창을 킨 다음 console 부분을 눌러보면 결과가 나와있는 것을 확인할 수 있다.

Javascript 기초문법 2

간단한 수식말고 리스트와 딕셔너리가 존재한다.

리스트: 순서를 지켜서 가지고 있는 형태.
딕셔너리: 키(Key)-밸류(Value) 값의 묶음.

리스트부터 코드를 보며 알아보자.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

어떤 컴퓨터 용어든 공부를 조금이라도 했던 사람이면 큰 어려움 없이 이해할 수 있다.

a 변수에 리스트를 위와 같은 형태로 선언해주고, console.log(변수명[원하는 데이터 위치]) 라고 이해했다.

컴퓨터 용어는 순서가 1부터가 시작이 아닌 0부터 시작이기 갯수는 총 4개지만,

읽는 순서는 0,1,2,3 으로 읽어야한다.

a.length는 변수명.length 말그대로 길이를 구하는 것이다.

딕셔너리 코드

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(a_dict['age']) // 27(X), undefined

딕셔너리는 사전이라고 생각하면 편하다.

어떠한 변수의 정보라고 생각하고 코드를 본다면 'a' 라는 변수의 'name' 은 '영수'이며 'age'는 '27'세 이다.

즉, a는 27세 영수이다.

console로 결과를 나타내는 방법도 어렵지 않은데, 우리가 맨 처음 했듯이 변수를 먼저 적어주고 그 안에 알고 싶은 정보를 적어주면 된다.

코드블럭을 복사한 후 실행하면 1 번째 console은 Object라며 모든 정보를 정리하여 나타내주고

2번째 console은 영수라고 알려주지만

3번째 console은 27이 아닌 undefined라고 나오는데,

위에서도 말했듯이 변수명을 잘봐야한다.

위에서 작성된 a_dict은 a 와 엄연히 다른 변수명이다.

a_dict에는 아무런 정보가 없기에 정보를 찾을 수 없다고 나오는 게 맞다.

리스트와 딕셔너리를 같이 사용할 수도 있다.

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

앞에서 리스트와 딕셔너리를 모두 알아봤으니 코드를 보며 해석한다면,

(a[0]['name']) 이란? 'a' 에서 0번째 리스트에서 'name' 정보를 가져오겠다 라는 말이다.

Javascript 기초문법 3

반복문과 조건문

어렵지 않기에 두개가 합쳐진 코드를 보며 바로 알아보자.

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

반복문은 fore 까지 작성하면 자동완성이 될 것이다. 맨 처음 변수명을 적어주고 (a) 위치에도 본인이 사용하고 싶은 변수명을 적어 사용하면된다.

여기서 a는 ages에서 0~6까지 순차적으로 계속 정보를 가져와준다.

그 안에 if(조건문)이 있는데 말 그대로 if( 조건 ) 에 맞으면 아래 결과를 내보내고 'else' 조건이 아니라면 아래 결과를 내보내라는 것이다.

Javascript 함수 (function)

함수는 맨 처음 보여줬는데 여기서 전체 코드를 보며 알아보자.

버튼에 onclick="hey()"가 추가된 것을 볼 수 있고 <script>에 function het() {...} 이 추가된 것을 볼 수 있다.

이처럼 영화 기록하기 버튼을 클릭하면 '안녕하세요' 가 나오는데 모든 동작 코드들이 alert처럼 짧지 않기 때문에 우리는 부트스트랩에서 디자인을 가져오는 것 처럼 javascript 또한 미리 작성된 코드를 가져올 수 있다.

그것이 바로 'JQuery'이다.

사용법은 부트스트랩과 동일하다.

먼저 CDN을 작성하여 넣어줘야한다. (부트스트랩과 동일)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery를 사용하는 이유는 코드를 비교하며 설명하겠다.

document.getElementById('hello').innerHTML = '안녕'; //Javascript


$('#hello').html('안녕'); //jQuery

2개가 같은 코드이다.

이처럼 javascript는 코드가 되게 길고 복잡하다고 느낄 수 있는데 jQuery는 비교적 간단한 것을 볼 수 있다.

'hello'가 무엇이냐?

바로 div의 id인데, 우리는 div를 디자인하기 위해 class 명을 주는 것과 같은 원리이다.

div에 id 명을 줘야 javascript를 사용할 수 있다.

코드를 보며 이해해보자.

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        function checkResult(){
            let a = ['사과','배','감','귤']
            $('#q1').text(a[1])

            let b = {'name':'영수','age':30}
            $('#q2').text(b['name'])

            let c = [
                {'name':'영수','age':30},
                {'name':'철수','age':35}
            ]
            $('#q3').text(c[1]['age'])
        }
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1">테스트</div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2">테스트</div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3">테스트</div>
        </div>
    </body>
</html>

위 코드는 온전히 jQuery를 연습하기 위해 작성된 코드이다.

처음본다면 길고 복잡할 수 있지만 하나씩 차근차근 알아보면 어렵지 않다.

let a 부터 확인해보자.

변수 a 는 리스트를 가지며 $('#q1').text(a[1])은 'q1' 이라는 id를 가진 <div> 에서 text를 a[1]의 값을 보내는 것이다.

그렇다면 'q1'이 있는 <div>의 text는 기존에 test 였지만 버튼을 누르면 a[1] 인 '배'로 바뀐다는 걸 짐작할 수 있고,

이러한 방식으로 'q2', 'q3' 해석하면 된다.

JQuery - append에 대해서도 알아보자.

먼저 완성형 코드를 보면서 이해하자.

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
    function checkResult() {

        let fruits = ['사과', '배', '감', '귤', '수박']

        $('#q1').empty()
        fruits.forEach((a) => {
            let temp_html = `<p>${a}</p>`
            $('#q1').append(temp_html)
        })

        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]
        $('#q2').empty()
        people.forEach((a) => {
            let name = a['name']
            let age = a['age']
            let temp_html = `<p>${name}는 ${age}살</p>`
            $('#q2').append(temp_html)
        })
    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>

이번 코드도 뭔가 되게 많아보이고 길지만 하나씩 보면 어렵지 않게 이해할 수 있었다.

아까 했듯이 함수명부터 확인하고 그 함수가 무슨 동작을 확인하는 지 보니깐

위에서 했던 버튼을 누르면 결과가 바뀌는 것을 알 수 있다.

이번엔 무엇이 바뀌는 지 보면,

먼저 fruits의 변수가 리스트를 가지는 걸 알 수 있고 그 바로 아래 $('#q1').empty(), empty 말그대로 'q1'을 비워버린다는 의미이고 다음에 보이는 forEach 형태가 있는 것을 보아 반복문인 것을 알 수 있다.

새로운 변수를 선언하여 ${a}를 하나씩 추가해주고, $('#q1').append(temp_html)는 empty와 다르게 추가한다는 의미인 것을 알 수 있을 것이다.

이때 하나 주의해야하는데!

let temp_html = `<p>${a}</p>`

이 코드에서 '' 이 아닌 다른 것이 쓰인다는 것이다.

Window의 경우 ₩이 있는 위치에 있을 것이고 Mac 인 경우 ₩ 이것을 그대로 사용하면 위에 문자처럼 변경될 것이다.

$('#q1').empty()

fruits.forEach((a) => {

let temp_html = `<p>${a}</p>`

$('#q1').append(temp_html)

})

벌써 하나의 코드 해석을 끝냈고,

다음 코드는 people인데 리스트와 딕셔너리가 합쳐져 있는 변수이고 이것 또한 empty를 사용하여 q2를 비워버린다.

그 뒤에 내용은 위에 똑같이 반복문을 사용하는데 name과 age라는 새로운 변수를 만들어 그 곳에 people의 정보를 넣어주고 그것을 한 번에 뽑아내는 코드를 작성한 것을 볼 수 있다.

이번 강의는 jQuery가 주된 내용이었는데 기존에 자바 또는 다른 용어를 했던 사람이면 이해하는데 크게 어렵지 않았을 것 같았고 처음 접하는 분들은 지금은 코드가 엄청 복잡하거나 수정하는 부분에 대해 어렵지 않기에 변수명을 a, b 이런 식으로 짧게 작성해도 큰 문제가 되지 않지만 변수명은 그 변수에 대해 직관적으로 무엇인 지 알 수 있는 단어가 좋다.

ex) 나이는 age, 이름은 name, 평균값 avg_result 이런 식으로 간단한 영단어로 변수가 무엇을 뜻하는지 작성해주는 습관을 들이는 것이 좋다.

'TIL > Web(frontend)' 카테고리의 다른 글

TIL 2024-09-10 (Web - 5주차 Firebase) (2)	2024.09.10
TIL 2024-09-09 (Web - 4주차 Firebase) (0)	2024.09.09
TIL 2024-09-06 (Web - 3주차 HomeWork) (4)	2024.09.06
TIL 2024-09-05 (Web - 3주차) (1)	2024.09.05
TIL 2024-09-03 (Web - 1주차) (1)	2024.09.03

현재글TIL 2024-09-04 (Web - 2주차)

myo-ma 님의 블로그

Today :
Yesterday :

myo-ma 님의 블로그

TIL 2024-09-04 (Web - 2주차)

[Spartaflix] 만들기.

Javascript에 대해서

Javascript 기초문법 2

Javascript 기초문법 3

Javascript 함수 (function)

'TIL > Web(frontend)' 카테고리의 다른 글

'TIL/Web(frontend)'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

TIL 2024-09-04 (Web - 2주차)

[Spartaflix] 만들기.

Javascript에 대해서

Javascript 기초문법 2

Javascript 기초문법 3

Javascript 함수 (function)

'TIL > Web(frontend)' 카테고리의 다른 글

'TIL/Web(frontend)'의 다른글

관련글

티스토리툴바