AIVLE TIL ('23.04.25) 웹프로그래밍 (1)

cjkangme·2023년 4월 25일

에이블스쿨

목록 보기

57/81

서버와 클라이언트

클라이언트는 인터넷(네트워크)를 통해 서버와 소통하며 사용자에게 제공할 컨텐츠를 표시한다.

브라우저를 매개체로 사용자에게 콘텐츠를 보여주고, 사용자가 입력한 정보를 바탕으로 필요한 콘텐츠를 서버에 요청하는 등 사용자와 가까운 앞단을 담당하는 부분이 프론트엔드이다. HTML, CSS, JavaScript(JS)가 프론트엔드에서 사용하는 언어이다.

클라이언트의 요청이 발생하면 요청에 맞는 데이터를 찾아 다시 요청한 클라이언트에게 응답을 전송하는 등 뒷단을 담당하는 부분이 백엔드이다. 데이터를 찾기 위해 데이터베이스에 적절한 query를 전달해야 하며, 클라이언트에 최적의 경로로 데이터를 전송하는 라우팅을 담당한다. Spring, Nodejs, Django 등의 프레임워크를 바탕으로 동작한다.

이번 과정에서는 4일간 프론트엔드 기초(HTML, CSS, JS), 백엔드 기초(Flask), No SQL 데이터베이스(MongoDB), AWS를 이용한 배포까지를 다루면서 웹프로그래밍 전반의 프로세스를 배운다.

환경설정

VS Code Extension

보다 수월한 개발을 위해 유용한 VS 익스텐션들을 설치하는 과정이다.

Beautify css/sass/scss/less : css 코드를 보기좋게 교정해주는 익스텐션이다.
JavaScript Debugger : 자바스크립트의 문법을 교정해주는 익스텐션이다. 특히 자바스크립트는 문법이 다소 틀려도 억지로 동작하는 경향이 있어 오류를인지하기 어려운데, 디버거를 통해 어느정도 예방할 수 있다.
Code Runner : 주피터 노트북 환경처럼 Shift+Alt+N 커맨드를 통해 코드를 즉시 실행하고 결과를 출력 터미널에 보여주는 익스텐션이다.
- 자바스크립트 코드를 브라우저를 거치지 않고 실행할 수 있다.
- 파이썬에서도 매우 유용하다.
- 단, 파이썬에서는 한글파일이 깨지는 문제가 있어 익스텐션 설정의 'Excuter Map'을 다음과 같이 수정해야 한다. "python": "set PYTHONIOENCODING=uft8 && python -u"
Pytest IntelliSense : 파이썬 코드의 자동완성을 도와주는 익스텐션이다.
Live Preview : 프론트엔드 코드의 실행 결과를 즉각 표시해주는 익스텐션이다. 이미 Live Server라는 동일한 기능의 익스텐션을 사용하고 있어서 이건 별도로 설치하지 않았다.

Node.js

Code Runner로 자바스크립트 코드를 동작시키기 위해서 반드시 설치해야하는 자바스크립트 런타임이다.
원래 자바스크립트는 브라우저 환경에서 실행될 수 있는 코드였지만, Node.js를 통해 브라우저 밖에서 실행할 수 있다.

HTML

MDN Web Docs - HTML

HTML의 태그나 속성이 헷갈린다면 MDN Web Docs를 참고하는 것이 가장 좋다고 생각한다.
굉장히 정리가 잘 되어있어 처음 접하는 태그나 속성이어도 쉽게 이해할 수 있다.
잘 사용하지 않는 것만 아니라면 대부분 한국어로도 작성되어있다는 점도 좋다.

HTML의 구성 요소

Document

하나의 HTML 파일(하나의 웹페이지)에 작성된 HTML 코드 전체를 말한다.

Element

start tag, end tag, content로 구성되어 화면의 한 요소를 담당하는 HTML 코드이다.

Tag

Element의 구성요소 중 element의 기능을 정의하는 부분이다.
일반적으로 start tag, end tag로 하나의 element의 시작과 끝을 표시하지만, end tag가 없는 경우도 있다.

Attribute

Tag만으로는 설명할 수 없는 element의 기능을 정의하는 속성값이다.
id와 class는 같은 tag를 가진 element를 구분하기 위해 사용한다.
그 외의 속성값들은 해당 태그와 연결된 링크, 서로 연결된 태그 등등 다양한 정보를 나타낸다.

Content(Text)

시작태그와 끝태그 사이에 있는 문자열로, 화면에 표시되는 텍스트이다.

HTML의 기본 구조

head

<!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>Document</title>
</head>
<body>
    
</body>
</html>

<head> 태그는 HTML 코드의 형식을 정의하고, 웹페이지의 정보를 나타내는 부분으로 사용자에게 기본적으로 보이지 않는다.

title

브라우저 상단에 표시되는 현재 페이지의 제목을 나타내는 태그이다.

link

웹페이지의 아이콘이나 스타일 규칙이 작성된 파일(css 등)을 HTML 문서와 연결할 때 사용하는 태그이다.

body

HTML문서는 크게 header, main, footer의 세가지 요소로 나눌 수 있다.

웹 문서 제일 위에 위치하여 웹페이지 제목, 글로벌 링크 등 어느 페이지에서나 사용할 수 있는 요소들로 구성된 영역이다.

main

웹페이지의 주된 콘텐츠가 표시되는 영역이다.
main에서도 다시 article, section, aside 등의 하위 구성요소들이 존재한다.

웹페이지의 저작권, 연락처 등으로 구성된 영역이다.

nav

nav는 다른 웹페이지로 갈 수 있는 링크들을 모아둔 곳으로, 웹페이지에 따라 다양한 곳에 위치한다.
일반적으로 검색 엔진은 nav>ul>li 형태로 작성된 정보를 가져오기 때문에 적절한 양식을 지키는 것이 중요하다.

Emmet

Emmet은 VS Code에 내장된 플러그인으로, 단축어를 통해 HTML과 CSS 코드를 매우 빠르고 쉽게 작성할 수 있도록 해준다.

대체로 CSS의 문법을 따르기 때문에 CSS에 익숙해진다면 이해가 더욱 쉽다.

1. 자식노드(>)

예시 : div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

2. 형제노드(+)

예시 : div>ul+ol+div

<div>
    <ul></ul>
    <ol></ol>
    <div></div>
</div>

3. 반복(*)

예시 : div>ul>li*3

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

반복하고자 하는 부분만 소괄호로 묶을 수도 있다.

예시 : div>(ul>li*3)*2

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

4. id 지정 (#)

예시 : span#item

<span id="item"></span>

→ id명이 "item"인 span 태그 생성

5. 클래스 지정 (.)

예시 : p.container

<p class="container"></p>

6. 컨텐츠 작성 ({})

예시 : p.container{Hello World!}

<p class="container">Hello World!</p>

7. 자동 넘버링 ($)

예시 : p.container{item$}*5

<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>

8. 넘버링 조절 (@)

예시 : div#container${item$@4}*4

<div id="container1">item4</div>
<div id="container2">item5</div>
<div id="container3">item6</div>
<div id="container4">item7</div>

감소하는 넘버링도 가능하다

예시 : div#container${item$@-10}*4

<div id="container1">item13</div>
<div id="container2">item12</div>
<div id="container3">item11</div>
<div id="container4">item10</div>

HTML 태그와 CSS

정말 다양한 태그와 CSS 속성이 있지만 대부분 암기의 영역이고 많이 사용해 보는 것을 통해 체득하는 것이 권장되므로 별도로 정리하지는 않기로 하였다.

HTML, CSS 실습

index 페이지, 로그인 페이지, 회원가입 페이지, 주소 검색 페이지 총 4개의 웹 페이지를 만들 것인데, 우선 header, footer 뼈대와 index page를 만드는 실습을 진행하였다.

HTML

<!DOCTYPE html>
<html lang="ko">
<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>Cover Page</title>
    <link rel="icon" href="https://aivlespace.com/favicon.png">
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <div class="header-wrap">
            <a href="index.html"><h1 id="main-title">KT</h1></a>
            <nav>
                <ul class="nav-list">
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="join.html">Join</a></li>
                    <li><a href="login.html">Login</a></li>
                </ul>
            </nav>
        </div>

    </header>
    <main class="contents">
        <section class="index-wrap">
            <h1>Cover Page</h1>
            <p class="main-text ko">커버는 간단하고 아름다운 홈페이지를 만들기 위한 한 페이지 템플릿입니다. 텍스트를 다운로드하여 편집하고 전체 화면 배경 사진을 추가하여 나만의 홈페이지로 만들 수 있습니다.</p>
            <p class="main-text jp">Coverは、シンプルで美しいホームページを構築するための1ページテンプレートです。ダウンロードして、テキストを編集し、フルスクリーンの背景写真を追加して、あなただけのオリジナルを作りましょう。</p>
            <p class="main-text cn">Cover是一个单页模板，用于建立简单而漂亮的主页。下载，编辑文本，并添加你自己的全屏背景照片，使其成为你自己的。</p>
            <button id="more-btn" type="button">Learn More</button>
        </section>
    </main>
    <footer>
        <p>All rights reserved. KT AIVLE SCHOOL</p>
        <img src="./assets/images/aivle-icon.png" alt="에이블스쿨 아이콘">
    </footer>
</body>
</html>

원래라면 클래스명이나 id명은 서로 꼬이지 않고 명확하게 css 선택자로 선택이 되도록 지어야하는데 너무 성의없이 짓다보니 많이 뒤죽박죽이 되었다.

다소 익숙치 않았던 점 위주로 정리해보자

파비콘

<link rel="icon" href="https://aivlespace.com/favicon.png">

<head>의 <link> 태그 내에서 관계를 'icon'으로 설정하고 이미지 경로를 지정하면 title과 함께 표시되는 파비콘을 지정할 수 있다.

버튼 태그 사용

<button id="more-btn" type="button">Learn More</button>

이전에 HTML을 배울 때는 그냥 <div> 태그에 클래스로 버튼을 달고 사용하는 것만 배웠는데 버튼태그를 사용하는 것이 익숙치 않았다.

버튼 태그에는 'type' 속성을 지정해야하는데, type=button으로 설정하면 눌러도 페이지의 변화가 일어나지 않는다. (자바스크립트 실행 목적으로 주로 사용)

사실 'type'을 지정하지 않아도 동일하게 동작하는데, 만약 버튼 태그가 <form> 태그 안에 들어있다면 타입이 'submit'으로 지정되어 버려 버튼을 클릭하면 페이지가 새로고침이 되어버린다.
이러한 이유로 버튼 태그를 사용할 때는 아예 타입을 명시하는 것이 좋다.

CSS (scss)

// font
@font-face {
    font-family: 'D2Coding';
    src: url('../assets/fonts/D2Coding.ttc');
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;500;700&display=swap');

// config
@import "./config/variables.scss";
@import "./config/normalize.scss";

// components
@import "./components/header.scss";
@import "./components/footer.scss";
@import "./components/button.scss";

// screen
@import "./screen/index.scss";

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

body {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: $main;
    color: #fff;
}

main {
    width: 100%;
    height: calc(100% - $header-height - $footer-height);
}

scss는 css를 편하게 사용할 수 있도록 보다 확장된 기능을 제공하는 스크립트 언어이다.

장점

우선 문법이 기존 css와 거의 동일하기 때문에 사용이 쉽다.
css는 부모-자식 상관 없이 모든 요소를 개별적으로 선택하여야 하지만, scss는 중첩이 가능하다는 장점이 있다.

// scss : 부모 요소 안에서 중첩 괄호로 선택이 가능
button {
    border: none;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    color: $red;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;

    &:hover{
        background-color: $red;
        color: #fff;
    }
}

// css : 개별로 선택 해야함
button {
    border: none;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    color: $red;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
	background-color: red;
    color: #fff;
}

scss의 가장 큰 장점은 변수를 사용가능하다는 점이다.

// color
$black: rgb(34, 30, 31);
$dark: rgb(85, 85, 85);
$red: rgb(236, 27, 35);
$aivle: rgb(25, 190, 201);
$main: #343a40;

// width, height
$header-height: 60px;
$footer-height: 30px;

이렇게 $변수명: 값 형태로 변수를 선언한 뒤 메인으로 사용하는 scss 파일에서 가장 먼저 import 해주면, 연결된 다른 모든 scss 파일에서 해당 변수를 사용할 수 있다.

Live Scss Compiler

scss의 가장 큰 단점은 html 코드에서 바로 연결할 수 없다는 점이다.
이 때문에 scss를 css로 변환하는 컴파일러를 거쳐야한다는 것이 다소 번거롭다.
VS Code 익스텐션인 Live scss compiler를 이용하면 scss 파일을 저장할 때마다 컴파일된 css 파일을 생성하기 때문에 비교적 편하게 이용할 수 있다.

ngrok를 통해 외부 공개하기

ngrok란

현재 우리가 만든 웹페이지는 로컬 환경에서만 실행되고 있다.
로컬 환경은 기본적으로 방화벽으로 보호받고 있기 때문에 외부에서 접근할 수 없다 (인터넷을 통해 웹페이지에 접근 불가)

ngrok는 방화벽을 거치는 대신 이를 우회하는 터널을 만들어서 외부에서 로컬 환경에 직접 접근하게 해줄 수 있는 플랫폼이다.

웹페이지를 서버에 배포하기 위해서는 여러가지 설정이 필요한데, ngrok를 사용하면 사용하던 그대로 간단히 외부 테스트가 가능하다는 장점이 있다.

사용법

ngrok를 사용하기 위해서는 계정이 필요하다.
공식 홈페이지에서 회원가입을 먼저 진행하고 인증키를 발급받자.

ngrok 실행파일 다운로드

다운로드 버튼을 눌러 실행파일을 다운로드 받자.
윈도우를 이용중이라면 압축파일을 풀고 .exe 실행파일이 있는 경로를 기억해두어야 한다.

프롬프트 창에서 ngrok 실행파일이 있는 경로로 이동

git bash, cmd, anaconda prompt 등을 이용해서 ngrok 실행파일이 있는 경로로 이동한다.
이제 ngrok <명령어>를 통해 프롬프트에서 ngrok를 실행할 수 있다.

authtoken 등록

ngrok config add-authtoken <토큰>

해당 명령어를 실행해 토큰을 등록한다.

배포

ngrok http <html 파일이 있는 디렉토리 경로>

http 명령어와 함께 외부에서 테스트하고 싶은 html 파일이 있는 루트 디렉토리 경로를 입력하면 배포가 완료된다.

이제 ngrok 홈페이지의 대시보드에서 홈페이지 주소를 확인 가능하며, 해당 주소를 통해 홈페이지 접근 및 로그 확인이 가능하다.

소감

반년 전 코딩을 처음 배운답시고 여기저기 검색했을 때 전부 HTML/CSS부터 배우는 것을 추천한다는 얘기를 듣고 무작정 강의를 찾아 들었던 기억이 난다.

이제 반년밖에 안됐는데 벌써 엄청 먼 이야기 같이 느껴지는 점이 신기했고 내용을 완전히 잊어버리지 않았다는 점에서 다소 안심이 되었다.

곧 있을 빅프로젝트와 공모전에서 프론트엔드와 백엔드를 다룰 일이 많을 것이므로 수업을 놓치지 않고 꼼꼼히 들어야겠다.

cjkangme

이전 포스트

AIVLE TIL ('23.04.24) IT 인프라

다음 포스트

AIVLE TIL ('23.04.25) 웹프로그래밍 (1)

에이블스쿨

서버와 클라이언트

환경설정

VS Code Extension

Node.js

HTML

HTML의 구성 요소

Document

Element

Tag

Attribute

Content(Text)

HTML의 기본 구조

head

meta

title

link

body

header

main

footer

nav

Emmet

1. 자식노드(>)

2. 형제노드(+)

3. 반복(*)

4. id 지정 (#)

5. 클래스 지정 (.)

6. 컨텐츠 작성 ({})

7. 자동 넘버링 ($)

8. 넘버링 조절 (@)

HTML 태그와 CSS

HTML, CSS 실습

HTML

파비콘

버튼 태그 사용

CSS (scss)

장점

Live Scss Compiler

ngrok를 통해 외부 공개하기

ngrok란

사용법

ngrok 실행파일 다운로드

프롬프트 창에서 ngrok 실행파일이 있는 경로로 이동

authtoken 등록

배포

소감

AIVLE TIL ('23.04.24) IT 인프라

AIVLE TIL ('23.04.26) 웹프로그래밍 (2)

0개의 댓글