nian-3889.log https://velog.io/ 무언가를 하고 있지만, 잘 안될 수 있습니다. Fri, 06 May 2022 07:03:18 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed nian-3889.log https://velog.velcdn.com/cloudflare/nian-3889/9376f52b-86d5-4043-937b-56701d7d4c65/social_profile.png https://velog.io/ Copyright (C) 2019. nian-3889.log. All rights reserved. <![CDATA[word-relay 예제 따라하기 - 함수 편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%ED%95%A8%EC%88%98-%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%ED%95%A8%EC%88%98-%ED%8E%B8 Fri, 06 May 2022 07:03:18 GMT 참조

이 글은 Let's Get IT 자바스크립트 프로그래밍이라는 책의 예제를 따라하며 자습하는 글입니다.

이번에 본 예제

<script>
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');

let word;
let newWord;

const onClickButton = () => {
    if (!word) {
        word = newWord;
        $word.textContent = word;
    } else {

    }
};

const onInput = (event) => {
    newWord = event.target.value;
};

$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);

</script>

... 저번과 같은 예제를 보고 있는 것 같으나, 공부할 부분이 좀 있어 같이 봐야만 했다.

자바스크립트 함수

특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

함수 선언

function 함수명 (매개변수, 매개변수, ...) {
    실행문;
    반환문; (옵션)
}

예시

function showMessage() {
    alert('안녕하세요!');
}

자바스크립트 함수의 특징

  1. 값처럼 할당 및 대입할 수 있음.
  2. 변수에 할당할 수 있음 (함수명과 변수명의 경계가 모호함)
  3. 객체의 프로퍼티에 함수를 할당할 수 있음.
  4. 배열 내 원소에도 함수를 할당(정의 및 저장)할 수 있음.

작성 예시

선언식(혹은 선언문)

  • 일반적인 함수 선언 방식

    funtion sayHi() {

      console.log('Hi!');

    }

    sayHi();

표현식

  • 익명 함수를 값으로써 변수에 할당한 것

    let sayHello = function () {

      console.log('Hello!');

    }

화살표 함수

  • function 키워드 대신 화살표(=>)를 사용하여 간략하게 선언하는 방법 위의 예제에선 화살표함수로 표현함

  • 예시

    let sayHello = () => {

      console.log('Hi!');

    }

참조

https://bigtop.tistory.com/40 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions https://poiemaweb.com/es6-arrow-function https://whales.tistory.com/37

]]> <![CDATA[word-relay 예제 따라하기 - if편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-if-%ED%95%A8%EC%88%98%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-if-%ED%95%A8%EC%88%98%ED%8E%B8 Thu, 05 May 2022 09:58:45 GMT 참조

이 글은 Let's Get IT 자바스크립트 프로그래밍이라는 책의 예제를 따라하며 자습하는 글입니다.

이번 페이지에 본 예제

<script>
    const number = Number(prompt('몇 명이 참가하나요?'));
    const $button = document.querySelector('button');
    const $input = document.querySelector('input');
    const $word = document.querySeclector('#word');

    //제시어
    let word;

    //현재 단어
    let newWord;

    const onClickButton = () => {
        if (!word) { //제시어가 비었는가
            word = newWord; //입력한 단어가 제시어가 된다
            $word.textContent = word;
        } else {
            //비어있지 않다.
        }
    };

    const onInput = (event) => {
        newWord = event.target.value; //입력하는 단어를 현재 단어로
    };

    $button.addEventListener('click', onClickButton);
    $input.addEventListener('input', onInput);
</script>

공부해야 할 파트

if (!word) {
    word = newWord;
    $word.text.Content = word
    } else {

    }

if문

출처

 https://goddaehee.tistory.com/225
자바스크립트 코드레시피 278

특정 조건을 만족 시 실행하는 명령의 집합.

문법 :

if (조건식) {
    조건문
} else if (조건식) {
    조건문
} else {
    조건문
}

예시문

const myPrice = 100;

if (myPrice >= 50) {
    alert('myPrice는 50 이상입니다.');
} else if (myPrice >= 10) {
    alert('myPrice는 10 이상 50 미만입니다.');
} else {
    alery('myPrice는 10 미만입니다.');
}

참조 : 거짓으로 취급하는 값

  1. false
  2. undefined
  3. null
  4. 0
  5. NaN
  6. the empty string("")

후일담

if를 처음 본 것은 엑셀이었다. 그 당시의 나는 사무직이었고, 사무직의 필수불가결인 프로그램인 엑셀을 어느정도 다뤄야 하는 신분이었다.

외형이 달라 아직도 햇갈리지만, 기본 원리는 같아서 이해가 쉬웠다.

=if(C2="YES", 1, 2)

<script>
let C2 = "YES"

if (let === "YES") {
    console.log(1)
} else {
    console.log(2)
}
</script>

그 당시엔 몰랐지만 돌이켜 생각해보면 이렇게 써볼 수 있는 날이 올 줄은 몰랐다.

]]> <![CDATA[word-relay 예제 따라하기 - 콜백함수 편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%ED%8E%B8 Mon, 02 May 2022 10:45:17 GMT 참조
  • 이 글은 Let's Get IT 자바스크립트 스크립트 편의 예제를 따라하고 자습하는 페이지이며, 언급한 책 이외에도 다른 홈페이지를 참고하여 예제를 작성한 것도 있습니다.

콜백함수

*여기서는 콜백함수의 개념만 작성했습니다.

  • 정의

특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수 출처 : Let's Get IT 자바스크립트 프로그래밍

다른 코드 (함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임하는 함수 출처 : https://rypro.tistory.com/153

어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 출처 : https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

예시

  • addEventListener()와 함께 쓴 경우
  • 출처 : Let's Get IT 자바스크립트 프로그래밍
    <script>
const onClickButton = () => {
   console.log('버튼 클릭');
};
const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton)
</script>
<script>
document.querySelector('button').addEventListener('click, () => {
    console.log('버튼 클릭');
});
</script>
function whatYourName(name, callback) {
    console.log('name: ', name);
    callback();
}

function finishFunc() {
    console.log('finish funchtion');
}

whatYourName('miniddo', finishFunc);
]]> <![CDATA[word-relay 예제 따라하기 - 이벤트 편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%8E%B8 Mon, 02 May 2022 02:22:37 GMT 참조
  1. 이 글은 "Let's Get IT 자바스크립트 프로그래밍"의 예제를 따라면서 자습하는 글입니다.
  2. 별도로 인터넷에서 찾아 작성한 예제도 포함될 수 있습니다. (출처 명시)

1. 확인할 코드

<script>
    const onClickButton = () => {
        console.log('버튼 클릭');
    };
    const $button = document.querySelector('button')
    $button.addEventListener('click', onClickButton)
</script>

2. 공부한 부분

addEventListener()

  • 참조 : https://ordinary-code.tistory.com/64

  • 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수 설정하는 매서드.

  • 구문

    addEventListener(이벤트명, 실행할 함수명, 옵션)

이벤트명 : Javascript에서 발생할 수 있는 이벤트명 함수명 : 해당 이벤트가 발생할 때 실행할 함수명. 생략가능. 옵션 : 이벤트 수신기의 특징을 지정할 수 있는 객체. *옵션에 대한 내용은 이 사이트(https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault)를 참조

<!doctype html>
<head>
<body>
    <table id="outside">
        <tr><td id="t1">one</td></tr>
        <tr><td id="t2">two</td></tr>
    </table>
<script>
    // t2의 콘텐츠를 바꾸는 함수
    function modifyText() {
        const t2 = document.getElementById("t2");
        if (t2.firstChild.nodeValue == "three") {
            t2.firstChild.nodeValue = "two";
        } else {
            t2.firstChild.nodeValue = "three";
        }
    }
    // 표에 이벤트 수신기 추가
    const el = document.getElementById("outside");
    el.addEventListener("click", mdoifyText, false);
</script>
</body>
</html>

참고사항 : removeEventListener()

해당 이벤트 리스너를 제거하는 기능

``` const body = document.querySelector('body') const clickTarget = document.getElementById('click-target') const mouseOverTarget = document.getElementById('mouse-over0target')

let toggle = false; function makeBackgroundYellow() { if (toggle) { body.style.backgroundcolor = 'white'; } else { body.style.backgroundColor = 'yellow'; }

toggle = !toggle;

}

clickTarget.addEventListener('click', makeBackgroundYellow, false);

mouseOverTarget.addEventListener('mouseover', function() { clickTarget.removeEventListener('click', makeBackgroundYellow, false); });

]]> <![CDATA[word-relay 예제 따라하기 - html 태그 선택하기 편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-html-%ED%83%9C%EA%B7%B8-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0-%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-html-%ED%83%9C%EA%B7%B8-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0-%ED%8E%B8 Sun, 01 May 2022 01:33:17 GMT 참조
  1. 이 글은 "Let's Get IT 자바스크립트 프로그래밍"의 예제를 따라면서 자습하는 글입니다.
  2. 별도로 인터넷에서 찾아 작성한 예제도 포함될 수 있습니다. (출처 명시)

자바스크립트로 HTML 태그를 가져오기

책에 따르면 보통 자바스크립트에서 HTML 태그, class, id를 가져오는 것을 선택 한다고 표현함. 이에 해당되는 함수는

  • document.querySelector
  • document.querySelectorAll
  • document.getElementById
  • document.getElementByClass

등이 있다. 현재 보고 있는 페이지에서는 docuement.querySelector만 있기 때문에 나머지는 다른 책과 인터넷에서 찾기로 했다.

1. document.querySelector()

  • 형식 : document.querySelector('선택자') 선택에 대한 예시는 다음과 같다.

    • HTML태그 : document.querySelector('HTML태그')
    • class명 : document.querySelector('.class명')
    • id명 : document.querySelector('#id명')

  • 예시 1

    • 출처 : Let's Get IT 자바스크립트 프로그래밍
      <body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<button>버튼 2</button>
<button>버튼 3</button>
<script>
  const $input = document.querySelector('input');
  console.log($input);
</script>
</body>

  • 예시 2

    • 출처 : 자바스크립트 코드레시피 278
      <div id="foo"></div>
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<script>
document.querySelector('#foo')
</script>

  • 특정 name, id, class를 제한하지 않고 css 선택자를 사용이 가능.

  • 같은 id와 class인 경우, 최상단 요소만 포함함.

  • list 클래스 내 두번째 item 클래스를 선택하고 싶다면 아래처럼 가능 document.quertSelector('.item .item:nth-child(2))


2. document.qeurySelectorAll()

  • 형식 : document.querySelectorAll('선택자')

  • 주의 : document.querySelector()와 달리 선택자를 가진 모든 요소를 가져와 적용시킨다.

  • 예시 1

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>Javascript</title>
    </head>
    <body>
        <p class="abc">Lorem Ipsum Dolor</p>
        <p class="abc">Lorem Ipsum Dolor</p>
        <p class="abc">Lorem Ipsum Dolor</p>
        <script>
            var jb = document.querySelectorAll('.abc');
            for (var i = 0; i < jb.length; i++) {
                jb[i].style.color = 'red';
            }
        </script>
    </body>
</html>

3. document.getElementById()

  • 형식 : document.getElementById('id명')
  • 주의사항
  1. 셀렉터명이 아닌 ID명만 전달. #을 빼고 작성해야 함.
  2. ID값은 문서 전체에서 유일해야 함.
  3. 대소문자를 구분함.
<html>
<head>
    <title>getElementById 예제</title>
</head>
<body>
    <p id="para">어떤 글</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
</body>
<script>
    function changeColor(newColor) {
        var elem = document.getElementById('para');
        elem.style.color = newColor;
    }
</script>
</html>

4. document.getElementByClassName()

  • 형식 : `document.getElementByClassName('class명')
  • 참조
  1. getElementById와 다르게 클래스명과 일치하는 요소 모두 가져온다.
  2. class명만 전달. .를 빼고 작성해야 함.

```

P element in first div with class="example". Div's index is 0.

P element in first div with class="example color". Div's index is 1.

P element in second div with class="example color". Div's index is 1.

Click the button to change the background color of the first div element with the classes "example" and "color".

Note : The getElementsByClassName() methode is not supported in Internet Explorer 8 and earlier versions.

]]> <![CDATA[word-relay 예제 따라하기 : 변수 저장편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EB%B3%80%EC%88%98-%EC%A0%80%EC%9E%A5%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EB%B3%80%EC%88%98-%EC%A0%80%EC%9E%A5%ED%8E%B8 Fri, 29 Apr 2022 11:23:03 GMT 참조
  1. 이 글은 "Let's Get IT 자바스크립트 프로그래밍"의 예제를 따라면서 자습하는 글입니다.
  2. 별도로 인터넷에서 찾아 작성한 예제도 포함될 수 있습니다.

prompt() 함수

  • 기본 형태 : 

      <script>
      prompt();
  </script>

  • 문자열을 입력할 때 사용

  • 괄호에는 아래의 내용이 들어감

    • ("입력창 멘트", "미리 삽입할 단어")
    • 생략이 가능함

  • 호출되는 상자에 작성되는 모든 내용은 String 타입으로 나옴

  • 호출되는 상자를 빈 공간으로 둔 채로 확인을 누를 경우 ''를 출력함.

  • 상자 내 취소 버튼을 누르면 null 값이 나옴.


    ### alert() 함수

  • 사용방법

      <script>
      alert();
  </script>

  • 괄호 안에는 메시지 문자열이 들어가며, 생략이 가능함.

  • 사용자가 확인 버튼을 누를 때까지 메세지를 보여주는 창

confirm() 함수

  • 사용방법

      <script>
      confirm();
  </script>

  • 괄호 안에는 메시지 문자열이 들어가며, 생략이 가능함.

  • 확인 또는 취소 버튼이 나온다.

    • 확인을 누르면 true 값이 반환된다.
    • 취소를 누르면 false 값이 반환된다.

책의 코드를 따라 해보자

  • prompt()
    <script>
  prompt('몇 명이 참가하나요?');
</script>
<script>
    const number = prompt('몇 명이 참가하나요?');
</script>
<script>
    const number = prompt('몇 명이 참가하나요?');
    console.log('number', number)
</script>
  • alert()
<script>
    const number = prompt('몇 명이 참가하나요?');
    alert(number);
</script>
  • confirm()
<script>
    const yesOrNo = confirm('확인이나 취소 눌러보세요');
    const.log(yesOrNo);
<script>

  • typeof()

    • 변수의 타입을 반환하는 함수
<script>
    const number = prompt('몇 명이 참가하나요?');
    console.log(typeof number);
</script>
<script>
    const number = prompt('몇 명이 참가하나요?');
    const realNumber = Number(number);
    console.log(typeof realNumber);
</script>
  • 위의 코드는 아래와 같이 해도 된다고 명시되어 있음
<script>
    const number = Number(prompt('몇 명이 참가하나요?'));
    console.log(typeof number);
</script>
]]> <![CDATA[word-relay 예제 따라하기 -html편]]> https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-html%ED%8E%B8 https://velog.io/@nian-3889/word-relay-%EC%98%88%EC%A0%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-html%ED%8E%B8 Fri, 29 Apr 2022 08:05:50 GMT 참조

이 코드는 Let's Get IT 자바스크립트 프로그래밍에 있는 예제로 공부하고 있습니다.

이 짓을 왜 하는 것일까.

나는 그동안 html과 css를 대충 배우고 Javascript를 배우는 단계에 왔다. 이런저런 책을 사서 봤지만, 이해가 되지 않은 채로 넘어간 것 같다.

이에 복습 차원에서 태그부터 쭉 살펴보면서 내방식대로 이해를 하려고 한다.

하다보면 내가 하고 싶었던 목표에 닿지 않을까...?

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잇기</title>
</head>
<body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button>입력</button>
    <script>

    </script>
</body>
</html>

사용한 태그를 구글링을 통하여 내 방식대로 읽어보자

  1. <!DOCTYPE html>
  • 어떤 버전으로 작성되었는지 브라우저에게 알려 내용을 올바르게 출력하도록 도와주는 역할을 한다.
  • HTML 문서 첫 부분에 기술하여야 하며, 작성하지 않을 땐 비표준모드로 랜더링이 된다.
  • DOCTYPE은 태그가 아니기 때문에 문서 상단에 한 번만 기입해도 된다.
  • 소문자로 작성해도 적용이 된다.
  1. <html lang="en">
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 문서 호환성 모드
  • 인터넷 익스플로러(IE)의 버전에 따라 다르게 보여지지기에 "호환성 보기"라는 기능을 제공.
  • content 부분에 보여줄 IE 버전을 작성
  • 인터넷 익스플로러의 사용을 중지하고 Edge로 전환됨에 따라 위 형태의 코드를 사용.
  • vscode에서는 !를 입력한 상태에서 Tab키를 누르면 기본 세팅이 나옴.
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 출처 : https://aboooks.tistory.com/352

  • Viewport는 웹페이지를 렌더링 할 때 동작하는 방법을 알려주고 그 크기를 디바이스 별로 지정하는 것.

  • content="width=device-width는 컨텐츠를 표현할 넓이를 사용자의 디바이스 크기에 맞춰 선언하겠다는 것. 아래와 같은 선언 형태가 있다.

    meta name="viewport" content="width=400" meta name="viewport" content="width=device-width" meta name="viewport" content="width=device-height" meta name="viewport" content="width=device-width", initial-scale=1.0 meta name="Viewport" content="width=device-width, user-scalable=no"


  1. <title> 태그
  • <head> 태그 내에서 사용해야 함
  • 페이지 제목을 담당.
  • 검색 엔진 등에서 가장 크게 보여지는 텍스트.
  1. <div> 태그
  • Division의 약자. 레이아웃을 나누는데 사용.
  • span 태그와의 차이점은
    1. 줄바꿈이 된다. (기본적으로 Block 속성)
    2. 크기를 지정할 수 있다.

7. span 태그
  • 문장. 혹은 텍스트의 특정 부분을 묶는데 사용한다.
  • Inline 속성을 가진다.
  1. <input type="text"> 태그

  • 글을 입력할 수 있는 창을 생성

  • 속성은 다음과 같음

    • value : 미리 문자를 입력할 수 있음. 단, 지워야하는 번거로움이 있음.
    • placeholder : 회색 글씨로 된 예시 글자
    • size : 입력 폼 가로 길이
    • maxlength : 글자 개수 제한
  1. <button> 태그 참고자료 : http://www.tcpschool.com/html-tags/button
  • 클릭이 가능한 버튼을 정의할 때 사용
  • input 요소를 사용한 버튼에는 이미지, 텍스트 등을 삽입이 제한이 됨
  • button별로 type를 명시하는 것이 좋음.
]]> <![CDATA[3화. input 텍스트 창에도 색상을 반영할 수 있었구나!]]> https://velog.io/@nian-3889/3%ED%99%94.-input-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%B0%BD%EC%97%90%EB%8F%84-%EC%83%89%EC%83%81%EC%9D%84-%EB%B0%98%EC%98%81%ED%95%A0-%EC%88%98-%EC%9E%88%EC%97%88%EA%B5%AC%EB%82%98 https://velog.io/@nian-3889/3%ED%99%94.-input-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%B0%BD%EC%97%90%EB%8F%84-%EC%83%89%EC%83%81%EC%9D%84-%EB%B0%98%EC%98%81%ED%95%A0-%EC%88%98-%EC%9E%88%EC%97%88%EA%B5%AC%EB%82%98 Mon, 18 Apr 2022 08:15:50 GMT

이 부분을 자연스럽게 하기 위해서 css 속성이 있는지 구글을 통해 찾았고,

http://gnujava.com/board/article_view.jsp?article_no=341&board_no=11&table_cd=EPAR04&table_no=04

이 글을 통해서 해결을 했다.

그래서 이 부분은 이런 식으로 구현을 했다.

html

  • 이 textarea와 input 태그는 아쉽게도 내가 만든 것이 아니다. 남이 쓴 걸 그대로 베껴왔다.
        <div class="mypost">
            <input type="text" id="name" class="form-control" placeholder="닉네임">
            <textarea class="form-control" id="" cols="30" rows="10" placeholder="생일축하 멘트" maxlength="400"></textarea>
            <button>메시지 남기기</button>
        </div>

css

  • 남이 쓰던 코드 그대로 뜯어오고 난 다음에 자세히 봤는데 부트스트랩의 폼과 유사했다. 내가 할 수 있었던 건 다시 개별 지정을 해야하는 것? 현재 내 실력은 어느 코드가 어떤 식으로 중복이 되어 있는지 잘 몰라서 크롬이 알아서 잡아주기를 기도하는 것 뿐이다. (링크 : https://getbootstrap.kr/docs/5.1/forms/overview/)
    .mypost>input {
  margin-bottom: 20px;
  background-color: transparent;
  color: white;
}

.mypost>textarea { height: 300px; resize: none; background-color: transparent; color: white; }

.form-control { display: block; width: 100px; font-size: 1rem; --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; box-sizing: border-box; margin: 0; font-family: inherit; display: block; width: 100%; font-size: 1rem; font-weight: 400; color: #212529; /* background-color: #fff; */ background-clip: padding-box; border: 1px solid #ced4da; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; height: calc(3.5rem + 2px); line-height: 1.25; padding: 1rem .75rem; }

```

후기

왕뿌듯

이제 CRUD와 친해질 때가 되었다.

]]> <![CDATA[2화, 한땀 한땀 코드 작성중]]> https://velog.io/@nian-3889/2%ED%99%94-%ED%95%9C%EB%95%80-%ED%95%9C%EB%95%80-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%EC%A4%91 https://velog.io/@nian-3889/2%ED%99%94-%ED%95%9C%EB%95%80-%ED%95%9C%EB%95%80-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%EC%A4%91 Sun, 17 Apr 2022 05:04:04 GMT
  • HTML
    • <!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>라이네라의 31번째 생일 메시지함</title>
    <link rel="stylesheet" href="../static/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">

</head>

<body>
    <!---->
    <div class="wrap">
        <!--헤더-->
        <header class="header">
            <p>거짓말 같은 환상 속에서 함께 해줘서 고마워, 라이네라!</p>
        </header>

        <!--카운트다운-->
        <div>
            <p id="remain-text"></p>
            <p id="remain-time"></p>
        </div>

        <hr>

        <p class="bando-message">
            우리 일상에 거짓말같이 찾아와 준 라이네라.<br>
            너의 31번째 생일도 특별해지도록 우리의 작은 축전을 담았어.<br>
            거짓말 같은 매일이 평범한 일상으로 돌아가기 전까지 함께 나아가자.
        </p>
        <div class="mypost">
            <button>메시지 남기기</button>
        </div>




        <!--이미지 영상-->


        <hr>

        <!--축하메시지함-->
        <div id="order-text">
            <p id="user-message">메시지내용</p>
            <p id="user-name">이름</p>
            <hr>
        </div>

    </div>

    <!--제이쿼리 스크립트-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--자바스크립트-->
    <script src="../static/scripts.js"></script>
</body>

</html>

    • CSS

      @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');

    • { margin: 0; padding: 0; box-sizing: border-box;

    }

    body { margin: 0 auto; max-width: 1920px; background-image: url(../static/img/header.jpg); }

    .wrap { max-width: 1200px; width: 80%; margin: 0 auto; }

    .header { margin-top: 50px; height: 300px; /* border: 1px solid black; / / background-image: url(../static/img/header.jpg); */ }

    .header> p { text-align: center; height: 300px; font-size: 2em; line-height: 300px; color: white; }

    /카운트다운 css/ .wrap>div:nth-child(2) { margin-top: 50px;

    text-align: center;

    }

    #remain-text { font-family: 'Hi Melody', cursive; font-size: 3em; color: white; }

    #remain-time { font-family: 'Hi Melody', cursive; font-size: 2em; color: white; }

    hr { margin-top: 30px; border: 0; height: 10px; box-shadow: 0 10px 10px -10px black inset; }

    hr::after { content: "\00a0"; }

    /축하메시지함 css/

    .bando-message { padding-top: 20px; color: white; font-size: 1.8em; text-align: center; font-family: 'Hi Melody', cursive; } button { margin: 0 auto; }

    .mypost {

    }

    #order-text { margin-top: 100px; width: 1200px; /* border: 1px solid rgba(234, 247, 57, 0.836) */ }

    #user-message { font-size: 2em; color: white; margin-bottom: 10px; }

    #user-name { font-size: 1em; color: white; }

    /* 우측 앵커 */

    *mypost가 비어있는 이유는 현재 작성중이여서다 

* 자바스크립트

    // 자바스크립트로 작성. 카운트다운 const remainTime = document.querySelector("#remain-time"); const remainText = document.querySelector("#remain-text")

    function diffDay() { const birthTime = new Date("2022-08-28"); const todayTime = new Date(); const diff = birthTime - todayTime;

    const diffDay = Math.floor(diff / (1000 * 60 * 60 * 24));
const diffHour = Math.floor((diff / (1000 * 60 * 60)) % 24);
const diffMin = Math.floor((diff / (1000 * 60)) % 60);
const diffSec = Math.floor(diff / 1000 % 60);

if (diff <= 0 ) {
    remainText.style.display = "none"
    remainTime.innerHTML = "생일 축하해, 라이네라"
} else {
    remainText.innerHTML = "라이네라 생일까지 앞으로"
    remainTime.innerHTML = `${diffDay}일 ${diffHour}시간 ${diffMin}분 ${diffSec}초`;
}

    }

    diffDay(); setInterval(diffDay, 1000);

    ```

    이대로 고대로 돌리면 사진없이 될 예정이다. 사진은 비밀로 하자.

    현재 진행중인 부분

    메시지를 남길 수 있는 <textarea>를 만들어야 했다. 처음에 어떤 방식으로 배치를 하면 좋을 지를 정했지만, 학원에서 제출하는 방식이 영 못미더워서 빼버리고 말았다. 깃으로 받아줄까? 깃에 집어넣는 건 이제 잘하는데 말이다.

    4/17 야밤에 추가된 부분

    아이고 얼마 없는 사진이 잘 생겼다. 아이고 얼마 없는 사진이 다 어두워서 색상을 하얀색으로 해야만 했다.

    이제 get과 post를 연결하면 될 것 같다. 다시 학원 공부에 매진하도록 하겠습니다 (...)

    ]]>         <![CDATA[1화, 숙제였던 게 생일 축하 홈페이지가 된 사연에 대하여]]> https://velog.io/@nian-3889/1%ED%99%94-%EC%88%99%EC%A0%9C%EC%98%80%EB%8D%98-%EA%B2%8C-%EC%83%9D%EC%9D%BC-%EC%B6%95%ED%95%98-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%90%9C-%EC%82%AC%EC%97%B0%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC https://velog.io/@nian-3889/1%ED%99%94-%EC%88%99%EC%A0%9C%EC%98%80%EB%8D%98-%EA%B2%8C-%EC%83%9D%EC%9D%BC-%EC%B6%95%ED%95%98-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%90%9C-%EC%82%AC%EC%97%B0%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC Sun, 17 Apr 2022 04:51:43 GMT 스파르타코딩클럽에서 제출하라니 했던 숙제(혹은 미니 프로젝트)였으나, 곧있으면 생일이니 소소하지만 낭만을 담아 의사를 전했던 저였습니다. 물론 이것이 프로젝트가 되리라곤 상상을 못했습니다.

    운명의 4월 14일.

    _나 : 실장님 도와주세요~ 실장님 : 일단 기획안 짜옵시다. 나 : ????????? _

    1. 참조할 수 있는 홈페이지라곤 유일하게 이거(http://spartacodingclub.shop/web/homework ) 뿐이고
    2. 내가 할 줄 아는 디자인은 하나도 없었으며
    3. 그럼에도 일단 기획안을 짜오라고 했으니...
    4. ????
    5. 실제로 짜고 말았다.

    그리하여 이 허접한 초안을 바탕으로 진행을 해야만 했다. 숙제 제출, 이대로 괜찮은 것일까? ...깃으로 받아줄까?

    ]]>         <![CDATA[스파르타코딩클럽 3주차]]> https://velog.io/@nian-3889/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-3%EC%A3%BC%EC%B0%A8 https://velog.io/@nian-3889/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-3%EC%A3%BC%EC%B0%A8 Wed, 13 Apr 2022 06:42:27 GMT 지니뮤직 21년의 월간차트를 크롤링하자.

    처음에 겁도 없이 최근 월간차트를 했더니 문자 투표 관련 메시지가 쭉 나와서 학원에서 제시한 21년의 월간차트를 이용하기로 했다.

    근데... 나 잘 할 수 있을까?

    처음 코드를 뽑기로 했다.

    import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')
title = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.title.ellipsis')
rank = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number').text
artist = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis').text
print(title, rank, artist)

    처음 시도는 좋았다.

    "나는 타이틀을 전부 뽑아보고 싶다~"

    import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    print(title)
# rank = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number').text.strip()
# artist = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis').text.strip()
# print(title)

    물론, 중간에 이런 경우는 지워지지 못했다만, 대부분의 공백은 지워졌다.

    strip()은 여기서 확인하기 : https://codechacha.com/ko/python-string-strip/

    "나머지도 시도해버려~"

    import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    rank = tr.select_one('td.number').text.strip()
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    print(rank, title)
# rank = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number').text.strip()
# artist = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis').text.strip()
# print(title)

    오... 나름 재밌게 되었다. 나는 이런 결괏값을 바라는 게 아니었다. 찾아보니 텍스트 슬라이싱하면 된다고 하기에 그걸 쓰기로 했다. 참고링크 : https://wikidocs.net/2838

    import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    rank = tr.select_one('td.number').text[0:2].strip()
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    artist = tr.select_one('td.info > a.artist.ellipsis').text.strip()
    print(rank, title, artist)
# rank = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number').text.strip()
# artist = soup.select_one('#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis').text.strip()

    얼추 원하는 대로 된 것 같다. 중간에 15위에 랭크된 19금이란 곡은 제대로 안되어 어쩔 수 없지만, db에 넣게 된다면 별도로 수정을 하면 될 것 같다.

    후기

    처음 크롤링이 어려웠는데, 구글링하면서 다시 해보고, 또 슬라이싱 등을 복습할 수 있는 시간이 되어 좋았다. 역시 여러번 하라는 계신가...

    다만, 이번 주차에서 몽고 db 아틀라스 연결이 안 되어 로컬로 하는 법을 별도로 배웠다. 아틀라스 안 되는 사람은 로컬로 연결해서 하는걸 추천한다.

    ]]>         <![CDATA[스파르타코딩클럽 웹개발 2주차 이야기]]> https://velog.io/@nian-3889/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-2%EC%A3%BC%EC%B0%A8-%EC%9D%B4%EC%95%BC%EA%B8%B0 https://velog.io/@nian-3889/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-2%EC%A3%BC%EC%B0%A8-%EC%9D%B4%EC%95%BC%EA%B8%B0 Fri, 08 Apr 2022 08:32:51 GMT 제이쿼리?

    생전 처음으로 접하게 된 자바스크립트 라이브러리. 모 유튜버의 말에 따르면 리엑트를 제외하면 자주 쓰는 라이브러리라니 잘 배워두라고 하더라. 아직 익숙치도 않은 자바스크립트를 두고 갑자기 강의에서 제이쿼리 이야기가 나오니 '이거 기초도 정리하고 나중에 보면서 해야하나' 같은 생각이 들었다. 세상에, 맙소사. 그나마 위안인 건 자바스크립트랑 비슷하니까 복습하면서 해도 된다는 것이다. *아주 슬프게도 언젠가 할 부분임을 인지했을 땐 숙제가 뭔지 확인하고 있었다.

    2주차 숙제

    날씨 정보를 반영하는 API를 사용하라는 말이 나왔지만, 사실 내가 구상한 웹페이지에는 날씨 정보를 넣고 싶지 않아 부득이하게 파일을 두개로 쪼개야만 했다. 또 css파일 링크를 지원하지 않기 때문에 한 파일에 작성해야 해서 가독성이 무지무지 떨어지겠지...?

    사실 작성한 코드를 여기 벨로그에서 보여줄 수 있다 그래서 <details> 태그를 이용해서 하려 했지만 잘 안되었다. 그래서 특이사항만 부분부분 뜯어 올리기로 했다.

    신규코드, 현재온도

    <div class="title">
        <!-- <img src="" alt="라이네라 메인 타이틀"> -->
        <p>주민들이 전하는 생일 축하 메시지</p>
        <p id="weatherText"></p>
    </div>


    $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let city = response['city']
                let temp = response['temp']
                // console.log(city, temp)
                $('#weatherText').text(`현재 ${city} 온도 : ${temp}℃`)

    서울 기온 open api를 받아 그걸 반영했다. 처음엔 이게 무어시야 했지만, 자세히보니 자바스크립트와 비슷한 면이 있어 천천히 할 수 있었던 것 같다.

    CSS는? 물론 간단하게 해야지.

    .title {
            height: 300px;
            background-color: skyblue;
        }

    이 부분은 나중에 이미지 파일을 제작하던, 받아오던 해서 할 예정이라 대충 색상만 둘렀다.

    .title > p:nth-child(1) {
            font-size: 3em;
            text-align: center;
            height: 80%;
            line-height: 300px;
        }

        .title > p:nth-child(2) {
            height: 20%;
            text-align: center;
            line-height: 10%;
        }

    현 스파르타코딩클럽에서 수강중인 강의에선 가르쳐주지 않은 부분을 반영했다. 이 부분은 다른 경로를 통해 이미 독학을 했기 때문이다. ** nth-chile()가 궁금하신 분은 구글에 검색하는 것을 추천한다. **

    나머지는 생략

    다음에 해도 될 것 같다. 실제로 완성하고 제출할 때는 무엇을 반영하고 싶은지 더 생각하고 반영하고 싶다.

    ]]>         <![CDATA[220405 스파르타코딩클럽 웹개발 수업 1주차]]> https://velog.io/@nian-3889/220405-%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%88%98%EC%97%85-1%EC%A3%BC%EC%B0%A8 https://velog.io/@nian-3889/220405-%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%88%98%EC%97%85-1%EC%A3%BC%EC%B0%A8 Tue, 05 Apr 2022 08:43:43 GMT 학원 등록은 3월 초순, 0주차 수업 시작은 4월 5일?!

    등록하는 순간부터 처음 들었던 강의는 자바스크립트와 파이썬 기초문법. 처음에 나는 이거부터 시작하면 되는 줄 알고 한달 내내 그걸 듣고 책 몇권 사서 읽어가며 문법을 다지기 시작했다.

    그런데 4월 1일에 받았던 문자를 보고 '이거 말고 또 있단 말인가?' 하는 생각을 들었다. 문제는 이걸 어디에 물어볼 길이 없었고, 대뜸 이 불길한 의문을 들었을 때는 4월 2일 저녁. 즉, 주말이었기 때문에 어딘가 물어볼 데가 없었기 때문이다.

    그리고 대망의 4월 4일. 진짜로 한 달동안 못봤던 웹개발 강의가 떡하니 생긴 것이다. 기한은 4월 10일까지로 되어 있어 이 글을 쓰고 있는 4월 5일 기준으로 하루에 1단원씩 다 듣고 숙제를 제출해야 될까말까였다. 이건... 학원 측에 질의를 하여 시간을 연장받는 쪽으로 타협을 보기로 하고...

    22.04.08 추가 다행인지 몰라도 수강 기한이랑 별도로 표기가 된 곳을 확인이 되어서 물어보지 않아도 될 것 같다. 다만 기한 내에 잘 들을 수 있을지...

    내 기준 인상깊은 연주자

    아무튼 강의를 듣고 숙제를 하라고 하니 좋아하는 가수는 딱히 없고, 유튜버로 활동하는 연주자는 있으니 그 분을 타깃으로 하기로 결심했다. 마침 서비스를 개시한 이후에 생일이 도래할 것이고, 그 때의 나는 학원에 처박히느라 현생에 없기 때문에... 낭만을 꾹꾹 담아서 만들어보고자 한다.

    부트스트랩과의 첫 만남

    들어는 봤다. 개인적으로 html과 css를 독학하고 있다보니 '부트스트랩이란 사이트는 있다'고만 인지했지, 사실 뭘 하는덴지 몰라서 강 건너 불구경 식으로만 봤던 곳이다. 몇몇 유튜버들이 "이거 쓰면 웹사이트 1분만에 만들어요" 라고 하지만, 기초만 겨우 뗀 내게 '그게 뭔가요? 우걱우걱우걱' 수준이라 쳐다보질 못했다.

    아무튼 진행상황

    기본틀만 짰다. 코드를 열면 80%는 부트스트랩이다. css는 대충 이미지만 반영할 수 있는 곳만 처리했다. 학원 측에 제출할 코드가 .html 파일 안에 css까지 넣어야 한다는 사실을 뒤늦게 알아서 부랴부랴 제출 코드 안에 <style> 태그를 집어 넣었지만 말이다.

    실제로 작업한 환경은 이랬다. 사용 중인 컴퓨터는 서피스 프로 5세대로, 파이참을 버티기 어려워 부득이하게 vscode로 진행중에 있다. 무려 보기 좋으라고 css파일까지 놔눠놨구만...

    그 다음엔 무엇일까?

    잘 모르겠다. 사실 자바스크립트 기초 문법에 약해서 그걸 별도로 파일로 만들어 따라도 해보고, 정리도 하고, 그 다음 Git에 때려 박아 넣어 저장하는 짓을 하고 있었던 상황에서 이런 돌발상황은...

    이젠 파이썬 기초 문법을 하면서 웹개발 수업도 들으라니... 맙소사.

    ]]>