목차
Node.js
NPM
HTML 기본 구조
오늘 하루를 돌아보며
Node.js
Node.js는 브라우저가 아닌 외부에서 CLI와 서버 측 스크립트를 작성할 수 있는 무료 오픈소스 크로스 플랫폼 JavaScript 런타임 환경이다.
1일차에 설치했던 node 환경에서 자바스크립트를 실행할 수 있다. CLI에서 'node' 명령어를 사용하면 .js 파일(자바스크립트 파일)을 실행할 수 있다.
NPM
NPM은 Node Package Manager의 약자로, 자바스크립트 환경에서 패키지를 설치하고 관리하는 도구다. 프로젝트를 개발할 때 필요한 다양한 패키지를 손쉽게 설치하고 관리할 수 있도록 도와준다.
NPM을 활용해서 패키지를 설치하고 삭제할 수 있다. 패키지를 필요에 따라 전역(Global) 또는 로컬(Local)로 설치할 수 있다. 전역으로 설치하면 모든 디렉토리에 전부 적용이 되고, 로컬로 설치하면 해당 디렉토리에만 적용된다.
# 패키지 설치하기
# 전역(Global)으로 설치
npm install --global <package>
# install 명령어와 --global 명령어는 i와 -g로 축약하여 사용할 수 있다.
npm i -g <package>
# 로컬(Local)로 설치
npm i <package># 패키지 삭제하기
# 전역(Global)에 설치된 패키지 삭제
npm uninstall --global <package>
# unsinstall과 --global 명령어는 un과 -g로 축약하여 사용할 수 있다.
npm un -g <package>
# 로컬(Local)에 설치된 패키지 삭제
npm un <package>
이번 수업 시간에는 아래의 패키지들을 설치했다.
- live-server: live reload를 할 수 있는 http 개발 서버다. html 파일을 저장하면 수정한 내용을 바로 반영하여 리로드한다. live-server는 로컬로 설치해서 사용하는 게 협업에 유리하다. html 코드를 웹 브라우저가 해석(parsing)하고 결과를 그려주는 것을 렌더링(rendering)이라고 한다.
- Prettier: 일관된 스타일의 코드를 자동으로 형식화해주는 코드 포맷터
- degit: Github 저장소에서 특정 폴더를 복사해올 수 있는 기능 제공
- add-gitignore: git으로 관리하지 않을 파일들을 자동으로 저장해 준다.
HTML 기본 구조
HTML은 Hyper Text Markup Language의 약자로, 의미 없어 보이는 텍스트 덩어리에 약속된 이름으로 정의하여 의미를 부여한다.
tag: 텍스트 덩어리 앞뒤에 붙는 명령어를 tag라고 부르며, 시작에는 opening tag, 끝에는 closing tag가 붙는다. Tag는 '<>'로 감싼다. 끝에 붙을 때는 '/'를 붙인다. 예) </html>
element(요소): 여는 태그부터 닫는 태그까지 모두 element라고 부른다.
empty element(self closing tag): 열거나 닫지 않고 혼자 독립적으로 존재하는 요소. 예) <meta charset="UTF-8" />
HTML 문서는 DTD → <html> → <head> + <body> 구조로 이루어진다.
DTD
Document Type Definition의 약자로, 문서의 type을 알려주는 선언문이다. HTML5를 사용하면 아래와 같이 선언한다.
<!DOCTYPE html>
<html>
HTML 문서의 전체를 감싸는 태그. lang 속성을 사용해서 문서 전체의 언어를 설정할 수 있다.
<html lang="ko-KR">
</html>
<head>, <meta>, <title>
head에는 뷰포트(브라우저의 하얀 부분)에는 보이지 않는 정보들을 담는다. 문서의 설정이나 제목, 외부 파일 연결 등의 요소가 들어간다.
meta 요소는 문자 인코딩, 뷰포트 설정 등 브라우저에게 주는 정보를 담는다.
title 요소는 브라우저 탭에 뜨는 문서의 제목을 설정한다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멋사 프론트엔드 부트캠프 14기</title>
</head>
<body>
실제 웹페이지에 보이는 내용을 담는다. 뷰포트에서 보이는 텍스트, 이미지, 버튼 등의 모든 시각적 요소를 포함한 웹페이지 실제 콘텐츠가 들어간다.
<body>
</body>
오늘 하루를 돌아보며
내가 처음 HTML을 배울 때가 떠올랐다. 메모장을 열어서 열심히 html 코드를 받아쓰고 저장한 문서를 브라우저로 직접 열어봤었다. 이제는 VS code로 편하게 문서를 만들고 수정할 수 있고, Emmet을 사용해서 '!'만 입력해도 html의 기본 구조를 자동으로 완성해준다. 너무 편리하다! 작업 속도가 엄청 빨라질 것 같다! 이런 단축키들을 빨리 익히기 위해서 자꾸 써봐야겠다.
'부트캠프' 카테고리의 다른 글
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 6 (하이퍼링크, 섹션 관련 요소, 컨테이너 요소) (0) | 2025.05.01 |
|---|---|
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 5 (제목 요소의 중요성과 이미지 삽입) (0) | 2025.05.01 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 3 (Git을 이용한 버전 관리) (0) | 2025.04.29 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 2 (CLI & Git(버전 관리)) (0) | 2025.04.27 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 1 (OT & 수업 준비) (0) | 2025.04.26 |
