분류 전체보기

    useMemo 실습
    react

    useMemo 실습

    useMemo에서 Memo는 메모이제이션을 의미한다. 예를 들어 설명하자면, 알고리즘 해결 방법중 동적 계획법과 비슷하다고 생각하면 된다. 렌더링 시에 같은 값을 반복해서 계산해야될 때, 무의미한 연산 수를 줄이기 위한 훅이다. 메모리에 값을 저장해놓았다가 렌더링 시에 저장된 값을 비교하여 변화가 생겼을 때만 함수를 실행시켜주는 훅이다. // useMemo를 사용하지 않은 코드 import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const App = () => { const [ text, setText ] = useState('default'); const handleChange = e => { const { value }..

    [React] Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
    error

    [React] Uncaught TypeError: Invalid attempt to destructure non-iterable instance.

    const handleChange = e => { const [ value ] = e.target; // error!! 객체를 배열로 구조분해할당 시도함!! setText(value); } // 수정 const handleChange = e => { const { value } = e.target; // [] 를 {}로 바꿔줌 setText(value); } e.target은 객체이지만 배열의 형태로 구조분해할당 시도했기 때문에 에러가 생겼다. []를 {}로 바꿔주어 해결하였다. stackoverflow.com/questions/42141393/react-js-error-invalid-attempt-to-destructure-non-iterable-instance React JS Error: Invali..

    [React] Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    error

    [React] Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

    Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 문제 해결 방법: import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log('effect') }); return ( {count} click // ERROR!! ) } ReactDOM.render( , document.getElementById('root') ) 위의 ..

    ;(세미콜론)생략
    javascript

    ;(세미콜론)생략

    알고리즘 문제를 풀다가, 가독성이 좋게 String에 반복문으로 접근하는 방법을 찾고 싶었다. 카카오톡 javascript 오픈 채팅방에서 고수님들과 이야기를 통해 아래의 방법들을 알게 되었다. let test = 'test' // 방법 1 Array.from(test).forEach(() => { // console.log(c) }) // 방법 2 for(let c in test) { // console.log(c) } // 방법 3 [...test].forEach((c) => { // console.log(c) }) 방법 3가 제일 마음에 들어서 따라해봤는데, 실행되지않아서 당황했었다. 처음에는 고수님께서 실수로 잘못 알려주신게 아닐까 하고 생각했었다. (원숭이도 나무에서 떨어질 떄가 있으니까!!) ..

    hooks에서 useState가 const로 선언되는 이유
    react

    hooks에서 useState가 const로 선언되는 이유

    카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces ko.reactjs.org import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); // setCount를 통해 count 값이 바뀌는데 어째서 count인가? return ( You clicked {count} t..

    [후기] 자바스크립트는 왜 그 모양일까?
    독서

    [후기] 자바스크립트는 왜 그 모양일까?

    book.naver.com/bookdb/book_detail.nhn?bid=16358145 자바스크립트는 왜 그 모양일까? 자바스크립트를 대하는 방법과 자바스크립트로 생각하는 방법을 알려준다!이 책은 자바스크립트라는 언어 자체에 대해 모든 개발자가 알아야 할 것들을 다룬다. 특히 자바스크립트를 철저하게 book.naver.com 이전에 작성했던 코어 자바스크립트 책 후기처럼 카카오톡 오픈 채팅방에서 추천 받은 책이다. 제목이 자극적이어서 흥미로웠다. 또한 유명한 파일 형식인 json을 만든 더글러스 크락포드가 지은 책이다보니 기대를 많이 했었다. 그러나 내용은 실망스러웠다. 공부를 위한 지식을 담고 있다기 보다 더글러스 크락포드의 주관적인 코딩 철학이 담겨있는 책에 가깝다고 느꼈다. 예를 들어서 변수 이..

    [후기] 코어 자바스크립트
    독서

    [후기] 코어 자바스크립트

    book.naver.com/bookdb/book_detail.nhn?bid=15433261 코어 자바스크립트 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다!최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아닙 book.naver.com 프론트엔드 개발자가 되기 위해서는 javascript의 단순한 문법보다 더 깊은 지식을 가져야 할 것을 느꼈다. 그래서 여기저기 찾아다니다가 많은 고수들이 있는 카카오톡의 오픈 채팅방에서 책을 추천받았는데,, 그것이 바로 이것이다. 처음에 내가 원했던 것은 예를 들어 자바스크립트의 해석 과정, 브라우저에서의 동작 원리, 브라우저 엔진에 대한 내용 등의 컴퓨터 속에서 일어나는 메커니즘을 다루..

    javascript의 선택적 인수 위험
    javascript

    javascript의 선택적 인수 위험

    http://www.wirfs-brock.com/allen/posts/166 A JavaScript Optional Argument Hazard A JavaScript Optional Argument Hazard on February 24, 2011 My recent post on testing for negative 0 in JavaScript created a lot of interest. So today, I’m going to talk about another bit of JavaScript obscurity that was also inspired by a Twitter threa www.wirfs-brock.com let test_arr = ['1', '2', '3'] let result_ar..

티스토리툴바