웹 백엔드 17

Node.js - cookie & session

이번 포스팅에서는 cookie와 session의 이론적인 부분을 정리해보고 node.js에서 직접 사용해 볼 것이다. 우리가 알아 채지 못하는 부분도 있겠지만, cookie는 웹 서핑을 할 때 굉장히 빈번하게 사용된다. 예를 들어, "오늘 그만 보기"와 같은 공지/광고의 옵션은 해당 옵션을 선택하면 만료일이 24시간인 쿠키를 생성하여 처리할 수 있고, 자동 로그인 옵션은 자동 로그인 여부를 쿠키에 저장하여 처리할 수 있다. 그렇다면, 왜 cookie를 사용하는 것일까? HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP는 비연결지향적(요청을 보내고 응답을 준 뒤, 연결을 끊는 특성)이고 상태가 없는(연결을 끊는 순간, 상태 정보는 유지하지 않는 특성 statelss) 특징을 가지고 있..

웹 백엔드 2024.02.21

Node.js - Sequelize를 활용한 테이블 관계 설정(relation)

이번 포스팅에서는, 지난 포스팅에서 공부했었던 sequelize를 활용하여 테이블 간 관계를 설정해보려고 한다. JOIN은 SQL의 핵심 문법이라고 할 수 있다. JOIN은, 2개 이상의 테이블에서 데이터를 결합하여 새로운 결과를 생성해낼 수 있기 때문에 테이블 간의 관계를 통해 의미있는 정보를 얻어낼 수 있다. JOIN에 관해서는 아래 포스팅에 간단히 정리해 놓았다. https://hellotoriworld.tistory.com/21 SQL 기초5 - 조인 이번 포스팅에서는 SQL의 핵심적인 문법이라고 할 수 있는 JOIN에 대해 다뤄보고자 한다. 조인이란 무엇일까? JOIN DB에서 2개 이상의 테이블을 연결하여 하나의 테이블로 합치는 것 데이터를 효율 hellotoriworld.tistory.com..

웹 백엔드 2024.02.20

Node.js - Sequelize

이번 포스팅에서는, Node.js에서 ORM과 Sequelize를 공부해 보려고 한다. 우선, Sequelize에 대해 공부해보자. Sequelize는 ORM 라이브러리 중 하나이다. 그러니, Sequelize에 대해 공부하기 전에 ORM이 무엇인지 짚고 넘어가보자. ORM이란 무엇일까? ORM(Object Relational Mapping) 객체와 데이터베이스 관계를 매핑(연결)하는 도구 어플리케이션과 데이터베이스 연결시, SQL 언어가 아닌 어플리케이션 개발 언어로 데이터베이스를 접근할 수 있게 해주는 툴 → 개발 언어의 일관성 및 가독성 향상, 재사용 및 유지보수의 편리성 향상 프로그래밍 언어의 객체와 데이터베이스 사이의 중계 역할 데이터베이스와 어플리케이션의 연결을 '객체지향적'으로 도와줌 즉, ..

웹 백엔드 2024.02.20

Node.js - 환경변수(dotenv와 .env 사용)

이번 포스팅에서는 node.js에서 환경변수를 사용하는 방법을 공부해 보려고 한다. 환경변수란 무엇일까? 개발자들은 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들은 보통 운영체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적인 예로, 데이터베이스 설정을 들 수 있다. 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용 DB를 사용하고, 개발 환경에서는 개발자의 PC 상에서 돌고 있는 로컬 DB를 사용하는 경우가 많다. 뿐만 아니라, 데이터베이스의 비밀번호나 서드파티(3rd-party) 서비스의 API 키와 같이 민감한 인증 정보는 GitHub와 같은 코드 저장소(repository)에 올리면 상당히 위험할 수 있기 때문에 ..

웹 백엔드 2024.02.19

Node.js - MySQL을 연동하여 MVC 구현

앞서, MVC 패턴의 기본 개념 및 실습에 대한 포스팅에서는 DB를 연결하지 않았기 때문에 Model에 임시 데이터를 넣어서 실습을 진행했었다. 이번 포스팅에서는, MySQL 을 사용하여 실제 DB를 연결해볼 것이다. 이번 실습은 방명록을 등록/수정/삭제하는 페이지를 구현하는 것이다. 만약 DB를 연결하지 않는다면? // DB 연결 전 exports.getVisitors = () => { return [ { id: 1, name: "allie", comment: "안녕하세요" }, { id: 2, name: "홍길동", comment: "hi" }, ]; }; 임의로 데이터를 넣은 후, 해당 데이터 배열을 반환하는 함수를 작성하여 임시 DB 역할하도록 작성해야 될 것이다. 이제, 임시 DB를 만들지 않고..

웹 백엔드 2024.02.17

Node.js - MVC 기본 개념 및 구현

이전 포스팅에서 node.js로 간단한 게시판을 만들어 글을 등록하고 삭제하는 기능을 구현했었다. 하지만, 기본 실행 파일인 app.js에서 요청된 경로에 따라 응답을 처리하는 코드를 작성하니, 간단한 게시판 구현임에도 불구하고 기능별 코드 구분이 어렵고 코드가 정리되지 않은 느낌을 쉽게 받을 수 있다. 개인의 작은 프로젝트도 하나의 파일에 로직을 처리하는 부분을 몰아넣으면, 코드를 쉽게 찾을 수 없고 한 눈에 파악하기도 힘든데, 규모가 큰 기업의 프로젝트는 얼마나 더 힘들까? 이러한 점에서, 패턴들을 배워 해당 패턴의 규칙에 따라 프로젝트를 설계하고 유지보수하는 것은 굉장히 중요하다라는 것을 알 수 있다. 이번 포스팅에서는, 그 중 하나인 MVC 패턴에 대해 공부해볼 것이며, MVC 패턴은 여러 디자인..

웹 백엔드 2024.02.14

Node.js - 게시판 글 등록 및 삭제

이번 포스팅에서는, 앞서 공부했던 node.js 내용들을 바탕으로 작은 게시판을 만들어 보려고 한다. 게시판을 만들면서 이전에 공부했던 내용들을 다시 한 번 정리해 볼 것이다. (공부했던 내용만을 기반으로 실습을 진행했기 때문에, 로직에 오류만 없을 뿐 베스트 코드는 아님.) 게시판 실습 코드 index.ejs - 메인 화면 🐥안녕하세요! 의 블로그입니다🐥 삭제 header.ejs와 head.ejs에는bootstrap, axios, google fonts, css 등을 사용하기 위한 연결(script, link, cdn) 코드를 작성해주었으나, 편의상 코드를 첨부하지는 않겠다. 블로그의 기능으로는 1. 전체 글의 목록을 조회, 2. 글 제목 클릭시 글 세부 내용 보여주기, 3. 새 글 작성, 4. 삭제 ..

웹 백엔드 2024.02.03

Node.js - 파일 업로드

이번 포스팅에서는 node.js에서의 멀티파트 데이터 처리에 대해 알아보려고 한다. 여태까지는 데이터가 문자열인 경우의 클라이언트와 서버 간 데이터 전송에 대해 공부해 보았는데, 문자열이 아닌 이미지를 주고 받고 싶을 땐 어떻게 하면 될까? 앞서 클라이언트와 서버 간의 데이터 전송에서 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리인 body-parser에 대해 다뤘었다. body-parser는 post 방식으로 통신할 때, 요청(request)의 body에 들어간 데이터를 받을 수 있게 도와주는 역할을 한다. 하지만, body-parser로 멀티파트 데이터(이미지, 동영상, 파일 등)를 받는다면 원본 멀티파트 데이터가 아닌, 그저 파일명을 텍스트로 바꾼 문자열이 전송될 뿐이다.(사진 참고) 이처럼 ..

웹 백엔드 2024.01.31

JSON(JavaScript Object Notation)

이번 포스팅은, JSON에 대해 정리해 보려고 한다. JSON(JavaScript Object Notation) 구조화된 데이터를 문자열의 형태로 표현하기 위해서 사용 네트워크를 통해 다른 시스템들이 소통할 때 사용하는 경량의 DATA 교환 형식 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용함 자바스크립트의 object를 기반으로 하는 텍스트 형식 자바스크립트에서 파생되었으나, 현재는 다른 프로그래밍 언어에서도 지원하는 데이터 형식 자바스크립트의 객체와 유사함 but, key 이름을 "key-name" 큰 따옴표로 감싸는 차이점이 있음 가독성이 뛰어나 컴퓨터와 사람 모두 해석하기 편함 문자열, 숫자, boolean, 중첩된 객체와 배열도 저장 가능 자바스크립트에서는 JSON 데이터를 간편하게 다..

웹 백엔드 2024.01.29

Node.js - 동적 폼 전송

이번 포스팅에서는 node.js에서의 동적 form 전송 대해 공부해 보려고 한다. 이전 포스팅들에서는 input이나 button의 type="submit"을 이용해 폼을 전송해왔다. 이러한 방식으로 데이터를 전송했을 땐, 페이지의 이동이 발생했다. 하지만, 로그인을 실패한 경우와 같이 굳이 페이지의 이동이 필요가 없는 상황에서는 페이지의 이동없이 서버를 통해 데이터를 주고 받는 것이 적절하다. 이러한 방식을 비동기 방식이라고 하는데, HTTP 통신에서의 동기/비동기 방식에 대해 알아보자. 동기 HTTP 통신 한 번에 하나만 처리 → 페이지를 아예 이동해 서버가 데이터를 처리하는 방식 비동기 HTTP 통신 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능 form의 데이터를 서버와 dynam..

웹 백엔드 2024.01.29