Twitter νλ‘μ νΈλ Web Front-end μ κΈ°μ μ μ΅νκΈ° μν΄ μ§νν νλ‘μ νΈμ
λλ€.
Twitter(νΈμν°) μμ μ μκΆ λ¬Έμ κ° μκΈΈ μ μμ νλλ‘ νκ² μ΅λλ€.
κ° ν΄λλ³λ‘ README.md νμΌμ΄ μ‘΄μ¬ν©λλ€.
Documentation
Preview
λ‘κ·ΈμΈ νμ΄μ§
κ°μ νμ΄μ§
μ½ν μΈ νμ΄μ§
νλ‘ν νμ΄μ§
λ°μν
ν΄λ ꡬ쑰
Twitter__source
βββ client/
β βββ build/
β βββ config/
β βββ src/
β βββ static/
β βββ index.html
β
βββ server/
βββ route/
βββ secret/
βββ service/
βββ app.js
κΈ°λ₯
- νμκ°μ
- λ‘κ·ΈμΈ
- νλ‘μ°, μΈνλ‘μ°
- μ΄λ―Έμ§ μ λ‘λ
- νΈμ μμ λ° μμ
- μκΈ°μκ° μμ± λ° μμ
- νμ κ²μ
- λ°μν μΉ
κ°λ°νκ²½
Vue.js
μ»΄ν¬λνΈ κΈ°λ° μΉ νλ μμν¬
Vuex
Vue.js μ μνκ΄λ¦¬λ₯Ό μν λΌμ΄λΈλ¬λ¦¬
express.js
Node.js μμμ λμνλ μΉ κ°λ° νλ μμν¬
axios.js
λΉλκΈ° ν΅μ μ μν λͺ¨λ
knex.js
Node.js SQL λΉλ λ° μ§μ κΈ°λ₯μ μ 곡νλ λΌμ΄λΈλ¬λ¦¬
multer
νμΌ μ λ‘λλ₯Ό μν΄ μ¬μ©λλ multipart/form-data λ₯Ό λ€λ£¨κΈ° μν node.js μ λ―Έλ€μ¨μ΄
AWS: EC2
μλ§μ‘΄ μΉμλΉμ€μ EC2λ₯Ό μ΄μ©ν΄ νΈμ€ν
AWS: RDS
postgreSQL μ μ¬μ©
CSS - BEM λ°©λ²λ‘
κ°λ°κΈ°
μ΄ νλ‘μ νΈλ₯Ό μ§νν μ΄μ λ μλ DB, μλ²μμ ν΅μ λ²κ³Ό Vue.js λ₯Ό μ΅νκΈ° μν΄ μμμ νλ€.
μ¬μ€ μ΄λ νμ¬μ μ
μ¬κ³Όμ κ° μμλλ° μκ°λ³΄λ€ λ΄ μμ μ΄ κΈ°λ³Έμ λ μμ§ λͺ»νλ€λ μ¬μ€μ 좩격μ λ°μ μ§ννλ€λκ²μ΄ λ§λ κ² κ°λ€. κ²°κ΅ κ³Όμ λ₯Ό μμ±νμ§ λͺ»νμκ³ λΉμ°ν μ
μ¬λ₯Ό λͺ»νμλ€.
κ·Έλμ μ΄ μ°Έμ λνκ΅ ν¬νΈν΄λ¦¬μ€μ©μΌλ‘ λ§λ€μ΄λ³΄μ ν΄μ κ°λ¨νκ² λ§λ€μ΄λ³΄μλ€. μ΄ κΈ°κ°μ μ½ 1λ¬ λ°μ λ κ±Έλ¦°κ²κ°λ€. μ€κ°μ€κ° κ°μΈμ μΈ λ§μ μΌλ€μ΄ μμ΄μ μ’ λ κ±Έλ¦°κ² κ°μλ€. λ€νν λͺ©νμλ 9μ μμ±μ΄λΌλ κΈ°κ°μ μ§μΌλλ€.
μ²μμλ κ°λ¨ν λΉλκΈ°ν΅μ μμ£Όλ‘ κΈλ§ μ¬λ¦¬κ² νμλ€κ° μ¬μ§λ μ¬λ¦¬κ³ μΆμ΄μ‘κ³ μμ¬μ΄ μ μ μ»€μ Έ μ€μΌμΌλ μλμ μΌλ‘ λ©λ¬μ 컀μ‘λ€. Atomic Design μ λ°νμΌλ‘ μ§ννμλ€κ° 40% μ―€ μμ λ μ μλ§λ κ² κ°μ Vallistaλμ spa ꡬ쑰λ₯Ό μ΄μ©νλ€. μ μλ§λ€κ³ μκ°ν μ΄μ λ λ΄κ° μμ§ atomic designμ λν μ΄ν΄κ° λΆμ‘±νμ μλ μμ§λ§ μ»΄ν¬λνΈκ° λμ΄λ¨μ λ°λΌ κ΄λ¦¬κ° μ΄λ €μ μ λΏλλ¬ λΆλ¦¬λλ μ»΄ν¬λνΈλ€μ΄ λ무 λ§μ κ°μνκ² λμλ€.
μ΄ νλ‘μ νΈλ₯Ό μ§ννλ©° λλ λ°λ‘λ μ‘°κ·Έλ§ν μΉ μ¬μ΄νΈλ κ΅μ₯ν λ§μ λ Έλ ₯μ΄ λ€μ΄κ°λ€λκ²μ λκΌλ€. λ΄ μ κ³΅μ΄ μλμμ λλ μ½κ² μκ°νλ κ²λ€μ΄ κΈ°λ₯ νλνλ ꡬννλ©΄μ 'κ°λ¨ν κΈ°λ₯μ μ λ μλ€' λΌλκ²μ΄μλ€. μμΌλ‘ 'κ°λ¨ν κΈ°λ₯' μ΄λΌλ λ§μ λΉΌμΌν λ― μΆλ€. λν μ€κ³κ° κ΅μ₯ν μ€μνλ€λκ²μ΄ μκ°λ½κ³Ό λ©νλ‘μ¨ λκ»΄μ‘λ€. μ μ€ν μ€κ³λ κ°λ°μ μ¦κ²κ² νλ κ² κ°λ€. κ²½νμ΄ λ§μ΄ μμλ ν°λΌ μ€κ³μ λν΄ μκ°νμ§ λͺ»νκ³ μμλλ° κ°λ°μ μ§ννλ©° λ§μ λͺ¨μ(?) λ€μ΄ μκ²Όλ€. λ¬Όλ‘ λ§μ μ΄μ κ° μκ² μ§λ§, κ·Έμ€ νλλ μλͺ»λ μ€κ³λ‘ μΈν λͺ¨μλ€μ΄μλ€. μ€κ³λ§ μ λλ‘ λμ΄λ λ€μ΄κ°λ λΉμ©μ΄ μ€μ΄λ λ€λ κ²μ΄μλ€.
리ν©ν λ§λ κ΅μ₯ν μ€μνλ€. κ°λ°μ 70% μ λ νλ μκ°μ μ½λμλν μμ κ°μ΄ μ¬λΌμ‘λ€. μλ§λ κΉλνμ§ λͺ»ν μ½λκ° λ¬Έμ μλ κ² κ°λ€. μΌμ’ μ μ§νΈλΌκΈ°λ§λ₯ λμκ΄μ Clean Code λΌλ μ± μ μ νκ² λμλ€. (κ΄κ³ μλλλ€ γ ) λμ λ¬Έμ μ€ νλλ 'μΌλ¨ μ§κ³ μ΄λ°κ° 리ν©ν λ§νμ' μλλ° μ΄ μ± μμλ 'λ₯΄λΈλμ λ²μΉ(leblanc`s raw) : λμ€μ μ€μ§ μλλ€' λ₯Ό κ°μ‘°νλ€. λ μΈμκΉμλ κ΅¬λ¬Έμ΄ 'μμ κ±° νλ λ²μ 물리μ μΈ μ§μμ μλ €μ£Όκ³ λͺ¨λ κ²μ μλ €μ£Όμ΄λ μ²μνλ©΄ 100% λμ΄μ§λ€' μλ€. μ΄ κ΅¬λ¬Έμ 보λ λ΄κ° μ€μ λ‘ νλ‘μ νΈλ₯Ό ν΄λ³Έ κ²½νμ΄ μμ΄ λ§μ΄ λμ΄μ‘λκ² κ°λ€. μ§κΈλ λ§μ΄ λμ΄μ§κ³ μμ§λ§ μ μΌμ΄μμ κ°λ€. λ§μ μ°μ΅μ ν΅ν΄ μ€λλ³΄λ€ μ’ λ λμ λ΄μΌμ΄ λμ΄μΌκ² λ€.
λΆμ‘±νμ
μ€κ³
κ°μ₯ ν¬κ² λκΌλ λΆλΆμ€ νλλ€. μμ λ§νλ―μ΄ μ μ€κ³λ νλ‘μ νΈλ κ°λ°νκΈ°κ° νκ²° μ¬μμ§λ€. μμΌλ‘ νλ‘μ νΈλ₯Ό μ§νν λ λͺ¨λ κ²½μ°λ₯Ό μ΄νΌκ³ μμμ ν΄μΌν λ― νλ€.
리ν©ν λ§
λ³μμ μ΄λ¦μ΄λ ν¨μμ μ΄λ¦ λ± λ€μ΄λ°μ μ§μ€νκ³ ν¨μλ κ·Έ κΈ°λ₯λ§ μνμ μ νκ²λ ꡬνν΄μΌκ² λ€. λν λ°λ³΅λλ μ½λλ λ€μνλ² μκ°ν΄λ³Έλ€.
git
μ΄ νλ‘μ νΈκ° λλκ³ λλ©΄ git μλν΄μ μ‘°κΈ λ 곡λΆνλ € νλ€. μ§κΈμ μμ£Ό κΈ°λ³Έμ μΈ μμ λ°μ νμ§λͺ»νλλ° λμ€μ νμ μ μν΄ μ΅νλλ €νλ€.
μκ³ λ¦¬μ¦
νλ‘μ νΈ μ§ν λμ€μ κΈ°λ₯ νλνλλΆν° μ λΆ μκ³ λ¦¬μ¦μ΄ λ€μ΄κ°λλ° μκ°μ νμ κΈΈλ¬μ£Όλ μ’μ 곡λΆμΌ κ² κ°λ€
μ΄λ―Έμ§νμΌ κ΄λ¦¬
μ΄λ―Έμ§ νμΌ κ΄λ¦¬λ₯Ό μ μ²λ¦¬λ₯Ό νμ§ λͺ»ν κ² κ°λ€. λ€μ νλ‘μ νΈμλ νμΌμ²λ¦¬λ₯Ό μ’ λ μ€μ μ μΌλ‘ λμ΄ μ§ν ν΄μΌκ² λ€.
λ§λ¬΄λ¦¬μ§μΌλ©°
λλ¦ νΌμ νκΈ°μλ μ€κ·λͺ¨κΉμ§ μλκ³ μ ~ μ€ μ¬μ΄μΈ νλ‘μ νΈμλ€. μ€κ°μ€κ° νμ
λ μμκ³ κ°μΈ μ¬μ λ μ‘΄μ¬ν΄ μ§μ°λ λλμ΄ μμ§λ§ μ λ§λ¬΄λ¦¬ μ§κ² λμ΄ λΏλ―νλ€. κΈ°λμλ λ€λ₯΄κ² μΆκ°νμ§ λͺ»ν κΈ°λ₯λ€λ μμ§λ§ λ€μμ κΈ°μ½νλ©° λ§λ¬΄λ¦¬ μ§μλ€.
μ’μ κ²½νμ΄μκ³ κΈ°μ μ μΈ λ©΄λ³΄λ€λ λκΈ°μ μ μ λ ₯μ μΈμμ΄ λ μ»Έλ€. μ΄μ¨λ μ€λλ³΄λ€ λμ λ΄μΌμ μ€λΉνλ 첫λ²μ§Έ λμ½μΈ λ― νλ€. λΆμ‘±νμ§λ§ μ±μ₯νλ λͺ¨μ΅μ μ§μΌλ΄μ£Όλ©΄ κ°μ¬νκ² μ΅λλ€. (κΎΈλ²
)