Frontend/React
ν νμ¬μ κΈ°μ μΈν°λ·°μμ 리μ‘νΈμ keyμ λν μ§λ¬Έμ λ°μλ€. ν΄λΉ μ§λ¬Έμ λν λλ΅μ νλ κ³Όμ μμ κ·Έλμμ νλ‘μ νΈλ₯Ό μ§ννλ©΄μ 리μ€νΈμ κ° νλͺ©μ keyλ₯Ό ν λΉνλ κ²μ λ무 λΉμ°μν κ² κ°λ€λ μκ°μ΄ λ€μ΄ μ΄μ λν΄ μμλ³΄λ €κ³ νλ€. λ°°μ΄μμ λ°μ΄ν° λ λλ§ const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..
Frontend/React
π₯ λ°μν λ¬Έμ ν
μ€νΈλ₯Ό μ
λ ₯νκ³ μν°(Enter) ν€λ₯Ό λλ₯΄λ©΄ λͺ©λ‘μ μλ‘κ² μΆκ°λκ³ input μ°½μ λΉμμ§λλ‘ κ΅¬ννλλ° μ μ§ λͺ¨λ₯΄κ² ν¨μκ° λ λ² μ€νλλ©΄μ κΈ°μ‘΄ ν
μ€νΈμ λ§μ§λ§ κΈμκ° λͺ©λ‘μ μΆκ°λλ λ¬Έμ κ° λ°μνλ€βοΈ μμΈ λΆμ κ²μν΄λ³Έ κ²°κ³Ό μ΄λ¬ν λ¬Έμ λ ν¬λ‘¬ λΈλΌμ°μ μμ νκΈμ μ¬μ©νλ κ²½μ°μλ§ λ¬Έμ κ° λ°μνλ€. (μμ΄λ‘ μ
λ ₯νλ©΄ ν€ μ΄λ²€νΈκ° μ€λ³΅μΌλ‘ λ°μνμ§ β) ꡬ체μ μΌλ‘ μ GIFλ₯Ό 보면 νκΈ μ
λ ₯ μ μ
λ ₯ μ€μΈ κΈμ μλ κ²μ λ°μ€μ΄ μκΈ°λλ° ν΄λΉ λ°μ€μ΄ μλ μν©μμ ν€ μ΄λ²€νΈκ° λ°μνλ©΄ ν¨μκ° λ λ² μ€νλλ λ¬Έμ κ° λ°μνλ€. νκΈμ κ²½μ° μμκ³Ό λͺ¨μμ μ‘°ν©μΌλ‘ λ§λ€μ΄μ§λ μ‘°ν© λ¬Έμμ΄κΈ° λλ¬Έμ κΈμκ° μ‘°ν© μ€μΈμ§ μ‘°ν©μ΄ λλ μνμΈμ§λ₯Ό μ μ μμ΄ μκΈ°λ λ¬Έμ μ΄λ€. π§― ν΄κ²° λ°©λ² ..
Frontend/JavaScript
무ν μ€ν¬λ‘€(Infinite Scroll)μ΄λ? μ¬μ©μκ° νμ΄μ§ νλ¨μ λλ¬νμ λ, μ½ν
μΈ κ° κ³μ λ‘λλλ μ¬μ©μ κ²½ν(UX) λ°©μμ΄λ€. ν νμ΄μ§ μλλ‘ μ€ν¬λ‘€ νλ©΄ λμμ΄ μλ‘μ΄ νλ©΄μ 보μ¬μ£Όκ² λκ³ μ΄λ‘ μΈν΄ λ§μ μμ μ½ν
μΈ λ₯Ό μ€ν¬λ‘€ ν΄μ λ³Ό μ μλ€. νμ΄μ§λ€μ΄μ
μ΄ μλ 무ν μ€ν¬λ‘€λ‘ ꡬννλ €λ μ΄μ β μν λͺ©λ‘μμ μνμ 보μ¬μ£Όκ³ μ ν λ νμ΄μ§λ€μ΄μ
, 무ν μ€ν¬λ‘€ μ€ λ¬΄μμ΄ μ¬μ©μ κ²½νμ λμ± μ’κ² ν μ μμμ§ κ³ λ―Όν λμ λͺ¨λ°μΌ νκ²½μ κ³ λ €ν΄μ 무ν μ€ν¬λ‘€μ μ¬μ©νκΈ°λ‘ νλ€.(μ°¨νμ νλ‘μ νΈλ₯Ό λ°μνμΌλ‘ 리ν©ν°λ§ ν κ³νππ») λν, λ€μ μνμ 보기 μν μ¬μ©μμ ν΄λ¦μ μ΅μννκ³ λ μ½κ² λ€μν μνμ λ³Ό μ μμ κ²μ΄λΌκ³ νλ¨νλ€. ꡬννλ κ³Όμ 무ν μ€ν¬λ‘€μ ꡬννλ λ°©λ²μ μ€ν¬..
Frontend/React
π₯ λ°μν μλ¬ Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. μλ¬λ₯Ό λ²μνμλ©΄ immer μ μμλ μλ‘μ΄ κ°μ 리ν΄νκ±°λ κΈ°μ‘΄ μνλ₯Ό μμ νκ±°λ λ μ€ νλλ§ ν΄μΌλλ€λ κ²μ΄λ€. μμΈμ΄ λλ μ½λ λΆμ immer λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ λΆλ³μ± μνμ νΈλ¦¬λ₯Ό μμ½κ² λ³κ²½νλ μ€ μμ κ°μ μλ¬κ° λ°μνλ€. updatePerson((person) => person.mentors.push({ name, title })); νμ΄ν ν¨μλ μ€κ΄νΈλ₯Ό μ¨μ£Όμ§ μμΌλ©΄ μλμΌλ‘ return ν€μλκ° λΆλλ€. μ¦, μμ μ½λλ κΈ°μ‘΄..
Frontend/JavaScript
μΈν°μ
ν°(Interceptors)λ? then λλ catchλ‘ μ²λ¦¬λκΈ° μ μ μμ²κ³Ό μλ΅μ κ°λ‘μ± μ μλ€. Axios μΈν°μ
ν°λ₯Ό μ μ©νλ €λ μ΄μ β ν μ΄ νλ‘μ νΈλ₯Ό μ§ννλ©΄μ μλ²μ ν ν° μΈμ¦μ νμλ‘ νλ API μμ²μ ν λλ§λ€ HTTP Authorization μμ² ν€λμ ν ν°μ λ£μ΄μ€μΌνκ³ 401(Unauthorized) μλ¬κ° μλ²λ‘λΆν° λ€μ΄μ€λ©΄ ν ν°μ κ°±μ ν΄μ€ ν μ¬μμ²μ 보λ΄λ κ³Όμ μ ν κ³³μμ λͺ¨λ μ²λ¦¬νμ¬ μ€λ³΅ μ½λλ₯Ό μ κ±°νκ³ μ μ§λ³΄μμ±μ ν₯μμν€κΈ° μν΄ Axios μΈν°μ
ν°λ₯Ό μ μ©νκΈ°λ‘ νλ€. μ¬μ©μ μ§μ configλ‘ μλ‘μ΄ Axios μΈμ€ν΄μ€λ₯Ό μμ±νμ¬ μ¬μ©νλ λμ± νΈλ¦¬νλ€. (baseURL, timeout μ€μ ) μ μ©νλ κ³Όμ 1) Axios μΈμ€ν΄μ€ μμ± const instanc..
Frontend/JavaScript
μ κ· ννμ(Regular Expression)μ λ¬Έμμ΄μμ νΉμ λ¬Έμ μ‘°ν©μ μ°ΎκΈ° μν ν¨ν΄μ΄λ€. RegExp RegExp μμ±μλ ν¨ν΄μ μ¬μ©ν΄ ν
μ€νΈλ₯Ό νλ³ν λ μ¬μ©νλ€. 리ν°λ΄ νκΈ°λ²μ 맀κ°λ³μλ λ λΉκΈμΌλ‘ κ°μΈμΌ νλ©° λ°μ΄νλ₯Ό μ¬μ©νμ§ μλλ€. μμ±μ ν¨μμ 맀κ°λ³μλ λΉκΈμΌλ‘ κ°μΈμ§ μμΌλ λ°μ΄νλ₯Ό μ¬μ©νλ€. // μ κ· ννμ μμ±νκΈ° /ab/g new RegExp(/ab/, 'g') // 리ν°λ΄ new RegExp('ab', 'g') // μμ±μ λμ μΌλ‘ μ κ· ννμ μμ±νκΈ° const λ³μ = 'JS'; const regex = new RegExp(`${λ³μ}`, 'g'); console.log(regex); // /JS/g π§ μμ©νκΈ° match() λ©μλλ λ¬Έμμ΄μ΄ μ κ·μκ³Ό 맀μΉλλ..
Frontend/JavaScript
ν(Queue)λ? νλ λ°μ΄ν°λ₯Ό μΌμμ μΌλ‘ μ μ₯νλ μλ£κ΅¬μ‘° μ€ νλλ‘, λ¨Όμ μ
λ ₯λ λ°μ΄ν°κ° λ¨Όμ μΆλ ₯λλ "μ μ
μ μΆ(FIFO: First-In-First-Out)" μμΉμ λ°λ¦
λλ€. ν(Queue)μ ꡬν λ°©λ² 2κ°μ§ νλ λ°°μ΄(Array)μ΄λ μ°κ²° 리μ€νΈ(Linked List)λ₯Ό μ¬μ©νμ¬ κ΅¬νν μ μμ΅λλ€. 1οΈβ£ λ°°μ΄ λ°°μ΄μ μ¬μ©ν κ²½μ°, ν¬κΈ°κ° κ³ μ λμ΄ μμ΄μ λ°μ΄ν°μ μΆκ° λ° μ κ±°μ μ νμ΄ μμ μ μμ§λ§, μ°μ° μλκ° λΉ λ¦
λλ€. 2οΈβ£ μ°κ²° 리μ€νΈ μ°κ²° 리μ€νΈλ₯Ό μ¬μ©ν κ²½μ°, ν¬κΈ°μ μ νμ΄ μμ΄μ λ°μ΄ν°λ₯Ό μ λμ μΌλ‘ μΆκ° λ° μ κ±°ν μ μμ§λ§, μ°μ° μλκ° λ립λλ€. π§ λ°°μ΄λ‘ ν(Queue)λ₯Ό ꡬνν΄λ λμ§λ§ κ΅³μ΄ ? μ°κ²° 리μ€νΈλ‘ ꡬνν΄μΌ νλ μ΄μ JavaScriptμμ λ°°μ΄μ μ¬μ©..
Frontend/React
π¨ μ€λ₯ λ°μ AxiosError message: 'Network Error' const userInfoPatch = async (userInfo) => { try { // url: μλ² μ£Όμ, id: μ¬μ©μ μμ΄λ, userInfo: μ¬μ©μ μ 보 κ°μ²΄ await axios.patch(`${url}/member/${id}`, userInfo).then(() => { alert('μμ μ΄ μλ£λμμ΅λλ€.'); }); } catch (error) { console.log(error); } }; ν΄λΌμ΄μΈνΈ μ½λμμλ λ³λ€λ₯Έ λ¬Έμ κ° μμ΄ λ³΄μκ³ , μλ² μΈ‘μμ λΆλͺ
μ κ·Όμ νμ©νλ λ©μλλ‘ PATCHμ λν΄ λ°λ‘ μ²λ¦¬λ₯Ό ν΄μ£Όμλ€. νλ‘μ νΈλ₯Ό μ§ννλ©΄μ GET, POST, DELETE λ± μ¬λ¬ λ°©μμΌλ‘ μλ²μ μμ²ν ..