[멋쟁이사자처럼 부트캠프] + 프론트엔드 17기 - Vite 환경 구성 / HTML이란 ?

- 간단한 수업내용 정리 -

알고 있는 내용임에도 다시 한번 복습하고 공부하며 지식을 쌓을 수 있도록 노력하는 것이 배움의 자세라고 생각한다.

 

WWW - World Wide Web

인터넷 위에서 하이퍼텍스트(HTML) 문서들을 서로 연결해 제공하는 정보 시스템

 

HTML - 탄탄한 뼈대

팀 버너스리가 개발
모든 사용자들이 쉽게 활용 할 수 있도록 하는 것이 개발의 목적이었다.

 

CSS - 근사한 스타일링

기존 HTML 문서는 스타일이 없어서 텍스트를 넣고 마치 책처럼 되어 있었다.

이를 개선하고 조금더 명확한 정보 전달을 위해서 스타일을 넣기 시작하게 되면서 하콘 비움 리가 처음으로 제안하게 되었다.

 

JavaScript - 스마트한 두뇌

HTML과 CSS를 넘어서서 동적으로 동작하는 웹사이트 개발을 원했고, 사용자와의 상호작용이 가능하도록 하기 위해서 채택되었다.

---

A11y(접근성)

Accessibility의 약자로 A와 y의 사이에 11개의 글자가 존재하여 줄여 부르기 시작했다.

 

a11y 약자

 

장애 유무와 관계없이 모든 사용자가 웹/앱을 이용할 수 있게 만드는 개념과 기술이다.

 

기존에 개발을 진행하면서 많은 웹 사이트들이 해당 내용을 잘 지키지 않은채로 개발된다는 것을 알았다. 때문에 h1 태그, h2 태그 등등 기본 태그와 홈페이지 헤딩에 신경 쓰지 않는 모습들이 나타났다.

 

개인적으로 이는 좋은 방향성은 아니라고 생각을 하고 접근성에 관련하여 올바른 시멘틱 태그 사용, 상황에 맞는 태그 사용 등 기본 골격이 되는 HTML에 뼈대를 잘 세워놓고 기준이 있어야 한다고 생각하였다.

 

그러던 와중 김데레사 강사님의 장애라는 교육과 더불어 접근성을 강조하는 내용이 너무 인상깊게 다가왔다.

 

내 목표는 올바른 홈페이지 제작, 모두가 이용가능한 홈페이지를 제작 하는것에 중심이 되었었기에 해당 내용들이 너무 올바르게 다가왔다.

 

다음으로는 시맨틱 태그이다.

<header>   상단 영역  <nav>      내비게이션 --> <main>     페이지의 핵심 콘텐츠 (1개만) <section>  의미 있는 콘텐츠 묶음 <article>  독립적인 콘텐츠 <aside>    보조 콘텐츠 <footer>   하단 영역

 

 

텍스트 관련 태그

<h1>페이지 제목</h1> <h2>섹션 제목</h2> <h3>하위 섹션</h3>

 

이미지 관련 태그

<img src="dog.jpg" alt="공원에서 뛰노는 강아지">

alt(대체 텍스트)에 이미지를 소개하는 글이 들어가야한다.

스크린 리더기를 통해서 어떤 이미지인지 내레이션이 나오며, 홈페이지를 보지 못하는 사용자들은 해당 내레이션을 듣고 접근할 수 있기 때문에 꼭 신경 써야 하는 부분이다.

 

alt(대체 텍스트)가 적절하게 빠져야 하는 경우가 있는데 이는 디자인적 요소로 들어간 사진들이다.

꼭 필요한 데이터와는 거리가 멀어 오히려 alt를 사용할 경우 혼란을 야기할 수 있다.

때문에 alt를 빼서 개발을 진행하게 되는데, 우리에게 '제외한다'의 개념이지 그들을 위해서 불필요한 정보를 숨김처리 한다는 표현이 올바른 표현일 것이다.

 

 

폼(Form) 접근성

<input required>

 

등등 이 존재한다.

 

---

Vite 환경 구성

 

vite환경 구성을 위해서 root에 testVite 폴더를 만들어 주었다.

 

사전에 node버전과 npm(Node Package Manager)가 설치가 되어있다는 가정하에 설명하도록 하겠다.

---

node와 npm이 깔려있다면 저렇게 버전정보가 뜰 것이다.

 

---

vite의 경우 npm create 명령어를 사용하게 된다.

프로젝트 생성용 패키지를 실행(npm create)하여 vite@latest(vite의 최신 템플릿버전)을 사용하겠다.

 

그러면 위와 같이 Project name이 뜨는데 내가 원하는 프로젝트명을 입력해 주면 된다. 나는 테스트 버전이기에 testVite로 입력하도록 하겠다.

---

그러면 아래와 같이 Packge name을 적어달라고 한다.

해당 package name은 프로젝트를 식별하기 위한 고유한 이름이라고 생각하면 된다.

 

소문자를 지키는 것이 관례이고 테스트 프로젝트를 표시해 주기 위해서 testvite-project라고 하겠다.

---

그러면 원하는 프레임워크를 선택하라는 창이 나온다.

여기서 각자 사용하는 프레임 워크를 선택하면 된다.

 

저자의 경우 Vanilla 즉, 자바스크립트 +  HTML 환경을 구성하기 위해서 Vanilla로 선택하겠다.

---

rolldown-vite(Experimental)?라고 물어본다.

여기서 해당 내용은 vite에서 사용하는 차세대 번들러 옵션이다.

번들러(Bundler)란?
여러 개로 나뉜 파일들을 하나(또는 몇 개)로 묶어 주는 도구

기존에 vite에선 rollup 형식으로 번들러를 진행했지만 이번에 실험적으로 rolldown으로 교체한 실험버전을 사용해 볼 것이냐고 묻는 것이다.

---

설치를 하게 되면 다음과 같이 설치가 시작되고 잘 설치가 되었다면 기본 포트번호인 5173 포트로 로컬서버가 실행 될 것이다.

 

---

 

해당 주소를 복사하거나 쉬프트 + 클릭을 하게되면 서버 사이트로 이동하게 되고 해당 화면을 마주할 수 있다.

---

package.json

package.json을 확인해 보면 vite가 잘 깔려있는 것을 확인할 수 있다.

 

추가로 필요한 npm 도구들을 다운로드하게 되면 해당 package.json에 추가되게 된다.

즉, 해당 파일은 장부와 같은 역할을 하는 것이다.

 

예를 표시하기 위해서 해당 파일에 tailwind와 Prettier를 추가해 보록 하겠다.

추가로 설명을 붙이자면 tailwindcss(기존 스타일링을 css에서 하던 것을 html에서 할 수 있도록 간편화된 도구)

Prettier(줄 맞춤, 코드 포맷 등 코드를 일정한 규칙으로 개발할 수 있도록 도움을 주는 도구), ESLint(JS/TS 코드 오류 규칙 검사)도 있다.

Prettier와 ESLint를 동시에 사용할 경우 충돌이 일어나는데 이를 방지하기 위해 eslint-config-prettier도 있다.

 

우리는 여기서 tailwind와 prettier만 받도록 하겠다.

---

터미널 창에서 서버를 종료하고 싶다면 컨트롤 + C를 누르면 실행되던 서버가 종료된다.

 

tailwindcss 도구 추가

 

테일윈드 공식사이트

https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

위의 사이트로 들어가면 다운로드하는 방법이 친절하게 설명되어 있다.

 

 

아까 추가한 vite 환경의 폴더로 접근한다. 이때 꼭 ls를 눌러 내가 위치한 폴더가 맞는지 확인해야 한다.

---

npm install -D tailwindcss @tailwindcss/vite를 쓰게 되면 vite환경에서도 tailwind.config.js 없이 동작하는 tailwindcss가 추가되게 된다.

이때 package.json으로 찾아가 잘 추가되었는지 확인해 준다.

 

tailwindcss는 4 버전으로 올라오면서부터 위와 같이 통합용 패키지를 지원하면서 동시에 기존에 작성해야 하던 tailwind.config.js 등등이 사라져 가벼워졌다.

 

이렇게 되면 추가가 된 것이다.

바로 이어서 Prettier를 추가해 보도록 하겠다.

 

보통은 GUI 방식으로 VSCode 확장프로그램에서 지원해 주는 Prettier를 많이 사용해 보겠지만 필자는 CLI에 조금 더 가까워지기 위해서 CLI 방식으로 추가해 보겠다.

GUI 방식으로 하려면 위의 확장프로그램을 install 해주면 된다.

 

---

CLI 방식으로 Prettier 추가

npm install -D prettier 명령어를 통해 쉽게 prettier를 받아볼 수 있다.

장부를 확인해 보아도 prettier가 추가된 것을 확인할 수 있다.

 

---

Commit 하고 Push 하기

Prettier에서 너무 쉽게 작업이 끝나서 당황스러울 것이다.

누군가에겐 어렵게 느껴질 것이고 누군가에겐 쉽게 느껴질 텐데, 그건 반복을 해봤느냐 익숙하냐의 차이인 것이지 더 잘한다의 기준은 될 수 없는 것 같다.

 

누구나 하다 보면 잘해지니까 익숙해질 때까지 계속 반복해 보고 많이 접해보는 것이 중요하다.

 

나는 기존에 GUI 방식으로 Commit 하고 Push를 해 왔다.

 

commit은 뭐고 Push는 뭔데?

commit과 push는 간단하다. 가상의 대기열이라는 상태가 존재한다.
우리는 그곳을 SA라고 한다.

Git의 3단계 구조 - (Commit과 Push를 하기 전 단계정리)
Working Directory -> Staging Area -> Repository

우리가 가장 많이 접하는 공간에 WD(워킹 디렉터리)이다. 이 장소는 코드를 수정, 저장 등등을 하는 우리가 어떠한 작업을 하는 폴더라고 생각하면 편하다.

SA는 내 코드를 깃허브에 올리기 전 대기의 장소라고 생각하면 된다.

"그럼 이게 왜 필요한데?"라고 생각하는 사람들이 많을 것이다.
나도 그냥 바로 리포지토리에 올리면 되지 뭐 하러 이걸 쓰는 거지?라는 생각을 개발 초기에 했었다..

우리는 코드를 작성하는 동안 수많은 수정과 삭제를 반복한다.
지금 당장 불필요하다고 생각되는 내용들을 삭제하고 수정하는데 나중에 가면 필요한 경우가 많다. 뿐만 아니라 오늘은 되던 것이 내일은 안 되는 경우도 빈번하게 일어날 것이다.

즉, SA라는 공간을 둔 이유가 이렇게 수정된 폴더들을 커밋함으로써 역사를 기록하는 것이며, 백업을 해두는 것이다.

마지막으로 Push를 하여 내 리포지토리에 글을 올리는 것으로 마무리되는 것이다.

 

git init 명령어로 해당 폴더에 branch를 만들며 로컬 저장소를 초기화한다. 그 후에 ls -a 명령어를 사용하여. git 폴더가 잘 만들어진 것을 확인할 수 있다.

 

 

git add . 를 통해서 스테이징 상태로 올린다. 위에서 말한 SA의 공간이 해당 공간이다.

위의 코드에서는 경고 메시지를 출렸했는데 해당 경고 표시는 줄 바꿈 경고 표시로 무시해도 좋다.

 

좌측 git add . 하기전 git status / 우측 git add . 후 git status

git add . 를 하기전 파일(좌측사진)을 보면 수정은 되었지만 git이 관리하지 않는 파일들을 볼 수 있다.

이후 git add . 를 하게 되면 정상적으로 모두 git이 관리하는 상태이며 이는 곧 SA 공간에 올릴 준비를 마친 것이다.

 

git commit -m main을 통해 main이라는 브랜치에 git에서 관리하는 파일들을 SA 공간으로 올린 것이다.

 

내가 미리 만들어둔 리포지토리 주소를 복사해서 붙여 넣는다.

이는 로컬 저장소와 GitHub 원격 저장소를 연결이 되었다는 뜻이다.

 

git push -u origin main 명령어를 통해서 정상적으로 origin이라는 원격 저장소로 푸시를 완료하였다.

 

명령어를 풀어보면

• 원격 저장소(origin)에 main 브랜치 생성
• 로컬 main 브랜치와 원격 main 브랜치를 연결(upstream 설정)
• 현재 로컬 main 브랜치 커밋 내용을 원격 main 브랜치로 푸시

 

이후부터는 git push로 간단하게 커밋한 파일들을 푸시할 수 있다.