Skip to content

Latest commit

Β 

History

History
133 lines (105 loc) Β· 3.87 KB

README.md

File metadata and controls

133 lines (105 loc) Β· 3.87 KB

FrontEnd Crash - Making From Javascript!:hammer:

μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό A to Z μ΄ν•΄ν•˜κ³  κ΅¬ν˜„ν•΄λ΄…μ‹œλ‹€!:mag_right: 덀으둜 ν”„λ ˆμž„μ›Œν¬ 지식도 λ„“ν˜€λ³ΌκΉŒμš”? :wink:


μ½”λ“œ 리뷰 방법

  1. 주석과 파일
    • 주석과 파일이 ν•„μš”ν•œμ§€ μ½”λ“œ 라인을 μ„ νƒν•˜μ—¬ ν”Όλ“œλ°±μ„ μ€λ‹ˆλ‹€.
    • ν”Όλ“œλ°± 받은 λŒ€μƒμ€ λͺ…ν™•ν•œ 의미 전달을 μœ„ν•΄ λ‹΅κΈ€λ‘œ λ‚¨κ²¨μ£Όμ„Έμš”.

  1. 넀이밍
    • λ³€μˆ˜, ν•¨μˆ˜λ“  일관성이 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.
    • μ–΄λ–€ λ³€μˆ˜λŠ” 동사+λͺ…μ‚¬λ‘œ λ˜μ–΄ μžˆλŠ”λ° μ–΄λ–€ λ³€μˆ˜λŠ” 동사+ν˜•μš©μ‚¬λ‘œ λ˜μ–΄ 있으면 μ•ˆ λΌμš”.
    • λ³€μˆ˜/ν•¨μˆ˜λͺ…κ³Ό 같은 κΈ°λŠ₯을 ν•˜λŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€.
      const getFalseArray = (size) => {
        return Array.from({length:size}, () => false);
        // λ˜λŠ”
        return Array(size).fill(false);
      }

  1. 곡백, μ„Έλ―Έμ½œλ‘ , EOL(EndOfLine) 문법 확인
    • λΆˆν•„μš”ν•œ 곡백이 μžˆμ§„ μ•Šλ‚˜μš”?
    • μ„Έλ―Έμ½œλ‘ μ„ μ‚¬μš©μ— μžˆμ–΄ 일관성이 깨지진 μ•Šμ•˜λ‚˜μš”?
    • EOL이 ν†΅μΌλ˜μ—ˆλ‚˜μš”?

  1. μ€‘λ³΅λ˜λŠ” μ½”λ“œ 확인
    • λ™μΌν•œ κΈ°λŠ₯을 ν•˜λŠ” ν•¨μˆ˜κ°€ μ‘΄μž¬ν•˜μ§„ μ•Šλ‚˜μš”?
    • μ§€μ†μ μœΌλ‘œ λ˜‘κ°™μ€ λ‚΄μš©μ΄ 반볡(쀑볡)λ˜μ§„ μ•Šλ‚˜μš”?
    • console.log()κ°€ λΆˆν•„μš”ν•˜κ²Œ μ‚¬μš©λ˜μ§„ μ•Šμ•˜λ‚˜μš”?
    • μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” λ³€μˆ˜κ°€ μ‘΄μž¬ν•˜λ‚˜μš”?

😎 진행 μˆœμ„œ 😎


졜초 1회

  1. Editor : VSCode
  2. Extension μ„€μΉ˜
    • Night Owl
    • Material Icon Theme
    • Bracket Pair Colorizer 2
    • Color Highlight
    • Liver Server
    • JavaScript (ES6) code snippets
    • ident-rainbow
    • Highlight Matching Tag
  3. ESLint, Prettier μ„€μ •(+ jest)


진행

  1. κ°œλ… μ„€λͺ… 및 문제 μ•ˆλ‚΄
  2. κ΅¬ν˜„
  3. μΆ”κ°€ μ„€λͺ… 및 리뷰, ν”Όλ“œλ°±(μƒλž΅ κ°€λŠ₯)


βœ… 자료ꡬ쑰 κ΅¬ν˜„

  • 1️⃣ ν”„λ‘œν† νƒ€μž…μ„ ν™œμš©ν•΄μ„œ 큐와 μŠ€νƒ κ΅¬ν˜„ν•˜κΈ°
    • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ Arrayλ₯Ό ν™œμš©ν•΄μ„œ κ΅¬ν˜„
  • 2️⃣ 클래슀λ₯Ό ν™œμš©ν•΄μ„œ 큐와 μŠ€νƒ κ΅¬ν˜„ν•˜κΈ°
    • ꡬ쑰체(Node)λ₯Ό λ§Œλ“€μ–΄ 직접 κ΅¬ν˜„ν•˜κΈ°

βœ… 주어진 I/O에 λŒ€μ‘ν•˜λŠ” 순수 ν•¨μˆ˜ κ΅¬ν˜„

  • 1️⃣ λ°°μ—΄ μ΄ˆκΈ°ν™” - λ§€κ°œλ³€μˆ˜λ₯Ό 효율적으둜 μ œμ–΄ν•˜κΈ°(Rest, default)
  • 2️⃣ λ°°μ—΄ 뒀집기(Array)
  • 3️⃣ 평균, μ΅œλŒ€κ°’, λˆ„μ ν•©, 쀑볡 횟수, 쀑첩 λ°°μ—΄ 평탄화, 쀑볡 μš”μ†Œ μ œκ±°ν•˜κΈ°(Array)
  • 4️⃣ 둜또 λ§Œλ“€κΈ°(Number, Math, Array)
  • 5️⃣ λ‹¨μ–΄μ˜ 개수 κ΅¬ν•˜κΈ°(String)
  • 6️⃣ 객체 κΉŠμ€ λ³΅μ‚¬ν•˜κΈ°(Object)
  • 7️⃣ 컀피 자판기 λ§Œλ“€κΈ°(Date, RegExp, String, Array, Object)
  • 8️⃣ 주어진 ν˜•νƒœλ‘œ 객체 좜λ ₯ν•˜κΈ°(Object)
  • 9️⃣ 비동기 ν”„λ‘œκ·Έλž˜λ°(Promise, async/await)
  • πŸ”Ÿ μœ νš¨μ„± κ²€μ‚¬ν•˜κΈ°(HTML/DOM)

βœ… λŒ€ν‘œμ μΈ μ •κ·œν‘œν˜„μ‹ μ‚¬μš©

  • 1️⃣ ν•œκΈ€λ§Œ μž…λ ₯λ˜μ—ˆλ‚˜μš”?
  • 2️⃣ μ˜μ–΄λ§Œ μž…λ ₯λ˜μ—ˆλ‚˜μš”?
  • 3️⃣ 숫자만 μž…λ ₯λ˜μ—ˆλ‚˜μš”?
  • 4️⃣ 이메일이 μ˜³μ€ ν˜•μ‹μΈκ°€μš”?
  • 5️⃣ λΉ„λ°€λ²ˆν˜Έ 검증 κ²°κ³Ό μ˜³μ€ ν˜•μ‹μΈκ°€μš”?
  • 6️⃣ μ „ν™”λ²ˆν˜Έκ°€ μ˜³μ€ ν˜•μ‹μΈκ°€μš”?
  • 7️⃣ 생년월일이 μ˜³μ€ ν˜•μ‹μΈκ°€μš”?
  • 8️⃣ 주민번호 검증 κ²°κ³Ό μ˜³μ€ ν˜•μ‹μΈκ°€μš”?
  • 9️⃣ μ˜³μ€ URLμΈκ°€μš”?
  • πŸ”Ÿ HTMLμ—μ„œ ν…μŠ€νŠΈλ§Œ κ°€μ Έμ˜¬ 수 μžˆλ‚˜μš”?

βœ… μ•Œκ³ λ¦¬μ¦˜ λ¬Έμ œν•΄κ²° 기초


βœ… λͺ¨λ“ˆ ν˜•νƒœμ˜ 독립 κΈ°λŠ₯ κ΅¬ν˜„

  • 1️⃣ Modal κ΅¬ν˜„
  • 2️⃣ Drag & Drop κ΅¬ν˜„
  • 3️⃣ Infinity Scroll κ΅¬ν˜„
  • 4️⃣ Login κΈ°λŠ₯ κ΅¬ν˜„
    • Create
    • Read
    • Update
    • Delete

🚩 TodoMVC κ΅¬ν˜„

  • 1️⃣ 효율적인 λ Œλ”λ§
  • 2️⃣ μ»΄ν¬λ„ŒνŠΈ
  • 3️⃣ λΌμš°νŒ…
  • 4️⃣ HTTP ν΄λΌμ΄μ–ΈνŠΈ
  • 5️⃣ μƒνƒœ 관리