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

이제 본격적으로 풀스택 애플리케이션을 만들어 보자! 예시로 투두 리스트 애플리케이션을 만들어 볼 것이다. 프론트엔드 HTML & JavaScript백엔드 Node.js & ExpressDB SQLite 요렇게 사용할 예정~  각각의 파일이 어떤 역할을 하는지는 우리의 chatGPT가 친절히 설명해 준다. 이건 백엔드  이건 프론트  폴더 기본 구조를 만들고 npm init을 했더니 이렇게 나왔다.  npm init은 Node.js 프로젝트를 초기화할 때 사용하는 명령어로, 프로젝트의 메타데이터를 담고 있는 package.json 파일을 생성한다. 여기서 npm install을 통해 이것저것 패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.node_modul..

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