✨ 2 Week - Codeit Boost BE Study

안녕하세요. 소시지입니다.
본 포스팅은 <2024.12.26 ~ 2025.01.23> 기간의 Node.js 백엔드 스터디 2주차 학습 내용을 기록했습니다.

Codeit Boost 백앤드 스터디 2주차 진행 (2025.01.02)

🗓️ 학습 주제

줌 클론코딩 - 노마드 코더 강의 수강
인프런 - Node.js를 이용해 웹 애플리케이션 만들기 강의 수강
학습한 강의의 내용을 팀원과 공유하고, 각자가 이해한 내용을 발표하며 2차 복습 진행
간단한 발표 및 기록

📝 BE 스터디 내용

🔍 템플릿 엔진

웹 페이지를 구성하는 Markup Language는 HTML이며, 이는 정적 언어이다. 따라서, Javascript의 반복문을 사용해 간단하게 처리할 수 있는 동적 연산을 HTML로 표현하려면 위의 사진처럼 직접 코드를 작성해야 하는 불편함이 있다.
템플릿 엔진은 이 불편한 상황을 해소하기 위한 도구로, 템플릿 프로세서를 이용하여 웹 페이지를 동적으로 구현할 수 있는 시스템이다.

🔍 템플릿 엔진 사용하기

템플릿 엔진 npm 패키지 설치하기


$ npm install jade --save
$ npm install pug --save

views, 템플리트가 있는 디렉토리. 예:
app.set('views', './views')
view engine, 사용할 템플리트 엔진. 예:
app.set('view engine', 'pug')

send 대신 render 이용한다.
template 경로를 통해서 들어온 사용자에게 function 기능이 수행되면서 ‘temp’라는 템플릿 파일을 웹페이지로 렌더링 해서 전송한다는 의미이다.

그냥 나열된 형식으로 출력된다.

html 아래에 head와 body는 들여쓰기를 통해서 적용되도록 한다.

app.locals.pretty = true; 추가로 정리하기

🔍 Express, URL을 이용한 정보 전달

Query String

사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것이다.


http://a.com/login   


http://a.com/home

http://a.com/topic

각 주소는 패스에 따라 다른 결과를 주지만 예를 들어 http://a.com/home 하나만 놓고 본다면 이것은 언제나 똑같은 결과를 가져온다.


http://a.com/home?id=1

home에 id가 1인 값을 전달하고 있다.
그럼 home은 1에 해당되는 결과를 처리하여 그것을 화면에 표현해준다.


app.get('/topic', function(req, res){
    res.send(req.query.id);
})

쿼리 스트링으로 전달된 값이 아래의 함수의 첫 번째 매개변수의 값에 쿼리 객체의 id 값에 들어온다는 것이다.

시멘틱 URL

querystring 을 / 뒤로 빼내어 깔끔한 url를 만드는 방식을 의미한다.


app.get('/topic/:id', function(req, res){
    var topics = [
        'Javascript is....',
        'Nodejs is....',
        'Express is....'
    ];
    var output = `
    Javascript

    Nodejs

    Express


    ${topics[req.params.id]}
    `
    res.send(output);
})

🔍 Post 방식을 이용한 정보 전달

GET vs POST

GET: 우리가 어떤 정보를 서버에 요청해서 가져오는 방식
POST: 사용자의 정보를 서버에 전송할 때 사용하는 방식 (ex.로그인 입력)


app.get('/form', function(req, res){
    res.render('form');
});
app.get('/form_receiver', function(req, res){
    var title = req.query.title;
    var description = req.query.description;
    res.send(title+','+description);
});

Node.js를 이용해 웹 애플리케이션 만들기

input(type=’text’ name=’title’ placeholder=’title’) 코드의 placeholder로 타이틀이 적힌 상자가 생겨남.

이어서 폼 태그 만들기


doctype html 
html 
    head 
        meta(charset='utf-8')
    body 
        form(action='/topic' method='post')
            p 
                input(type='text' name='title' placeholder='title')
            p 
                textarea(mane='description')
            p 
                input(type='submit')

사용자가 입력한 정보를 ‘/topic’으로 전송되도록, method=’post’ 방식으로 전송한다.

돌아가기: 2024 하반기 Python Coding Study

Vienna sausage