"곡λΆ" ππππππ56 [TIL] Babelμ΄λ 무μμΈκ°? λ°λ²¨(Babel)μ΄λ? νλ‘ νΈμλ κ°λ°μ νλ μ¬λμ΄λΌλ©΄ ν λ²μ―€ λ°λ²¨μ λν΄μ λ€μ΄λ³Έ μ μ μμ κ²μ΄λ€. λ°λ²¨(Babel)μ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό λ³νν΄ μ£Όλ μ»΄νμΌλ¬μ΄λ€. μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό λ³ν? μ ν΄μΌνλλ°? λ°λ²¨μ JavaScript ES6 λ¬Έλ²μ΄ λ±μ₯νλ©΄μ λμ€κ² λμλ€. ES6 λ¬Έλ²μ΄ λ§ λ±μ₯νμ λλ λλΆλΆμ λΈλΌμ°μ κ° ES5 λ¬Έλ²λ§ μ§μνκ³ μμλ€. λλ¬Έμ κ°λ°μλ€μ΄ ES6 λ¬Έλ²μ μ¬μ©νλλΌλ μ΅μ λ¬Έλ²μ μ¬μ©νμ§ μλ λΈλΌμ°μ λΌλ©΄ λμμ΄ λΆκ°λ₯νλ€. κ·Έλμ ES6 λ¬Έλ²μ ES5 λ¬Έλ²μΌλ‘ λ³νν΄μ€ νΈλμ€νμΌλ¬κ° νμνλλ°, μ΄ κ²μ΄ λ°λ‘ λ°λ²¨(Babel)μ΄λ€. κ·Έ λλ¬Έμ λ°λ²¨μ΄ μ²μ λ±μ₯νμ λ λΉμ μ΄λ¦μ Babelμ΄ μλλΌ 6to5μλ€κ³ νλ€. νμ§λ§, μ΄μ λ ES6λ₯Ό ν¬ν¨νμ¬ ES7.. 2023. 6. 15. [νκ³ ] SSAFY 2νκΈ° λ§λ¬΄λ¦¬ νκ³ μΈνΌ 1νκΈ° νκ³ λ₯Ό μ΄κ² μκ·Έμ κ°μλ°... λ²μ¨ 2νκΈ°κ° λλκ³ νμ¬λ μλ£ μ΄μ ν λ¬ λμ μ§νλλ μ‘νμ΄ κΈ°κ°μ 보λ΄κ³ μλ€. μ΅κ·Ό μΈνΌμμ 10κΈ° λͺ¨μ§ μ νμ΄ μ§ν μ€μΈλ° μ΅κ·Ό λ©΄μ κΈ°κ°μ΄λΌκ³ λ€μλλ° λΈλ‘κ·Έ λ°©λ¬Έμ μλ₯Ό 보λ κ·Έλ° κ² κ°μλ€ γ γ γ μ΅λν νκ³ λ₯Ό μ‘°κΈμ©μ΄λΌλ λ¨κ²¨λ³΄λ €νμ§λ§ μ λ§ 2νκΈ°λ νλ‘μ νΈμ μΉμ¬ μ΄λ€κ° νλλ μ°μ§ λͺ»νλ κ² κ°λ€. μΈνΌμ κ½μ΄λΌ λΆλ¦¬μ°λ 2νκΈ°λ₯Ό λ§μΉ λμ μκ°μ μ λ§ ν λ¨μ΄λ‘λ ννν μκ° μμ κ² κ°λ€. λΏλ―? νλ¦? μ¬ν? κΈ°μ¨? μ λ§ μ¬λ¬κ°μ§ κ°μ μ΄ κ³΅μ‘΄νλ κ² κ°λ€. μ 2νκΈ°κ° μΈνΌμ κ½μ΄λΌ λΆλ¦¬μ°λμ§λ λͺΈμ λλ μ μμλ€. μ λ§ 5κ°μ κ° 3κ°μ νλ‘μ νΈλ₯Ό νλ€λ κ² κ·Έλ¦¬κ³ κ·Έκ±Έ λ κ°κ° λ€λ₯Έ νμλ€μ΄λ μ§ννλ€λ κ²μ μκ°λ³΄λ€ μ¬μ΄ μΌ.. 2023. 6. 13. [TIL] React-Hooks μμ보기 ν΄λμ€ν vs ν¨μν Reactλ μ²μμ ν΄λμ€ν μ»΄ν¬λνΈμ λ°©λ²λ§ μ‘΄μ¬νλ€. νμ§λ§, ν΄λμ€νμ μ΄λ ΅κ³ 볡μ‘νμ¬ ν¨μν μ»΄ν¬λνΈ λ°©λ²μ΄ μ겨λκ² λμλ€. ν¨μν μ»΄ν¬λνΈλ ν΄λμ€ν μ»΄ν¬λνΈλ³΄λ€ ν¨μ¬ κ°λ¨νκΈ°μ μ μ ν¨μν μ»΄ν¬λνΈμ μ¬μ© λΉμ¨μ΄ λμμ§κ² λμκ³ , μμ¦ νμ μμλ ν΄λμ€ν보λ€λ ν¨μν μ»΄ν¬λνΈλ₯Ό λ§μ΄ μ¬μ©νλ μΆμΈλΌκ³ νλ€. ν΄λμ€ν μ»΄ν¬λνΈ import { Component } from 'react'; class Hello extends Component { render() { return ν΄λμ€ν μ»΄ν¬λνΈ } } export default Hello ν¨μν μ»΄ν¬λνΈ const Hello = () => ν¨μν μ»΄ν¬λνΈ export default Hello μ΄ ν¨μν μ»΄ν¬λνΈλ νμ΄ν ν¨.. 2023. 6. 9. [TIL] CSS / Sass / SCSS μ°¨μ΄μ μμ보기 What is CSS ? CSSλ Cascading Style Sheetsμ μ½μ΄μ΄κ³ , μ΄λ μΉνμ΄μ§λ₯Ό κΎΈλ―Έλ €κ³ μμ±νλ μ½λμ΄λ€. μ΄λ μ λ μΉ κ°λ°μ 곡λΆν μ¬λμ΄λΌλ©΄ νλ‘ νΈμλ, λ°±μλ κ°λ°μλ₯Ό λ§λ‘ νκ³ CSSλΌλ κ²μ ννλ€ λ€μ΄λ΄€μ κ²μ΄λ€. 곡μλ¬Έμμ μνλ©΄ CSSλ νλ‘κ·Έλλ° μΈμ΄κ° μλκ³ , Stylesheet μΈμ΄λΌκ³ νλ€. CSSλ₯Ό ν΅ν΄ HTML λ¬Έμμ μλ μμλ€μ μ νμ μΌλ‘ μ€νμΌμ μ μ©μν¬ μ μλ€. .list { width: 100px; float: left; } li { color: red; background: url("./image.jpg"); } li:last-child { margin-right: -10px; } CSSλ λ무 μ΅μν΄ Sass μ SCSSλ 무μμΌκΉ ?? S.. 2023. 6. 3. [TIL] REST-APIμ GraphQL-APIμ μ°¨μ΄μ GraphQLμ΄λ? GraphQLμ μ΅κ·Ό κ°λ°μλ€ μ¬μ΄μμ λΉ λ₯Έ μλλ‘ μΈκΈ°κ° μμΉ μ€μ΄λ€. μ΄ GraphQLμ 2012λ μ νμ΄μ€λΆμμ λ§λ 쿼리 μΈμ΄μ΄λ€. SQLμ QLμ΄ Query Languageμ μλ―Ένλλ° SQLμ λ°μ΄ν°λ² μ΄μ€ μμ€ν μ μ μ₯λ λ°μ΄ν°λ₯Ό ν¨μ¨μ μΌλ‘ κ°μ Έμ€λ κ²μ΄ λͺ©μ μ΄λΌλ©΄, μ΄ GraphQLμ μΉ ν΄λΌμ΄μΈνΈκ° μλ²λ‘λΆν° λ°μ΄ν°λ₯Ό ν¨μ¨μ μΌλ‘ κ°μ Έμ€λ κ²μ λͺ©μ μΌλ‘ λ§λ 쿼리 μΈμ΄μΈ κ²μ΄λ€. μ΄ GraphQLμ νμ¬ Facebook, Airbnb, Github λ±μ μ λͺ ν μ¬μ΄νΈμμ μ¬μ© μ€μΈ ν΅μ λ°©λ²μ΄λΌκ³ νλ€. REST-APIλ₯Ό λκ³ μ?? κ·Έλ λ€λ©΄ μ¬λλ€μ΄ ν΅μμ μΌλ‘ λ§μ΄λ€ μ¬μ©νκ³ μλ REST-APIλ₯Ό λκ³ μ GraphQLμ μ¬μ©νλ κ²μΈμ§ κΆκΈνλ€. REST-APIμ G.. 2023. 2. 28. [TIL] νλ‘μ νΈ μμ μ git λͺ λ Ήμ΄ μ 리νκΈ° μΈνΌ 2νκΈ°μ λ€μ΄μ¨ νμ¬ μ²« νλ‘μ νΈ 1μ£Όμ°¨λ₯Ό μ§ν μ€μ΄λ€. μ°λ¦¬νμ νλ‘ νΈμλ κ°λ°μ 3λͺ , λ°±μλ κ°λ°μ 3λͺ μ΄λ κ² μ΄ 6μΈμΌλ‘ ꡬμ±λμ΄ μλ€. νμ¬λ νλ‘μ νΈ κΈ°νλ¨κ³μ μλλ° κΈ°ννλ κ² μ € 머리μνκ³ μ΄λ €μ΄ κ² κ°λ€... νμνκ³ μ견 μ‘°μ¨ν΄κ°λ€λ³΄λ©΄ ν루 λλ±..!! μ’μμΌλ©΄ κ°λ° λ¨κ³μ μ μ΄λ€ν λ° κ·Έ μ μ νμ μ μν΄ μ¬μ©ν gitμ λͺ λ Ήμ΄λ€μ μ 리ν΄λ³΄λ©΄ μ’μ κ² κ°μ μλ‘μ½λ‘¬ ν¬μ€νΈλ₯Ό μ¬λ¦¬κ² λμλ€. gitμ΄λ? gitμ μννΈμ¨μ΄λ₯Ό κ°λ°ν λ μμ€μ½λλ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬ν μ μκ² ν΄μ£Όλ νμ κ΄λ¦¬ λꡬ μ€ νλμ΄λ€. μ΄ gitμ μ¬μ©νλ©΄ κ°μ μ μ₯μμμ μ¬λΏμ΄ λμμ μμ νλ λ³λ ¬ κ°λ°μ΄ κ°λ₯νλ€. Branch(λΈλμΉ) gitμ μ¬μ©νλ€ λ³΄λ©΄ λΈλμΉ(Branch)λΌλ κ²μ΄ μλλ° μ΄λ .. 2023. 1. 14. μ΄μ 1 2 3 4 Β·Β·Β· 10 λ€μ