React 를 사용하면서 state 를 변경 했지만, 리액트가 제대로 감지하지 못하여 변화가 일어나지 않아 자료를 찾아보다가 🥺 리액트는 불변성을 지켜야 한다. 위와 같은 말을 많이 접하게 되었습니다. 리액트를 처음 배울 때 몇 번 들어봤던 말인데 그 당시 제대로 잡고 갔어야하는데 다시 같은 실수를 방지하고자 공부하여 정리합니다. 자바스크립트 메모리 구조 Call Stack(콜 스택) 실행 중인 함수를 추적하여 계산을 수행하고, 지역 변수를 저장 (LIFO 방식) 고정된 크기로 메모리에 저장(실제 데이터가 변수에 할당) 원시 타입이 이곳에 저장 됩니다. ( Boolean, String, Number, Null, Undefined, Symbol ) Memory Heap(메모리 힙) 콜 스택과 달리 메모리 ..
알고리즘 공부 하던 중 정규식을 사용해서 문자열을 치환하는 방법을 새로 알게 되었습니다. 우선 replace() 메서드는 특정 문자열을 치환 할 때 사용 합니다. ✔ 하지만, 문자열에서 변경하려는 문자가 여러 번 반복될 경우 첫 번째로 발견한 문자열만 치환 합니다. 사용법 replace('찾을 문자열 or 정규식', '변경하는 문자열') 예시 let str = "사과, 배, 수박"; let strChange = str.replace("배", "오렌지"); console.log(strChange); // 사과, 오렌지, 수박 정규식 ❓ ✔ 정해진 규칙을 사용해 모든 문자를 변환할 수도 있고 숫자,번호나 맨 처음, 맨 뒤만 변환할 수 있습니다. 정규식 옵션 옵션 g 모든 패턴 체크(global) i 대소문자..
다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다. Import & Export 임포트(Import)와 익스포트(Export)는 자바스크립트의 코드를 모듈화 할 수 있는 기능 기본 문법 export 변수, 함수 다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙입니다. 익스포트된 파일은 임포트로 불러와 사용할 수 있습니다. import { 불러올 변수 또는 함수 이름 } from '파일 경로'; 예제 math.js export let pi = 3.14; export function sum(a, b) { return a + b; } app.js import { pi } from './math.js'; console.log(pi); // 3.14 i..
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어 할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다. BOM window Global Context(전역 공간)이자 브라우저 창을 나타내는 객체 navigator 브라우저와 운영체제 대한 정보 screen 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체 location 현재 URL 에 대한 정보, 브라우저에서 사용자가 요청하는 URL history 현재 브라우저가 접근했던 URL history document 현재 문서에 대한 정보 참고 http://www.tcpschool.com/javascript/js_bom_window https://..
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 넓은 의미 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미 Document 객체와 관련된 객체의 집합 DOM 안에는 우리가 정의한 요소들이 Tree 형태로 구성되어 있습니다. 이것을 이용하여 JS로 웹페이지를 제어할 수 있습니다. HTML의 , 그리고 의 안에 각각의 tag 들을 요소(element)라고 부르고, JS에서는 문서 객체라고 부릅니다. DOM을 이용하면 HTML 태그를 추가, 수정,삭제 등 할 수 있습니다. DOM Tree 정리 브라우저가 HTML 파일을 읽을 때 브라우저가 이해할 수 있는, 메모리에 보관할 수 있는 objec..
동등연산자(==)는 피연산자들의 값만 비교합니다. 즉, == 연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등하지 비교한다. 일치연산자(===)는 피연산자들의 값과 타입을 모두 비교합니다. 즉, === 연산자는 타입 변환을 하지 않고 두 값이 같은 타입이 아닌 경우 ===는 false를 반환한다. 예시 console.log('01' == 1) // true, 문자열 '01'이 숫자 1로 변환된 후 비교 진행 console.log(true == 1) // true, true 는 1, false 는 0으로 변환된 후 비교 console.log(false == 0) // true console.log(0 === false) // false null이나 undefined와 비교 변수에 값이 null ..
ECMAScript5 부터 도입된 기능으로 기존에 무시되던 에러들로 하여금 에러를 발생 시킵니다. 사용하는 이유 자바 스크립트는 기존 기능을 변경하지 않으면서 새로운 기능을 추가해왔기 때문에 호환성 문제가 없었습니다. 하지만 ES5부터 새로운 기능이 추가되고 기존 기능의 일부가 변경 되었습니다. 그에 따라 기존 기능이 변경되어 호환성에 문제가 생기게 되었고, 이를 방지하기 위한 것이 엄격 모드(strict mode) 입니다. 사용하는 방법 "use strict"; // 이 코드는 모던한 방식으로 실행됩니다. ... 최상단에 선언 합니다. 위에 처럼 사용하면 파일 전체에 적용이되고, 원하는 함수 스코프에만 적용이 가능 합니다. 참고 MDN, use strict https://ko.javascript.inf..
async/await 를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. promise 사용 하기 전 (문제점) function fetchUser(){ // 데이터를 받아오는데 10초 정도 걸린다고 가정 return 'hyunho'; } const user = fetchUser() console.log(user) 위에처럼 시간이 걸리는 코드를 비동기적으로 처리를 하지 않으면, 자바스크립트 엔진은 동기적으로 코드를 수행하기 때문에, 즉 한줄 한줄씩 한줄이 끝나야 그 다음 줄로 넘어 갑니다. fetchUser() 함수가 선언된 곳으로 가서 함수의 코드 블록을 실행하는데 데이터를 받아오는데 10초가 걸리니까 10초동안 머무르고 있고, 그리고 나서야 'hyunho' 가 리턴이..
