Html5-boilerplate: 파일 이름 μ΅œμ ν™”, "지연" μΆ”κ°€, μ—°κ²° 확인을 μœ„ν•œ μ½˜μ†” 인사말

에 λ§Œλ“  2020λ…„ 08μ›” 20일  Β·  18μ½”λ©˜νŠΈ  Β·  좜처: h5bp/html5-boilerplate

μ œμΆœν•©λ‹ˆλ‹€...

  • [ ] 버그 λ³΄κ³ μ„œ
  • [x] κΈ°λŠ₯ μš”μ²­
  • [ ] 기타(μ—¬κΈ°(μ•„λž˜)μ—μ„œ 지원 μš”μ²­μ„ μ œμΆœν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€.)

μ•ˆλ…• λͺ¨λ‘λ“€!!!

μ €λŠ” 이 도ꡬλ₯Ό μ‚¬λž‘ ν•©λ‹ˆλ‹€. 특히 ν”„λ ˆμž„μ›Œν¬κ°€ λ‹Ήλ©΄ν•œ μž‘μ—…μ— 과도할 λ•Œ 주둜 Vanilla Js 둜 μž‘μ„±ν•˜λŠ” 저와 같은 κ°œλ°œμžμ—κ²ŒλŠ” λ†€λžμŠ΅λ‹ˆλ‹€.
λ‚΄ κΈ°λŠ₯ μš”μ²­μ€ κ°„λ‹¨ν•©λ‹ˆλ‹€. κ·Έ 쀑 ν•˜λ‚˜λΌλ„ κ°€μΉ˜κ°€ μžˆλ‹€κ³  νŒλ‹¨λ˜λ©΄ κ΅¬ν˜„μ„ λ„μ™€λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€!

1. "main.js" 파일λͺ…을 "app.js"둜 λ³€κ²½

_Vs Code 및 기타 λ§Žμ€ IDE/μ½”λ“œ νŽΈμ§‘κΈ°λŠ” 기본적으둜 "κΈ°λ³Έ" Javascript 파일둜 "app.js"λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€_

2. μ†ŒμŠ€ Js 파일 슀크립트 νƒœκ·Έμ— "지연"을 μΆ”κ°€ν•©λ‹ˆλ‹€.

<script defer src="app.js"></script>

_Js 슀크립트λ₯Ό μ‹€ν–‰ν•˜κΈ° 전에 λͺ¨λ“  DOM μš”μ†Œλ₯Ό λ‘œλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€_

3. main.js(_λ˜λŠ” app.jsκ°€ λ³€κ²½λœ 경우_)에 ν•œ μ€„μ˜ μ½”λ“œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.

console.log(' √ Js file connected! Thanks for using HTML5 Boilerplate πŸ”₯ ');

_이것은 HTML 및 Js 파일이 μ œλŒ€λ‘œ μž‘λ™ν•˜λŠ”μ§€ ν™•μΈν•˜λŠ” κΉ”λ”ν•œ 방법일 λΏμž…λ‹ˆλ‹€!_

4. "main.css" 파일 이름을 "style.css"둜 λ³€κ²½ν•©λ‹ˆλ‹€.

<link rel="stylesheet" href="style.css">

_Vs μ½”λ“œ 및 기타 λ§Žμ€ IDE/μ½”λ“œ νŽΈμ§‘κΈ°λŠ” 기본적으둜 "κΈ°λ³Έ" CSS 파일 κ°€μ Έμ˜€κΈ°λ‘œ "style.css"λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

  1. λ‚˜λŠ” main.jsμ—μ„œ app.js둜 이름을 λ³€κ²½ν•˜λŠ” 것이 쒋을 것이라고 μƒκ°ν•˜μ§€λ§Œ μ–΄λŠ μͺ½μ΄λ“  μƒκ΄€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  2. DeferλŠ” νŽ˜μ΄μ§€ 속도λ₯Ό μ΅œμ ν™”ν•˜λŠ” 데 큰 도움이 될 수 μžˆμ§€λ§Œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λŠ” 데 JSκ°€ ν•„μš”ν•  수 μžˆμœΌλ―€λ‘œ 항상 쒋은 생각은 μ•„λ‹™λ‹ˆλ‹€. ν…œν”Œλ¦Ώμ— deferλ₯Ό μΆ”κ°€ν•˜μ§€ μ•ŠλŠ” 것이 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.
  3. 이것이 μ •λ§λ‘œ ν•„μš”ν•œμ§€ 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. ν”„λ‘œλ•μ…˜μœΌλ‘œ 갈 수 μžˆλŠ” μŠ€ν¬λ¦½νŠΈμ— μ½”λ“œλ₯Ό λ‚¨κ²¨λ‘λŠ” 것보닀 κ°œλ°œμžκ°€ ν…ŒμŠ€νŠΈλ₯Ό 슀슀둜 μ„€μ •ν•˜λŠ” 것이 더 λ‚˜μ„ κ²ƒμž…λ‹ˆλ‹€.
  4. 쒋은 아이디어가 될 수 μžˆμ„ 것 κ°™μ•„μš”. μ‚¬μ΄νŠΈ CSS의 κ°€μž₯ 일반적인 파일 이름이 'style.css'λΌλŠ” 데 λ™μ˜ν•©λ‹ˆλ‹€.

λͺ¨λ“  18 λŒ“κΈ€

github 외에 [email protected] 을 톡해 연락할 수 μžˆμŠ΅λ‹ˆλ‹€.
감사 ν•΄μš”!!!

  1. λ‚˜λŠ” main.jsμ—μ„œ app.js둜 이름을 λ³€κ²½ν•˜λŠ” 것이 쒋을 것이라고 μƒκ°ν•˜μ§€λ§Œ μ–΄λŠ μͺ½μ΄λ“  μƒκ΄€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  2. DeferλŠ” νŽ˜μ΄μ§€ 속도λ₯Ό μ΅œμ ν™”ν•˜λŠ” 데 큰 도움이 될 수 μžˆμ§€λ§Œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λŠ” 데 JSκ°€ ν•„μš”ν•  수 μžˆμœΌλ―€λ‘œ 항상 쒋은 생각은 μ•„λ‹™λ‹ˆλ‹€. ν…œν”Œλ¦Ώμ— deferλ₯Ό μΆ”κ°€ν•˜μ§€ μ•ŠλŠ” 것이 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.
  3. 이것이 μ •λ§λ‘œ ν•„μš”ν•œμ§€ 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. ν”„λ‘œλ•μ…˜μœΌλ‘œ 갈 수 μžˆλŠ” μŠ€ν¬λ¦½νŠΈμ— μ½”λ“œλ₯Ό λ‚¨κ²¨λ‘λŠ” 것보닀 κ°œλ°œμžκ°€ ν…ŒμŠ€νŠΈλ₯Ό 슀슀둜 μ„€μ •ν•˜λŠ” 것이 더 λ‚˜μ„ κ²ƒμž…λ‹ˆλ‹€.
  4. 쒋은 아이디어가 될 수 μžˆμ„ 것 κ°™μ•„μš”. μ‚¬μ΄νŠΈ CSS의 κ°€μž₯ 일반적인 파일 이름이 'style.css'λΌλŠ” 데 λ™μ˜ν•©λ‹ˆλ‹€.

1κ³Ό 4에 λŒ€ν•΄ λ™μ˜ν•©λ‹ˆλ‹€. μ €λŠ” ν”„λ‘œμ νŠΈμ—μ„œ 항상 app.js와 style.cssλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. @coliff 에 λŒ€ν•΄ 3에 λŒ€ν•΄ λ™μ˜ν•©λ‹ˆλ‹€. μ½˜μ†” λ‘œκ·ΈλŠ” μ‹€μˆ˜λ‘œ ν”„λ‘œλ•μ…˜μ— 배포될 수 μžˆμŠ΅λ‹ˆλ‹€.

기둝 μ‹œκ°„: #1116

λ‚˜λŠ” μš°λ¦¬κ°€ 말 κ·ΈλŒ€λ‘œ main.css라고 ν•˜λŠ” μ™„μ „νžˆ λ³„λ„μ˜ ν”„λ‘œμ νŠΈλ₯Ό 가지고 μžˆλ‹€λŠ” 점을 지적할 κ²ƒμ΄λ―€λ‘œ λ‹€μš΄μŠ€νŠΈλ¦Ό 이름을 λ³€κ²½ν•˜λŠ” 것이 μ•½κ°„ μž¬λ―Έμžˆμ„ κ²ƒμž…λ‹ˆλ‹€. μ™„μ „νžˆ λ°˜λŒ€ν•˜λŠ” 것은 μ•„λ‹ˆμ§€λ§Œ 쑰금 이상할 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

κ°μ‚¬ν•©λ‹ˆλ‹€. #1κ³Ό #4에 λŒ€ν•΄ 무엇을 ν•˜κ³  싢은지 μ•Œλ €μ£Όμ„Έμš”(λ„ˆλ¬΄ μ΄μƒν•˜μ§€ μ•Šλ‹€λ©΄ μ΅œμ‹  μƒνƒœλ‘œ μœ μ§€ν•˜λ €κ³  λ…Έλ ₯ν•˜μ„Έμš”)

이걸 λ‹«μ•„μ•Ό ν•˜λ‚˜?

μ‹œκ°„μ΄ 되면 νŒ”λ‘œμš° ν• κ²Œμš”. κ·ΈλŸ¬λ‹ˆ μ§€κΈˆμ€ κ·Έλƒ₯ λ†”λ‘μ„Έμš”. λ‚˜λŠ” μ΄λŸ¬ν•œ λΉ„μš©μœΌλ‘œ νŒλ§€λ˜μ§€ μ•Šμ§€λ§Œ μ œμ•ˆ 사항을 μ μ ˆν•˜κ²Œ μ²˜λ¦¬ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

였 그래! λ¬Έμ œμ—†μ–΄μš”, μ €λŠ” λˆ„κ΅°κ°€λ₯Ό νž˜λ“€κ²Œ ν•˜κ³  싢지 μ•Šμ„ λΏμž…λ‹ˆλ‹€. 이 λμ—μ„œ μ „ν˜€ μ„œλ‘λ₯΄μ§€ μ•Šκ³ , λ‚΄κ°€ μ—° 문제 탭이 λˆˆμ— λ„κ²Œ ν‘œμ‹œλ˜κ³  이에 λŒ€ν•΄ 사전 μ˜ˆλ°©μ μ΄μ§€ μ•ŠκΈ°λ₯Ό μ›ν–ˆμŠ΅λ‹ˆλ‹€. 건배! πŸ”₯

μ „ν˜€ κ±±μ •ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€. λ•Œλ•Œλ‘œ 이 물건은 λΉ λ₯΄κ²Œ 움직이고 λ‹€λ₯Έ λ•ŒλŠ” κ·Έλ ‡κ²Œ 많이 움직이지 μ•ŠμŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” λ‚΄ κΈ°μˆ μ„ ν–₯μƒμ‹œν‚€κ³  λͺ‡ λͺ…μ˜ 학생을 계속 μ§€λ„ν•˜λŠ” 것 μ™Έμ—λŠ” μ•„μ£Ό μ˜€λž«λ™μ•ˆ 아무것도 ν•  κ³„νšμ΄ μ—†μŠ΅λ‹ˆλ‹€!!! λ‚˜λŠ” 당신이 λͺ‡ ꢌ의 책을 가지고 μžˆλŠ”μ§€ λͺ°λžμŠ΅λ‹ˆλ‹€. μ΅œλŒ€ν•œ 빨리 그것듀을 νΌλ‚΄κ² μŠ΅λ‹ˆλ‹€. λ˜ν•œ Mass의 λ™λ£Œ 개발자λ₯Ό λ§Œλ‚˜μ„œ λ°˜κ°€μ›Œμš”... μ €λŠ” Springfield에 μžˆμ§€λ§Œ 그런 μ‹μœΌλ‘œ λ§Žμ€ μ‡Όλ₯Ό ν–ˆμŠ΅λ‹ˆλ‹€. 당신이 ν•„μš”λ‘œν•˜λŠ” 무엇이든, κ·Έλƒ₯ μ†Œλ¦¬λ₯Ό 질러 μ–΄λ–€ 이유둜 μ„œλ‘λ₯΄μ§€ 말고 κ³ μž₯λ‚œ 것은 μ—†μŠ΅λ‹ˆλ‹€ ν•˜ν•˜

@vltansky 생성 슀크립트의 μ˜΅μ…˜μœΌλ‘œ 파일 이름을 μΆ”κ°€ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

슀포일러: μ €λŠ” app.jsλ₯Ό μ„ ν˜Έν•˜μ§€λ§Œ main.cssλ₯Ό ν˜ΈμŠ€νŒ…ν•˜λŠ” ν”„λ‘œμ νŠΈ λ•Œλ¬Έμ— main.css의 이름을 λ³€κ²½ν•˜λŠ” 것을 μ£Όμ €ν•©λ‹ˆλ‹€. λ…Όμ˜μ˜ 여지가 μžˆλŠ” 것 κ°™μ•„μš”. μ—…μŠ€νŠΈλ¦Ό ν”„λ‘œμ νŠΈμ˜ 이름이 달라도 μƒκ΄€μ—†λ‚˜μš”? ν™•μ‹€νžˆ styles.cssκ°€ 더 λ‚˜μ€ 이름이라고 μƒκ°ν•©λ‹ˆλ‹€. μ•„λ§ˆ 그것에 λŒ€ν•΄ νŠΈμœ—ν•  κ²ƒμž…λ‹ˆλ‹€. main.cssλ₯Ό 쒅속성(ν”„λ‘œμ νŠΈλ‘œ)으둜 μ‚¬μš©ν•˜κ³  μ›ν•˜λŠ” μ΄λ¦„μœΌλ‘œ λΉŒλ“œν•˜λŠ” 데 λ¬Έμ œκ°€ μ—†μŠ΅λ‹ˆλ‹€. main.css ν”„λ‘œμ νŠΈμ— μ˜΅μ…˜μœΌλ‘œ μΆ”κ°€ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. 흠. λ‚˜λŠ” 주말에 μ΄κ²ƒμœΌλ‘œ 곡을 움직이렀고 λ…Έλ ₯ν•  것이닀.

πŸ€”

잘 λ“€λ¦°λ‹€. 이것은 λ‚˜μ˜ 첫 번째 κΈ°λŠ₯ μš”μ²­μž…λ‹ˆλ‹€. κ°μ‚¬ν•©λ‹ˆλ‹€.

λ‚˜λŠ” style.css 파일 이름을 μ‚¬μš©ν•˜λŠ” 것에 μ°¬μ„±ν•©λ‹ˆλ‹€. μ‚¬μš©μžμ˜ μ΅œμ’… 컴파일된 CSSμ—λŠ” 'main.css'κ°€ ν¬ν•¨λ˜μ§€λ§Œ μ‚¬μš©μž μ •μ˜ μŠ€νƒ€μΌκ³Ό λ‹€λ₯Έ ν”ŒλŸ¬κ·ΈμΈ λ“±μ˜ μŠ€νƒ€μΌλ„ ν¬ν•¨λ©λ‹ˆλ‹€. λ”°λΌμ„œ ν”„λ‘œμ νŠΈμ˜ μ΅œμ’… CSSλŠ” 'main.css'κ°€ μ•„λ‹™λ‹ˆλ‹€.

λ„€ πŸ‘πŸ»

μ•ˆλ…•ν•˜μ„Έμš” @klutchdevμž…λ‹ˆλ‹€. 이 μ €μž₯μ†Œλ₯Ό λΆ„κΈ°ν•˜κ³  μš”μ²­ν•œ λŒ€λ‘œ λ³€κ²½ 사항을 μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. 이제 μ–΄λ–»κ²Œ ν•΄μ•Ό ν•©λ‹ˆκΉŒ?

였!! uhhh, @roblarsen μ—κ²Œ 달렀 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆκΉŒ? κ·ΈλŠ” λͺ‡ 가지 λ³€κ²½ 사항에 λŒ€ν•΄ μƒκ°ν•˜λ €κ³  ν–ˆμŠ΅λ‹ˆλ‹€ @coliff , @vltansky , 그리고 λ‚˜ μžμ‹ μ— λŒ€ν•΄ μ΄μ•ΌκΈ°ν–ˆκΈ° λ•Œλ¬Έμ— κ·Έλƒ₯ κ°€λ§Œνžˆ 있으라고 λ§ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€

#2341 및 #2342λ₯Ό 톡해 νμ‡„λ˜μ—ˆμŠ΅λ‹ˆλ‹€. @klutchdev μ œμ•ˆμ— κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€!

ν™˜μ˜ν•˜λ‹€

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰