# Plain Vanilla - 바닐라 기술로 웹 개발하기

> Clean Markdown view of GeekNews topic #16208. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16208](https://news.hada.io/topic?id=16208)
- GeekNews Markdown: [https://news.hada.io/topic/16208.md](https://news.hada.io/topic/16208.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-08-07T10:03:02+09:00
- Updated: 2024-08-07T10:03:02+09:00
- Original source: [plainvanillaweb.com](https://plainvanillaweb.com/)
- Points: 41
- Comments: 9

## Summary

빌드 도구나 프레임워크 없이 순수 HTML, CSS, JavaScript로 웹 사이트와 애플리케이션을 만드는 방법을 이야기 합니다. 이를 통해서 현대 웹 개발 프레임워크의 복잡성을 피하고 장기적인 유지 보수 없이 안정적인 웹 프로젝트를 구축하는 방법을 배울 수 있습니다. 모든 일에는 기초가 중요합니다. 기초부터 익혀두자고요.

## Topic Body

- 빌드 도구나 프레임워크를 사용하지 않고 에디터, 브라우저, 웹 표준(순수 HTML/CSS/Javascript)만으로 웹 사이트와 웹 애플리케이션을 만드는 주요 기술에 대한 개요를 제공함  
- 다루는 주제는 다음과 같음:  
  - Components: React나 Vue와 같은 프레임워크의 컴포넌트 접근 방식을 대체하기 위해 순수 HTML, JavaScript, CSS로 상위 수준의 프리미티브를 만드는 기본 구성 요소로 Web Components를 사용하는 것  
  - Styling: CSS Modules, PostCSS, SASS의 편의성을 대체하기 위해 현대 CSS의 능력을 최대한 활용하는 것  
  - Sites: 웹 컴포넌트를 기반으로 웹 프로젝트를 만들고 빌드 도구, 프레임워크, 서버 사이드 로직 없이 프로덕션에 배포하는 것  
  - Applications: 바닐라 기술로 싱글 페이지 웹 애플리케이션을 구축하는 방법, 라우팅 방법, 상태 관리 방법  
- 이 튜토리얼은 HTML, CSS, JavaScript를 이미 알고 있는 사람들을 위한 것임. 웹 개발을 배우기 시작하는 단계라면 이 사이트는 아직 적합하지 않음  
  
### 왜 그래야 할까?  
  
- 현대 웹 개발 프레임워크는 풍부하고 잘 구조화된 웹 애플리케이션을 빠르게 개발할 수 있는 능력이 있지만, 이러한 풍부한 기능은 프레임워크와 도구의 복잡성을 대가로 하며 결과적으로 프로젝트는 보안과 최신 상태를 유지하기 위해 정기적인 유지 보수가 필요함  
- 플레인 바닐라 스타일의 웹 개발은 다른 선택을 하여 단순성과 효과적으로 제로 유지 보수와 같은 장기적인 이점을 위해 단기적인 편의를 포기함. 이 접근 방식은 훌륭한 웹 표준 지원을 제공하는 현대 브라우저 환경에서 가능함  
- 인기 있는 웹 개발 프레임워크 중 일부를 시도하고 왜 없이 하고 싶어하는지 배우고 프레임워크의 도움 없이 코드베이스를 구조화하는 방법에 대해 확신이 들 때까지 Plain Vanilla 접근 방식을 사용하지 말 것  
- 브라우저가 제공하는 도구에 대해 더 잘 알고 싶거나 유지 관리가 필요 없고 매우 안정적이며 장기적으로 구축된 사이트나 애플리케이션을 구축하려는 경우 이 접근 방식을 사용할 것. 결국 여기에 설명된 기술은 웹 표준에만 의존하며 웹 표준은 수십 년 동안 지속됨

## Comments



### Comment 28086

- Author: yangeok
- Created: 2024-08-19T08:15:29+09:00
- Points: 1

바닐라로 간단한 지도앱 만드는 것도 파일이 넘나 장황해지네요

### Comment 27898

- Author: ahwjdekf
- Created: 2024-08-09T16:02:11+09:00
- Points: 1

유지 관리가 필요 없고 매우 안정적이며 장기적으로 구축된 사이트나 애플리케이션을 구축하려는 경우 이 접근 방식을 사용할 것 --> 그럼 답 다 나온 듯 하네요. 이걸 왜 안해..?

### Comment 27931

- Author: cosine20
- Created: 2024-08-12T09:16:21+09:00
- Points: 1
- Parent comment: 27898
- Depth: 1

다들 귀찮대요 ㅋㅋ

### Comment 27896

- Author: botplaysdice
- Created: 2024-08-09T13:38:04+09:00
- Points: 1

호랑이 담배피던 시절에.... 이렇게 짰죠...  
  
int main(int argc, char **argv) {  
...  
char* url = getenv("QUERY_STRING");  
...  
printf("HTTP/1.0 200 OK");  
..  
blahblah...  
...  
}

### Comment 27843

- Author: axgux
- Created: 2024-08-07T11:16:39+09:00
- Points: 2

예전에 바닐라로 SPA 구현했던 생각이 나네요.. 완전 초보일 때라 fetch를 몰라서 xhr로 하나하나 했던 기억이..

### Comment 27841

- Author: aer0700
- Created: 2024-08-07T10:51:46+09:00
- Points: 3

튜닝의 끝은 순정이랬죠...

### Comment 27842

- Author: kandk
- Created: 2024-08-07T11:00:21+09:00
- Points: 1
- Parent comment: 27841
- Depth: 1

튜닝 스펙이 순정 스펙으로 흡수될수도..

### Comment 27849

- Author: [hidden]
- Created: 2024-08-07T13:57:33+09:00
- Points: 2
- Parent comment: 27842
- Depth: 2

[숨김 처리된 댓글입니다]

### Comment 27868

- Author: galadbran
- Created: 2024-08-08T23:29:42+09:00
- Points: 1
- Parent comment: 27849
- Depth: 3

Syntax.fm 800회에 존 레식이 나왔습니다! ^^