우리가 만든 코드를(우리가 아니라 내가 혼자 만들긴 함ㅋ) 다음 순서로 살펴볼 것이다.  저번에 프론트엔드를 봤으니 이번에는 백엔드를 볼 거다.    💡 server.jsExpress와 SQLite를 사용해서 간단한 서버를 만들었다. const express = require("express");const bodyParser = require("body-parser");const db = require("./db/db"); // SQLite 설정 모듈const app = express();const PORT = 3000;app.use(bodyParser.json());app.use(express.static("../frontend"));// To-Do 목록 가져오기app.get("/api/todos",..

우리가 만든 코드를(우리가 아니라 내가 혼자 만들긴 함ㅋ) 다음 순서로 살펴볼 것이다.     💡 index.html프론트엔드의 기본 UI와 구조를 정의한다. 특별한 건 없다.  To-Do List Add Task  분해해서 보면,  첫 번째 줄은 HTML5 문서임을 선언한다.이는 HTML의 가장 최신 버전이고 따로 버전 번호를 명시하지 않아도 된다. 꾸준히 업데이트되지만 버전 번호가 바뀌지도 않는다. 두 번째 줄은 영어로 작성됨을 말한다.한국어로 바꾸려면 `ko`라고 입력하면 된다. `en`이라 쓰여있어도 한국어를 문서에 작성할 수 있다. `lang` 속성은 검색 엔진이나 스크린 리더 같은 도구들이 문서의 기본 언어를 알 수 있도록 알려주..

프론트엔드와 백엔드에 대해 가볍게 짚고 넘어가자.  이 둘은 웹이나 앱을 개발할 때 주요한 두 가지 부분을 담당한다. 프론트엔드는 말 그대로 앞면(front)을 담당한다. 웹사이트나 앱에서 사용자가 실제로 보는 화면을 만드는 부분이다. 웹사이트를 켰을 때 디자인, 버튼, 텍스트 등 눈에 보이는 모든 요소가 프론트엔드로 구성된 것이다. 대표적으로 HTML, CSS, JavaScript가 있는데, HTML은 건물의 뼈대 같은 역할로, 웹 페이지의 기본 구조를 담당한다. CSS는 건물의 인테리어와 같은 역할로, 웹사이트의 색깔, 레이아웃 등을 담당한다. JavaScript는 건물로 따지자면 전기를 넣어 자동문이 작동하게 되는 것으로, 버튼을 클릭했을 때 페이지가 바뀌거나 요소가 움직이는 등 인터랙션을 가능하게..