"곡λΆ" ππππππ/πΉππππ‘πππ14 [TIL] Babelμ΄λ 무μμΈκ°? λ°λ²¨(Babel)μ΄λ? νλ‘ νΈμλ κ°λ°μ νλ μ¬λμ΄λΌλ©΄ ν λ²μ―€ λ°λ²¨μ λν΄μ λ€μ΄λ³Έ μ μ μμ κ²μ΄λ€. λ°λ²¨(Babel)μ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό λ³νν΄ μ£Όλ μ»΄νμΌλ¬μ΄λ€. μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό λ³ν? μ ν΄μΌνλλ°? λ°λ²¨μ JavaScript ES6 λ¬Έλ²μ΄ λ±μ₯νλ©΄μ λμ€κ² λμλ€. ES6 λ¬Έλ²μ΄ λ§ λ±μ₯νμ λλ λλΆλΆμ λΈλΌμ°μ κ° ES5 λ¬Έλ²λ§ μ§μνκ³ μμλ€. λλ¬Έμ κ°λ°μλ€μ΄ ES6 λ¬Έλ²μ μ¬μ©νλλΌλ μ΅μ λ¬Έλ²μ μ¬μ©νμ§ μλ λΈλΌμ°μ λΌλ©΄ λμμ΄ λΆκ°λ₯νλ€. κ·Έλμ ES6 λ¬Έλ²μ ES5 λ¬Έλ²μΌλ‘ λ³νν΄μ€ νΈλμ€νμΌλ¬κ° νμνλλ°, μ΄ κ²μ΄ λ°λ‘ λ°λ²¨(Babel)μ΄λ€. κ·Έ λλ¬Έμ λ°λ²¨μ΄ μ²μ λ±μ₯νμ λ λΉμ μ΄λ¦μ Babelμ΄ μλλΌ 6to5μλ€κ³ νλ€. νμ§λ§, μ΄μ λ ES6λ₯Ό ν¬ν¨νμ¬ ES7.. 2023. 6. 15. [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. UIμ UXλ? κ·Έλ¦¬κ³ UIμ UXμ κ΄κ³ UI (User Interface) μ¬μ μ μλ―Έλ‘ μ§μν΄λ³΄λ©΄ User: μ¬μ©μ Interface: μΈν°νμ΄μ€ (μνΈμμ©) μ μλ―Ένλ€. μ΄λ μ¬λλ€μ΄ μ»΄ν¨ν°μ μνΈ μμ©νλ μμ€ν μ μλ―Ένλ€. λ³΄ν΅ μ¬μ©μκ° μ ν / μλΉμ€λ₯Ό μ¬μ©ν λ κ°μ₯ λ¨Όμ μ νκ² λλ λΆλΆμ΄λ€. νλ©΄ μμ κ·Έλν½ μμ μΈμλ, λ°μν λ±μ κΈ°μ μ μΈ μμλ λͺ¨λ UIμ ν¬ν¨λλ€. ν€λ³΄λ, λ§μ°μ€ λ±μ 물리μ μμ λν μ»΄ν¨ν°μ μνΈ μμ©νκΈ° μν μμ€ν μΌλ‘ UIλΌκ³ λ³Ό μ μλ€. νλμ¬νμ λ€μ΄μλ λͺ¨λ°μΌ λλ°μ΄μ€μμ κ·Έλν½ UIμΈ GUIκ° μ€μν΄μ§κ² λμλ€. κ·Έλ λ€λ©΄ UXλ 무μμΌκΉ? UX (User eXperience) μ¬μ μ μλ―Έλ‘ μ§μν΄λ³΄λ©΄ User: μ¬μ©μ eXperience: κ²½ν μ μλ―Ένλ€. μ΄λ μ¬μ©μκ° μ΄λ€ μμ€ν .. 2022. 6. 27. Github Pages λ°°ν¬ μ favicon μ μ© μλλ μ΄μ μ΅κ·Ό Reactλ‘ κ°λ¨νκ² μ νλΈ ν΄λ‘ νλ‘μ νΈλ₯Ό ν΄λ³΄μλ€. Github Pagesλ₯Ό ν΅ν΄ νλ‘μ νΈ λ°°ν¬λ₯Ό νλλ° faviconμ΄ μ μ©λμ§ μλ μ΄μλ₯Ό κ²ͺμλ€. μ΄ κΈμ ν΅ν΄ ν΄λΉ μ΄μλ₯Ό ν΄κ²°ν λ°©λ²μ μ μ΄λ³΄λ € νλ€. μΌλ¨ μ²μμ λλ public λλ ν 리 μμ favicon.icoλ₯Ό λ£μ΄λμλ€. index.html νμΌμ link νκ·Έλ κ³ μ³λ³΄κ³ , κ°λ favicon μ μ©μ λ¬Έμ κ° μμΌλ©΄ μΏ ν€ λ¬Έμ μΌ λκ° μμ΄μ μΏ ν€λ₯Ό μμ νκ³ λ€μ ν΄λ΄€μ§λ§ μ¬μ ν κ³ μ³μ§μ§ μμλ€... κ·Έλ¬λ€κ° stackoverflowλ₯Ό ν΅ν΄ ν΄κ²°λ°©λ²μ μ°Ύκ² λμλ€. Favicon with GitHub Pages I'm hosting a few sites with GitHub Pages (User and Project Pages), .. 2022. 4. 12. μ΄μ 1 2 3 λ€μ