스파르타 코딩클럽 1주차

1. HTML 기초

HTML은 문서의 뼈대를 구성하는 것으로 구역과 텍스트를 나타내고, CSS는 잡은 구역을 꾸며주는 역할을 하며 Javascript는 동적인 역할을 한다.

HTML은 크게 <head>와 <body>로 구성된다.

<head> 안에는 페이지의 속성 정보를, <body> 안에는 페이지 내용을 담는다.

See the Pen html 기초 by HARU (@greenyhub) on CodePen.

[Quiz] 간단한 로그인 페이지 만들기

🤔 내가 작성한 코드

<h1>로그인 페이지</h1>
<div>
  ID: <input type="text"/>
</div>
<br/>
<div>
  PW: <input type="password"/>
</div>
<br/>
<input type="button" value="로그인하기">

⭐ 코드 스니펫

<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>

2. CSS 기초

HTML에서 CSS 스타일을 작성할 때는 <head></head> 안에 <style>/*여기*/</style> 내부에 스타일을 작성해준다.

HTML의 특정 클래스를 가리킬 때는 .클래스이름 { ... } 라고 작성할 수 있다.

CSS 속성들

배경관련

background-color
background-image
background-size

사이즈

width
height

폰트

color
font-size
font-weight
font-family

간격

margin
padding

자주 쓰이는 CSS 연습하기

⭐ 예제

- text 중앙정렬하기

padding은 중앙정렬을 위한 속성은 아니지만 위쪽에 여백을 주어 수직 위치를 조정해주었다.

text-align: center;  /* 수평 가운데 정렬 */
padding-top: 20px;

- background-image를 통해 특정 영역에 이미지를 삽입할 때

다음 3가지 속성은 거의 같이 붙여서 쓴다.

background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-size: cover;   /* 이미지를 영역의 사이즈에 맞춤 */ 
backgrond-position: center;   /* 이미지가 중앙에 맞추어 정렬 */

- margin/padding

단축속성

a-b-c-d 는 순서대로 위-오른쪽-아래-왼쪽을 나타낸다.

margin: apx bpx cpx dpx;

개별속성

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

⭐ 예제2

화면 정중앙에 위치하게 하려면?

✔ width 값
✔ margin: auto
+ display: block (inline 속성의 경우)

앞서 만든 코드의 가장 바깥에 <div>태그로 감싸주어 하나의 덩어리로 만든 다음 덩어리에 클래스를 지정해주고 클래스에 CSS 스타일을 작성해주어 위치를 조정해주면 된다. 이러한 덩어리의 클래스명은 주로 container, wrap, inner 등으로 지칭한다.

화면 정중앙에 온다는 것은 요소의 양쪽 여백이 동등하게 최대를 가지는 것을 뜻한다.

덩어리는 기본 width 값이 100%로 뷰포트 너비의 전체를 가진다. 따라서 요소만큼의 너비만 가지도록 width 값을 주고, margin: auto를 사용하여 양쪽의 동등한 여백을 주면 화면 정중앙에 위치하는 것을 볼 수 있다.

그래도 안될 때는 요소가 inline 요소이기 때문에 margin 속성이 적용되지 않기 때문에 작동되지 않는 것이다. 따라서 display: block을 추가해주면 정상적으로 화면 중앙에 위치한다.

*클래스 중첩

하나의 태그에 여러개의 클래스를 부여할 수 있다.

<button class="mybtn redfont underline">로그인하기</button>

⭐ 코드 스니펫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .wrap {
            width: 300px;
            margin: auto;
        }
        .mytitle {
            width: 300px;
            height: 200px;
            
            color: white;
            text-align: center;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-size: cover;
            backgrond-position: center;

            border-radius: 10px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button>로그인하기</button>
    </div>
</body>
</html>

3. 폰트 / 주석 / 파일분리

폰트

Google Fonts

구글 폰트나 원하는 폰트 웹사이트에서 사용하고자 하는 폰트의 <link>를 가져와서 웹폰트로 사용할 수 있다.

원하는 폰트를 골라 [ +Select this style ]을 클릭한 후 우측 상단의 모음 아이콘을 클릭한다.

문서내 모든 글자에 폰트를 적용하고 싶을 때는 전체를 의미하는 * 을 사용하여 선택하여 폰트 속성을 부여하면 된다.

* {
	font-family: 'Noto Serif KR', serif;
}

주석

단축키 Ctrl + /

필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
코드에 대한 간단한 설명을 붙여두고 싶을 때

주석을 붙여놓으면 브라우저/컴퓨터가 읽지 않는다.

즉, 개발자 본인 또는 동료를 위해 붙여두는 것

파일 분리

HTML 문서 내 <head> 내부에 <style> 태그의 CSS 스타일이 길어지면 한눈에 코드를 보기에 어려워진다.

따라서 CSS 스타일을 작성한 코드를 따로 분리한 후 파일을 불러와서 사용할 수 있다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

4. 부트스트랩 사용하기

다음 태그를 문서 내 <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>

[Quiz] 나홀로 메모장 만들기

🤔 내가 작성한 코드

<!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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">

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

    <style>
        .wrap {
            width: 900px;
            margin: auto;
        }

        * {
            font-family: 'Noto Serif KR', serif;
        }
        .card {
            font-size: 15px;
        }
        .text-blue {
            color: blue;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
            </p>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

[Quiz] 나홀로메모장의 포스팅박스 완성하기

위의 레이아웃을 만들기 위해 Bootstrap에서 form 형식을 참고하였다.

*이후 강의에서 추후 충돌 방지를 위해 <form> 태그를 <div>로 바꾸어서 사용하였다.

🤔 내가 작성한 코드

<!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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">

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

    <style>
        .wrap {
            width: 900px;
            margin: auto;
        }

        * {
            font-family: 'Noto Serif KR', serif;
        }

        .card {
            font-size: 15px;
        }

        .text-blue {
            color: blue;
            font-weight: 800;
        }
        .posting-box {
            width: 500px;
            border: 3px solid black;
            border-radius: 10px;
            margin: auto;
            display: block;
            padding: 50px;
        }
        .card-columns {
            margin-top: 32px;
        }
        .form-group>.btn {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
            </p>
        </div>
        <div class="posting-box">
            <div class="form-group">
                <label for="exampleFormControlInput1">Article url</label>
                <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="주소를 입력해주세요">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="코멘트를 작성해주세요"></textarea>
                <a class="btn btn-primary" href="#" role="button">기사 저장</a>
            </div>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://naver.com">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text text-blue">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

강의 코드와 비교해보니 나는 아래의 컴포넌트와 여백을 주기 위해서 아래 컴포넌트에서 margin-top을 이용해서 떨어뜨려 주었는데 posting-box 자체에서 margin: auto; 를 준 상태에서 margin-bottom 을 추가해주어 간단하게 지정할 수 있다!

5. Javascript 기초문법

변수

변수는 지정한 값을 담아주는 박스이다.

변수는 let 으로 선언할 수 있다.

let num = 20
num = 'bob'

사칙연산

let a = 1;
let b = 2;

a+b //3

문자열 더하기

let first = 'Bob'
let last = 'Lee'

first + last // 'BobLee'
first + ' ' + last // 'Bob Lee'

first + a // 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행한다.

변수명

변수명은 회사마다 규칙이 있다. 다른 사람도 알아보기 쉽게 작성하는 것이 중요하다.

let first_name = 'bob' // snake case
let firstName = 'bob' // camel case

자료형

리스트

순서를 지켜 가지고 있는 형태이다.

let list = ['수박', '참외', '딸기']

list[0] // 수박
list[1] // 참외
list[2] // 딸기

- 리스트에 요소 넣기

list.push('레몬')
list // ['수박', '참외', '딸기', '레몬']

- 리스트의 길이 구하기

list.length // 4

딕셔너리

딕셔너리(Dictionary)란 key-value 값의 묶음이다.

딕셔너리 선언과 조회방법

let a_dict = {}  // 딕셔너리 선언. 이름은 아무렇게 선언 가능!
let b_dict = {'name': 'Bob', 'age': 21}  // 딕셔너리 선언

b_dict['name']  // 'Bob'
b_dict['age']  // 21

딕셔너리에 key-value 값 넣기

딕셔너리이름['key']: value

b_dict['height'] = 180
b_dict  // {name: 'Bob', age: 21, height:180}

리스트와 딕셔너리의 활용

두 자료형을 이용해서 순서를 표시하고, 정보를 묶을 수 있다.

예를 들어 어떠한 회사의 고객 정보를 딕셔너리를 활용한다면 고객 별로 정보를 묶을 수 있다.

let customer_1 = {'name': '김스파', 'phone': '010-1234-5678'};
let customer_2 = {'name': '김르탄', 'phone': '010-1234-1234'};

그리고 순서를 나타내기 위해 리스트를 사용하면 좀 더 깔끔하게 나타낼 수 있다.

let customers = [
	let customer_1 = {'name': '김스파', 'phone': '010-1234-5678'},
	let customer_2 = {'name': '김르탄', 'phone': '010-1234-1234'};
]

이렇게 자료형을 활용하여 보기에도 깔끔해지고, 다루기도 쉬워지고, 새로운 정보가 추가되더라도 .push 함수를 이용해 간단하게 대응할 수 있다.

함수

기본 형태

// 함수 생성
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}

// 사용하기
함수이름(필요한 변수들);

예시

function sum(num1, num2) {
	return num1 + num2;
}

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

사칙 연산 외에도 기본적으로 제공하는 여러 함수들이 있다. 왠지 이건 있을거 같은데? 싶은 함수는 직접 만들지 말고 구글링을 먼저 해본 후 사용하면 좋다!

나눗셈의 나머지 구하기

- 무언가를 균등하게 나눌 때

- 짝수/홀수 구분할 때

let a = 20
let b = 7

a % b = 6

모든 알파벳을 대문자로 바꾸기

let myName = 'spartacodingclub'
myName.toUpperCase()  // SPARTACODINGCLUB

특정문자로 문자열 나누기

let myEmail = 'sparta@gmail.com'

let result = myEmail.split('@')   // result['sparta', 'gmail.com']
let result2 = result[1].split('.')  // result2['gmail', 'com']

myEmail.split('@')[1].split('.')[0]  // gmail  한번에 간단하게 쓰는 방법

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

특정문자로 합치기

let result = names.join('>');  // '서울시>마포구>망원동'

조건문

if / else / else if

if ( 조건 ) { 조건이 참일 때 실행될 구문 }
else { if 조건이 아닌 나머지에서 실행될 구문 }
else if ( if 조건이 아닌 또 다른 조건 ) { 조건이 참일 때 실행될 구문 }

function is_adult(age) {
    if(age > 20) {
        alert('성인입니다')
    } else if (age > 10) {
        alert('청소년입니다')
    } else {
        alert('10살 이하!')
    }
}

is_adult(12)  // 청소년입니다

AND / OR

조건이 2개 이상 주어진 상황에서

조건A && 조건B : 조건A 이면서 조건B 를 만족
조건A || 조건B : 조건A 또는 조건B 를 만족

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('청소년!')
    }
}

반복문

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

반복문은 주로 리스트와 함께 쓰인다. 다음과 같이 리스트의 모든 원소를 출력하고 싶을 때 반복문을 사용할 수 있다.

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

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

리스트+딕셔너리 반복문 예제

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

// 70점 미만인 사람들의 이름만 출력하기
for (let i = 0; i < scores.length; i++) {
    if (scores[i]['score'] < 70) {
        console.log(scores[i]['name']);
    }
}

6. Javascript 연습하기

예제1

미세먼지(IDEX_XVL)의 값이 40 미마인 구 이름(MSRSTE_NM)과 값을 출력하기

자료/데이터

let mise_list = [
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "중구",
    PM10: 22,
    PM25: 14,
    O3: 0.018,
    NO2: 0.015,
    CO: 0.4,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 31,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "종로구",
    PM10: 24,
    PM25: 18,
    O3: 0.013,
    NO2: 0.016,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM25",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "도심권",
    MSRSTE_NM: "용산구",
    PM10: 0,
    PM25: 15,
    O3: 0.012,
    NO2: 0.027,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "점검중",
    IDEX_MVL: -99,
    ARPLT_MAIN: "점검중",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서북권",
    MSRSTE_NM: "은평구",
    PM10: 36,
    PM25: 14,
    O3: 0.019,
    NO2: 0.018,
    CO: 0.5,
    SO2: 0.005,
    IDEX_NM: "좋음",
    IDEX_MVL: 42,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서북권",
    MSRSTE_NM: "서대문구",
    PM10: 28,
    PM25: 9,
    O3: 0.018,
    NO2: 0.015,
    CO: 0.6,
    SO2: 0.004,
    IDEX_NM: "좋음",
    IDEX_MVL: 37,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서북권",
    MSRSTE_NM: "마포구",
    PM10: 26,
    PM25: 8,
    O3: 0.012,
    NO2: 0.021,
    CO: 0.5,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 36,
    ARPLT_MAIN: "NO2",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "광진구",
    PM10: 17,
    PM25: 9,
    O3: 0.018,
    NO2: 0.016,
    CO: 0.6,
    SO2: 0.001,
    IDEX_NM: "좋음",
    IDEX_MVL: 31,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "성동구",
    PM10: 21,
    PM25: 12,
    O3: 0.018,
    NO2: 0.017,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 33,
    ARPLT_MAIN: "PM25",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "중랑구",
    PM10: 27,
    PM25: 10,
    O3: 0.015,
    NO2: 0.019,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 34,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "동대문구",
    PM10: 26,
    PM25: 9,
    O3: 0.016,
    NO2: 0.017,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 34,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "성북구",
    PM10: 27,
    PM25: 8,
    O3: 0.022,
    NO2: 0.014,
    CO: 0.5,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 37,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "도봉구",
    PM10: 25,
    PM25: 12,
    O3: 0.024,
    NO2: 0.011,
    CO: 0.3,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 41,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "강북구",
    PM10: 30,
    PM25: 15,
    O3: 0.022,
    NO2: 0.02,
    CO: 0.4,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동북권",
    MSRSTE_NM: "노원구",
    PM10: 21,
    PM25: 14,
    O3: 0.017,
    NO2: 0.016,
    CO: 0.4,
    SO2: 0.004,
    IDEX_NM: "좋음",
    IDEX_MVL: 36,
    ARPLT_MAIN: "PM25",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "강서구",
    PM10: 36,
    PM25: 16,
    O3: 0.021,
    NO2: 0.013,
    CO: 0.4,
    SO2: 0.004,
    IDEX_NM: "좋음",
    IDEX_MVL: 42,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "구로구",
    PM10: 23,
    PM25: 10,
    O3: 0.022,
    NO2: 0.016,
    CO: 0.3,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 37,
    ARPLT_MAIN: "O3",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "영등포구",
    PM10: 29,
    PM25: 15,
    O3: 0.01,
    NO2: 0.022,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 41,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "동작구",
    PM10: 29,
    PM25: 15,
    O3: 0.012,
    NO2: 0.023,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 41,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "관악구",
    PM10: 27,
    PM25: 12,
    O3: 0.012,
    NO2: 0.022,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 37,
    ARPLT_MAIN: "NO2",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "금천구",
    PM10: 25,
    PM25: 15,
    O3: 0.015,
    NO2: 0.02,
    CO: 0.4,
    SO2: 0.004,
    IDEX_NM: "좋음",
    IDEX_MVL: 43,
    ARPLT_MAIN: "PM25",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "서남권",
    MSRSTE_NM: "양천구",
    PM10: 0,
    PM25: 14,
    O3: 0.016,
    NO2: 0.017,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "점검중",
    IDEX_MVL: -99,
    ARPLT_MAIN: "점검중",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동남권",
    MSRSTE_NM: "강남구",
    PM10: 31,
    PM25: 16,
    O3: 0.018,
    NO2: 0.018,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동남권",
    MSRSTE_NM: "서초구",
    PM10: 34,
    PM25: 13,
    O3: 0.024,
    NO2: 0.019,
    CO: 0.3,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 41,
    ARPLT_MAIN: "PM10",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동남권",
    MSRSTE_NM: "송파구",
    PM10: 25,
    PM25: 6,
    O3: 0.014,
    NO2: 0.025,
    CO: 0.4,
    SO2: 0.003,
    IDEX_NM: "좋음",
    IDEX_MVL: 42,
    ARPLT_MAIN: "NO2",
  },
  {
    MSRDT: "201912052100",
    MSRRGN_NM: "동남권",
    MSRSTE_NM: "강동구",
    PM10: 24,
    PM25: 14,
    O3: 0.016,
    NO2: 0.02,
    CO: 0.4,
    SO2: 0.002,
    IDEX_NM: "좋음",
    IDEX_MVL: 39,
    ARPLT_MAIN: "PM25",
  },
];

코드 작성

여기서 우리가 알고싶은 값은 미세먼지 농도(IDEX_MVL)와 구 이름(MSTSTE_NM)이다.

따라서 다음과 같이 작성하면 구 이름과 미세먼지 농도를 출력할 수 있다.

더 활용해서 미세먼지가 40보다 적은 구만 출력하고 싶다는 조건을 추가할 수도 있다.

⭐ 코드 스니펫

미세먼지가 40 이하인 구이름 출력하기

for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise['IDEX_MVL'] < 40) {
        let gu_name = mise['MSRSTE_NM'];
        let gu_mise = mise['IDEX_MVL'];
        console.log('40보다 작은 구: ' + gu_name + ', ' + gu_mise);
    }
}

입력한 미세먼지 농도 이하의 구 이름 출력하는 함수 만들기

function show_gus(index) {
    for (let i = 0; i < mise_list.length; i++) {
        let mise = mise_list[i];
        if (mise['IDEX_MVL'] < index) {
            let gu_name = mise['MSRSTE_NM'];
            let gu_mise = mise['IDEX_MVL'];
            console.log(index + '보다 작은 구: ' + gu_name + ', ' + gu_mise);
        }
    }
}

show_gus(35)
show_gus(40)

예제2

자전거(parkingBikeToCnt)가 5개 이하인 정류장의 이름을 출력하기

자료/데이터

let bikes = [
  {
    rackTotCnt: "7",
    stationName: "101. (구)합정동 주민센터",
    parkingBikeTotCnt: "4",
    shared: "14",
    stationLatitude: "37.54956055",
    stationLongitude: "126.90575409",
    stationId: "ST-3",
  },
  {
    rackTotCnt: "22",
    stationName: "102. 망원역 1번출구 앞",
    parkingBikeTotCnt: "17",
    shared: "5",
    stationLatitude: "37.55564880",
    stationLongitude: "126.91062927",
    stationId: "ST-4",
  },
  {
    rackTotCnt: "16",
    stationName: "103. 망원역 2번출구 앞",
    parkingBikeTotCnt: "11",
    shared: "13",
    stationLatitude: "37.55495071",
    stationLongitude: "126.91083527",
    stationId: "ST-5",
  },
  {
    rackTotCnt: "15",
    stationName: "104. 합정역 1번출구 앞",
    parkingBikeTotCnt: "11",
    shared: "0",
    stationLatitude: "37.55062866",
    stationLongitude: "126.91498566",
    stationId: "ST-6",
  },
  {
    rackTotCnt: "7",
    stationName: "105. 합정역 5번출구 앞",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.55000687",
    stationLongitude: "126.91482544",
    stationId: "ST-7",
  },
  {
    rackTotCnt: "12",
    stationName: "106. 합정역 7번출구 앞",
    parkingBikeTotCnt: "8",
    shared: "8",
    stationLatitude: "37.54864502",
    stationLongitude: "126.91282654",
    stationId: "ST-8",
  },
  {
    rackTotCnt: "7",
    stationName: "107. 신한은행 서교동금융센터점 앞",
    parkingBikeTotCnt: "5",
    shared: "14",
    stationLatitude: "37.55751038",
    stationLongitude: "126.91850281",
    stationId: "ST-9",
  },
  {
    rackTotCnt: "12",
    stationName: "108. 서교동 사거리",
    parkingBikeTotCnt: "9",
    shared: "8",
    stationLatitude: "37.55274582",
    stationLongitude: "126.91861725",
    stationId: "ST-10",
  },
  {
    rackTotCnt: "12",
    stationName: "109. 제일빌딩 앞",
    parkingBikeTotCnt: "8",
    shared: "33",
    stationLatitude: "37.54769135",
    stationLongitude: "126.91998291",
    stationId: "ST-11",
  },
  {
    rackTotCnt: "22",
    stationName: "110. 사천교",
    parkingBikeTotCnt: "16",
    shared: "5",
    stationLatitude: "37.56819916",
    stationLongitude: "126.91784668",
    stationId: "ST-13",
  },
  {
    rackTotCnt: "12",
    stationName: "111. 상수역 2번출구 앞",
    parkingBikeTotCnt: "9",
    shared: "25",
    stationLatitude: "37.54787064",
    stationLongitude: "126.92353058",
    stationId: "ST-15",
  },
  {
    rackTotCnt: "12",
    stationName: "112. 극동방송국 앞",
    parkingBikeTotCnt: "8",
    shared: "25",
    stationLatitude: "37.54920197",
    stationLongitude: "126.92320251",
    stationId: "ST-16",
  },
  {
    rackTotCnt: "27",
    stationName: "113. 홍대입구역 2번출구 앞",
    parkingBikeTotCnt: "24",
    shared: "22",
    stationLatitude: "37.55749893",
    stationLongitude: "126.92380524",
    stationId: "ST-18",
  },
  {
    rackTotCnt: "17",
    stationName: "114. 홍대입구역 8번출구 앞",
    parkingBikeTotCnt: "14",
    shared: "129",
    stationLatitude: "37.55706024",
    stationLongitude: "126.92442322",
    stationId: "ST-20",
  },
  {
    rackTotCnt: "17",
    stationName: "115. 사루비아 빌딩 앞",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.55893326",
    stationLongitude: "126.92711639",
    stationId: "ST-12",
  },
  {
    rackTotCnt: "7",
    stationName: "116. 일진아이윌아파트 옆",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.56454086",
    stationLongitude: "126.92707062",
    stationId: "ST-14",
  },
  {
    rackTotCnt: "27",
    stationName: "117. 홍은사거리",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.59115982",
    stationLongitude: "126.94132996",
    stationId: "ST-17",
  },
  {
    rackTotCnt: "12",
    stationName: "118. 광흥창역 2번출구 앞",
    parkingBikeTotCnt: "9",
    shared: "67",
    stationLatitude: "37.54773331",
    stationLongitude: "126.93176270",
    stationId: "ST-19",
  },
  {
    rackTotCnt: "12",
    stationName: "119. 서강나루 공원",
    parkingBikeTotCnt: "9",
    shared: "17",
    stationLatitude: "37.54528427",
    stationLongitude: "126.93105316",
    stationId: "ST-21",
  },
  {
    rackTotCnt: "7",
    stationName: "120. 신수동 사거리",
    parkingBikeTotCnt: "3",
    shared: "0",
    stationLatitude: "37.54524231",
    stationLongitude: "126.93411255",
    stationId: "ST-22",
  },
  {
    rackTotCnt: "17",
    stationName: "121. 마포소방서 앞",
    parkingBikeTotCnt: "11",
    shared: "24",
    stationLatitude: "37.54976654",
    stationLongitude: "126.93317413",
    stationId: "ST-23",
  },
  {
    rackTotCnt: "12",
    stationName: "122. 신성기사식당 앞",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.54745865",
    stationLongitude: "126.93837738",
    stationId: "ST-24",
  },
  {
    rackTotCnt: "22",
    stationName: "123. 문화촌 공원",
    parkingBikeTotCnt: "7",
    shared: "0",
    stationLatitude: "37.59432983",
    stationLongitude: "126.94738770",
    stationId: "ST-25",
  },
  {
    rackTotCnt: "22",
    stationName: "124. 서강대 정문 건너편",
    parkingBikeTotCnt: "7",
    shared: "0",
    stationLatitude: "37.55113983",
    stationLongitude: "126.93698883",
    stationId: "ST-26",
  },
  {
    rackTotCnt: "17",
    stationName: "125. 서강대 남문 옆",
    parkingBikeTotCnt: "13",
    shared: "0",
    stationLatitude: "37.54948425",
    stationLongitude: "126.93894958",
    stationId: "ST-27",
  },
  {
    rackTotCnt: "22",
    stationName: "126. 서강대 후문 옆",
    parkingBikeTotCnt: "17",
    shared: "5",
    stationLatitude: "37.55041122",
    stationLongitude: "126.94384766",
    stationId: "ST-28",
  },
  {
    rackTotCnt: "22",
    stationName: "128. 신촌역(2호선) 1번출구 옆",
    parkingBikeTotCnt: "14",
    shared: "5",
    stationLatitude: "37.55549622",
    stationLongitude: "126.93634033",
    stationId: "ST-30",
  },
  {
    rackTotCnt: "17",
    stationName: "129. 신촌역(2호선) 6번출구 옆",
    parkingBikeTotCnt: "8",
    shared: "0",
    stationLatitude: "37.55505371",
    stationLongitude: "126.93756866",
    stationId: "ST-31",
  },
  {
    rackTotCnt: "12",
    stationName: "130. 신촌역(2호선) 7번출구 앞",
    parkingBikeTotCnt: "8",
    shared: "17",
    stationLatitude: "37.55485916",
    stationLongitude: "126.93615723",
    stationId: "ST-32",
  },
  {
    rackTotCnt: "25",
    stationName: "131. 증산2교",
    parkingBikeTotCnt: "17",
    shared: "4",
    stationLatitude: "37.58417130",
    stationLongitude: "126.91110229",
    stationId: "ST-33",
  },
  {
    rackTotCnt: "17",
    stationName: "133. 해담는다리",
    parkingBikeTotCnt: "11",
    shared: "12",
    stationLatitude: "37.58203125",
    stationLongitude: "126.90899658",
    stationId: "ST-35",
  },
  {
    rackTotCnt: "10",
    stationName: "134. 연세로 명물길",
    parkingBikeTotCnt: "6",
    shared: "20",
    stationLatitude: "37.55789185",
    stationLongitude: "126.93807983",
    stationId: "ST-36",
  },
  {
    rackTotCnt: "12",
    stationName: "135. 명물길 원형무대 앞",
    parkingBikeTotCnt: "10",
    shared: "0",
    stationLatitude: "37.55910110",
    stationLongitude: "126.93917847",
    stationId: "ST-37",
  },
  {
    rackTotCnt: "9",
    stationName: "136. 대흥동 주민센터",
    parkingBikeTotCnt: "1",
    shared: "11",
    stationLatitude: "37.55600357",
    stationLongitude: "126.94229889",
    stationId: "ST-38",
  },
  {
    rackTotCnt: "12",
    stationName: "137. NH농협 신촌지점 앞",
    parkingBikeTotCnt: "4",
    shared: "0",
    stationLatitude: "37.55681229",
    stationLongitude: "126.94318390",
    stationId: "ST-39",
  },
  {
    rackTotCnt: "12",
    stationName: "138. 신촌동 제1공영주차장 앞",
    parkingBikeTotCnt: "7",
    shared: "25",
    stationLatitude: "37.55917740",
    stationLongitude: "126.93452454",
    stationId: "ST-40",
  },
  {
    rackTotCnt: "15",
    stationName: "139. 연세대 정문 건너편",
    parkingBikeTotCnt: "13",
    shared: "7",
    stationLatitude: "37.55979538",
    stationLongitude: "126.93447876",
    stationId: "ST-43",
  },
  {
    rackTotCnt: "22",
    stationName: "140. 이화여대 후문",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.56000900",
    stationLongitude: "126.94073486",
    stationId: "ST-41",
  },
  {
    rackTotCnt: "22",
    stationName: "141. 연대 대운동장 옆",
    parkingBikeTotCnt: "13",
    shared: "5",
    stationLatitude: "37.56238174",
    stationLongitude: "126.93264771",
    stationId: "ST-42",
  },
  {
    rackTotCnt: "13",
    stationName: "142. 아현역 4번출구 앞",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.55720139",
    stationLongitude: "126.95566559",
    stationId: "ST-200",
  },
  {
    rackTotCnt: "11",
    stationName: "143. 공덕역 2번출구",
    parkingBikeTotCnt: "7",
    shared: "0",
    stationLatitude: "37.54457855",
    stationLongitude: "126.95021820",
    stationId: "ST-201",
  },
  {
    rackTotCnt: "12",
    stationName: "144. 공덕역 8번출구",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.54357910",
    stationLongitude: "126.95132446",
    stationId: "ST-202",
  },
  {
    rackTotCnt: "11",
    stationName: "145. 공덕역 5번출구",
    parkingBikeTotCnt: "8",
    shared: "36",
    stationLatitude: "37.54425049",
    stationLongitude: "126.95163727",
    stationId: "ST-203",
  },
  {
    rackTotCnt: "14",
    stationName: "146. 마포역 2번출구 뒤",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.53993607",
    stationLongitude: "126.94582367",
    stationId: "ST-204",
  },
  {
    rackTotCnt: "9",
    stationName: "147. 마포역 4번출구 뒤",
    parkingBikeTotCnt: "4",
    shared: "0",
    stationLatitude: "37.53927231",
    stationLongitude: "126.94591522",
    stationId: "ST-205",
  },
  {
    rackTotCnt: "17",
    stationName: "150. 서강대역 2번출구 앞",
    parkingBikeTotCnt: "13",
    shared: "65",
    stationLatitude: "37.55295563",
    stationLongitude: "126.93434143",
    stationId: "ST-207",
  },
  {
    rackTotCnt: "12",
    stationName: "151. 망원1동주민센터",
    parkingBikeTotCnt: "11",
    shared: "58",
    stationLatitude: "37.55568695",
    stationLongitude: "126.90554810",
    stationId: "ST-208",
  },
  {
    rackTotCnt: "32",
    stationName: "152. 마포구민체육센터 앞",
    parkingBikeTotCnt: "8",
    shared: "31",
    stationLatitude: "37.55661011",
    stationLongitude: "126.89801788",
    stationId: "ST-209",
  },
  {
    rackTotCnt: "12",
    stationName: "153. 성산2교 사거리",
    parkingBikeTotCnt: "7",
    shared: "17",
    stationLatitude: "37.56469727",
    stationLongitude: "126.91261292",
    stationId: "ST-210",
  },
  {
    rackTotCnt: "15",
    stationName: "154. 마포구청역 ",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.56090927",
    stationLongitude: "126.90549469",
    stationId: "ST-211",
  },
  {
    rackTotCnt: "17",
    stationName: "155. 가좌역1 번출구 뒤",
    parkingBikeTotCnt: "14",
    shared: "0",
    stationLatitude: "37.56855011",
    stationLongitude: "126.91451263",
    stationId: "ST-212",
  },
  {
    rackTotCnt: "12",
    stationName: "156. 서울서부지방법원 앞",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.54990387",
    stationLongitude: "126.95514679",
    stationId: "ST-213",
  },
  {
    rackTotCnt: "14",
    stationName: "157. 애오개역 4번출구 앞",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.55300140",
    stationLongitude: "126.95668793",
    stationId: "ST-214",
  },
  {
    rackTotCnt: "17",
    stationName: "158. 독립문 어린이 공원",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.57125854",
    stationLongitude: "126.96047974",
    stationId: "ST-215",
  },
  {
    rackTotCnt: "9",
    stationName: "159. 이대역 4번 출구",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.55695343",
    stationLongitude: "126.94634247",
    stationId: "ST-216",
  },
  {
    rackTotCnt: "22",
    stationName: "160. 북아현동 가구거리",
    parkingBikeTotCnt: "15",
    shared: "0",
    stationLatitude: "37.55754852",
    stationLongitude: "126.95938110",
    stationId: "ST-217",
  },
  {
    rackTotCnt: "10",
    stationName: "161. 무악재역1번 출구",
    parkingBikeTotCnt: "0",
    shared: "0",
    stationLatitude: "37.58224487",
    stationLongitude: "126.95064545",
    stationId: "ST-218",
  },
  {
    rackTotCnt: "17",
    stationName: "162. 봉원고가차도 밑",
    parkingBikeTotCnt: "8",
    shared: "0",
    stationLatitude: "37.56526947",
    stationLongitude: "126.94624329",
    stationId: "ST-219",
  },
  {
    rackTotCnt: "9",
    stationName: "163. 명지전문대학교 정문 앞",
    parkingBikeTotCnt: "0",
    shared: "0",
    stationLatitude: "37.58369827",
    stationLongitude: "126.92496490",
    stationId: "ST-220",
  },
  {
    rackTotCnt: "12",
    stationName: "164. 북가좌1동 주민센터 ",
    parkingBikeTotCnt: "7",
    shared: "25",
    stationLatitude: "37.57447815",
    stationLongitude: "126.91004944",
    stationId: "ST-221",
  },
  {
    rackTotCnt: "22",
    stationName: "165. 중앙근린공원",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.57513809",
    stationLongitude: "126.91394043",
    stationId: "ST-222",
  },
  {
    rackTotCnt: "22",
    stationName: "166. 가재울 초등학교",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.57327652",
    stationLongitude: "126.91967773",
    stationId: "ST-223",
  },
  {
    rackTotCnt: "17",
    stationName: "167. 연가초등학교 옆",
    parkingBikeTotCnt: "12",
    shared: "0",
    stationLatitude: "37.57946014",
    stationLongitude: "126.91712952",
    stationId: "ST-224",
  },
  {
    rackTotCnt: "17",
    stationName: "169. 북가좌 삼거리",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.57300186",
    stationLongitude: "126.90779877",
    stationId: "ST-226",
  },
  {
    rackTotCnt: "12",
    stationName: "170. 가재울 뉴타운 주유소 옆",
    parkingBikeTotCnt: "9",
    shared: "33",
    stationLatitude: "37.57311249",
    stationLongitude: "126.92244720",
    stationId: "ST-227",
  },
  {
    rackTotCnt: "12",
    stationName: "171. 임광빌딩 앞",
    parkingBikeTotCnt: "9",
    shared: "8",
    stationLatitude: "37.56472397",
    stationLongitude: "126.96727753",
    stationId: "ST-228",
  },
  {
    rackTotCnt: "10",
    stationName: "173. 서대문역 8번출구 앞",
    parkingBikeTotCnt: "4",
    shared: "0",
    stationLatitude: "37.56477737",
    stationLongitude: "126.96614838",
    stationId: "ST-230",
  },
  {
    rackTotCnt: "22",
    stationName: "175. 홍연2교옆",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.57807159",
    stationLongitude: "126.93081665",
    stationId: "ST-231",
  },
  {
    rackTotCnt: "12",
    stationName: "176. 명지대학교 도서관",
    parkingBikeTotCnt: "0",
    shared: "0",
    stationLatitude: "37.58109665",
    stationLongitude: "126.92402649",
    stationId: "ST-555",
  },
  {
    rackTotCnt: "10",
    stationName: "177. 북가좌 초등학교",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.57767487",
    stationLongitude: "126.90980530",
    stationId: "ST-345",
  },
  {
    rackTotCnt: "12",
    stationName: "178. 증산3교 앞",
    parkingBikeTotCnt: "0",
    shared: "0",
    stationLatitude: "37.57987595",
    stationLongitude: "126.90634918",
    stationId: "ST-349",
  },
  {
    rackTotCnt: "17",
    stationName: "179. 가좌역 4번출구 앞",
    parkingBikeTotCnt: "14",
    shared: "47",
    stationLatitude: "37.56912231",
    stationLongitude: "126.91479492",
    stationId: "ST-232",
  },
  {
    rackTotCnt: "12",
    stationName: "180. 충정로역 7번출구 아래",
    parkingBikeTotCnt: "10",
    shared: "8",
    stationLatitude: "37.55996704",
    stationLongitude: "126.96246338",
    stationId: "ST-233",
  },
  {
    rackTotCnt: "17",
    stationName: "181. 망원초록길 입구",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.55134201",
    stationLongitude: "126.90267181",
    stationId: "ST-339",
  },
  {
    rackTotCnt: "12",
    stationName: "182. 망원2빗물펌프장 앞",
    parkingBikeTotCnt: "7",
    shared: "0",
    stationLatitude: "37.55156708",
    stationLongitude: "126.90284729",
    stationId: "ST-340",
  },
  {
    rackTotCnt: "17",
    stationName: "183. 하늘채코오롱아파트 건너편",
    parkingBikeTotCnt: "10",
    shared: "0",
    stationLatitude: "37.56516647",
    stationLongitude: "126.91939545",
    stationId: "ST-341",
  },
  {
    rackTotCnt: "11",
    stationName: "184. SK망원동주유소 건너편",
    parkingBikeTotCnt: "4",
    shared: "0",
    stationLatitude: "37.55894852",
    stationLongitude: "126.90775299",
    stationId: "ST-342",
  },
  {
    rackTotCnt: "17",
    stationName: "185. 마포 신수공원 앞",
    parkingBikeTotCnt: "5",
    shared: "0",
    stationLatitude: "37.54254532",
    stationLongitude: "126.93429565",
    stationId: "ST-343",
  },
  {
    rackTotCnt: "42",
    stationName: "186. 월드컵공원",
    parkingBikeTotCnt: "22",
    shared: "10",
    stationLatitude: "37.56396484",
    stationLongitude: "126.89820862",
    stationId: "ST-344",
  },
  {
    rackTotCnt: "12",
    stationName: "188. 홍은동 정원여중 입구",
    parkingBikeTotCnt: "2",
    shared: "0",
    stationLatitude: "37.58638763",
    stationLongitude: "126.93512726",
    stationId: "ST-346",
  },
  {
    rackTotCnt: "12",
    stationName: "191. 서우빌딩(바른학원)",
    parkingBikeTotCnt: "6",
    shared: "0",
    stationLatitude: "37.57889175",
    stationLongitude: "126.91073608",
    stationId: "ST-347",
  },
  {
    rackTotCnt: "12",
    stationName: "192. 연서어린이공원",
    parkingBikeTotCnt: "0",
    shared: "0",
    stationLatitude: "37.57222748",
    stationLongitude: "126.92306519",
    stationId: "ST-348",
  },
  {
    rackTotCnt: "12",
    stationName: "194. 증산교 앞",
    parkingBikeTotCnt: "2",
    shared: "0",
    stationLatitude: "37.57731628",
    stationLongitude: "126.90296936",
    stationId: "ST-350",
  },
  {
    rackTotCnt: "12",
    stationName: "195. 모래내고가차도 ",
    parkingBikeTotCnt: "6",
    shared: "42",
    stationLatitude: "37.56765747",
    stationLongitude: "126.91780853",
    stationId: "ST-351",
  },
  {
    rackTotCnt: "12",
    stationName: "196. 연희교차로 인근",
    parkingBikeTotCnt: "1",
    shared: "0",
    stationLatitude: "37.56612015",
    stationLongitude: "126.92589569",
    stationId: "ST-352",
  },
  {
    rackTotCnt: "17",
    stationName: "198. 충정2교",
    parkingBikeTotCnt: "15",
    shared: "0",
    stationLatitude: "37.56213760",
    stationLongitude: "126.96377563",
    stationId: "ST-354",
  },
  {
    rackTotCnt: "32",
    stationName: "199. 서울 월드컵 경기장",
    parkingBikeTotCnt: "7",
    shared: "0",
    stationLatitude: "37.56684494",
    stationLongitude: "126.89644623",
    stationId: "ST-443",
  },
  {
    rackTotCnt: "22",
    stationName: "200. 국회의원회관",
    parkingBikeTotCnt: "8",
    shared: "0",
    stationLatitude: "37.52841568",
    stationLongitude: "126.91391754",
    stationId: "ST-45",
  },
  {
    rackTotCnt: "17",
    stationName: "201. 진미파라곤 앞",
    parkingBikeTotCnt: "9",
    shared: "6",
    stationLatitude: "37.53123856",
    stationLongitude: "126.92133331",
    stationId: "ST-46",
  },
  {
    rackTotCnt: "32",
    stationName: "202. 국민일보 앞",
    parkingBikeTotCnt: "21",
    shared: "19",
    stationLatitude: "37.52881622",
    stationLongitude: "126.92453003",
    stationId: "ST-47",
  },
  {
    rackTotCnt: "17",
    stationName: "203. 국회의사당역 3번출구 옆",
    parkingBikeTotCnt: "14",
    shared: "76",
    stationLatitude: "37.52805710",
    stationLongitude: "126.91870117",
    stationId: "ST-51",
  },
  {
    rackTotCnt: "15",
    stationName: "204. 국회의사당역 5번출구 옆",
    parkingBikeTotCnt: "10",
    shared: "53",
    stationLatitude: "37.52816391",
    stationLongitude: "126.91702271",
    stationId: "ST-50",
  },
  {
    rackTotCnt: "22",
    stationName: "205. 산업은행 앞",
    parkingBikeTotCnt: "13",
    shared: "0",
    stationLatitude: "37.52626419",
    stationLongitude: "126.92050934",
    stationId: "ST-52",
  },
  {
    rackTotCnt: "37",
    stationName: "206. KBS 앞",
    parkingBikeTotCnt: "24",
    shared: "11",
    stationLatitude: "37.52466583",
    stationLongitude: "126.91802216",
    stationId: "ST-53",
  },
  {
    rackTotCnt: "42",
    stationName: "207. 여의나루역 1번출구 앞",
    parkingBikeTotCnt: "16",
    shared: "0",
    stationLatitude: "37.52698898",
    stationLongitude: "126.93209839",
    stationId: "ST-73",
  },
  {
    rackTotCnt: "14",
    stationName: "209. 유진투자증권빌딩 앞",
    parkingBikeTotCnt: "12",
    shared: "14",
    stationLatitude: "37.52461243",
    stationLongitude: "126.92783356",
    stationId: "ST-55",
  },
  {
    rackTotCnt: "23",
    stationName: "210. IFC몰",
    parkingBikeTotCnt: "16",
    shared: "13",
    stationLatitude: "37.52606583",
    stationLongitude: "126.92553711",
    stationId: "ST-56",
  },
  {
    rackTotCnt: "15",
    stationName: "211. 여의도역 4번출구 옆",
    parkingBikeTotCnt: "2",
    shared: "0",
    stationLatitude: "37.52222824",
    stationLongitude: "126.92463684",
    stationId: "ST-57",
  },
  {
    rackTotCnt: "37",
    stationName: "212. 여의도역 1번출구 옆",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.52136230",
    stationLongitude: "126.92346191",
    stationId: "ST-58",
  },
];

⭐ 코드 스니펫

자전거 개수가 5개 이하인 정류장 이름 출력하기

for (let i = 0; i < bikes.length; i++) {
    if (bikes[i]['parkingBikeTotCnt'] <= 5) {
        let station = bikes[i]['stationName'];
        console.log(station)
    }
}

입력한 자전거 개수 이하인 정류장 이름을 출력하는 함수 만들기

function show_names(num) {
    for (let i = 0; i < bikes.length; i++) {
        if (bikes[i]['parkingBikeTotCnt'] <= num) {
            let station = bikes[i]['stationName'];
            console.log(num + '대 이하 정류장: ' + station);
        }
    }
}

show_names(10)  // 10개 이하 주차된 정류소만 출력
show_names(5)  // 5개 이하 주차된 정류소만 출력

스파르타 코딩클럽에서는 파이참을 이용해서 코드 편집을 한다. 지금까지는 VS Code를 이용해서 했었는데 아직은 익숙하지 않다. 파이참이 조금 더 무거운 느낌,,🙄 그래도 편리하다!
반복문이 늘 어려웠었는데 이해되기 쉽게 설명해주셨다. 해당 조건에 따라 반복문을 만드는 것에 그치는 것이 아니라 이것을 이용해서 입력받은 값에 따라 원하는 값을 출력하는 함수를 만드는 것 까지 다양하게 볼 수 있어서 좋았다! 앞으로도 반복문을 활용하는 예제들이 나온다고 하니까 활용성을 높여서 공부할 수 있을 것 같다.

1. HTML 기초

[Quiz] 간단한 로그인 페이지 만들기

2. CSS 기초

CSS 속성들

자주 쓰이는 CSS 연습하기

3. 폰트 / 주석 / 파일분리

폰트

주석

파일 분리

4. 부트스트랩 사용하기

[Quiz] 나홀로 메모장 만들기

[Quiz] 나홀로메모장의 포스팅박스 완성하기

5. Javascript 기초문법

변수

자료형

리스트

딕셔너리

리스트와 딕셔너리의 활용

함수

나눗셈의 나머지 구하기

모든 알파벳을 대문자로 바꾸기

특정문자로 문자열 나누기

특정문자로 합치기

조건문

if / else / else if

AND / OR

반복문

6. Javascript 연습하기

예제1

예제2

티스토리툴바