<프로그래머스 데브코스 풀스택> 2026-01-10 TIL

다음주에 여행일정때문에 하루는 휴가, 하루는 zep만 켜둘 생각으로 주말에 미리 이틀치를 들어놓으려고 한다!

---

프론트엔드 프로젝트 

div : 의미 없는 구역

p : 단락을 나타내는 구역

 

        <div style= "display:grid; grid-template-columns: 1fr 1fr 1fr;">
     
        </div>

그리드 스타일

1️⃣ display: grid;

- 해당 요소를 그리드 컨테이너로 만듦 

- 자식 요소들이 격자 형태로 배치됨

2️⃣ grid-template-columns: 1fr 1fr 1fr;

- 열(column)을 3개 만든다는 뜻

- 각 열의 너비는 1fr씩 → 같은 비율

💡 fr(fraction) : 남는 공간을 기준으로 한 비율

 

중앙 정렬

margin-left : auto;

margin-right: auto;

 

Part7. 백엔드

Chapter1. 백엔드의 구조

웹서버 

: 정적 페이지만 대응, 동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달

💡 정적 페이지 : 화면의 내용/데이터 등의 변동이 없는 페이지 -> 쉽게 말해 사용자와 소통X, 데이터 사용X
동적 페이지  : 데이터 처리/ 연산을 통해 화면의 내용, 데이터가 변하는 페이지

 

--> 동적페이지는 웹 어플리케이션 서버에 전달만 

 

웹 어플리케이션 서버 🚩여기에 포커스!

: 동적 페이지 처리, 필요한 데이터 연산을 위해 데이터베이스와 연결되어 있으며 데이터 조회/수정/삭제에 대한 처리 요청

💡 데이터베이스 : 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체 

 

Chapter2. Node.js의 이해

Node.js

자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼

자바스크립트로 백엔드를 구현할 수 있는 운동장.

 

서버 만들기

server.js

let http = require('http');

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello Node.js')
    response.end();
}

http.createServer(onRequest).listen(8888);

http 프로토콜 : node.js가 모듈로 만들어놓음

`require()` : 그것을 불러줌

 

`onRequest` : 클라이언트에게 요청이 오면

`request / response` : node.js가 가져와줌

`writeHead(200, {'Content-Type' : 'text/html'}` : head 내용 : 는 정상이고, 리스폰스 타입은 html 이야. 

`write('Hello Node.js')` : body 내용 

`end()` : 끝났어 

 

`createServer(이런 함수로 이야기할거야)` : http가 갖고있는 함수, server을 만듦 

`.listen(8888)` : 8888이라는 주파수로 이야기할거야 

 

포트번호 : 클라이언트 - 서버간의 같은 주파수

 

터미널에

node 파일이름.js

로 서버 시작 후,

 

localhost:8888

로 접속 가능

 

HTTP 프로토콜 템플릿

Head : 

1️⃣ 통신 상태가 어떤지 (예, 200: 정상 / 404: 클라이언트가 원하는 걸 못찾음 / 500: 서버가 이상함 <- HTTP (status) code)

2️⃣ 응답이 어떤 형태인지 (예, html) 

 

Body : 웹페이지 화면에 뿌려질 내용

 

다른 자바스크립트에서도 써먹고 싶음. 모듈화 해보자!

다른 파일에서

index.js

let server = require('./모듈화할파일.js');

하고, 이 파일을 실행하면 저 모듈을 사용하여 켜짐

 

그러나 아직 서버를 원할 때 실행하는게 쉽지 않음.

server.js(서버 생성,실행 코드) 자체를 모듈화 하는 것보다는, 이 코드를 함수에 넣어서, 함수를 실행할 때마다 서버가 자동으로 시작되게끔 바꿔보자. 

 

server.js

let http = require('http');


function start() {
    function onRequest(request, response){
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }

    http.createServer(onRequest).listen(8888);

}

exports.start = start;

index.js

let server = require('./server');

server.start();

 

node index.js -> 정상 작동됨

💡 함수는 자기 파일 안에서만 함수의 역할을 할 수 있기 때문에 `exports`꼭 해야함.

 

URL ( Uniform Resource Locator ) 

: 인터넷 상에서 웹페이지가 어디있는지 "위치"를 알려주는 주소, 웹페이지 주소

http://localhost:8888/경로

local host : 내 컴퓨터 주소 

 

let url = require ('url');

http 대신 url 모듈 가져와보자

 

server.js onRequest 내

        let pathname = url.parse(request.url).pathname;
        console.log('pathname : ' + pathname);

url.parse(request.url).pathname : 요청받은 url을 읽어서, 그 경로가 어떻게 되는지 확인 

 

pathname 서버가 관리하지 안혹 따로 라우터가 관리할 수 있도록

request 받고 판단해주는건 일단 서버가 해야함, 콘솔은 서버 역할 아니지!

router.js

function route(pathname) {
    console.log('pathname : ' + pathname);
}

exports.route = route;

index.js

let server = require('./server');
let router = requre('./router');

server.start(router.route);

server.js

let http = require('http');
let url = require('url');

function start(route) {
    function onRequest(request, response){
        let pathname = url.parse(request.url).pathname;
        route(pathname);

        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }
    http.createServer(onRequest).listen(8888);
}

exports.start = start;

 👉🏻

세 파일이 역할을 나누어서 서로 의존하면서 있음

server.js는 request, response만하고

router.js는 route 경로 가져와 경로 분배

index.js는 우리가 만든 것들 소환해서 이것들을 구동하게 해줌

 

handler.js

function main() {
    console.log('main');
}
function login() {
    console.log('login');
}

let handle = {}; //key : value

handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

{} -> key:value 쌍으로 이루어진 변수 상자

/ 일때는 main 함수 실행

/login 일때는 login 함수 실행

 

❓내가 실행을 했을 때에는 /favicon.ico 이라는 뜬금없는 pathname이 떴다.

구글링 결과, 

이렇게 특정 사이트 옆에 뜨는 아이콘을 말한다고 한다. 오류가 아니라 자연스러운 거라고 생각하고 pass!

  👿 handle[pathname](response) is not a function 오류

    if (typeof handle[pathname] == 'function'){
        handle[pathname](response);
    } else {
        response.writeHead(404, {'Content-Type' : 'text/html'});
        response.write('Not Found');
        response.end();
    }

function이 아닐 경우 404 오류로 빼줌

 

최종코드

server.js

let http = require('http');
let url = require('url');

function start(route, handle) {
    function onRequest(request, response){
        let pathname = url.parse(request.url).pathname;
        route(pathname, handle, response);

    }
    http.createServer(onRequest).listen(8888);
}

exports.start = start;

router.js

function route(pathname, handle, response) {
    console.log('pathname : ' + pathname);
    
    if (typeof handle[pathname] == 'function'){
        handle[pathname](response);
    } else {
        response.writeHead(404, {'Content-Type' : 'text/html'});
        response.write('Not Found');
        response.end();
    }

}

exports.route = route;

requestHandler.js

function main(response) {
    console.log('main');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Main page');
    response.end();
}
function login(response) {
    console.log('login');
    
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Login page');
    response.end();
}

let handle = {}; //key : value
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

index.js

let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler');

server.start(router.route, requestHandler.handle);

과제 제출용 캡쳐 사진

function kayoung(response){
    console.log('kayoung');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('kim kayoung');
    response.end();
}

이 코드를 추가해서 했다!

---

진짜 오늘부터는 진짜로 내가 처음보는 것들.. 

코드는 물론이고 백엔드 시스템이 어떻게 돌아가는지도 아예 몰랐어서 정말 흥미롭고 집중해서 들으려고 노력했다

이제야 정말 공부다운 공부를 하기 시작한 것같아서 설렌다... 

근데 이걸 다 흡수하며 매일매일 새로운 걸 배울 수 있을지 걱정도 되는거같다. 

복습 철저히 하자!!!