digital520

위니브 바이브코딩 캠프 도전기와 프로젝트

digital520 — Sun, 11 Jan 2026 03:04:46 +0900

4박 5일간의 위니브 바이브코딩 캠프 도전기와 프로젝트

[Thread 1: 인트로 & 도전 시작]
1월 5일, 바이브코딩(Vibe Coding)의 시작!

제주 게이미피케이션 여행 앱 <Jeju Quest>의 랜딩페이지를 개발하고 배포까지 마쳤습니다.

그 치열했던 4박 5일의 개발 기록과 기술 스택을 공유합니다.

[Thread 2: 프로젝트 소개 & 백엔드]
Project: Jeju Quest 랜딩페이지
제주 여행에 게임 요소를 더한 서비스의 시장 검증을 위한 랜딩페이지입니다.

Backend Tech Stack
안정적이고 빠른 개발을 위해 Python 생태계를 선택했습니다.

* Lang: Python 3.11
* Framework: Django 5.x
* Server: Gunicorn (WSGI)
* DB:SQLite (개발/배포 용이성)

기본에 충실하면서도 확장성을 고려한 세팅!

[Thread 3: 프론트엔드 & 디자인 시스템]
Frontend & Design
복잡한 프레임워크 대신, Django Templates와 Vanilla JS로 가볍게 구성했습니다.

* Rendering:Server-side Rendering (Django Templates)
* Style:Vanilla CSS (CSS Variables 기반 디자인 시스템)
* Interaction:Vanilla JS
* Icons:Lucide Icons

Typography

* 본문: Pretendard (가독성 1티어!)
* 로고:Playfair Display(Jeju) + Pacifico(Quest) 조합으로 감성 더하기

[Thread 4: 주요 기능 & 외부 API]
Key Features
단순한 페이지 같지만, 마케팅에 필수적인 기능들을 꽉 채웠습니다.

1. 사전예약 폼:이메일 수집 및 DB 저장
2. 추천인 시스템:바이럴을 위한 코드 생성 및 추적
3. 티저 퀴즈:유저 흥미 유발
4. 공유 기능: Kakao JavaScript SDK 연동으로 카톡/인스타 공유

[Thread 5: 인프라 & 프로젝트 구조]
Infra & Deploy
비용 효율적인 무료 플랜을 활용해 배포까지 완료!

* Hosting:Render (Free Plan)
* CI/CD:GitHub (소스 관리 및 자동 배포)

Project Structure
`jeju-quest-landing/`
├── `config/` (Django 설정)
├── `landing/` (핵심 로직: models, views)
├── `templates/` (HTML 구조)
└── `static/` (CSS, Img)

[Thread 6: 마무리]
4박 5일이라는 짧은 시간 동안 기획부터 배포까지, 몰입의 즐거움을 제대로 느꼈던 시간이었습니다.

단순히 코드를 짜는 것을 넘어, 서비스를 어떻게 보여줄지 고민했던 Jeju Quest 프로젝트!

#바이브사계 #바이브코딩 #위니브 #오피스제주 #제주런케이션 #개발로그 #제주여행게임앱 #제주퀘스트 #랜딩페이지

https://jeju-quest-landing.onrender.com/

위니브 바이브코딩 참가 후기

digital520 — Fri, 9 Jan 2026 22:22:47 +0900

위니브 바이브코딩 참가 후기

올해 새해 첫 번째 목표는 분명했다.
바이브코딩을 통해 내가 직접 만들고 싶은 서비스를
기획하고, 개발하고, 배포까지 해보는 것.

그래서 책도 사서 보고,
동영상 강의도 구매해 실험도 해 보았다.
하지만 혼자서는 늘 어딘가 막히는 느낌이 있었다.

그러던 중
위니브 바이브코딩 1기 캠프가 열린다는 소식을 접했고,
고민 없이 바로 신청했다.

위니브는 제주를 대표하는 ICT 교육 콘텐츠 기업이다.
과거 이호준 대표님의 데이터 분석 여름 특강을 수강한 경험이 있었기에 이번 바이브코딩 캠프 역시 믿고 선택할 수 있었다.
솔직히 기대도 컸다.

그리고 보통 기대가 크면 실망도 따르기 마련인데…

이번 캠프는 달랐다.

1월 5일, 첫 강의.
4박 5일 동안 기획 → 개발 → 배포까지 완주한다는 커리큘럼에 설렘과 긴장이 동시에 있었다.

참여자 구성도 인상적이었다.
개발자가 아닌 20대부터 60대까지의 대표, 예비 창업자, 기획자, 디자이너 등 일반인 중심의 캠프였다.

바이브코딩은 누구나 시도할 수 있지만,
실제로 서비스를 끝까지 만들어 배포하는 건 결코 쉽지 않다.

그런데 첫 강의를 듣자마자 느낀 점은
참가자 수준에 맞게 커리큘럼이 정말 잘 설계되어 있다는 것이었다.

“이건 된다”는 확신이 들었다.

강의는 매일 13:30부터 18:00까지.

그리고 강의가 끝나면
각자 배운 내용을 바탕으로
자신의 서비스를 만들기 위해 밤늦게까지 몰입한다.

그 분위기 자체가
나에게도 큰 동기부여가 되었다.

그리고 오늘, 1월 9일.
드디어 발표 날.

각자가 치열하게 기획하고, 개발하고,
실제로 배포까지 완료한 서비스를 선보였다.

처음엔 “과연 가능할까?” 싶었지만,
모든 참여자가 끝까지 해냈다.
진심으로 큰 박수를 보내고 싶다.

이번 캠프는
기대에서 시작해, 큰 기대로 끝난 캠프였다.

위니브 바이브코딩 캠프가
제주를 대표하는 교육 브랜드로
오래오래 자리 잡기를 진심으로 응원합니다.

#바이브사계 #바이브코딩 #위니브 #오피스제주 #제주런케이션

Part 5. 수익형 웹 서비스 구현하기(4) - 주식 투자 포트폴리오 만들기

digital520 — Thu, 4 Apr 2024 17:28:34 +0900

5-1. 주식 투자 포트폴리오 미리보기

5-2. 주식 투자 포트폴리오의 프로그래밍적 원리 이해하기

Dictionary 자료형

JavaScript에는 DIctionary(딕셔너리, 사전)라는 자료형이 있습니다. 딕셔너리는 비슷한 형태의 많은 값들을 저장할 때 유리합니다. 우리는 여러 주식 종목을 딕셔너리를 사용해서 저장하려고 해요. 딕셔너리는 아래와 같이 사용합니다.

종목 평단가 보유수량

var stocks = {
    "삼성전자": {
        price: 20000,
        amount: 2
    },
    "아마존": {
        price: 30000,
        amount: 3
    },
    "애플": {
        price: 40000,
        amount: 4
    },
};

딕셔너리에 저장되어 있는 값을 가져오려면 다음과 같이 코드를 작성합니다. 만약 삼성전자의 정보를 가져오고 싶다면:

console.log(stocks["삼성전자"]);
// {price: 20000, amount: 2}

삼성전자의 주식 가격과 수량을 가져오고 싶다면 아래와 같이 작성합니다.

console.log(stocks["삼성전자"]["price"]);
// 20000
console.log(stocks["삼성전자"]["amount"]);
// 2

딕셔너리에 저장된 값을 변경하는 것도 가능합니다. 만약 애플 주식의 보유수량을 변경하고 싶다면 아래와 같이 작성해요.

stocks["애플"]["amount"] = 10;

console.log(stocks["애플"])

// {price: 40000, amount: 10}

총 보유주식 평가금액 계산하기

우리가 보유한 주식은 모두 딕셔너리에 저장되어 있습니다. 우리가 보유한 주식의 총 평가금액을 계산하기 위해서는 아래와 같은 코드를 작성합니다.

stocksPrice =
    stocks["삼성전자"]["price"] * stocks["삼성전자"]["amount"]
    + stocks["아마존"]["price"] * stocks["아마존"]["amount"]
    + stocks["애플"]["price"] * stocks["애플"]["amount"];

console.log(stocksPrice);

[심화] for 반복문 사용하기

위의 방법은 정말 직관적이지만 종목이 추가될 때마다 코드가 계속 길어진다는 단점이 있습니다. 그리고 종목 이름만 바뀔 뿐 연산하는 순서와 구조는 종목마다 완전히 동일하죠.

위의 코드를 사용해도 무관하나 조금 더 편한 방법은 JavaScript의 for 구문을 사용하는 것입니다. 아래처럼요.

var stocksPrice; // 총 보유주식 평가금액

stocksPrice = 0; // 0원 초기화

for (var event in stocks) { // 종목 개수만큼 아래 구문 반복
    var stock = stocks[event]; // 종목 선택

    stocksPrice = stocksPrice + stock["price"] * stock["amount"]; // 가격 계산 및 합산
}

console.log(stocksPrice); // 결과 출력

for 구문은 종목 단위로 순차적으로 계산합니다. 위 예제에서는 for 구문 안에 있는 코드가 종목 개수만큼 3번 반복됩니다. 차례로 한 종목씩 가격을 계산해 stocksPrice에 더해주고, 마지막에 stocksPrice 를 출력하면 보유 주식의 총 평가금액을 구할 수 있죠!

함수(Function) 사용하기

프로그래머들은 반복적인 일을 매우 싫어하여 함수라는 개념을 만들어 함수를 재활용합니다. 우리는 앞 파트에서도 이미 함수들을 사용하고 있었는데요. 조금만 더 깊게 공부해보죠.

function plus(a, b) {
		return a + b;
}

var result = plus(2, 3);

console.log(result);

위의 코드는 a와 b를 더해 반환하는 간단한 함수를 만들었습니다. 우리는 plus()라는 함수에 a=2, b=3 을 넣어 a와 b를 더하게끔 할 수 있죠. a와 b에 어떤 값을 넣을지는 여러분의 자유입니다.

5-3. HTML로 포트폴리오 틀 만들기

보일러플레이트

새로운 프로젝트를 시작할 때는 항상 보일러플레이트 코드부터 시작합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$(document).ready(function() {

});

style.css

/* 비어있음 */

현황판 만들기

보유자산, 평가손익, 수익률을 한 눈에 볼 수 있는 현황판을 작성합니다.

<h1>주식투자 포트폴리오</h1>

<div>총 보유자산 <span id="total">0</span> 원</div>

<div>총 보유현금 <span id="cash">0</span> 원</div>

<div>총 보유주식 <span id="stocks-price">0</span> 원</div>

<div>평가손익 <span id="profit">0</span> 원</div>

<div>수익률 <span id="percentage">0</span> %</div>

거래 기록 만들기

거래기록은 테이블(표)로 만들어주겠습니다. Bootstrap 문서를 참고해주세요.

Tables 문서: https://getbootstrap.com/docs/5.2/content/tables/

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

getbootstrap.com

table class 안에 table-striped, table-hover를 넣어 더 예쁘게 꾸며줍니다. 문서에 보면 다양한 옵션들이 많아요!

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th scope="col">시간</th>
            <th scope="col">종목</th>
            <th scope="col">거래</th>
            <th scope="col">평단가</th>
            <th scope="col">수량</th>
            <th scope="col">평가금액</th>
        </tr>
    </thead>
    <tbody id="trade-history">
        <tr>
            <th scope="row">2022-11-17 12:00:00</th>
            <td>삼성전자</td>
            <td>매도</td>
            <td>10,000</td>
            <td>2</td>
            <td>20,000</td>
        </tr>
    </tbody>
</table>

사용자 입력 구현하기

사용자가 입력해야하는 항목은 아래와 같습니다.

거래 날짜와 시간 (datetime-local)
거래 종목 (select box)
평단가 (매수 평균가격, 매도 평균가격) (text)
거래 수량 (text)
매수 또는 매도 (버튼)

<input type="datetime-local" id="datetime" />

<select id="event">
    <option value="삼성전자">삼성전자</option>
    <option value="아마존">아마존</option>
    <option value="애플">애플</option>
</select>

<input type="text" id="price" placeholder="평단가" />
<input type="text" id="amount" placeholder="수량" />

<button type="button" id="buy">매수</button>
<button type="button" id="sell">매도</button>

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>주식투자 포트폴리오</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>주식투자 포트폴리오</h1>

        <div>총 보유자산 <span id="total">0</span> 원</div>

        <div>총 보유현금 <span id="cash">0</span> 원</div>

        <div>총 보유주식 <span id="stocks-price">0</span> 원</div>

        <div>평가손익 <span id="profit">0</span> 원</div>

        <div>수익률 <span id="percentage">0</span> %</div>

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">시간</th>
                    <th scope="col">종목</th>
                    <th scope="col">거래</th>
                    <th scope="col">평단가</th>
                    <th scope="col">수량</th>
                    <th scope="col">평가금액</th>
                </tr>
            </thead>
            <tbody id="trade-history">
                <tr>
                    <th scope="row">2022-11-17 12:00:00</th>
                    <td>삼성전자</td>
                    <td>매도</td>
                    <td>10,000</td>
                    <td>2</td>
                    <td>20,000</td>
                </tr>
            </tbody>
        </table>

        <input type="datetime-local" id="datetime" />

        <select id="event">
            <option value="삼성전자">삼성전자</option>
            <option value="아마존">아마존</option>
            <option value="애플">애플</option>
        </select>

        <input type="text" id="price" placeholder="평단가" />
        <input type="text" id="amount" placeholder="수량" />

        <button type="button" id="buy">매수</button>
        <button type="button" id="sell">매도</button>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

5-4. 포트폴리오 로직 만들기 1

초기 변수 지정하기

먼저 전역적으로 자주 사용할 변수들을 정의합니다.

initCash(최초 현금 보유량): 사용자가 최초 100만원의 현금으로 투자를 시작한다고 가정
initStocks(최초 주식 보유량): 사용자가 보유한 주식은 0개라고 가정
stocks(총 주식 보유량): 사용자가 현재 보유하고 있는 주식 수. initStock과 같은 형태를 가진다.
cash(총 현금 보유량): 사용자가 현재 보유한 현금
stocksPrice(총 보유주식 평가금액): 사용자가 보유한 주식을 현금 가치로 환산한 값
total(총 보유자산): 사용자가 보유한 현금과 사용자가 보유한 주식의 현금 가치의 합
tradeHistory(거래 기록): 사용자가 거래한 기록을 표 형태로 표시

var initCash = 1000000; // 최초 현금 보유량
var initStocks = {
    "삼성전자": {
        price: 0,
        amount: 0
    },
    "아마존": {
        price: 0,
        amount: 0
    },
    "애플": {
        price: 0,
        amount: 0
    },
}; // 최초 주식 보유량

var stocks; // 총 주식 보유량
var cash; // 총 현금 보유량
var stocksPrice; // 총 보유주식 평가금액
var total; // 총 보유자산 (현금 + 주식)
var tradeHistory; // 거래 기록

자주 사용할 함수 정의

앞으로 자주 사용할 코드를 함수로 작성하여 사용하기 간편하게 묶어주겠습니다.

getStocksPrice() - 총 보유주식 평가금액을 계산하는 함수 (아래 두 방법 중 하나 선택)

a. for 구문을 사용하지 않은 경우

function getStocksPrice() {
		stocksPrice =
		    stocks["삼성전자"]["price"] * stocks["삼성전자"]["amount"]
		    + stocks["아마존"]["price"] * stocks["아마존"]["amount"]
		    + stocks["애플"]["price"] * stocks["애플"]["amount"];
}

b. for 구문을 사용한 경우

function getStocksPrice() {
    stocksPrice = 0;

    for (var event in stocks) {
        var stock = stocks[event];

        stocksPrice = stocksPrice + stock["price"] * stock["amount"];
    }
}

2.setStock(event, price, amount) - 거래가 발생하면 주식 평단가와 보유수량을 변경하여 딕셔너리와 로컬스토리지에 저장하는 함수

로컬스토리지에는 문자열(string)만 저장할 수 있기 때문에 JSON.stringify() 함수를 사용하여 딕셔너리를 문자열로 변환합니다.

function setStock(event, price, amount) {
    var stock = stocks[event];

    stocks[event] = {
        price: price,
        amount: amount + stock["amount"]
    }

    localStorage.setItem("stocks", JSON.stringify(stocks));
}

3. showResult() - 현황판에 표시되는 값을 표시하는 함수

function showResult() {
    total = cash + stocksPrice;

    var profit = total - initCash;
    var percentage = profit / initCash * 100;

    percentage = Math.round(percentage);

    $("#total").html(total.toLocaleString());
    $("#cash").html(cash.toLocaleString());
    $("#stocks-price").html(stocksPrice.toLocaleString());
    $("#profit").html(profit.toLocaleString());
    $("#percentage").html(percentage);
    $("#trade-history").html(tradeHistory);
}

5-5. 포트폴리오 로직 만들기 2

로컬스토리지에 저장된 값 불러오기

우리는 로컬스토리지에 아래의 값을 저장하여 사용하려고 합니다.

stocks: 사용자가 보유한 주식 수
cash: 사용자가 보유한 현금
tradeHistory: 사용자의 거래 기록 (표 형태)

이미 값들이 로컬스토리지에 저장되어 있다면 저장된 값을 사용하고 저장된 값이 없다면 초기값을 사용하도록 코드를 작성합니다.

stocks 딕셔너리를 로컬스토리지에 저장할 때 JSON.stringify()를 사용하여 문자열로 저장했습니다. 저장된 값을 불러오면 문자열 값으로 불러오기 때문에 문자열을 다시 딕셔너리로 변경하기 위해 JSON.parse() 함수를 사용합니다.

JSON.stringify(): 딕셔너리 → 문자열
JSON.parse(): 문자열 → 딕셔너리

$(document).ready(function() {
    stocks = JSON.parse(localStorage.getItem("stocks"));

    if (stocks == null) {
        stocks = initStocks;
    }

    cash = localStorage.getItem("cash");

    if (cash == null) {
        cash = initCash;
    }

    cash = parseFloat(cash);

    tradeHistory = localStorage.getItem("tradeHistory");

    if (tradeHistory == null) {
        tradeHistory = "";
    }
});

현황판 보여주기

위에서 작성한 함수를 사용하여 총 보유주식 평가금액을 계산하고 현황판에 결과를 표시합니다. 아직 거래가 없어 0으로 표시될 거에요.

getStocksPrice();
showResult();

버튼 클릭 함수 연결하기

매수, 매도 버튼을 누르면 실행할 함수를 만들고 연결합니다.

$("#buy").click(buyHandler);
$("#sell").click(sellHandler);

[매수] 사용자 입력값 받아오기

datetime: 날짜와 시간
event: 종목
price: 평단가
amount: 수량

function buyHandler() {
		var datetime = $("#datetime").val();
    var event = $("#event").val();
    var price = $("#price").val();
    var amount = $("#amount").val();

    price = parseFloat(price);
    amount = parseFloat(amount);
}

[매수] 보유 현금 업데이트하기

사용자가 구매한 주식의 총 가격은 평단가(price) * 수량(amount) 입니다. 사용자가 가진 현금에서 매수한 가격만큼 빼서 cash에 저장합니다.

var buyPrice = price * amount;

cash = cash - buyPrice;

localStorage.setItem("cash", cash);

[매수] 거래 기록 업데이트하기

거래 기록은 표 형태로 나타내야하기 때문에 아래와 같이 백틱을 사용해서 tr 태그 안쪽을 작성합니다. 과거 기록을 누적시키기 위해 tradeHistory를 더해주는 것도 잊지말구요.

마지막으로 거래 기록 또한 로컬스토리지에 저장합니다.

tradeHistory = `<tr>
    <th scope="row">${datetime}</th>
    <td>${event}</td>
    <td>매수</td>
    <td>${price.toLocaleString()}</td>
    <td>${amount}</td>
    <td>${buyPrice.toLocaleString()}</td>
</tr>` + tradeHistory;

localStorage.setItem("tradeHistory", tradeHistory);

[매수] 주식 보유량 업데이트하기

사용자가 매수한 종목, 평단가, 수량을 setStock() 함수에 넘겨 평단가와 보유 수량을 업데이트합니다.

setStock(event, price, amount);

[매수] 현황판 업데이트하기

현금, 주식보유수에 따라 현황판도 함께 업데이트합니다.

getStocksPrice();
showResult();

[매도] 사용자 입력값 받아오기

datetime: 날짜와 시간
event: 종목
price: 평단가
amount: 수량

var datetime = $("#datetime").val();
var event = $("#event").val();
var price = $("#price").val();
var amount = $("#amount").val();

price = parseFloat(price);
amount = parseFloat(amount);

[매도] 보유 현금 업데이트하기

사용자가 판매한 주식의 총 가격은 평단가(price) * 수량(amount) 입니다. 사용자가 가진 현금에서 매도한 가격만큼 더해서 cash에 저장합니다.

var sellPrice = price * amount;

cash = cash + sellPrice;

localStorage.setItem("cash", cash);

[매도] 거래 기록 업데이트하기

매수때와 거의 동일한 코드를 사용합니다. 매수 → 매도, buyPrice → sellPrice 로 변경합니다.

tradeHistory = `<tr>
    <th scope="row">${datetime}</th>
    <td>${event}</td>
    <td>매도</td>
    <td>${price.toLocaleString()}</td>
    <td>${amount}</td>
    <td>${sellPrice.toLocaleString()}</td>
</tr>` + tradeHistory;

localStorage.setItem("tradeHistory", tradeHistory);

[매도] 주식 보유량 업데이트하기

사용자가 매도한 종목, 평단가, 수량을 setStock() 함수에 넘겨 평단가와 보유 수량을 업데이트합니다. 매도와 달리 수량에 -1을 곱해 음수로 만들어주어 판매한 만큼 수량을 차감합니다.

setStock(event, price, -1 * amount)

[매도] 현황판 업데이트하기

현금, 주식보유수에 따라 현황판도 함께 업데이트합니다.

getStocksPrice();
showResult();

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>주식투자 포트폴리오</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>주식투자 포트폴리오</h1>

        <div>총 보유자산 <span id="total">0</span> 원</div>

        <div>총 보유현금 <span id="cash">0</span> 원</div>

        <div>총 보유주식 <span id="stocks-price">0</span> 원</div>

        <div>평가손익 <span id="profit">0</span> 원</div>

        <div>수익률 <span id="percentage">0</span> %</div>

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">시간</th>
                    <th scope="col">종목</th>
                    <th scope="col">거래</th>
                    <th scope="col">평단가</th>
                    <th scope="col">수량</th>
                    <th scope="col">평가금액</th>
                </tr>
            </thead>
            <tbody id="trade-history">
                <tr>
                    <th scope="row">2022-11-17 12:00:00</th>
                    <td>삼성전자</td>
                    <td>매도</td>
                    <td>10,000</td>
                    <td>2</td>
                    <td>20,000</td>
                </tr>
            </tbody>
        </table>

        <input type="datetime-local" id="datetime" />

        <select id="event">
            <option value="삼성전자">삼성전자</option>
            <option value="아마존">아마존</option>
            <option value="애플">애플</option>
        </select>

        <input type="text" id="price" placeholder="평단가" />
        <input type="text" id="amount" placeholder="수량" />

        <button type="button" id="buy">매수</button>
        <button type="button" id="sell">매도</button>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

var initCash = 1000000; // 최초 현금 보유량
var initStocks = {
    "삼성전자": {
        price: 0,
        amount: 0
    },
    "아마존": {
        price: 0,
        amount: 0
    },
    "애플": {
        price: 0,
        amount: 0
    },
}; // 최초 주식 보유량

var stocks; // 총 주식 보유량
var cash; // 총 현금 보유량
var stocksPrice; // 총 보유주식 평가금액
var total; // 총 보유자산 (현금 + 주식)
var tradeHistory; // 거래 기록

function getStocksPrice() {
    stocksPrice = 0;

    for (var event in stocks) {
        var stock = stocks[event];

        stocksPrice = stocksPrice + stock["price"] * stock["amount"];
    }
}

function setStock(event, price, amount) {
    var stock = stocks[event];

    stocks[event] = {
        price: price,
        amount: amount + stock["amount"]
    }

    localStorage.setItem("stocks", JSON.stringify(stocks));
}

function showResult() {
    total = cash + stocksPrice;

    var profit = total - initCash;
    var percentage = profit / initCash * 100;

    percentage = Math.round(percentage);

    $("#total").html(total.toLocaleString());
    $("#cash").html(cash.toLocaleString());
    $("#stocks-price").html(stocksPrice.toLocaleString());
    $("#profit").html(profit.toLocaleString());
    $("#percentage").html(percentage);
    $("#trade-history").html(tradeHistory);
}

function buyHandler() {
    var datetime = $("#datetime").val();
    var event = $("#event").val();
    var price = $("#price").val();
    var amount = $("#amount").val();

    price = parseFloat(price);
    amount = parseFloat(amount);

    var buyPrice = price * amount;

    cash = cash - buyPrice;

    localStorage.setItem("cash", cash);

    tradeHistory = `<tr>
        <th scope="row">${datetime}</th>
        <td>${event}</td>
        <td>매수</td>
        <td>${price.toLocaleString()}</td>
        <td>${amount}</td>
        <td>${buyPrice.toLocaleString()}</td>
    </tr>` + tradeHistory;

    localStorage.setItem("tradeHistory", tradeHistory);

    setStock(event, price, amount);
    getStocksPrice();
    showResult();
}

function sellHandler() {
    var datetime = $("#datetime").val();
    var event = $("#event").val();
    var price = $("#price").val();
    var amount = $("#amount").val();

    price = parseFloat(price);
    amount = parseFloat(amount);

    var sellPrice = price * amount;

    cash = cash + sellPrice;

    localStorage.setItem("cash", cash);

    tradeHistory = `<tr>
        <th scope="row">${datetime}</th>
        <td>${event}</td>
        <td>매도</td>
        <td>${price.toLocaleString()}</td>
        <td>${amount}</td>
        <td>${sellPrice.toLocaleString()}</td>
    </tr>` + tradeHistory;

    localStorage.setItem("tradeHistory", tradeHistory);

    setStock(event, price, -1 * amount)
    getStocksPrice();
    showResult();
}

$(document).ready(function() {
    stocks = JSON.parse(localStorage.getItem("stocks"));

    if (stocks == null) {
        stocks = initStocks;
    }

    cash = localStorage.getItem("cash");

    if (cash == null) {
        cash = initCash;
    }

    cash = parseFloat(cash);

    tradeHistory = localStorage.getItem("tradeHistory");

    if (tradeHistory == null) {
        tradeHistory = "";
    }

    getStocksPrice();
    showResult();

    $("#buy").click(buyHandler);
    $("#sell").click(sellHandler);
});

사용자 입력 꾸미기

Input group 문서: https://getbootstrap.com/docs/5.2/forms/input-group/

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

getbootstrap.com

<div class="input-group">
    <input type="datetime-local" id="datetime" class="form-control" />

    <select id="event" class="form-select">
        <option value="삼성전자">삼성전자</option>
        <option value="아마존">아마존</option>
        <option value="애플">애플</option>
    </select>

    <input type="text" id="price" placeholder="평단가" class="form-control" />
    <input type="text" id="amount" placeholder="수량" class="form-control" />

    <button type="button" id="buy" class="btn btn-success">매수</button>
    <button type="button" id="sell" class="btn btn-danger">매도</button>
</div>

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>주식투자 포트폴리오</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>주식투자 포트폴리오</h1>

        <ul class="list-group">
            <li class="list-group-item">총 보유자산 <b id="total">0</b> 원</li>
            <li class="list-group-item">총 보유현금 <b id="cash">0</b> 원</li>
            <li class="list-group-item">총 보유주식 <b id="stocks-price">0</b> 원</li>
            <li class="list-group-item">평가손익 <b id="profit">0</b> 원</li>
            <li class="list-group-item">수익률 <b id="percentage">0</b> %</li>
        </ul>

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">시간</th>
                    <th scope="col">종목</th>
                    <th scope="col">거래</th>
                    <th scope="col">평단가</th>
                    <th scope="col">수량</th>
                    <th scope="col">평가금액</th>
                </tr>
            </thead>
            <tbody id="trade-history">
                <tr>
                    <th scope="row">2022-11-17 12:00:00</th>
                    <td>삼성전자</td>
                    <td>매도</td>
                    <td>10,000</td>
                    <td>2</td>
                    <td>20,000</td>
                </tr>
            </tbody>
        </table>

        <div class="input-group">
            <input type="datetime-local" id="datetime" class="form-control" />

            <select id="event" class="form-select">
                <option value="삼성전자">삼성전자</option>
                <option value="아마존">아마존</option>
                <option value="애플">애플</option>
            </select>

            <input type="text" id="price" placeholder="평단가" class="form-control" />
            <input type="text" id="amount" placeholder="수량" class="form-control" />

            <button type="button" id="buy" class="btn btn-success">매수</button>
            <button type="button" id="sell" class="btn btn-danger">매도</button>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

5-7. 오픈소스 라이브러리 사용하기

날짜 라이브러리 사용하기

거의 완성했습니다. 날짜 부분이 읽기 힘들어 눈에 조금 거슬리네요. 이것을 오픈소스 라이브러리를 사용해서 예쁘게 고쳐주겠습니다. 구글에 “jquery timeago”라고 검색하여 라이브러리의 GitHub 페이지로 들어갑니다.

jquery.timeago.js 파일을 다운로드하고 part5 폴더에 복사합니다. 추가적으로 한국어를 적용하기 위해 locales/jquery.timeago.ko.js 파일도 함께 다운로드하고 part5 폴더에 복사합니다.

아래와 같이 index.html에 불러오는 코드를 작성합니다. (순서 중요!)

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="jquery.timeago.js"></script>
<script src="jquery.timeago.ko.js"></script>
<script src="script.js"></script>

GitHub의 문서를 참고하여 buyHandler(), sellHandler() 안의 tradeHistory 변수에 들어가는 값을 아래와 같이 변경합니다

tradeHistory = `<tr>
    <th scope="row">
        <time class="timeago" datetime="${datetime}">${datetime}</time>
    </th>
    <td>${event}</td>
    <td>매수</td>
    <td>${price.toLocaleString()}</td>
    <td>${amount}</td>
    <td>${buyPrice.toLocaleString()}</td>
</tr>` + tradeHistory;

showResult() 함수 마지막에 다음 코드를 추가합니다.

$('time.timeago').timeago();

시간 위에 마우스 커서를 올려 자세한 시간을 툴팁으로 볼 수 있습니다.

5-8. [심화] 오픈소스 라이브러리 사용하기

그래프 라이브러리 사용하기

구글에 jquery graph 라고 검색하여 가장 상단에 나오는 jQuery Charts & Graphs | CanvasJS 글로 들어갑니다.

canvasJS라는 라이브러리에서 제공하는 많은 그래프 차트 중 동그란 모양의 파이차트를 사용하여 주식 보유량을 표시해보겠습니다.

클릭하여 들어가면 차트 미리보기와 샘플 코드를 제공합니다. 샘플 코드를 복사하여 script.js에 붙여넣기 합니다.

복사할 때는 var options = … 부터 $("#chartContainer").CanvasJSChart(options); 까지 우리가 필요한 부분만 복사합니다.

복사한 코드는 showResults() 함수의 가장 아래에 붙여넣기합니다.

var options = {
    title: {
        text: "Desktop OS Market Share in 2017"
    },
    subtitles: [{
        text: "As of November, 2017"
    }],
    animationEnabled: true,
    data: [{
        type: "pie",
        startAngle: 40,
        toolTipContent: "<b>{label}</b>: {y}%",
        showInLegend: "true",
        legendText: "{label}",
        indexLabelFontSize: 16,
        indexLabel: "{label} - {y}%",
        dataPoints: [
            { y: 48.36, label: "Windows 7" },
            { y: 26.85, label: "Windows 10" },
            { y: 1.49, label: "Windows 8" },
            { y: 6.98, label: "Windows XP" },
            { y: 6.53, label: "Windows 8.1" },
            { y: 2.45, label: "Linux" },
            { y: 3.32, label: "Mac OS X 10.12" },
            { y: 4.03, label: "Others" }
        ]
    }]
};

$("#chartContainer").CanvasJSChart(options);

코드를 자세히 보시면 #chartContainer 에 차트를 넣게끔 되어있는데 id가 chartContainer인 div를 HTML에 추가하겠습니다.

<div id="chartContainer"></div>

마지막으로 차트를 사용하기 위한 핵심 라이브러리를 로드하는 코드를 추가합니다. jquery 아래 script.js 위에 추가합니다.

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="jquery.timeago.js"></script>
<script src="jquery.timeago.ko.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="script.js"></script>

보기 좋게 HTML을 손 보겠습니다.

<div class="row">
    <div class="col">
        <ul class="list-group">
            <li class="list-group-item">총 보유자산 <b id="total">0</b> 원</li>
            <li class="list-group-item">총 보유현금 <b id="cash">0</b> 원</li>
            <li class="list-group-item">총 보유주식 <b id="stocks-price">0</b> 원</li>
            <li class="list-group-item">평가손익 <b id="profit">0</b> 원</li>
            <li class="list-group-item">수익률 <b id="percentage">0</b> %</li>
        </ul>
    </div>
    <div class="col" style="height: 400px;">
        <div id="chartContainer"></div>
    </div>
</div>

마지막으로 script.js 에서 쓸데없는 코드를 삭제하고 실제 보유 주식을 보여주기 위한 코드를 수정합니다.

var options = {
    animationEnabled: true,
    data: [{
        type: "pie",
        dataPoints: [
            { y: stocks["삼성전자"]["price"] * stocks["삼성전자"]["amount"], 
            label: "삼성전자" },
            { y: stocks["아마존"]["price"] * stocks["아마존"]["amount"], label: "아마존" },
            { y: stocks["애플"]["price"] * stocks["애플"]["amount"], label: "애플" },
        ]
    }]
};

$("#chartContainer").CanvasJSChart(options);

거래목록 검색기능 구현하기

거래목록이 많아질 경우 보기 불편하니 검색기능 넣어보겠습니다. 구글에 “bootstrap jquery table filter” 라고 검색하여 들어갑니다.

Bootstrap Filters (Advanced): https://www.w3schools.com/bootstrap/bootstrap_filters.asp

Bootstrap Filters

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

위 사이트에서 직접 기능을 체험해볼 수도 있고 코드도 제공합니다. 코드를 복사하여 script.js에 붙여넣기 합니다. 코드를 자세히 보면 고쳐야 할 부분이 두 가지 있습니다. 먼저 사용자의 검색어 입력을 받는 부분(텍스트박스도 새로 만들어야겠군요)과 테이블의 id를 수정해야합니다.

검색어 입력 id: myInput → search
테이블의 id: myTable → trade-history

$("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#trade-history tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

<input type="text" class=form-control id="search" placeholder="검색" />

이렇게 간단하게 검색 기능을 만들 수 있습니다.

5-9. 기타 기능 구현하기

금액, 수량 체크해서 알림주기

이제 포트폴리오가 거의 완성되었지만 아직 버그가 있습니다. 아래 두 가지 사항에 대해서요.

매수 시 구입하려는 주식 금액이 보유한 현금보다 많을 때
매도 시 보유한 주식 수량보다 판매하려는 주식 수량이 많을 때

위 두 경우에 대해서는 거래가 일어나지 않도록 예외처리를 해주어야 합니다. 그리고 사용자에게 돈이 부족하다고 알림도 줘야겠지요. 한 번 구현해봅시다.yHandler() 안에 다음과 같이 작성합니다.

if (buyPrice > cash) {
    console.log("보유한 현금이 부족합니다.");
    return false;
}

구입하려는 주식 금액(buyPrice)이 현금(cash)보다 많으면 개발자 콘솔에 “보유한 현금이 부족합니다.” 메시지를 띄우고 중단합니다. 그러나 사용자들은 개발자 콘솔을 모르기 떄문에 HTML로 보여주는게 좋겠죠? Bootstrap의 Alerts 문서를 참고하여 만들어봅시다.

Alerts 문서: https://getbootstrap.com/docs/5.2/components/alerts/

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

< style="display: none;” 을 입력하여 처음에 보이지 않도록 설정합니다.

<div class="alert alert-danger" role="alert" id="alert" style="display: none;">
    A simple danger alert—check it out!
</div>

jQuery의 show(), hide() 함수를 사용하여 메시지를 보여주거나 숨길 수 있습니다.

if (buyPrice > cash) {
    $("#alert").html("보유한 현금이 부족합니다.");
    $("#alert").show();
    return false;
}

$("#alert").hide();

마찬가지로 2번의 경우(매도 시 보유한 주식 수량보다 판매하려는 주식 수량이 많을 때)도 예외처리를 해주죠.

if (amount > stocks[event]["amount"]) {
    $("#alert").html("보유한 수량보다 더 많은 수량을 매도할 수 없습니다.");
    $("#alert").show();
    return false;
}

$("#alert").hide();

홈페이지와 연결하기

이제 홈페이지(main.html)와 연결해봅시다. 이제 혼자서 할 수 있겠죠?

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>주식투자 포트폴리오</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="/main.html">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part3/index.html">대출이자 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part4/index.html">일기장</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/part5/index.html">주식투자 포트폴리오</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container">
        <h1>주식투자 포트폴리오</h1>

        <ul class="list-group">
            <li class="list-group-item">총 보유자산 <b id="total">0</b> 원</li>
            <li class="list-group-item">총 보유현금 <b id="cash">0</b> 원</li>
            <li class="list-group-item">총 보유주식 <b id="stocks-price">0</b> 원</li>
            <li class="list-group-item">평가손익 <b id="profit">0</b> 원</li>
            <li class="list-group-item">수익률 <b id="percentage">0</b> %</li>
        </ul>

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">시간</th>
                    <th scope="col">종목</th>
                    <th scope="col">거래</th>
                    <th scope="col">평단가</th>
                    <th scope="col">수량</th>
                    <th scope="col">평가금액</th>
                </tr>
            </thead>
            <tbody id="trade-history">
                <tr>
                    <th scope="row">2022-11-17 12:00:00</th>
                    <td>삼성전자</td>
                    <td>매도</td>
                    <td>10,000</td>
                    <td>2</td>
                    <td>20,000</td>
                </tr>
            </tbody>
        </table>

        <div class="alert alert-danger" role="alert" id="alert" style="display: none;">
            A simple danger alert—check it out!
        </div>

        <div class="input-group">
            <input type="datetime-local" id="datetime" class="form-control" />

            <select id="event" class="form-select">
                <option value="삼성전자">삼성전자</option>
                <option value="아마존">아마존</option>
                <option value="애플">애플</option>
            </select>

            <input type="text" id="price" placeholder="평단가" class="form-control" />
            <input type="text" id="amount" placeholder="수량" class="form-control" />

            <button type="button" id="buy" class="btn btn-success">매수</button>
            <button type="button" id="sell" class="btn btn-danger">매도</button>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="jquery.timeago.js"></script>
    <script src="jquery.timeago.ko.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

var initCash = 1000000; // 최초 현금 보유량
var initStocks = {
    "삼성전자": {
        price: 0,
        amount: 0
    },
    "아마존": {
        price: 0,
        amount: 0
    },
    "애플": {
        price: 0,
        amount: 0
    },
}; // 최초 주식 보유량

var stocks; // 총 주식 보유량
var cash; // 총 현금 보유량
var stocksPrice; // 총 보유주식 평가금액
var total; // 총 보유자산 (현금 + 주식)
var tradeHistory; // 거래 기록

function getStocksPrice() {
    stocksPrice = 0;

    for (var event in stocks) {
        var stock = stocks[event];

        stocksPrice = stocksPrice + stock["price"] * stock["amount"];
    }
}

function setStock(event, price, amount) {
    var stock = stocks[event];

    stocks[event] = {
        price: price,
        amount: amount + stock["amount"]
    }

    localStorage.setItem("stocks", JSON.stringify(stocks));
}

function showResult() {
    total = cash + stocksPrice;

    var profit = total - initCash;
    var percentage = profit / initCash * 100;

    percentage = Math.round(percentage);

    $("#total").html(total.toLocaleString());
    $("#cash").html(cash.toLocaleString());
    $("#stocks-price").html(stocksPrice.toLocaleString());
    $("#profit").html(profit.toLocaleString());
    $("#percentage").html(percentage);
    $("#trade-history").html(tradeHistory);

    $('time.timeago').timeago();
}

function buyHandler() {
    var datetime = $("#datetime").val();
    var event = $("#event").val();
    var price = $("#price").val();
    var amount = $("#amount").val();

    price = parseFloat(price);
    amount = parseFloat(amount);

    var buyPrice = price * amount;

    if (buyPrice > cash) {
        $("#alert").html("보유한 현금이 부족합니다.");
        $("#alert").show();
        return false;
    }

    $("#alert").hide();

    cash = cash - buyPrice;

    localStorage.setItem("cash", cash);

    tradeHistory = `<tr>
        <th scope="row">
            <time class="timeago" datetime="${datetime}">${datetime}</time>
        </th>
        <td>${event}</td>
        <td>매수</td>
        <td>${price.toLocaleString()}</td>
        <td>${amount}</td>
        <td>${buyPrice.toLocaleString()}</td>
    </tr>` + tradeHistory;

    localStorage.setItem("tradeHistory", tradeHistory);

    setStock(event, price, amount);
    getStocksPrice();
    showResult();
}

function sellHandler() {
    var datetime = $("#datetime").val();
    var event = $("#event").val();
    var price = $("#price").val();
    var amount = $("#amount").val();

    price = parseFloat(price);
    amount = parseFloat(amount);

    if (amount > stocks[event]["amount"]) {
        $("#alert").html("보유한 수량보다 더 많은 수량을 매도할 수 없습니다.");
        $("#alert").show();
        return false;
    }

    $("#alert").hide();

    var sellPrice = price * amount;

    cash = cash + sellPrice;

    localStorage.setItem("cash", cash);

    tradeHistory = `<tr>
        <th scope="row">
            <time class="timeago" datetime="${datetime}">${datetime}</time>
        </th>
        <td>${event}</td>
        <td>매도</td>
        <td>${price.toLocaleString()}</td>
        <td>${amount}</td>
        <td>${sellPrice.toLocaleString()}</td>
    </tr>` + tradeHistory;

    localStorage.setItem("tradeHistory", tradeHistory);

    setStock(event, price, -1 * amount)
    getStocksPrice();
    showResult();
}

$(document).ready(function() {
    stocks = JSON.parse(localStorage.getItem("stocks"));

    if (stocks == null) {
        stocks = initStocks;
    }

    cash = localStorage.getItem("cash");

    if (cash == null) {
        cash = initCash;
    }

    cash = parseFloat(cash);

    tradeHistory = localStorage.getItem("tradeHistory");

    if (tradeHistory == null) {
        tradeHistory = "";
    }

    getStocksPrice();
    showResult();

    $("#buy").click(buyHandler);
    $("#sell").click(sellHandler);
});

style.css

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

Part 6. 나만의 웹 서비스 공개 및 수익화

digital520 — Thu, 4 Apr 2024 17:05:24 +0900

6-1. AWS에 배포하여 미리보기

드디어 우리가 만든 웹 서비스를 세상에 공개할 시간입니다! 우리는 전세계에 우리가 만든 서비스를 공개하기 위해 AWS(아마존 웹 서비스)를 사용하려고 합니다.

아마존닷컴의 클라우드 컴퓨팅 사업부. 현재 클라우드 컴퓨팅 분야에서 압도적인 세계 1위를 차지하고 있으며 2022년부로 16주년을 맞는 다국적 기업이자 역사상 가장 큰 IT 및 클라우드 기업 중 하나로 마이크로소프트, Apple, Google과 함께 MAGA의 일원이다.

AWS 회원가입

아래 주소에 접속하여 회원가입을 진행합니다. 아래와 같이 이메일 주소와 계정 이름(영문)을 입력하여 진행합니다.

AWS 회원가입: https://portal.aws.amazon.com/billing/signup

AWS Console - Signup

portal.aws.amazon.com

사용자 암호를 입력합니다.

개인으로 선택하고 이름. 전화번호, 주소를 입력합니다. 주소는 영문으로 입력해야하니 네이버 영문주소 기능을 사용하세요.

[네이버 영문주소 검색]

네이버 영문주소 : 네이버 통합검색

'네이버 영문주소'의 네이버 통합검색 결과입니다.

search.naver.com

결제정보를 입력합니다. 통상적으로 1달러가 결제되나 최대 2주후 환불됩니다.

카드 정보 입력시 아래 추가적인 정보를 요구할 수 있습니다.

휴대폰으로 전화번호 SMS 인증을 합니다.

기본 지원 - 무료 플랜을 선택합니다.

완료하였습니다! 위에서 기입한 정보로 로그인을 진행합니다.

AWS 콘솔에 접속하여 정보를 확인할 수 있습니다.

나만의 도메인 구입하기

이제 나만의 주소(도메인)를 구입할 차례입니다. 도메인은 AWS Route 53 에서 구입할 수 있습니다.

AWS Route 53: https://us-east-1.console.aws.amazon.com/route53/v2/home

https://us-east-1.console.aws.amazon.com/route53/v2/home

us-east-1.console.aws.amazon.com

좌측 메뉴 - 도메인 - 등록된 도메인을 클릭하고 [도메인 등록] 버튼을 클릭합니다.

이곳에서 원하는 도메인 이름을 선택할 수 있습니다. 여러분들의 취향에 맞는, 서비스에 어울리는 도메인 이름을 검색하여 가용한 도메인을 선택할 수 있습니다. [장바구니에 추가] 버튼을 눌러 도메인을 선택합니다.

도메인 구입시 1년마다 금액을 지불해야합니다. 도메인 뒤에 붙는 이름(.com, .net 등)마다 가격이 상이하며 .com 의 경우 1년에 12미국달러의 요금이 청구됩니다. 도메인 구입시에는 프리티어 요금제가 적용되지 않습니다.

도메인 구입하는 사람의 연락처를 입력하고 [계속] 버튼을 클릭합니다.

마지막으로 연락처를 확인하고 아래 사항을 추가로 선택합니다.

도메인 자동 갱신: 1년마다 자동으로 결제가 되며 도메인 사용기간이 자동 연장될지 여부, [활성화] 선택시 자동 결제/연장

이용약관을 확인하시고 [주문 완료] 버튼을 클릭하면 1시간내에 도메인이 세팅완료 됩니다. (이메일로 알림을 줍니다)

저장공간(S3) 만들기

우리가 만든 웹 서비스를 배포하기 위해 AWS의 수많은 서비스 중 S3(Simple Storage Service, 간편 저장 서비스)를 이용하려고 합니다.

AWS S3: https://s3.console.aws.amazon.com/s3/buckets?region=ap-northeast-2

https://s3.console.aws.amazon.com/s3/buckets?region=ap-northeast-2

s3.console.aws.amazon.com

이제부터 사용하는 모든 기능들은 유료 기능이므로 가격을 살펴보신 후 진행하시길 권장드립니다. S3 가격 정책: https://aws.amazon.com/ko/s3/pricing/

Amazon S3 Simple Storage Service 요금 - Amazon Web Services

S3 교차 리전 복제, 동일 리전 복제 및 복제 시간 제어 S3 배치 복제 CRR 및 SRR과 같은 라이브 복제는 새로 업로드된 객체를 버킷에 쓰는 대로 자동으로 복제하는 반면, S3 배치 복제는 기존 객체를

aws.amazon.com

새로 가입하신 분들은 1년간 한정된 서비스에 한해 프리티어 요금을 사용하실 수 있습니다. 프리티어는 1년간 한도내에서 무료로 사용해 볼 수 있는 시스템입니다. (참고: https://inpa.tistory.com/entry/AWS- -프리티어-요금-폭탄-방지- -무료-사용량-정리#S3)

[버킷 만들기] 버튼을 클릭하여 소스코드를 저장할 공간(버킷)을 생성합니다.

버킷 이름은 위에서 구입한 도메인 이름과 동일하게 입력합니다. (예: 5pistudio.com)

퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단의 체크를 해제하여 누구나 웹 서비스에 접속할 수 있도록 설정합니다.

새로 생성한 버킷(예제에서는 5pitudio.com)을 클릭합니다.

정적 웹 사이트 호스팅 설정

상단의 [속성] 탭을 클릭합니다. 가장 아래 정적 [웹 사이트 호스팅] 섹션에서 [편집] 버튼을 클릭합니다.

정적 웹 사이트 호스팅 상세페이지에서 아래와 같이 설정합니다. 설정 완료 후 [변경 사항 저장] 버튼을 클릭합니다.

정적 웹 사이트 호스팅: [활성화]
호스팅 유형: [정적 웹 사이트 호스팅]
인덱스 문서: [main.html] → 홈페이지 HTML 파일 이름과 일치해야 함!

아래와 같이 접속 주소(버킷 웹 사이트 엔드포인트)가 생성되었다면 성공입니다! 이 접속 주소를 소중히 간직하세요!

버킷 권한 설정

상단의 [권한] 탭을 클릭합니다. 버킷 정책에서 [편집] 버튼을 클릭하고 아래와 같이 입력합니다.

[버킷-이름]을 우리가 위에서 만든 버킷 이름으로 대체합니다. (예제에서는 5pistudio.com)

[변경 사항 저장] 버튼을 클릭합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::[버킷-이름]/*"
            ]
        }
    ]
}

버킷 정책이 아래와 같이 되었다면 성공입니다. (버킷 이름은 도메인에 따라 다를 수 있습니다.)

소스코드 업로드하기

이제 본격적으로 소스코드를 업로드할 시간입니다. 상단의 [객체] 버튼을 클릭합니다. 객체 메뉴에서는 파일을 업로드할 수 있습니다.

우리가 만들었던 파일들을 통째로 선택하여 드래그 앤 드랍하여 업로드합니다. 드래그 앤 드랍 후 파일을 확인하고 [업로드] 버튼을 클릭합니다.

이제 위에서 소중히 간직했던 접속주소를 복사하여 브라우저 주소표시줄에 붙여넣고 접속합니다. 모든 기능들이 잘 동작하는지 확인합니다.

6-2. 도메인과 웹 서비스 연결하기

Route 53 대시보드에서 시작합니다.

Route 53 대시보드: https://us-east-1.console.aws.amazon.com/route53/v2/home

https://us-east-1.console.aws.amazon.com/route53/v2/home

us-east-1.console.aws.amazon.com

좌측 메뉴 - 호스팅 영역을 클릭하여 구입한 도메인을 확인합니다.

Route 53의 호스팅 영역 서비스를 사용할 경우 월 소액의 요금이 청구됩니다. 요금정책: https://aws.amazon.com/ko/route53/pricing/

Amazon Route 53 요금 - Amazon Web Services

aws.amazon.com

호스팅 영역은 생성된 시점과 그 후로 매월 다음 달 1일에 요금이 청구됩니다. 테스트를 허용하기 위해 생성 후 12시간 이내에 삭제된 호스팅 영역에 대해서는 요금이 부과되지 않습니다. 하지만 해당 호스팅 영역에 대한 쿼리에는 여전히 아래와 같이 요금이 부과됩니다.

호스팅 영역 하나에는 10,000개의 레코드가 포함됩니다. 영역당 10,000개를 초과하는 각 레코드에는 월 0.0015 USD의 요금이 부과됩니다.

구입한 도메인을 클릭하고 [레코드 생성] 버튼을 클릭합니다. 빠른 레코드 생성 창에서 해야할 것은 아래와 같습니다.

레코드 이름: 빈칸
레코드 유형: A - IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅
별칭: 활성화
트래픽 라우팅 대상
1. S3 웹 사이트 엔드포인트에 대한 별칭
2. 아시아 태평양(서울) [ap-northeast-2]
3. s3-website.ap-northeast-2.amazonaws.com (빈칸 클릭시 자동완성됨)
라우팅 정책: 단순 라우팅
대상 상태 평가: 아니오

[레코드 생성] 버튼을 클릭하여 레코드를 생성하면 최대 24시간 안에 도메인 연결이 완료됩니다. 여러분들의 도메인으로 접속하여 잘 접속되는지 체크합니다!

6-3. 검색 엔진 최적화(SEO)를 통한 웹 서비스 노출 극대화

이제 사용자들은 우리가 만든 웹 서비스의 주소를 알면 그 주소를 주소표시줄에 입력하여 접속할 수 있게 되었습니다. 그러나 사람들은 보통 주소를 쳐서 들어오는 것이 아니라 구글, 네이버에 검색해서 들어오는 경우가 대부분이죠? 검색이 잘되기 위해서는 우리는 검색 엔진 최적화(SEO, Search Engine Optimization)를 해주어야 합니다.

SEO는 "검색 엔진 최적화"를 의미합니다. 쉽게 말해 구글, 빙 등 검색엔진에서 사업과 관련된 제품이나 서비스를 사람들이 검색할 때 가시성을 높이기 위해 사이트를 개선하는 과정을 의미합니다. 검색 결과에서 페이지를 더 잘 볼수록 관심을 끌고 잠재 고객과 기존 고객을 비즈니스로 끌어들일 가능성이 높아집니다.

메타 태그 수정하기

메타 태그는 웹페이지가 어떤 웹페이지인지 검색 엔진(구글, 네이버 등)에게 설명하는 역할을 하는 태그입니다. 간단히 말하면 웹페이지의 이력서라고 할 수 있겠네요.

메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다. 이러한 웹페이지의 메타 정보는 주로 HTML의 <meta>요소를 통해 마크업을 하며, HTML 문서 내에서 <head>요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다. 반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다. 출처: https://www.daleseo.com/html-meta-tags-for-seo

메타 태그를 통한 검색엔진 최적화 (SEO)

Engineering Blog by Dale Seo

www.daleseo.com

메타 태그를 쉽게 확인하는 방법은 아래 서비스를 사용하는 방법입니다.

Meta Tags: https://metatags.io

Meta Tags — Preview, Edit and Generate

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

metatags.io

조회할 페이지의 주소를 입력할 수 있는 칸이 있고 입력한 주소가 각 플랫폼에서 어떻게 보여지는지 확인할 수 있습니다. 우리가 만든 웹 서비스의 메타 태그를 확인해보면 다음과 같이 아무것도 없는 것을 볼 수 있어요.

Meta Tags 웹사이트에서 먼저 수정해서 미리보기할 수 있습니다. 왼쪽 METADATA에 정보들을 입력하면 실시간으로 반영된 결과를 확인할 수 있습니다.

다 완성되었다면 오른쪽 위에 [GENERATE META TAGS] 버튼을 눌러 메타 태그를 생성할 수 있습니다. 아래와 같은 HTML 태그가 나오죠.

위의 태그를 복사해서 main.html 의 <head> 안에 붙여넣기 합니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Primary Meta Tags -->
    <title>빵형의 홈페이지</title>
    <meta name="title" content="빵형의 홈페이지">
    <meta name="description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://5pistudio.com/">
    <meta property="og:title" content="빵형의 홈페이지">
    <meta property="og:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
    <meta property="og:image" content="">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="http://5pistudio.com/">
    <meta property="twitter:title" content="빵형의 홈페이지">
    <meta property="twitter:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
    <meta property="twitter:image" content="">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

붙여넣은 메타 태그를 잘 살펴보시면 og:image 와 twitter:image 의 content 가 비어있는 것을 볼 수 있는데요. 페이스북, 트위터, 카카오톡에 링크를 공유할 때 보여지는 이미지를 변경할 수 있습니다. 일단 우리가 사용할 이미지를 만들거나 다운로드 받아주세요. 저는 아래와 같은 이미지를 사용하겠습니다!

이 이미지를 AWS S3에 업로드합니다. 업로드가 완료되면 이 이미지를 클릭하여 객체 개요를 확인할 수 있는데 객체 개요에 객체 URL을 복사합니다.

복사한 URL을 og:image, twitter:image 의 content 안에 복사합니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Primary Meta Tags -->
    <title>빵형의 홈페이지</title>
    <meta name="title" content="빵형의 홈페이지">
    <meta name="description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://5pistudio.com/">
    <meta property="og:title" content="빵형의 홈페이지">
    <meta property="og:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
    <meta property="og:image" content="https://s3.ap-northeast-2.amazonaws.com/5pistudio.com/training.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="http://5pistudio.com/">
    <meta property="twitter:title" content="빵형의 홈페이지">
    <meta property="twitter:description" content="사칙연산 계산기, 대출이자 계산기, 저장가능한 메모장, 주식투자 포트폴리오를 한 번에 사용할 수 있는 편리한 웹 서비스!">
    <meta property="twitter:image" content="https://s3.ap-northeast-2.amazonaws.com/5pistudio.com/training.png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

메타 태그를 붙여넣는다고해서 페이지의 모양의 달라지진 않습니다. 그러나 검색 엔진이 검색할 때 메타태그를 보고 참고하여 사람들에게 노출시키죠. 메타 태그를 업데이트했으니 이제 AWS S3 버킷에 다시 업로드하여 변경사항을 적용합니다.

다시 한 번 metatags.io 웹사이트에서 도메인을 입력하고 결과를 확인합니다. 카카오톡에 붙여넣어도 아래와 같이 보입니다.

6-4. 웹 서비스 수익화를 위해 광고 신청하기 (구글 애드센스)

광고를 게재할 수 있는 플랫폼은 여러개가 있습니다. 구글 애드센스말고도 카카오 애드핏 등의 광고를 통한 수익 창출 방법이 있는데 먼저 구글 애드센스 신청방법을 알아보겠습니다.

구글 애드센스: https://www.google.com/adsense/start/

[시작하기] 버튼을 눌러 구글 아이디로 로그인합니다. 좌측 메뉴에서 [사이트] 버튼을 클릭하고 [사이트 추가] 버튼을 클릭합니다.

우리가 구입한 도메인을 입력하고 [저장하고 계속하기] 버튼을 클릭합니다.

다음과 같은 화면에서 코드를 추가하라는 메시지가 뜹니다. 코드를 선택하여 복사하고 모든 html 파일 아래쪽에 붙여넣기합니다.

/part2/index.html
/part3/index.html
/part4/index.html
/part5/index.html
/main.html

모든 파일을 저장하고 AWS S3에 다시 업로드하여 변경사항을 적용합니다.

그리고 [검토 요청] 버튼을 클릭합니다.

위와 같은 메시지가 뜨면 보통 5일에서 1개월 이내 신청이 완료됩니다. 애드센스 신청이 거절되는 경우가 종종 있는데 신청한 웹사이트의 내용이 부족하거나 부적절할 경우 승인이 거절되는 경우가 많습니다. 더 많은 서비스와 컨텐츠가 있을 수록 승인기간이 짧아지고 승인될 확률이 높아집니다.

신청한지 10시간만에 메일을 받았습니다. 거절 당했네요. 이유는 컨텐츠 부족입니다. 구글 애드센스 신청은 “애드 고시”라고 부를만큼 승인 절차가 까다롭습니다. 승인받기 위해서는 더 예쁜 디자인과 많은 서비스를 추가해야할 것 같습니다. 더 많은 컨텐츠를 추가하고 [검토 요청] 버튼을 눌러 다시 검토를 요청할 수 있습니다.

구글 애드센스 신청 꿀팁! 위 예시처럼 컨텐츠가 부족할 경우 심사가 거절되는 경우가 있는데요. 한 번에 성공하지 못했다고 실망하지 마세요. 컨텐츠를 보완해서 다시 심사를 요청할 수 있습니다. 그러나! 여러 번 검토 신청할 수록 심사기간이 오래걸리고 너무 남용하면 계정 정지 패널티를 받을 수도 있다고 하니 주의하시고요!

만약 여러분들이 운영하는 티스토리 블로그가 있다면 티스토리 블로그로 승인을 받은 후 똑같은 도메인 아래 하위 도메인(xxx.xxx.com)으로 심사를 건너뛰는 방법도 있습니다!

6-5. 웹 서비스 수익화를 위해 광고 신청하기 (카카오 애드핏)

카카오 애드핏은 구글 애드센스보다 심사가 간단하고 바로 광고를 삽입할 수 있습니다.

먼저 아래 페이지에 접속하여 카카오 아이디로 로그인하고 카카오 애드핏 회원가입을 진행합니다.

회원가입: https://adfit.kakao.com/join

Adfit

adfit.kakao.com

카카오톡 챗봇 구독을 신청하시면 카카오애드핏 채널의 챗봇을 통해 계정의 리포트를 매일 수신하실 수 있습니다. 카카오톡에서 카카오애드핏 채널을 추가하신 후 구독하실 수 있습니다.

회원가입을 완료하면 아래와 같은 내 계정목록 화면을 보실 수 있습니다.

[애드핏 매체 등록하기] 버튼을 클릭하여 매체 등록을 진행합니다.

아래와 같이 입력하고 [등록] 버튼을 클릭합니다.

매체명: 여러분의 웹서비스 이름
매체 유형: Web
매체 URL: 웹 서비스 도메인 주소를 입력하고 [매체 URL 변경] 버튼 클릭
매체 카테고리: 생산성 - 도구 (이 부분은 컨텐츠에 따라 변경될 수 있습니다)

등록 완료 페이지를 확인하고 [광고단위 생성] 버튼을 클릭합니다.

위에서 만든 매체를 선택하고 [다음] 버튼을 클릭합니다.

[배너]를 선택합니다.

아래와 같이 입력하고 [다음] 버튼을 클릭합니다.

광고단위명: “배너광고”라고 입력합니다. 만약 광고를 여러개 삽입할 경우 서로 다른 이름을 사용해주세요!
유형선택: 배너 광고의 크기와 유형을 선택합니다. 좌측의 미리보기로 광고 모양을 볼 수 있습니다.
- PC: 데스크탑
- M: 모바일
- PC/M: 데스크탑/모바일 겸용
옵션사항: (?) 물음표 아이콘 위에 마우스를 올려 옵션을 미리 볼 수 있습니다. 전부 미설정이 기본 설정입니다.
특정 소재 타입 허용: 기본값으로 설정합니다.

광고 단위 생성이 완료되었습니다. 아래 쪽의 광고 스크립트를 복사하여 main.html 아래쪽에 붙여넣기 합니다

    ... 생략 ...
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5332065285612783"
     crossorigin="anonymous"></script>

		<ins class="kakao_ad_area" style="display:none;"
				data-ad-unit = "DAN-O4HovrPcjGWtusiQ"
				data-ad-width = "300"
				data-ad-height = "250"></ins>
    <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</body>
</html>

Live Preview를 통해 확인합니다. 아래와 같이 나온다면 성공입니다. 만약 바로 나오지 않더라도 당황하지 마시고 잠시 기다리신 다음 새로고침 버튼을 눌러주세요.

카카오 애드핏의 매체 심사는 보통 영업일 기준 3일 안에 심사가 완료됩니다. 심사가 완료되면 아래와 같은 이메일을 받으실 수 있습니다.

6-6. 나만의 웹 서비스에 광고 삽입하여 수익내기

광고가 왼쪽에 치우쳐져 있어 보기 안좋네요. 아래 코드와 같이 입력하여 광고 위치를 수정하겠습니다.

				... 생략 ...
				<div class="text-center mt-3">
            <ins class="kakao_ad_area" style="display:none;"
            data-ad-unit = "DAN-O4HovrPcjGWtusiQ"
            data-ad-width = "300"
            data-ad-height = "250"></ins>
        </div>
    </main>

저장한 파일을 모두 AWS S3에 업로드합니다. 그리고 주소에 다시 접속하면 아래처럼 광고가 보이는 것을 알 수 있습니다.

좌측메뉴 - 대시보드 및 광고관리 - 매체 관리 화면에서 예상 수익을 볼 수 있습니다.

좌측 메뉴 - 지급 요청에서 광고 수익을 지급받을 수 있습니다. 확정 적립금이 5만원 이상인 경우부터 지급이 가능하며 매월 21일부터 말일까지 요청 가능합니다.

아래는 웹 서비스 배포 직후 하루동안의 수익을 캡쳐한 것입니다.

Part 4. 수익형 웹 서비스 구현하기(3) - 나만을 위한 일기장 만들기

digital520 — Thu, 4 Apr 2024 16:14:56 +0900

4-1. 일기장 미리보기

4-2. 일기장의 프로그래밍적 원리 이해하기

사용자로부터 입력받을 값

우리는 날짜마다 한 줄 일기와 기분을 저장할 수 있는 일기장을 만드려고 합니다. 하루치의 일기에 저장되는 값들은 다음과 같습니다.

날짜 (년-월-일)
한 줄 텍스트
기분 (행복, 보통, 슬픔) - HTML에서 기본 제공하는 Select box
- 또는 이모지(emoji) - 오픈소스 라이브러리 사용

일기장을 저장하는 방법

우리는 JavaScript의 로컬 스토리지(Local storage)를 활용하여 사용자가 입력한 일기장을 저장할 겁니다. 로컬 스토리지는 여러분들의 브라우저에 저장되므로 다른 컴퓨터 또는 기기에서 접속할 경우 저장한 값을 볼 수 없다는 단점이 있지만 그만큼 안전하다는 장점도 있지요. 또한 로그인 기능이 필요하지 않아 사용자 접근성이 좋습니다.

로컬 스토리지를 사용하는 방법은 다음과 같습니다.

localStorage.setItem("test-key", "테스트입니다");

위의 코드는 test-key라는 공간(Key)에 “테스트입니다”라는 텍스트를 저장하라는 코드입니다.

저장한 값을 꺼내서 사용하고 싶을 때는 아래와 같은 코드를 사용합니다. test-key라는 키에서 값을 꺼내 storage 변수에 저장합니다.

var storage = localStorage.getItem("test-key");

로컬 스토리지에 저장된 값을 확인하는 방법

개발자 도구를 사용하여 로컬 스토리지에 저장된 값을 확인, 수정, 삭제할 수 있습니다. 개발자 도구를 열기 위해 Live Preview 오른쪽 상단의 메뉴 버튼을 누르고 Devtools 창 열기를 선택합니다.

상단 메뉴의 Application를 선택하고 좌측 메뉴의 Storage - Local Storage - http://127.0.0.1:3000 을 선택하여 저장된 값을 확인할 수 있습니다.

가끔 저장된 값이 보이지 않을 때가 있는데 Live Preview의 버그때문에 그럴 수 있습니다. 저장된 값이 보이지 않을 때는 개발자 도구를 닫고 웹페이지의 새로고침 버튼을 누른 후 다시 실행해주세요. 만약 계속해서 보이지 않는다면 Live Preview 대신 크롬 브라우저를 사용해서 개발하셔도 무방합니다.

새로고침: 마우스 오른쪽 버튼 - Refresh
편집: 마우스 오른쪽 버튼 - Edit
삭제: 마우스 오른쪽 버튼 - Delete

개발자 콘솔에서 값 출력하기

거의 모든 웹 브라우저는 개발자를 위한 개발자 콘솔 기능을 지원합니다. 개발자 도구 상단 Console 메뉴에서 접근 가능합니다. 아래 코드를 입력하고 콘솔에 접속합니다.

console.log("Hello World!");

로컬 스토리지 test-key에 저장된 값을 개발자 콘솔에서 출력할 수 있습니다.

var storage = localStorage.getItem("test-key");
console.log(storage);

4-3. HTML로 일기장 틀 만들기

보일러플레이트

새로운 프로젝트를 시작할 때는 항상 보일러플레이트 코드부터 시작합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$(document).ready(function() {

});

style.css

/* 비어있음 */

사용자 입력 구현하기

사용자로부터 입력받을 폼을 구현합니다. 처음보는 요소가 두 개 있습니다.

<input type="date" id="date" />
<input type="text" id="text" />

<div id="emoji"></div>

<select id="mood">
    <option value="행복">행복</option>
    <option value="보통">보통</option>
    <option value="슬픔">슬픔</option>
</select>

<button type="button" id="save">저장하기</button>

<div id="result"></div>

input type=”date”
1. 날짜를 입력받을 수 있습니다. 달력 버튼을 눌러 사용자가 날짜를 선택할 수 있습니다.
2. YYYY-MM-DD (e.g. 2022-11-16) 형식의 텍스트로 받을 수 있습니다.

select box
1. 사용자로부터 여러개의 입력 중에 1개의 입력을 선택하도록 할 수 있습니다.
2. value 인자를 통해 사용자가 선택한 값을 받아올 수 있습니다.

4-4. 로컬저장소를 활용한 일기장 내용 저장하기

사용자 입력값 받아와 출력하기

save 버튼을 누르면 date, text, mood 로부터 입력값을 받아와 result에 그대로 뿌려주겠습니다. 일기장의 내용을 임시로 p 태그로 감싸서 출력할게요.

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    var diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);
}

$(document).ready(function() {
		$("#save").click(saveHandler);
});

로컬저장소에 저장하기

사용자가 입력한 일기를 로컬저장소에 저장하는 방법은 간단합니다. diary 키 일기를 저장합니다.

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    var diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

이렇게 하면 최근에 사용자가 입력한 값이 저장될겁니다. 개발자 도구에서 저장소를 한 번 볼까요?

저장에 성공했습니다. 근데 이 방식에는 문제가 있군요. 지금의 코드는 최근 입력한 일기를 저장할 수는 있지만 과거의 일기를 함께 저장하지는 못합니다. 이 문제는 나중에 해결하도록 하죠!

저장된 일기 출력하기

컴퓨터를 껐다 켜도 과거의 일기를 다시 볼 수 있도록 저장된 일기를 출력할 시간입니다. localStorage의 getItem() 함수를 사용하여 일기를 가져옵니다. 그리고 result에 출력합니다.

saveHandler() 함수 안의 diary 변수에서 var를 삭제합니다. 그리고 최상단에 diary 변수를 빈칸으로 정의합니다. 이렇게 하면 diary 변수를 모든 함수에서 사용할 수 있도록 설정하는 방법인데 이런 변수를 “전역 변수”라고 합니다.

var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<p>${date}: ${text} - ${mood}</p>`;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

이렇게 코드를 작성하면 과거의 일기가 잘 보이네요.

과거의 일기를 지우지 않고 누적시키기

위의 코드로 일기를 저장하고 저장된 일기를 출력시키는 것까지 완료했습니다. 문제점은 오늘 일기를 작성하면 과거의 일기가 지워지고 오늘 일기만 저장된다는 점인데요. 이 문제를 해결하는 방법은 정말 간단합니다. 일기를 저장하기전에 과거의 일기를 더해서(+) 저장하면 끝!

diary = `<p>${date}: ${text} - ${mood}</p>` + diary;

이렇게 하면 오늘의 일기 뒤에 과거의 일기가 더해져서 저장된답니다. 이렇게 하면 최신 일기부터 위에서 아래로 보여지겠죠! 한 번 해볼까요?

만약 과거 일기부터 위에서 보고싶다면 아래와 같이 코드를 수정합니다.

diary = diary + `<p>${date}: ${text} - ${mood}</p>`;

null 예외 처리하기

위의 스크린샷에서도 볼 수 있지만 위의 코드로 처음 일기를 작성할 경우 null 값이 가장 처음에 들어가는 것을 볼 수 있습니다. null 값이 저장되는 이유는 첫 일기 작성 전에 localStorage.getItem(”diary”) 코드로 과거의 일기를 불러올 때 로컬스토리지에 저장된 값이 하나도 없어서 생기는 문제인데요. 이 문제를 해결하기 위해 아래와 같이 코드를 작성합니다.

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>일기장</h1>

        <input type="date" id="date" />
        <input type="text" id="text" />

        <select id="mood">
            <option value="행복">행복</option>
            <option value="보통">보통</option>
            <option value="슬픔">슬픔</option>
        </select>

        <button type="button" id="save">저장하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<p>${date}: ${text} - ${mood}</p>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

4-5. Bootstrap을 활용한 일기장 디자인 꾸미기

입력 꾸미기

이번에는 Bootstrap의 Floating labels를 이용하여 멋드러지게 꾸며보겠습니다.

Floating labels 문서: https://getbootstrap.com/docs/5.2/forms/floating-labels/

Floating labels

Create beautifully simple form labels that float over your input fields.

getbootstrap.com

<div class="row g-2 mb-3">
    <div class="col-md">
        <div class="form-floating">
            <input type="date" class="form-control" id="date">
            <label for="date">오늘 날짜를 입력해주세요</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" id="mood">
                <option value="행복">행복</option>
                <option value="보통">보통</option>
                <option value="슬픔">슬픔</option>
            </select>
            <label for="mood">오늘 기분은 어땠나요?</label>
        </div>
    </div>
</div>

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="text">
    <label for="text">오늘 있었던 일을 기록하세요</label>
</div>

<button type="button" id="save" class="btn btn-primary">저장하기</button>

기록 꾸미기

기록 부분은 List group의 Custom content로 꾸며보겠습니다. 주의해야 할 점은 일기장 기록의 경우 JavaScript 부분의 코드 수정도 필요하단 점 잊지마시구요. index.html 에 미리 작성한 후 script.js로 옯기시면 편합니다.

List group - Custom content 문서: https://getbootstrap.com/docs/5.2/components/list-group/#custom-content

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

getbootstrap.com

기본 List group 코드

<div class="list-group" id="result">
    <a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <small>And some small print.</small>
    </a>
</div>

index.html

<div class="list-group" id="result"></div>

script.js

diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">${text}</h5>
        <small>${date}</small>
    </div>
    <small>${mood}</small>
</a>` + diary;

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>일기장</h1>

        <div class="row g-2 mb-3">
            <div class="col-md">
                <div class="form-floating">
                    <input type="date" class="form-control" id="date">
                    <label for="date">오늘 날짜를 입력해주세요</label>
                </div>
            </div>
            <div class="col-md">
                <div class="form-floating">
                    <select class="form-select" id="mood">
                        <option value="행복">행복</option>
                        <option value="보통">보통</option>
                        <option value="슬픔">슬픔</option>
                    </select>
                    <label for="mood">오늘 기분은 어땠나요?</label>
                </div>
            </div>
        </div>

        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="text">
            <label for="text">오늘 있었던 일을 기록하세요</label>
        </div>

        <button type="button" id="save" class="btn btn-primary mb-3">저장하기</button>

        <div class="list-group" id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

var diary = "";

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();
    var mood = $("#mood").val();

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${mood}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

$(document).ready(function() {
    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

4-6. 오픈소스 라이브러리 사용하기

오픈소스 라이브러리 검색하기

우리는 일기에 기분을 쓸 때 그 날의 기분을 행복, 보통, 슬픔으로 표현했는데 이것을 이모지( )로 표현할 수 있다면 더 멋지겠죠? 다른 사람들이 만들어놓은 오픈소스 라이브러리를 검색하여 만들어보겠습니다!

구글에 “jquery emoji rating plugin”이라고 검색합니다.

가장 상단에 나오는 Basic Emoji Rating Plugin For jQuery - EmojiRating 글에 들어가보도록 하겠습니다.

플러그인 페이지: https://www.jqueryscript.net/other/Emoji-Rating-Plugin-jQuery.html

Basic Emoji Rating Plugin For jQuery - EmojiRating

EmojiRating is a small yet customizable jQuery product/post/article rating plugin that uses Emoticons for rating symbols.

www.jqueryscript.net

이 플러그인은 마우스로 이모지를 선택하여 기분을 표현할 수 있는 훌륭한 플러그인이네요. 적용하는 방법도 나와있고 “Go to website” 버튼을 눌러 소스코드를 확인할 수도 있습니다.

소스코드: https://github.com/mrmins/EmojiRaiting

emoji.js 파일 또는 emoji.min.js 파일을 눌러 다운로드합니다. 그리고 그 파일을 우리가 만든 part4 폴더로 복사합니다

emoji.js 와 emoji.min.js 파일의 내용은 완전히 동일합니다. 차이가 있다면 emoji.min.js는 압축을 해서 용량이 더 작아요.

이모지 플러그인 적용하기

이모지 플러그인을 불러오기 위해 아래쪽에 다음과 같이 작성합니다. (순서 중요!)

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="emoji.min.js"></script>
<script src="script.js"></script>

GitHub에 나와있는 문서를 참고하여 아래와 같이 코드를 작성합니다.

<div class="row g-2 mb-3">
    <div class="col-md">
        <div class="form-floating">
            <input type="date" class="form-control" id="date">
            <label for="date">오늘 날짜를 입력해주세요</label>
        </div>
    </div>
    <div class="col-md">
        <small style="color: gray;">오늘 기분은 어땠나요?</small>
        <div id="emoji"></div>
    </div>
</div>

script.js

$(document).ready(function() {
    $("#emoji").emoji();

		... 생략 ...
});

원하는 이모지로 바꾸기

여러분들이 원하는 이모지로 바꿀 수 있는 기능이 있습니다. 먼저 아래와 같이 작성하고 emojis 변수안에 있는 이모지를 바꿔줍니다. 아래 사이트에서 이모지를 복사할 수 있습니다. 여러분들이 원하는 이모지로 바꿔보세요!

Get Emoji: https://getemoji.com/

GetEmoji - Copy & Paste All Emojis From The Emoji Keyboard - No apps required

✂️ Copy and Paste Emoji No apps required Emojis are supported on iOS, Android, macOS, Windows, Linux and ChromeOS. Copy and paste emojis for Twitter, Facebook, Slack, Instagram, Snapchat, Slack, GitHub, Instagram, WhatsApp and more....

getemoji.com

var emojis = [" "," "," "," ","❤️"]

... 생략 ...

$(document).ready(function() {
    $("#emoji").emoji({
        emojis: emojis
    });

... 생략 ...

기본 이모지는 다음과 같습니다

var emojis = [" "," "," "," "," "];

이모지를 클릭했을 때 기분값 저장하기

이모지가 화면에 출력되고 여러분들 마음대로 선택할 수 있다면 라이브러리 적용은 완료되었습니다. 이제 이모지로부터 값을 전달받아 일기가 저장될 때 로컬스토리에 함께 저장하면 되겠죠?

사용자가 이모지를 클릭했을 때 실행할 함수를 아래와 같이 지정할 수 있습니다.

function emojiSelected(event, value) {
    console.log(value);
}

$("#emoji").emoji({
    emojis: emojis,
    callback: emojiSelected
});

개발자 콘솔을 열어 이모지를 클릭하면서 로그를 확인하면 1 ~ 5 사이의 값이 출력되는 것을 확인할 수 있죠. 우리는 다음과 같은 코드를 작성하여 emoji 변수에 사용자가 선택한 이모지를 저장할 수 있습니다.

var emoji = " ";

function emojiSelected(event, value) {
    if (value == 1) {
        emoji = " ";
    } else if (value == 2) {
        emoji = " ";
    } else if (value == 3) {
        emoji = " ";
    } else if (value == 4) {
        emoji = " ";
    } else if (value == 5) {
        emoji = " ";
    }
}

일기를 로컬스토리지에 저장할 때 mood 대신 emoji를 저장하도록 코드를 수정합니다. mood는 이제 필요없으니 삭제할게요!

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${emoji}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);
}

4-7. 기타 기능 구현하기

입력이 비어있을 때 저장하지 않도록 처리하기

사용자가 아무것도 입력하지 않은 상태로 저장하기 버튼을 누르면 아래와 같이 저장됩니다.

값이 비어있을 때는 저장되지 않도록 예외처리 해주죠. saveHandler()에 아래 코드를 작성합니다.

if (date == "" || text == "") {
    return false;
}

위 코드는 date에 빈값이 있거나(OR) 텍스트에 빈값이 있으면 실행을 종료하라는 코드입니다.

저장 후 값 초기화하기

지금의 일기장은 값을 저장하고 난 후 마지막에 입력한 값이 그대로 남아있습니다. 사용자가 [저장하기] 버튼을 누르면 입력한 값이 초기화될 수 있도록 코드를 작성해보죠! saveHandler() 마지막에 다음과 같은 코드를 작성합니다.

$("#date").val("");
$("#text").val("");

홈페이지와 연결하기

서비스를 완성했으니 main.html과 연결하겠습니다. part2, part3의 index.html에도 일기장 링크를 추가해야 합니다.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/main.html">홈</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/part3/index.html">대출이자 계산기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/part4/index.html">일기장</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

stylecss

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>일기장</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="/main.html">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/part3/index.html">대출이자 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/part4/index.html">일기장</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container">
        <h1>일기장</h1>

        <div class="row g-2 mb-3">
            <div class="col-md">
                <div class="form-floating">
                    <input type="date" class="form-control" id="date">
                    <label for="date">오늘 날짜를 입력해주세요</label>
                </div>
            </div>
            <div class="col-md">
                <small style="color: gray;">오늘 기분은 어땠나요?</small>
                <div id="emoji"></div>
            </div>
        </div>

        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="text">
            <label for="text">오늘 있었던 일을 기록하세요</label>
        </div>

        <button type="button" id="save" class="btn btn-primary mb-3">저장하기</button>

        <div class="list-group" id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="emoji.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

var emoji = " ";
var emojis = [" "," "," "," "," "];
var diary = "";

function emojiSelected(event, value) {
    if (value == 1) {
        emoji = " ";
    } else if (value == 2) {
        emoji = " ";
    } else if (value == 3) {
        emoji = " ";
    } else if (value == 4) {
        emoji = " ";
    } else if (value == 5) {
        emoji = " ";
    }
}

function saveHandler() {
    var date = $("#date").val();
    var text = $("#text").val();

    if (date == "" || text == "") {
        return false;
    }

    diary = `<a href="#" class="list-group-item list-group-item-action" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${text}</h5>
            <small>${date}</small>
        </div>
        <small>${emoji}</small>
    </a>` + diary;

    $("#result").html(diary);

    localStorage.setItem("diary", diary);

    $("#date").val("");
    $("#text").val("");
}

$(document).ready(function() {
    $("#emoji").emoji({
        emojis: emojis,
        callback: emojiSelected
    });

    diary = localStorage.getItem("diary");

    if (diary == null) {
        diary = "";
    }

    $("#result").html(diary);

    $("#save").click(saveHandler);
});

style.css

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

Part 3. 수익형 웹 서비스 구현하기(2) - 대출 이자 계산기 만들기

digital520 — Thu, 4 Apr 2024 13:18:01 +0900

3-1. 대출 이자 계산기 미리보기

파트2에서 만든 계산기를 응용하여 이번엔 대출 이자 계산기를 만들어보도록 하겠습니다.

3-2. 대출 이자 계산기의 프로그래밍적 원리 이해하기

원리금균등상환 방식

우리는 원리금균등상환 방식의 대출 이자 계산기를 만들겁니다.

대출 원금과 이자를 더한 금액을 만기일까지 균등하게 상환하는 대출 상환 방식입니다. 가장 일반적인 상환 방식으로 매달 내야 하는 납부금이 동일하기에 자금 관리 면에서 유리한 방식이죠!

예시를 하나 들어봅시다. 우리가 1000만원을 연 10%의 금리로 12개월 원리금균등상환으로 대출받았다고 해봅시다. 단순히 1000만원의 10%이니 이자가 100만원이다!라고 생각할수도 있지만 실제로는 그렇지 않습니다. 매달 지날 수록 원금이 줄어들기 때문에 이자도 조금씩 줄어들기 때문이죠. 따라서 계산하는 방식이 까다롭습니다. 계산 방식이 까다롭기 때문에 사람들이 인터넷에 많이 검색할 것이고, 따라서 이런 계산기를 만들면 사람들이 많이 사용할 가능성이 높겠죠?

좀 복잡하죠? 하지만 하나하나 그대로 따라하면 그렇게 어려울 것은 없습니다.

위의 예로 다시 돌아가서 정리하면:

원금 : 10,000,000만원
연금리 : 10% (월금리 0.833%)
- 계산할때는 퍼센티지를 소수점으로 바꾼다. (100% → 1.0)
  - 10% → 0.1
  - 0.833% → 0.00833
상환기간 : 12개월

따라서 수식에 따라 넣어보면:

계산기로 계산해보면 월 상환액은 약 879,158원이라는 것을 알 수 있죠. (계산 순서에 주의하세요!)

사용자 입력

우리는 사용자에게서 3개를 입력받을 예정입니다. 이것들을 입력받기위한 텍스트박스 3개가 필요하겠죠? 그리고 계산하기 버튼을 눌러 계산할 수 있습니다.

대출금 (원)
대출금리 (연 %)
대출기간 (개월)
계산하기 (버튼)

3-3. HTML로 계산기 틀 만들기

보일러플레이트

새로운 프로젝트를 시작할 때는 항상 보일러플레이트 코드부터 시작합니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$(document).ready(function() {

});

style.css

/* 비어있음 */

Bootstrap에서 표 사용하기

이번 시간에는 표(Table)를 사용하여 예쁘게 계산기를 만들어보도록 하겠습니다. 표를 이용하면 각이 딱딱 맞는 디자인을 만들 수 있죠!

Bootstrap 표 문서: https://getbootstrap.com/docs/5.2/content/tables/#overview

main.container안에 아래와 같이 테이블 코드를 복사+붙여넣기 합니다. thead 부분은 필요없으므로 삭제합니다.

<table class="table">
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

요소 구현하기

먼저 텍스트박스로 이루어진 기본적인 요소들부터 구현해봅시다.

<table class="table">
    <tbody>
        <tr>
            <th scope="row">대출금</th>
            <td>
                <input type="text" id="loan"> 원
            </td>
        </tr>
        <tr>
            <th scope="row">대출금리</th>
            <td>
                연 <input type="text" id="interest"> %
            </td>
        </tr>
        <tr>
            <th scope="row">대출기간</th>
            <td>
                <input type="text" id="period"> 개월
            </td>
        </tr>
    </tbody>
</table>

<button type="button" id="calculate">계산하기</button>

<div id="result"></div>

3-4. 원리금균등상환 계산기 만들기

사용자 입력 받아오기

먼저 텍스트박스에서 사용자가 입력한 값들을 받아오는 것부터 만들어보죠. 계산하기 버튼을 클릭하면 3개의 텍스트박스에 있는 값을 불러오죠. script.js 파일에 다음과 같이 작성합니다.

function calculateHandler() {
    var loan = $('#loan').val();
    var interest = $('#interest').val();
    var period = $('#period').val();

    loan = parseFloat(loan);
    interest = parseFloat(interest);
    period = parseFloat(period);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);
});

id가 calculate인 버튼을 클릭하면, calculateHandler() 함수안에 있는 코드가 실행됩니다.
calculateHandler() 함수는 id가 loan, interest, period 인 텍스트박스에서 값을 가져와 각 변수에 저장합니다.
마지막으로 각각의 값을 문자에서 숫자로 바꿔 저장합니다.

계산 전 필요한 값 정리하기

위에서 월 상환액을 계산했던 식을 다시 한 번 살펴봅시다.

위의 식에서 원금, 연금리, 기간은 이미 받아왔지만 월금리는 우리가 별도로 계산해야 합니다. 월금리를 계산하는 식은 간단하죠. 단순히 연금리에서 12(개월)를 나누면 끝입니다. 따라서 우리는 월금리를 구하는 코드를 만들어 따로 저장합니다.

var interestMonth = interest / 12;

interestMonth 변수를 만들어 연금리(interest) 에서 12를 나누어 저장합니다.

현재 interestMonth에는 퍼센티지 단위의 값이 저장되어 있습니다. 퍼센티지를 소수점으로 변환하기 위해 100으로 나누어줍니다.

var interestMonth = interest / 12 / 100;

월 상환액 계산하기

수식이 복잡하니 분자와 분모를 먼저 계산하여 나중에 나눠주는 방식으로 진행하겠습니다.

일단 분자를 구하는 식을 코드로 작성하면 아래와 같이 되겠죠?

JavaScript에서 거듭제곱은 ** 기호로 표시합니다.

var div1 = loan * interestMonth * (1 + interestMonth) ** period;

분모를 구하는 식은 아래와 같습니다.

var div2 = (1 + interestMonth) ** period - 1;

분자에서 분모로 나누어 최종 결과를 완성합니다.

var result = div1 / div2;

월 상환액 결과 표시하기

id가 result인 요소에 우리가 계산한 월 상환액을 표시합니다.

$('#result').text(result);

월 상환액 반올림하여 결과 표시하기

결과값에 소수점이 나오니 지저분합니다. 우리는 이것을 반올림하여 사용자가 보기 쉽게 표시하도록 하겠습니다. 이럴 때는 함수를 외워서 하는 것이 아니라 구글을 주로 활용합니다. 구글에 “javascript 반올림”이라고 검색하여 정보를 찾습니다.

result = Math.round(result);

사용자 친화적으로 만들기

계산한 결과가 숫자로만 나오니 약간 불친절한 느낌이 듭니다. “고객님의 월 상환액은 00000원입니다.” 등의 메시지를 함께 띄워보죠.

var resultText = `고객님의 ${period}개월 동안 월 상환액은 ${result}원 입니다.`;

$('#result').text(resultText);

JavaScript에서 백틱(Backtick, `)을 사용하면 변수에 저장된 값들을 원하는 문구과 함께 출력할 수 있습니다. 변수를 표시할 때는 백틱 안에 ${변수명} 이렇게 작성해주세요.

전체 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>대출 이자 계산기</h1>

        <table class="table">
            <tbody>
                <tr>
                    <th scope="row">대출금</th>
                    <td>
                        <input type="text" id="loan"> 원
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출금리</th>
                    <td>
                        연 <input type="text" id="interest"> %
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출기간</th>
                    <td>
                        <input type="text" id="period"> 개월
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="calculate">계산하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function calculateHandler() {
    var loan = $('#loan').val();
    var interest = $('#interest').val();
    var period = $('#period').val();

    loan = parseFloat(loan);
    interest = parseFloat(interest);
    period = parseFloat(period);

    var interestMonth = interest / 12 / 100;

    var div1 = loan * interestMonth * (1 + interestMonth) ** period;
    var div2 = (1 + interestMonth) ** period - 1;

    var result = div1 / div2;

    result = Math.round(result);

    var resultText = `고객님의 ${period}개월 동안 월 상환액은 ${result}원 입니다.`;

    $('#result').text(resultText);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);
});

3-5. 사용자 편의 기능 만들기

사용자들이 모든 숫자를 직접 입력하려면 힘들겠죠? 우리는 사용자들을 더 편하게해서 방문율을 높이기 위해 약간의 편의 기능들을 만들겁니다. 예를 들면 이런거죠.

기업은행 인터넷뱅킹에서 송금을 하려고 금액을 입력했을 때 뜨는 팝업입니다. 금액을 직접 입력할 수도 있지만 +10만 +100만 버튼을 사용해서 더 간단하게 입력할수도 있습니다.

버튼 만들기

먼저 대출금액부터 손봐줄게요. td를 하나 더 만들어 열을 추가합니다. 그 안에 3개의 버튼을 추가할게요.

<td>
    <button type="button" id="loan-100">+백만</button>
    <button type="button" id="loan-1000">+천만</button>
    <button type="button" id="loan-10000">+일억</button>
</td>

각 버튼의 id를 loan-100, loan-1000, loan-10000 으로 지정하였습니다. 먼저 loan-100을 클릭하면 100만원이 더해지도록 하죠.

100만원 더하기

script.js 파일에 loan-100 버튼을 클릭했을 때 loan100Handler() 함수가 실행되도록 만들어줍니다.

$('#loan-100').click(loan100Handler);

loan100Handler() 에서 해야하는 일은 다음과 같습니다.

현재 입력되어 있는 대출금 값을 가져온다.
현재 입력값에 100만원을 더한다.
대출금 텍스트박스에 더한 값을 넣는다.

이것을 코드로 작성하면:

function loan100Handler() {
    var loan = $('#loan').val();

    loan = parseFloat(loan);

    loan = loan + 1000000;

    $('#loan').val(loan);
}

val() 함수는 괄호 안쪽이 비어있을 때는 해당 id 요소의 값을 가져오고, 안쪽에 값 또는 변수를 넣었을 때는 해당 id 요소에 값을 채워넣습니다.

하지만 이대로는 잘 동작하지 않습니다. [+백만] 버튼을 누르면 NaN이라는 글자가 뜨죠. NaN은 Not a Number 의 약자로 “숫자가 아니다”라는 뜻입니다. 이 오류가 발생하는 이유는 현재 loan 텍스트박스에 아무것도 입력되어 있지 않아서 그런건데요. 우리는 이 에러를 해결하기 위해 예외처리를 해주어야 합니다.

function loan100Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 1000000;

    $('#loan').val(loan);
}

loan 텍스트박스에서 값을 받아온 후 loan에 저장된 값이 빈 칸(””)인지 확인하여 빈 칸이라면 0을 넣어주는 코드를 작성합니다. 이제 정상적으로 동작합니다.

다른 버튼 구현하기

마찬가지로 숫자만 변경하여 천만, 일억 버튼도 만들어줍시다.

function loan1000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 10000000;

    $('#loan').val(loan);
}

function loan10000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 100000000;

    $('#loan').val(loan);
}

전체 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>대출 이자 계산기</h1>

        <table class="table">
            <tbody>
                <tr>
                    <th scope="row">대출금</th>
                    <td>
                        <input type="text" id="loan"> 원
                    </td>
                    <td>
                        <button type="button" id="loan-100">+백만</button>
                        <button type="button" id="loan-1000">+천만</button>
                        <button type="button" id="loan-10000">+일억</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출금리</th>
                    <td>
                        연 <input type="text" id="interest"> %
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출기간</th>
                    <td>
                        <input type="text" id="period"> 개월
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="calculate">계산하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function calculateHandler() {
    var loan = $('#loan').val();
    var interest = $('#interest').val();
    var period = $('#period').val();

    loan = parseFloat(loan);
    interest = parseFloat(interest);
    period = parseFloat(period);

    var interestMonth = interest / 12 / 100;

    var div1 = loan * interestMonth * (1 + interestMonth) ** period;
    var div2 = (1 + interestMonth) ** period - 1;

    var result = div1 / div2;

    result = Math.round(result);

    var resultText = `고객님의 ${period}개월 동안 월 상환액은 ${result}원 입니다.`;

    $('#result').text(resultText);
}

function loan100Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 1000000;

    $('#loan').val(loan);
}

function loan1000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 10000000;

    $('#loan').val(loan);
}

function loan10000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 100000000;

    $('#loan').val(loan);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);

    $('#loan-100').click(loan100Handler);
    $('#loan-1000').click(loan1000Handler);
    $('#loan-10000').click(loan10000Handler);
});

대출금리와 대출기간 버튼 만들기

대출금리와 대출기간도 위와 비슷한 기능을 하는 버튼을 만들어주겠습니다.

<tr>
    <th scope="row">대출금리</th>
    <td>
        연 <input type="text" id="interest"> %
    </td>
    <td>
        <button type="button" id="interest-3">3%</button>
        <button type="button" id="interest-4">4%</button>
        <button type="button" id="interest-5">5%</button>
    </td>
</tr>
<tr>
    <th scope="row">대출기간</th>
    <td>
        <input type="text" id="period"> 개월
    </td>
    <td>
        <button type="button" id="period-1">1년</button>
        <button type="button" id="period-3">3년</button>
        <button type="button" id="period-5">5년</button>
    </td>
</tr>

이 버튼들은 더하기 버튼이 아니여서 현재 입력된 값에 더하는 형태가 아니라 새로운 값을 채워주는 형태로 만들어줄게요.

function interest3Handler() {
    $('#interest').val(3);
}

function interest4Handler() {
    $('#interest').val(4);
}

function interest5Handler() {
    $('#interest').val(5);
}

function period1Handler() {
    $('#period').val(12);
}

function period3Handler() {
    $('#period').val(36);
}

function period5Handler() {
    $('#period').val(60);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);

    $('#loan-100').click(loan100Handler);
    $('#loan-1000').click(loan1000Handler);
    $('#loan-10000').click(loan10000Handler);

    $('#interest-3').click(interest3Handler);
    $('#interest-4').click(interest4Handler);
    $('#interest-5').click(interest5Handler);

    $('#period-1').click(period1Handler);
    $('#period-3').click(period3Handler);
    $('#period-5').click(period5Handler);
});

전체 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>대출 이자 계산기</h1>

        <table class="table">
            <tbody>
                <tr>
                    <th scope="row">대출금</th>
                    <td>
                        <input type="text" id="loan"> 원
                    </td>
                    <td>
                        <button type="button" id="loan-100">+백만</button>
                        <button type="button" id="loan-1000">+천만</button>
                        <button type="button" id="loan-10000">+일억</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출금리</th>
                    <td>
                        연 <input type="text" id="interest"> %
                    </td>
                    <td>
                        <button type="button" id="interest-3">3%</button>
                        <button type="button" id="interest-4">4%</button>
                        <button type="button" id="interest-5">5%</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출기간</th>
                    <td>
                        <input type="text" id="period"> 개월
                    </td>
                    <td>
                        <button type="button" id="period-1">1년</button>
                        <button type="button" id="period-3">3년</button>
                        <button type="button" id="period-5">5년</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="calculate">계산하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function calculateHandler() {
    var loan = $('#loan').val();
    var interest = $('#interest').val();
    var period = $('#period').val();

    loan = parseFloat(loan);
    interest = parseFloat(interest);
    period = parseFloat(period);

    var interestMonth = interest / 12 / 100;

    var div1 = loan * interestMonth * (1 + interestMonth) ** period;
    var div2 = (1 + interestMonth) ** period - 1;

    var result = div1 / div2;

    result = Math.round(result);

    var resultText = `고객님의 ${period}개월 동안 월 상환액은 ${result}원 입니다.`;

    $('#result').text(resultText);
}

function loan100Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 1000000;

    $('#loan').val(loan);
}

function loan1000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 10000000;

    $('#loan').val(loan);
}

function loan10000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 100000000;

    $('#loan').val(loan);
}

function interest3Handler() {
    $('#interest').val(3);
}

function interest4Handler() {
    $('#interest').val(4);
}

function interest5Handler() {
    $('#interest').val(5);
}

function period1Handler() {
    $('#period').val(12);
}

function period3Handler() {
    $('#period').val(36);
}

function period5Handler() {
    $('#period').val(60);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);

    $('#loan-100').click(loan100Handler);
    $('#loan-1000').click(loan1000Handler);
    $('#loan-10000').click(loan10000Handler);

    $('#interest-3').click(interest3Handler);
    $('#interest-4').click(interest4Handler);
    $('#interest-5').click(interest5Handler);

    $('#period-1').click(period1Handler);
    $('#period-3').click(period3Handler);
    $('#period-5').click(period5Handler);
});

3-6. Bootstrap을 활용한 계산기 디자인 꾸미기

텍스트박스 꾸미기

이번에도 Bootstrap을 사용하여 계산기를 예쁘게 꾸며봅시다. Bootstrap의 인풋 그룹 문서를 보겠습니다.

Bootstrap 인풋 그룹 문서: https://getbootstrap.com/docs/5.2/forms/input-group/

여러분들이 맘에 드는 디자인으로 복사 붙여넣기 해도 괜찮습니다. 저는 아래와 같은 코드를 사용하여 텍스트박스를 꾸며보겠습니다. 꾸미고 난 후에는 동작이 잘되는지 꼭 확인합시다!

<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-text">.00</span>
</div>

디자인 적용한 코드

<tr>
    <th scope="row">대출금</th>
    <td>
        <div class="input-group">
            <input type="text" class="form-control" id="loan">
            <span class="input-group-text">원</span>
        </div>
    </td>
    <td>
        <button type="button" id="loan-100">+백만</button>
        <button type="button" id="loan-1000">+천만</button>
        <button type="button" id="loan-10000">+일억</button>
    </td>
</tr>

편의 기능 버튼 꾸미기

버튼은 버튼 그룹으로 묶어주겠습니다.

버튼 그룹 문서: https://getbootstrap.com/docs/5.2/components/button-group/

Button group

Group a series of buttons together on a single line or stack them in a vertical column.

getbootstrap.com

<tr>
    <th scope="row">대출금</th>
    <td>
        <div class="input-group">
            <input type="text" class="form-control" id="loan">
            <span class="input-group-text">원</span>
        </div>
    </td>
    <td>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary" id="loan-100">+1백만</button>
            <button type="button" class="btn btn-outline-primary" id="loan-1000">+1천만</button>
            <button type="button" class="btn btn-outline-primary" id="loan-10000">+1억</button>
        </div>
    </td>
</tr>

계산하기 버튼 꾸미기

버튼 문서를 참고하여 계산하기 버튼도 꾸며봅시다. 저는 계산하기 버튼에 class="btn btn-primary" 를 추가하여 파란색 버튼을 만들겠습니다.

버튼 문서: https://getbootstrap.com/docs/5.2/components/buttons/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

결과 텍스트 꾸미기

Bootstrap의 타이포그래프 문서 중에 텍스트의 일부를 하이라이트할 수 있는 방법이 있습니다.

타이포그래피 문서: https://getbootstrap.com/docs/5.2/content/typography/#inline-text-elements

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

getbootstrap.com

강조하고 싶은 텍스트 사이에 <mark>강조</mark>를 씌우면 된다고 설명하고 있습니다. 결과 텍스트에 mark 태그를 삽입하려면 calculateHandler() 함수에 resultText 변수에 넣어주면 될 것 같습니다.

var resultText = `고객님의 ${period}개월 동안 월 상환액은 <mark>${result}원</mark> 입니다.`;

$('#result').text(resultText);

이상하게도 <mark> 태그가 텍스트 그대로 출력됩니다. 왜일까요?

<mark> 태그는 HTML 마크업 언어입니다. 근데 우리는 text()라는 함수를 사용해서 텍스트를 출력하라고 명령을 내렸기 때문입니다. HTML 마크업 언어를 출력하기 위해서 text() 대신 html()이라는 함수를 사용합니다.

var resultText = `고객님의 ${period}개월 동안 월 상환액은 <mark>${result}원</mark> 입니다.`;

$('#result').html(resultText);

결과 텍스트 꾸미기 (심화)

결과 텍스트가 금액이 커질 경우 읽기 힘드니 콤마를 붙여서 가독성을 좋게 만들어봅시다. (예: 1000000만원, 1,000,000만원)

구글에 javascript comma number 라고 검색하여 가장 첫 번째 나오는 링크를 클릭합니다.

StackOverflow는 개발자들의 성지로 코딩에 대해 모르는 것을 질문하고 답변하는 세계에서 가장 유명한 서비스입니다.

아래로 내리다보면 우리에게 적절한 함수를 찾을 수 있습니다. Up vote를 2831개나 받은 답변이네요. 이 답변에서는 toLocaleString() 함수를 쓰면 된다고 써있습니다.

이 답변을 참고하여 calculateHandler() 함수 내의 result 코드를 다음과 같이 수정합니다. 이제 결과가 깔끔하게 나옵니다.

result = Math.round(result).toLocaleString();

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>대출 이자 계산기</h1>

        <table class="table">
            <tbody>
                <tr>
                    <th scope="row">대출금</th>
                    <td>
                        <div class="input-group">
                            <input type="text" class="form-control" id="loan">
                            <span class="input-group-text">원</span>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary" id="loan-100">+1백만</button>
                            <button type="button" class="btn btn-outline-primary" id="loan-1000">+1천만</button>
                            <button type="button" class="btn btn-outline-primary" id="loan-10000">+1억</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출금리</th>
                    <td>
                        <div class="input-group">
                            <span class="input-group-text">연</span>
                            <input type="text" class="form-control" id="interest">
                            <span class="input-group-text">%</span>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary" id="interest-3">3%</button>
                            <button type="button" class="btn btn-outline-primary" id="interest-4">4%</button>
                            <button type="button" class="btn btn-outline-primary" id="interest-5">5%</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">대출기간</th>
                    <td>
                        <div class="input-group">
                            <input type="text" class="form-control" id="period">
                            <span class="input-group-text">개월</span>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary" id="period-1">1년</button>
                            <button type="button" class="btn btn-outline-primary" id="period-3">3년</button>
                            <button type="button" class="btn btn-outline-primary" id="period-5">5년</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="calculate" class="btn btn-primary">계산하기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function calculateHandler() {
    var loan = $('#loan').val();
    var interest = $('#interest').val();
    var period = $('#period').val();

    loan = parseFloat(loan);
    interest = parseFloat(interest);
    period = parseFloat(period);

    var interestMonth = interest / 12 / 100;

    var div1 = loan * interestMonth * (1 + interestMonth) ** period;
    var div2 = (1 + interestMonth) ** period - 1;

    var result = div1 / div2;

    result = Math.round(result).toLocaleString();

    var resultText = `고객님의 ${period}개월 동안 월 상환액은 <mark>${result}원</mark> 입니다.`;

    $('#result').html(resultText);
}

function loan100Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 1000000;

    $('#loan').val(loan);
}

function loan1000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 10000000;

    $('#loan').val(loan);
}

function loan10000Handler() {
    var loan = $('#loan').val();

    if (loan == "") {
        loan = 0;
    }

    loan = parseFloat(loan);

    loan = loan + 100000000;

    $('#loan').val(loan);
}

function interest3Handler() {
    $('#interest').val(3);
}

function interest4Handler() {
    $('#interest').val(4);
}

function interest5Handler() {
    $('#interest').val(5);
}

function period1Handler() {
    $('#period').val(12);
}

function period3Handler() {
    $('#period').val(36);
}

function period5Handler() {
    $('#period').val(60);
}

$(document).ready(function() {
    $('#calculate').click(calculateHandler);

    $('#loan-100').click(loan100Handler);
    $('#loan-1000').click(loan1000Handler);
    $('#loan-10000').click(loan10000Handler);

    $('#interest-3').click(interest3Handler);
    $('#interest-4').click(interest4Handler);
    $('#interest-5').click(interest5Handler);

    $('#period-1').click(period1Handler);
    $('#period-3').click(period3Handler);
    $('#period-5').click(period5Handler);
});

3-7. 웹 사이트 기본 기능 만들기 - 상단 메뉴, 홈버튼 구현

원하는 템플릿 골라서 사용하기

우리는 지금까지 2개의 서비스를 만들었습니다. 이 2개의 서비스는 독립적으로 사용자들에게 배포할 수도 있지만 한 웹사이트 안에 여러가지 서비스가 함께 있을 경우 더 많은 방문자가 더 오래 체류할 가능성이 높습니다. 우리는 사칙연산 계산기와 대출 이자 계산기를 하나의 사이트에서 메뉴로 이동할 수 있게끔 구현해보겠습니다.

만약 여러분들이 강의를 잘 따라오셨다면 VSCode 사이드 메뉴 파일탐색기에 다음과 같이 part1, part2, part3라는 폴더가 있을거에요. 폴더 가장 바깥쪽에 main.html 파일을 새로 만들어 홈페이지로 사용하도록 하겠습니다.

main.html 파일 안에 채워넣을 템플릿을 찾아봅시다. Bootstrap 예제 중에서 골라볼게요. Navbars 섹션에 있는 Navbar fixed를 사용해보겠습니다.

Bootstrap 예제: https://getbootstrap.com/docs/5.2/examples/
Navbar fixed 예제 사이트: https://getbootstrap.com/docs/5.2/examples/navbar-fixed/

먼저 보일러플레이트 코드를 복사+붙여넣기합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

$(document).ready(function() {

});

/* 비어있음 */

Navbar fixed 예제에서 오른쪽 클릭 페이지 소스 보기 또는 보기 - 개발자 정보 - 소스 보기 메뉴를 클릭하여 소스코드를 확인합니다. 먼저 body 부분의 nav, main 태그를 전부 복사하여 main.html 파일의 body 부분에 붙여넣습니다.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Fixed navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
		            <li class="nav-item">
		                <a class="nav-link active" aria-current="page" href="#">Home</a>
		            </li>
		            <li class="nav-item">
		                <a class="nav-link" href="#">Link</a>
		            </li>
		            <li class="nav-item">
		                <a class="nav-link disabled">Disabled</a>
		            </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

<main class="container">
      <div class="bg-light p-5 rounded">
          <h1>Navbar example</h1>
          <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
          <a class="btn btn-lg btn-primary" href="/docs/5.2/components/navbar/" role="button">View navbar docs &raquo;</a>
      </div>
</main>

Live Preview로 미리보기를 하면, 아직은 화면이 좀 이상한데요, css를 적용하면 더 보기 좋아질 겁니다. 페이지 소스에서 navbar-top-fixed.css 파일을 클릭하여 안에 있는 스타일시트 언어를 복사하여 style.css 파일에 붙여넣기합니다. 그럼 정상적으로 보이죠!

body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

템플릿 내 글자 바꾸기

main.html 문서를 입맛대로 수정하여 필요없는 것은 지우고 우리가 원하는 문구로 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>빵형의 홈페이지</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">빵형의 홈페이지</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">사칙연산 계산기</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">대출이자 계산기</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container">
        <div class="bg-light p-5 rounded">
            <h1>사칙연산 계산기</h1>
            <p class="lead">깔끔한 디자인의 사칙연산 계산기입니다.</p>
            <a class="btn btn-lg btn-primary" href="/docs/5.2/components/navbar/" role="button">바로가기 &raquo;</a>
        </div>

        <div class="bg-light p-5 rounded">
            <h1>대출이자 계산기</h1>
            <p class="lead">깔끔한 디자인의 대출 이자 계산기입니다. 원리금균등상환 계산을 빠르게 할 수 있습니다.</p>
            <a class="btn btn-lg btn-primary" href="/docs/5.2/components/navbar/" role="button">바로가기 &raquo;</a>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

버튼 링크 연결하기

버튼 링크 동작을 관리하는 코드를 자세히 보겠습니다. 이 코드에서 href 부분을 수정하면 원하는 링크로 이동하도록 할 수 있습니다. 원하는 링크는 파일 경로로 지정할 수 있습니다.

<a class="btn btn-lg btn-primary" href="/docs/5.2/components/navbar/" role="button">바로가기 &raquo;</a>

우리가 만든 사칙연산 계산기는 /part2/index.html 경로에 저장되어 있으므로 href 안의 링크를 다음과 같이 변경합니다.

<a class="btn btn-lg btn-primary" href="/part2/index.html" role="button">바로가기 &raquo;</a>

잘 동작하는지 확인하고 대출이자 계산기의 링크도 변경해줍니다. 대출이자 계산기의 경로는 /part3/index.html 입니다.

<a class="btn btn-lg btn-primary" href="/part3/index.html" role="button">바로가기 &raquo;</a>

상단 메뉴 링크 연결하기

버튼 링크와 마찬가지로 상단 메뉴 링크도 각각 연결해줍니다. 홈 링크는 /main.html 로 연결해줍니다.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/main.html">빵형의 홈페이지</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/main.html">홈</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/part3/index.html">대출이자 계산기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

상세 페이지 연결하기

상세 페이지도 비슷하게 작업합니다. 상세페이지에는 nav 태그 부분만 작업하면 되겠죠? 그리고 style.css 파일에 있는 css 코드를 넣는 것 잊지마세요!

메뉴 활성화 상태 표시하기

상단 메뉴를 보면 [홈] 버튼이 밝게 활성화되어 있는 것을 볼 수 있습니다. 사칙연산 계산기 페이지에서는 사칙연산 계산기 글씨가 활성화되도록 만들어보죠. active라고 되어 있는 부분을 유심히 찾아보세요. 사칙연산 계산기라고 되어 있는 부분 class 안에 active를 추가해줍니다.

<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="/main.html">홈</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="/part2/index.html">사칙연산 계산기</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/part3/index.html">대출이자 계산기</a>
        </li>
    </ul>
</div>

마찬가지로 대출이자 계산기에서도 active 위치를 수정해줍니다.

<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="/main.html">홈</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/part2/index.html">사칙연산 계산기</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="/part3/index.html">대출이자 계산기</a>
        </li>
    </ul>
</div>

디테일한 부분이지만 디테일을 살려야 예쁜 법이죠!

Part 2. 수익형 웹 서비스 구현하기(1) - 사칙연산 계산기 만들기

digital520 — Thu, 4 Apr 2024 10:45:01 +0900

2-1. 사칙연산 계산기 미리보기

2-2. 사칙연산 계산기의 프로그래밍적 원리 이해하기

사용자가 입력하는 것은 무엇인가

웹서비스를 기획하기 앞서 우리는 먼저 사용자 입장에서 생각해야 합니다. 계산기를 사용하는 사용자는 어떤 행동을 해야하는지가 중요해요. 1차적으로 우리가 만드는 사칙연산 계산기는 단순하게 3가지를 입력받도록 할겁니다.

첫 번째 숫자
두 번째 숫자
연산자 (더하기, 빼기, 곱하기, 나누기)

입력받은 값을 어떻게 처리할까

일단 4개의 연산자 중 더하기부터 생각합시다. 프로그래밍은 아래의 순서대로 실행되어야 합니다.

첫 번째 숫자를 (어딘가에) 저장한다.
두 번째 숫자를 (어딘가에) 저장한다.
첫 번째 숫자와 두 번째 숫자를 더해서 더한 결과를 저장한다.
더한 결과를 표시한다.

가장 효율적인 프로그래밍 순서는, [더하기] 버튼을 누르는 순간 1, 2, 3, 4번 모든 순서가 실행되면 한 번에 해결할 수 있습니다.

프로그래밍에서는 어떤 값을 저장하는 공간을 변수(Variable)라고 합니다.

2-3. HTML로 계산기 틀 만들기

보일러플레이트 코드 사용하기

보일러플레이트는 프로젝트 시작 시 반복해서 사용하는 코드를 의미합니다. 우리는 앞으로 이 보일러플레이트 코드를 프로젝트 시작 시에 사용하도록 할 거에요.

원래 보일러플레이트는 19세기에 증기 보일러를 만들때 틀로 사용하는 강철판을 의미했다. 보일러플레이트에는 보일러 이름 등의 제조 정보가 음각으로 새겨져 있어서 보일러플레이트를 통과한 강철판에는 보일러 이름 등이 새겨지게 되었다. 이게 인쇄 분야로 이어져서 반복해서 사용하는 텍스트(주로 광고나 로고)를 의미하게 되었다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>Hello, world!</h1>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$(document).ready(function() {

});

style.css

/* 비어있음 */

숫자를 입력받기 위한 텍스트박스 만들기

계산기에서 첫 번째 숫자와 두 번째 숫자를 입력받을 텍스트박스를 2개 만들어봅시다. 텍스트박스를 만들기 위해서는 아래처럼 body의 main.container 안에 입력해줍니다.

<input type="text" id="first-number" />
<input type="text" id="second-number" />

더하기 버튼 만들기

<button type="button" id="plus">더하기</button>

연산 결과 보여줄 공간 만들기

<div id="result"></div>

2-4. jQuery를 활용한 계산기 동작 이해하기

jQuery는 JavaScript를 더 쉽게 사용하기 위해 만들어진 라이브러리입니다. 다양한 브라우저에서 잘 동작하고 사용하기 쉬운 API를 통해 HTML 문서 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 것들을 훨씬 쉽게 만들 수 있습니다. 다재다능함과 확장성의 조합으로, 현재 전세계적으로 수백만 명의 개발자들이 사용하고 있습니다.

우리는 jQuery를 사용하여 사용자가 [더하기] 버튼을 누르는 순간을 캐치하고 버튼이 클릭되는 순간 첫 번째 숫자(first-number)와 두 번째 숫자(second-number)를 받아와 저장하고 첫 번째 숫자와 두 번째 숫자를 더해서 결과(result)를 표시하려고 합니다. 이것을 아래와 같은 순서로 나타낼 수 있겠죠.

첫 번째 숫자(first-number)를 받아와 저장한다.
두 번째 숫자(second-number)를 받아와 저장한다.
첫 번째 숫자와 두 번째 숫자를 더한다.
더한 결과를 표시한다.

클릭 인식하기

우리는 HTML을 작성할 때 버튼과 텍스트 인풋에 id를 각각 부여했습니다. 이 id는 각각의 버튼과 텍스트 인풋을 구분하기 위한 이름입니다. jQuery로 이 id를 이용하여 특정 요소를 선택할 수 있습니다. 예를 들어 버튼(plus)을 선택하고 싶다면 아래와 같이 코드를 작성합니다.

$("#plus")

위 코드는 뜻은 id(#)가 plus인 요소를 선택한다는 뜻입니다. 우리는 더하기 버튼을 클릭했을 때 뭔가를 실행하도록 만들고 싶습니다. 그러기 위해서는 다음과 같이 코드를 작성합니다.

function plusHandler() {
    /* 더하기 버튼을 클릭하면 이 부분이 실행됩니다. */
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
});

텍스트 값 받아오기

clickHandler() 함수 안에 값을 받아오기 위한 코드를 작성합니다. 마찬가지로 id를 사용하여 first-number를 선택하여 값을 가져오겠습니다.

function plusHandler() {
    var firstNumber = $("#first-number").val();

    $("#result").text(firstNumber);
}

val()을 사용하여 first-number의 값을 받아옵니다. 그리고 받아온 값을 firstNumber라는 변수에 저장합니다. 저장할 때는 = 기호를 사용합니다. 그리고 result라는 id를 가지고 있는 공간에 firstNumber 변수에 저장된 값을 텍스트로 출력(text)합니다.

first-number 텍스트 박스에 숫자를 입력하고 더하기 버튼을 누르면 텍스트 박스안에 있는 숫자가 그대로 표시됩니다.

자, 이런 원리만 알고 있다면 이제 우리는 무서울 것이 없습니다. 이번엔 두 번째 숫자도 받아와보죠.

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    $("#result").text(firstNumber);
}

second-number라는 id를 가지고 있는 요소를 선택하여 그것의 값(val)을 받아옵니다. 그리고 secondNumber라는 변수에 저장합니다.

더하기 구현하기

첫 번째 숫자와 두 번째 숫자를 가져왔으니 이제 두 숫자를 더할 차례입니다. 더하기는 정말 쉽습니다.

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    var result = firstNumber + secondNumber;

    $("#result").text(result);
}

JavaScript에서 더하기는 + 기호로 구현합니다. firstNumber와 secondNumber에 저장된 값을 더해서 result 변수에 저장합니다. result 변수에 저장된 값을 id가 result인 요소에 출력합니다. 한 번 잘되는지 볼까요?

우리가 예상했던 결과는 3인데 12라는 엉뚱한 값이 나왔습니다. 그 이유는 val()을 사용해서 값을 가져오면 숫자가 아닌 문자(String)로 인식하기 때문입니다. 단순하게 1과 2를 앞뒤로 붙여서 12라는 결과가 나오는거죠. 3과 4를 입력하면 34가 나올 것입니다.

문자를 숫자로 바꾸기 위해 우리는 한 번 더 코드를 작성해야 합니다.

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber + secondNumber;

    $("#result").text(result);
}

parseFloat()이라는 함수는 문자를 숫자(실수)로 바꿔주는 역할을 합니다. firstNumber에 저장된 값을 숫자로 바꿔서 firstNumber에 다시 저장하는 코드죠. 이렇게 바꿔주면 더하기가 정상적으로 동작할 겁니다.

전체 코드

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber + secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
});

2-5. jQuery를 활용한 사칙연산 구현하기

빼기 구현하기

더하기를 구현했으니 이번엔 빼기를 구현해봅시다. 빼기도 간단합니다. 아래와 같이 구현합니다. plusHandler() 함수를 복사해서 minusHandler로 만든다음 + 를 - 기호로 바꿔주면 끝!

<button type="button" id="minus">빼기</button>

function minusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber - secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
    $("#minus").click(minusHandler)
});

곱하기 구현하기

JavaScript에서 곱하기 기호는 * 로 표시합니다.

<button type="button" id="multiply">곱하기</button>

function multiplyHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber * secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
    $("#minus").click(minusHandler)
    $("#multiply").click(multiplyHandler)
});

나누기 구현하기

JavaScript에서 나누기 기호는 / 로 표시합니다.

<button type="button" id="divide">나누기</button>

function divideHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber / secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
    $("#minus").click(minusHandler)
    $("#multiply").click(multiplyHandler)
    $("#divide").click(divideHandler)
});

전체 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>계산기</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>계산기</h1>

        <input type="text" id="first-number" />
        <input type="text" id="second-number" />

        <button type="button" id="plus">더하기</button>
        <button type="button" id="minus">빼기</button>
        <button type="button" id="multiply">곱하기</button>
        <button type="button" id="divide">나누기</button>

        <div id="result"></div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber + secondNumber;

    $("#result").text(result);
}

function minusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber - secondNumber;

    $("#result").text(result);
}

function multiplyHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber * secondNumber;

    $("#result").text(result);
}

function divideHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber / secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
    $("#minus").click(minusHandler)
    $("#multiply").click(multiplyHandler)
    $("#divide").click(divideHandler)
});

2-6. Bootstrap을 활용한 계산기 디자인 꾸미기

우리는 동작하는 계산기를 만들었습니다. 한 가지 아쉬운 점은 디자인이겠죠? 유려한 디자인을 가진 서비스일수록 사람들이 선호하기 마련입니다. 우리는 디자인을 하기위해 Bootstrap(부트스트랩)이라는 HTML, CSS 프레임워크를 사용하도록 하겠습니다.

Bootstrap은 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷입니다. 다양한 그리드 시스템과 구성요소를 활용하며 웹 서비스에 활기를 불어넣을 수 있습니다.

위키피디아의 설명에 따르면 부트스트랩이란 Boot(s) + Strap의 합성어로서 부츠(Boots)의 뒷 부분에 달린 끈 혹은 고리(Strap)를 말합니다. 이 부트스트랩은 요즘 신발에도 달려나온다. 불가능한 일을 자력으로 해낸다는 의미인데 컴퓨터 분야에서는 보통 한 번 시작하면 다른 외부의 도움없이 스스로 진행하는 행위를 통틀어 사용하고 있습니다.

출처: https://www.wisewiredbooks.com/term-dict/common/bootstrap.html

Bootstrap 예시

https://getbootstrap.com/docs/5.2/examples/

Examples

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

getbootstrap.com

Bootstrap 문서

https://getbootstrap.com/docs/5.2/getting-started/introduction/

Bootstrap의 문서를 참고해서 한 번 디자인해보도록 하죠. 위의 문서를 보면 Bootstrap에서 제공하는 다양한 구성요소(Components)들을 복사+붙여넣기로 사용할 수 있습니다.

우리는 버튼 애드온으로 한 번 구현해보도록 하겠습니다.

버튼 애드온 예제: https://getbootstrap.com/docs/5.2/forms/input-group/#button-addons

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

getbootstrap.com

Button Addon 구현하기

버튼 애드온 예제에서 가장 마지막 예제를 복사해서 index.html 파일에 붙여넣습니다.

<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

버튼 애드온을 조금씩 수정해서 우리가 원하는 모양으로 만들어줍니다.

버튼 색 변경 예제: https://getbootstrap.com/docs/5.2/components/buttons/#outline-buttons

<div class="input-group">
    <input type="text" class="form-control" placeholder="첫 번째 숫자">
    <input type="text" class="form-control" placeholder="두 번째 숫자">

    <button class="btn btn-outline-success" type="button">더하기</button>
    <button class="btn btn-outline-danger" type="button">빼기</button>
    <button class="btn btn-outline-primary" type="button">곱하기</button>
    <button class="btn btn-outline-warning" type="button">나누기</button>
    <span class="input-group-text"></span>
</div>

디자인이 조금 나아졌습니다. 하지만 계산기가 동작하지 않습니다. 왜일까요?

우리는 jQuery를 사용하여 id로 값을 받아오고 클릭을 인식했는데 우리가 지금 작성한 HTML 코드에는 id가 없어서 동작하지 않습니다. 각각의 텍스트 박스와 버튼 그리고 결과 공간에 id를 부여해줍시다. 그리고 처음에 작성한 코드는 지워줍니다. 그리고 계산기를 완성합니다!

<div class="input-group">
    <input type="text" class="form-control" placeholder="첫 번째 숫자" id="first-number">
    <input type="text" class="form-control" placeholder="두 번째 숫자" id="second-number">

    <button class="btn btn-outline-success" type="button" id="plus">더하기</button>
    <button class="btn btn-outline-danger" type="button" id="minus">빼기</button>
    <button class="btn btn-outline-primary" type="button" id="multiply">곱하기</button>
    <button class="btn btn-outline-warning" type="button" id="divide">나누기</button>
    <span class="input-group-text" id="result"></span>
</div>

전체 코드

index.html

    
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>계산기</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <h1>계산기</h1>

        <div class="input-group">
            <input type="text" class="form-control" placeholder="첫 번째 숫자" id="first-number">
            <input type="text" class="form-control" placeholder="두 번째 숫자" id="second-number">

            <button class="btn btn-outline-success" type="button" id="plus">더하기</button>
            <button class="btn btn-outline-danger" type="button" id="minus">빼기</button>
            <button class="btn btn-outline-primary" type="button" id="multiply">곱하기</button>
            <button class="btn btn-outline-warning" type="button" id="divide">나누기</button>
            <span class="input-group-text" id="result"></span>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

function plusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber + secondNumber;

    $("#result").text(result);
}

function minusHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber - secondNumber;

    $("#result").text(result);
}

function multiplyHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber * secondNumber;

    $("#result").text(result);
}

function divideHandler() {
    var firstNumber = $("#first-number").val();
    var secondNumber = $("#second-number").val();

    firstNumber = parseFloat(firstNumber);
    secondNumber = parseFloat(secondNumber);

    var result = firstNumber / secondNumber;

    $("#result").text(result);
}

$(document).ready(function() {
    $("#plus").click(plusHandler)
    $("#minus").click(minusHandler)
    $("#multiply").click(multiplyHandler)
    $("#divide").click(divideHandler)
});

Part 1. 초보자도 가능한 웹 개발 기초와 실습

digital520 — Thu, 4 Apr 2024 10:21:23 +0900

1-1. 웹 서비스 수익 확인하기

구글에 여러가지 웹 서비스를 검색하여 예상 방문자 수, 예상 페이지 조회수를 통해 예상 수익을 계산할 수 있습니다. 구글에 “온라인 메모장”이라고 검색해서 가장 상단에 나오는 웹사이트에 들어가봅시다.

온라인 메모장 웹 서비스

오른쪽과 아래쪽에 구글 광고가 삽입되어 있습니다. 이 페이지의 월간 방문자 수와 페이지 조회수를 예측해주는 웹사이트인 시밀러 웹(https://www.similarweb.com)에서 트래픽을 확인해보겠습니다.

이 웹사이트의 2022년 9월 기준 월간 방문자(Total Visits)는 557.9K로 55만 방문자이며 방문자 당 둘러본 페이지 수(Page per Visit)는 1.47개 입니다. 월간 총 페이지 조회수는 아래처럼 계산할 수 있습니다.

월간 페이지 조회수 = 월간 방문자 수 x 방문자 당 둘러본 페이지 수

이 온라인 메모장의 월간 페이지 방문수는 55만 곱하기 1.47 = 808,500회 입니다. 이 숫자를 구글 애드센스 웹사이트에 들어가 예상 수익을 계산해봅시다.

연간 10만 달러(한화 약 1억 4,200만원)를 벌 수 있습니다. 페이지 방문자, 페이지 조회수, 광고 수익 모두 예상 수치이니 보수적으로 잡아 1년에 약 1억원 정도 벌 수 있다고 생각하면 되겠네요.

날씨 웹 서비스

AccuWeather(https://www.accuweather.com)라는 웹 서비스를 살펴봅시다. 역시 구글 애드센스가 삽입되어 있습니다. 단순하게 날씨를 보여주는 웹사이트입니다.

마찬가지로 시밀러웹에서 트래픽을 조사해봅시다.

2022년 9월 총 방문자 수 588.3M(5억 8천만명), 방문자당 페이지 방문 수 2.5페이지로 엄청난 트래픽을 자랑합니다. 총 페이지 방문수는 5억 8천만 곱하기 2.5 = 14억 5천만 회입니다. 이 숫자가 너무커서 구글 애드센스에서 예상 수익을 계산할 수가 없군요. 구글 애드센스에서는 월간 페이지 뷰 1천만까지만 예상 수익을 계산할 수 있습니다.

월별 페이지 조회수가 1천만일 때 연 예상 수익이 130만 달러(18억원)이므로 14억 5천만 조회수일 때는 어림잡아 18억원 곱하기 145를 하면 됩니다. 약 2,610억원 정도 되네요. 보수적으로 잡아 연 2,000억원 정도의 광고 수익을 올릴 수 있을 것으로 보입니다.

1-2. 실무 웹 개발과 수익형 웹 개발의 차이점에 대해 알아보기

웹 개발자 직군 정리

출처 https://emptydream.tistory.com/3918

웹 개발자 직군 정리 - 백앤드, 프론트 앤드, 퍼블리셔 등

의외로 업계 종사자 중에서도 모르는 사람들이 꽤 많아서 나름대로 정리를 해 봄. 이것은 개인의 경험을 정리한 것이고, 조직에 따라 상황에 따라 다른 기준이 적용될 수 있으므로 딱 정답이라

emptydream.tistory.com

프론트엔드 개발자 Front-end developer
1. 사용자에게 보이는 로직 부분을 담당 (JavaScript)
2. 로그인 페이지에서 사용자가 아이디, 비밀번호를 전부 잘 입력했는지, 비밀번호가 8자리 이상인지 등을 확인
3. 프론트엔드 개발을 도와주는 라이브러리
  1. jQuery
  2. React.js
  3. Vue.js
백엔드 개발자 Back-end developer
1. 서버에서 웹 서비스가 돌아가는 로직 개발 담당
2. 사용자 로그인 시도시 아이디, 비밀번호 일치하는지 확인
3. 백엔드 개발에 사용하는 언어
  1. Node.js
  2. Python (Django, Flask)
  3. Java (Spring)
  4. GO
데이터베이스 개발자 Database developer
1. 데이터를 어떻게 효율적으로 저장할지 설계하는 역할
2. 아이디, 비밀번호를 어떤 데이터 타입으로 저장하고 암호화할지 설계
3. 데이터베이스 종류
  1. Oracle
  2. MySQL (MariaDB)
  3. MongoDB
웹 퍼블리셔 Web publisher
1. 사용자에게 보이는 디자인 부분을 담당 (HTML, CSS)
2. 로그인 화면에서 아이디, 비밀번호 텍스트박스, 로그인 버튼을 예쁘게 보이도록 꾸미고 배치
3. 퍼블리싱을 도와주는 프레임워크
  1. Bootstrap
  2. Material Design
  3. Tailwind CSS

☝ 우리 수업에서는 프론트엔드와 퍼블리싱 부분을 다룹니다. 특히 프론트엔드 입문 부분에 집중할 예정이고 퍼블리싱 부분은 이미 구현되어 있는 코드를 쉽게 가져다 사용할 수 있는 방법에 대해 알아볼거에요!

1-3. 웹 개발 프로그래밍 언어 및 툴에 대해 알아보기

출처 https://morioh.com/p/8ae9a2ad64a7

How To Make A Website Using HTML CSS And JavaScript Step By Step

Here in this video, you will learn how to make this website design using HTML, CSS and JavaScript. At the top there is a navigation bar with logo and navigation menu. Website's background looks very nice because of angle shape and gradient color.

morioh.com

자바스크립트 JavaScript

프론트엔드 로직 작성에 있어 절대 빠질 수 없는 언어

Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.

나무위키 발췌

document.write("Hello, world!"); // HTML 문서에 출력된다.
alert("Hello, world!"); // 알림창으로 출력된다.
console.log("Hello, world!"); // 보통 F12(또는 Ctrl+Shift+I / macOS의 경우에는 ⌘+⌥+I)를 누르면 보이는 콘솔 창에 출력된다.

HTML

보이는 부분의 뼈대, 정확하게는 프로그래밍 언어가 아닌 마크업 언어라고 부름.

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        Hello, world!
    </body>
</html>

CSS

보이는 부분의 디자인, 정확하게는 프로그래밍 언어가 아닌 스타일시트 언어라고 부름.

body {
  margin-left: 200px;
  background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.center_div {
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}

삼형제를 모두 합치면? 이런 형태가 웹의 기본 구조

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin-left: 200px;
  background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.center_div {
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}
</style>
</head>

<body>

<div class="center_div">
  <h1>Hello World!</h1>
  <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>

<script>
document.write("Hello, world!");
alert("Hello, world!");
console.log("Hello, world!");
</script>

</body>
</html>

1-4. 가장 쉬운 개발 툴 설치 및 개발 환경 세팅

Visual Studio Code 설치

비주얼 스튜디오 코드(이하 VSCode)는 개발자들이 가장 많이 사용하는 코드 에디터(코드 작성용 메모장)중 하나입니다. 코딩을 도와주는 다양한 플러그인을 무료로 제공하고 자동완성 기능 등이 내장되어 있습니다.

이곳에서 VSCode를 다운로드 받아주세요.

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

첫 번째 파일 만들기

코드를 작성하기 위해서는 일단 파일을 만들어야 합니다. 먼저 바탕화면에 part1 폴더를 만들고 그안에 3개의 파일을 만들어줍니다. 우리는 매번 똑같이 아래와 같은 파일을 만들거예요.

index.html
sciprt.js
style.css

파일 이름에서도 알 수 있지만 html 파일은 HTML을 작성하기 위해 만든 것이고, js 파일은 JavaScript, css파일은 CSS를 작성하기 위해 만들었습니다. 이 파일들을 한 폴더 안에 넣어주세요.

첫 번째 코드 작성하기

index.html 파일에 아래와 같은 HTML 코드를 입력해봅니다.

<h1>Hello, world!</h1>

우리가 작성한 결과를 보기위해서는 두 가지 방법이 있습니다. 먼저 탐색기(맥: Finder)를 열어 우리가 작성한 index.html 파일을 더블클릭하여 브라우저(구글 크롬 브라우저 권장)로 열어줍니다.

VSCode 확장 프로그램 설치

VSCode의 확장 프로그램을 설치하여 더 쉽게 미리보기를 할 수 있습니다. 왼쪽의 [확장] 메뉴에서 Live Preview를 검색하고 [설치] 버튼을 눌러줍니다. 설치가 완료되면 index.html 탭으로 전환하여 오른쪽 상단의 [미리보기 표시] 아이콘(돋보기 모양)을 눌러줍니다. 이 확장 프로그램을 설치하면 실시간으로 미리보기하며 개발할 수 있어요!

1-5. 복사+붙여넣기로 첫 번째 웹 사이트 만들기

앞으로의 강의를 위해 구글 크롬 브라우저를 설치해주세요!

우리는 이미 만들어진 웹사이트에 들어가서 웹사이트를 복사 붙여넣기해서 첫 번째 웹페이지를 만들어 볼겁니다. 제가 미리 만들어놓은 아래 사이트로 들어가주세요.

http://fc-examples-blog.s3-website.ap-northeast-2.amazonaws.com

Blog Template · Bootstrap v5.2

Sample blog post January 1, 2021 by Mark This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected. This is some additional para

fc-examples-blog.s3-website.ap-northeast-2.amazonaws.com

소스코드 보기

웹 개발자들이 가장 많이 사용하는 기능 중에 소스코드를 확인하는 기능이 있습니다. 크롬 브라우저 상단 메뉴에서 [보기] - [개발자 정보] - [소스 보기] 메뉴를 클릭하여 소스코드를 확인할 수 있어요. (또는 페이지에서 마우스 오른쪽 클릭 [페이지 소스 보기] 메뉴를 선택하여 소스코드를 볼 수 있습니다)

이 소스코드를 전체선택하고 복사(Ctrl + C) 후 index.html에 붙여넣기(Ctrl + V)하면 끝! 이제 다시 Live Preview를 통해 미리보기 해볼까요? (또는 탐색기에서 index.html 파일을 더블클릭하여 열어주세요)

1-6. 첫 번째 웹 사이트 구조 이해하기

출처: https://vertex-academy.com/tutorials/en/create-first-web-page/

How Do You Create Your First Web Page? • Vertex Academy

В этой статье вы познакомитесь с простыми HTML-тегами и создадите свою первую веб-страницу. Мы уверены, что у вас обязательно получится!

vertex-academy.com

설정을 담당하는 head

head는 페이지의 설정을 담당합니다. 제목, 링크, 스타일 등이 들어있지요. 제목을 한 번 바꿔볼까요?

태그 역할

title	페이지 제목
link	CSS 파일 또는 글씨체 경로 지정
style	CSS 작성

내용이 들어있는 body

실제 내용은 body(몸통)에 들어있습니다. 이것저것 바꿔보면서 한 번 미리보기해봐요.

HTML에서 띄어쓰기와 줄바꿈은 페이지에 아무런 영향도 주지 않습니다. 단순히 보기 편하기 위해서 들여쓰기, 줄바꿈을 해요. 들여쓰기를 하기 위해서는 키보드의 Tab을 누릅니다. 줄바꿈을 하는 HTML 태그는 <br/> 입니다.

1-7. 나만의 웹 서비스 개발을 위한 기획 단계

사람들이 많이 검색하는 것(필요로하는 것)이 무엇인가

사람들이 많이 검색하고 우리 서비스에 들어와야 우리가 돈을 많이 벌 수 있겠죠? 따라서 먼저 우리가 해야할 것은 사람들이 가장 많이 검색하는 단어를 알아보는 것입니다. 우리는 구글 트렌드에서 인기 검색어를 미리보기 할 수 있습니다.

구글 트렌드: https://trends.google.com/trends/

Google 트렌드

2023년 올해의 검색어 Google 트렌드 데이터를 통해 한 해를 살펴보세요.

trends.google.com

그리고 일자별로 검색어를 여러개 비교할수도 있죠.

이미 만들어진 서비스 찾아보기

우리가 계산기를 만들기로 결정했다고 합시다. 이제 어떤 계산기들이 있는지 살펴보는 시간이죠. 구글 또는 네이버에 “계산기”라고 검색하여 다른 서비스들을 벤치마크 합니다.

어떤 기능을 추가할 것인가 기획하기 (우리만의 강점 부각하기)

다른 사람과 완전히 똑같은 서비스를 만들면 경쟁력이 없겠죠? 똑같은 계산기를 만들더라도 디자인이 더 이쁘다면 사람들이 더 좋아할 것입니다. 또는 똑같은 메모장이라도 저장기능이 있어서 다음에 방문했을 때 전에 써놓은 것이 다시 보인다면 더 좋겠죠. 똑같은 타이머라도 이전에 설정한 시간이 저장되어 있다면 좋겠죠.