/classWork

πŸ“šν•™μƒλ“€μ˜ μˆ™μ œλ₯Ό μ‰½κ²Œ 관리할 수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜πŸ“š with React JS

Primary LanguageJavaScript

ClassWork

πŸ–Š μ„œλΉ„μŠ€ μ†Œκ°œ

πŸ“šν•™μƒλ“€μ˜ μˆ™μ œλ₯Ό μ‰½κ²Œ 관리할 수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜πŸ“š

πŸ“ƒ 개발 λ°°κ²½

온라인으둜 ν•œκ΅­μ–΄ μˆ˜μ—…μ„ ν•˜λ©΄μ„œ μˆ™μ œμ™€ ν•™μŠ΅μžλ£Œ 배포λ₯Ό μœ„ν•΄μ„œ ꡬ글 ν΄λž˜μŠ€λ£Έμ„ μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 그런데 이번 ν•™κΈ°μ—λŠ” μ€‘κ΅­μ—μ„œ μ ‘μ†ν•˜λŠ” 학생듀이 μžˆμ–΄μ„œ ꡬ글 μ„œλΉ„μŠ€ 이용이 λΆˆκ°€λŠ₯ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ κ°„λ‹¨ν•˜κ²Œ 핡심 κΈ°λŠ₯만 μ‚¬μš©κ°€λŠ₯ν•œ μˆ˜μ—… 관리 μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ œμž‘ν•˜κ³ μž 마음 λ¨Ήμ—ˆμŠ΅λ‹ˆλ‹€. μ›λž˜ λŒ€μƒμ€ μ€‘κ΅­μ—μ„œ ν•œκ΅­μ–΄ μˆ˜μ—…μ„ λ“£λŠ” 학생을 μœ„ν•΄μ„œ λ§Œλ“€ μ˜ˆμ •μ΄μ—ˆμ§€λ§Œ, ν΄λž˜μŠ€λ£Έλ³΄λ‹€ νŽΈν•˜κ²Œ μˆ™μ œ 확인과 ν”Όλ“œλ°±μ„ 남길 수 μžˆλ„λ‘ λ§Œλ“€λ €κ³  μƒκ°ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

+) FirebaseλŠ” κ΅¬κΈ€μ˜ μ„œλΉ„μŠ€μ΄μ§€λ§Œ μ€‘κ΅­μ—μ„œλ„ λ™μž‘ν•˜λŠ” 것을 ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€.

⌨️ Skill

  • Front End

    ⭐️ HTML, CSS, Javascript(ES6), React, Redux, TypeScript

  • ETC

    ⭐️ Firebase

πŸ–₯ νŽ˜μ΄μ§€μ™€ κΈ°λŠ₯

  1. 둜그인 νŽ˜μ΄μ§€

    : Firebase인증 μ„œλΉ„μŠ€λ₯Ό μ‚¬μš©ν•΄μ„œ μ΄λ©”μΌμ΄λ‚˜ google아이디λ₯Ό μ‚¬μš©ν•΄μ„œ λ‘œκ·ΈμΈν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    create

  2. 메인 ν™”λ©΄

    : μ„ μƒλ‹˜ 정보, 졜근 μˆ™μ œ, 졜근 곡지 λ‚΄μš©, 졜근 μˆ˜μ—… λ‚΄μš©μ„ κ°„λ‹¨ν•˜κ²Œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

    main

  3. 질문과 λ‹΅λ³€ νŽ˜μ΄μ§€

    : μ§ˆλ¬Έμ„ 남기고 μ„ μƒλ‹˜μ˜ 닡변을 확인할 수 μžˆλŠ” κ²Œμ‹œνŒ νŽ˜μ΄μ§€μž…λ‹ˆλ‹€.

    question

  4. 곡지사항 κ²Œμ‹œνŒ

    : 곡지사항을 확인할 수 μžˆλŠ” κ²Œμ‹œνŒ νŽ˜μ΄μ§€μž…λ‹ˆλ‹€.

    ScreenRecorderProject6

⁉️ κ³ λ―Όν•œ 점

  • 메뉴λ₯Ό 이동할 λ•Œ ν˜„μž¬ 듀어와 μžˆλŠ” λ©”λ‰΄λ§Œ μ§„ν•œ κ²€μ •μƒ‰μœΌλ‘œ ν‘œμ‹œν•˜κ³  싢은데 이동할 λ•Œλ§ˆλ‹€ stateλ₯Ό μ–΄λ–»κ²Œ μ „λ‹¬ν•˜λ©΄ 쒋을 지 κ³ λ―Όν–ˆμŠ΅λ‹ˆλ‹€.

    β‡’ Reduxλ₯Ό μ‚¬μš©ν•΄ ν˜„μž¬ 메뉴 값을 μ „μ—­ μƒνƒœλ‘œ λ‚¨κΈ°λŠ” λ°©μ‹μœΌλ‘œ ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

  • μˆ™μ œκ΄€λ¦¬, κ²Œμ‹œνŒ νŽ˜μ΄μ§€μ—μ„œ λͺ©λ‘κ³Ό λ‚΄μš©μ„ 좜λ ₯ν•˜λŠ” κ²ƒκΉŒμ§€λŠ” κ΅¬ν˜„ν–ˆλŠ”λ°, κ²Œμ‹œκΈ€λ‘œ λ°”λ‘œ 이동할 수 μžˆλŠ” μ£Όμ†Œλ₯Ό λ§Œλ“€μ§€ λͺ»ν–ˆμŠ΅λ‹ˆλ‹€. Routerλ₯Ό μ‚¬μš©ν•΄μ„œ μ–΄λ–»κ²Œ κ΅¬ν˜„ν•˜λ©΄ 쒋을 지 κ³ λ―Όν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

    β‡’ μˆ™μ œκ΄€λ¦¬ νŽ˜μ΄μ§€μ˜ λͺ©λ‘ ν‘œμ‹œμ™€ λ‚΄μš© ν‘œμ‹œλ₯Ό ν•˜λ‚˜μ˜ λͺ¨λ“ˆλ‘œ κ΅¬ν˜„ν–ˆλ˜ 것을 두 개둜 λ‚˜λˆˆ 후에 Routerλ₯Ό μ‚¬μš©ν•΄μ„œ κ²Œμ‹œκΈ€ μ£Όμ†Œλ₯Ό κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€. λ‚΄μš© ν‘œμ‹œ κ΅¬ν˜„μ„ ν•  λ•Œ λͺ©λ‘μ—μ„œ μ„ νƒν•œ κΈ€μ˜ keyκ°’μ˜ λ‚΄μš© λΆ€λΆ„μœΌλ‘œ μ „λ‹¬ν•˜λŠ” 방법이 μ–΄λ €μ› λŠ”λ° μ£Όμ†Œμ— μžˆλŠ” key값을 λΆˆλŸ¬μ™€μ„œ λ‚΄μš©μ„ ν‘œμ‹œν•˜λŠ” λ°©λ²•μœΌλ‘œ ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

  • Firebaseλ₯Ό μ΄μš©ν•΄μ„œ 학생이 μˆ™μ œλ₯Ό μ œμΆœν–ˆμ„ λ•Œ μˆ™μ œ κΈ€μ˜ λ°μ΄ν„°λ² μ΄μŠ€ μ•ˆμ— subCollection으둜 μ œμΆœν•œ μˆ™μ œλ₯Ό μ •λ¦¬ν•˜λ €κ³  ν–ˆλŠ”λ°, v9μ—μ„œ subCollection에 λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό μΆ”κ°€ν•˜λŠ” 방법을 μ•Œμ§€ λͺ»ν•΄μ„œ κ³ λ―Όν–ˆμŠ΅λ‹ˆλ‹€. β‡’ κ΅¬κΈ€μ—μ„œ 아무리 검색해도 v8λ²„μ „μ˜ 방법 밖에 μ•ˆ λ‚˜μ™”λŠ”λ° μ˜μ™Έλ‘œ ν•΄κ²° 방법은 κ°„λ‹¨ν–ˆμŠ΅λ‹ˆλ‹€. v9μ—μ„œλŠ” collectionμ•ˆμ— μžˆλŠ” subcollection은 doc(collection(db, "collection", "ID", "subcollection")) ν˜•μ‹μœΌλ‘œ 뒀에 더 μΆ”κ°€ν•΄μ„œ μ“°λ©΄ λμŠ΅λ‹ˆλ‹€.