💭 Language9 VanillaJS 로 React 처럼 SPA 만들기 - useState 저번 글에서는 createElement 함수를 만들고, JSX 문법을 사용하여 가독성을 높여 DOM Element 를 생성하는 방식을 만들었다. 이번 글에서는 상태관리에 대해서 다룰 예정이다. 상태관리가 필요한 이유내가 생각하는 상태란 사용자가 앱을 사용하면서 하는 행동에 의해 변경되는 값이고, 그 행동에 의해 변경된 UI 를 제공하는 값 이라고 생각한다. 예를들어, 간단히 만든 Todo 앱에서 화면에 보여지는 Todo 목록은 상태라고 볼 수 있다.사용자가 Add 버튼을 누르면, input 에 입력된 값이 화면에 추가되어 보여지기를 기대하기 때문이다. 어떻게 변경된 UI 를 제공할 수 있을까? DOM Element 추가라면 appendChild 를 하고, 삭제라면 removeChild 를 하면 될까?.. 2023. 2. 13. VanillaJS 로 React 처럼 SPA 만들기 - createElement HTML 태그를 JavaScript 로 표현하기이전에 카카오페이지 클론 을 할 때, HTML 태그를 모두 작성하고, 그 태그를 JavaScript 로 옮겨 사용했던 적이 있다.React 를 맛만봤던 그 당시에는 JSX 처럼 HTML 태그 자체를 템플릿 리터럴(``) 으로 반환하여 사용하면 createElement, appendChild 등의 DOM API 노가다를 하지 않아도 되는 편리함에 취했다. 이전 Hello World 밥먹기 설거지하기 Add 이후 const app = document.getElementById('app');app.innerHTML = ` Hell.. 2023. 1. 11. [JavaScript] Intl.NumberFormat Intl.NumberFormat, Number.prototype.toLocaleString 자주 사용하는 Number with comma 만약 10000 이라면 10,000 으로 사용할 수 있도록 하는 util 함수를 만들어 사용하곤 했다. 이 함수를 만들기 위해서 Number.prototype.toLocaleString 을 썼었는데, 오늘 다시 number with comma 에 대해서 검색해보다 내장 객체인 Intl.NumberFormat 에 대해서 알게됐다. 알고보니 Number.prototype.toLocaleString 이 단순히 Intl.NumberFormat 을 호출하는 메서드라고 한다. 만약 number 가 큰 경우는 Performance 상으로 Intl.NumberType 을 쓰는게 더 .. 2022. 10. 11. [JavaScript] 숫자범위( 10의 309승? ), falsy 값 JavaScript 숫자 범위 + falsy Jamie 가 알고리즘을 푸시다가 Javascript 의 문법적 요소에 관하여 질문을 주셨다. 백준 문제를 푸시는데, 1 의 숫자가 늘어나면서 몇의 자리 숫자일 때 특정 숫자(n) 의 배수가 되는지를 찾는 문제였다. ex) n 이 3 일 때 111 은 3의 배수, 3자리 이므로 3, n 이 7 일 때 111111 은 7의 배수, 6자리 이므로 6 여기서 1의 숫자가 늘어나는 것을 multiple 이라는 변수로 설정하고, multiple * 10 + 1 을 무한반복으로 찾을 때 똑같은 로직인 것 같은데 하나는 시간초과, 하나는 틀렸습니다 가 나온다는 것이었다. // 틀렸습니다 while(true){ if (!(+multiple % num)) return ~~ }.. 2022. 7. 21. [JavaScript] 이터러블, iterator protocol, 유사 배열 객체 무엇이 배열로 형변환이 자유로운거지?평소 자바스크립트에서 "문자열" 을 다룰 때, Array.from() 메서드를 사용하거나 ... (스프레드 연산자) 를 사용해서 문자열 배열의 형변환을 자유롭게 합니다. 1. "ABCDEF" 에서 "D" 를 없애주세요const string = "ABCDEF";const strArr = string.split("");strArr.splice(strArr.indexOf("D"), 1);const newStr = strArr.join("");console.log(newStr); // "ABCEF" 2. 위에선 indexOf 를 사용했지만, 간단히 고차함수를 사용할 수도 있습니다.const string = "ABCDEF";const strArr = string.split(.. 2022. 4. 4. [JavaScript] 전역 변수 사용을 줄여보자, 근데 어디까지 전역변수야? 전역 변수 변수는 자신이 선언된 함수가 호출될 때 생성되는 함수 렉시컬 환경의 생명주기를 따라 소멸됩니다. 가비지 컬렉터(GC) 에 의해서 소멸되는 것인데요, 함수가 호출될 때 생성되는 함수 렉시컬 환경이 어느 곳이든지 참조를 하고 있지 않다면 GC 에 의해서 소멸됩니다. 그렇다면 전역 변수는 어떤 생명주기를 따르게 될까요? var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 가 되는데요, 그렇다면 전역 변수의 생명주기는 전역 객체의 생명주기와 일치할 것이고, 전역 객체의 생명주기는 코드를 실행하는 환경이 종료되야 종료되므로, 결국 끝까지 GC 에 의해 소멸되지 않게됩니다. 즉, 메모리 누수로 이어지게 됩니다. 전역 객체 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역객체 window 를 공유.. 2022. 2. 26. 이전 1 2 다음
