Javascript6 자바스크립의 값과 참조값의 얕은 복사와 깊은 복사 undo & redo 구현중에 인스턴스 상태를 저장하는 코드를 작성해야 해서 얕은 복사와 깊은 복사를 좀 더 심도 있게 공부하고자 오랜만에 블로그를 켰다 ,, 먼저, 자바스크립트의 값은 원시값과 참조값 두 가지 데이터 타입으로 나뉜다. 원시값 Number String Null Undefined 참조값 Object Symbol 원시값은 기본 자료형(단순 데이터)을 의미한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되고, 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다. let a = 'b'; a = 'c' console.log(a) //'c' 원시값을 복사해서 다른 값을 입력할 경우, 원시값은 또 다른 독립적인 메모리 공간에 할당하기 때문에 기존 원시값을 저장한 변수에.. 2023. 6. 10. Template literals 구현 (1) - Selection과 Range Template literals를 구현해 볼까 하고 시작한 일이 어언 2주 가까이 흘렀다. (말이 Template literals이지 멘션 기능과 흡사.) 시작할 때는 이렇게까지 시간이 오래 걸릴 줄 몰랐다. (당연함) 2주 동안 골머리를 싸맸기 때문에 꼭 아카이브로 남기고 싶었다. 내가 구현한 걸 간단히 설명하자면, 특정 구분자(#{)를 사용했을 때 div 태그 안에 span 태그를 추가하여 새로운 range를 만들고, 그 range안에 입력된 값에 대한 유효성 검사를 실시하고 오류가 있을 시 오류 메시지를 출력해 주는 기능이다. 위에 gif 이미지를 보면 알 수 있듯이 미리 정의해 둔 변수는 variable1과 variable2이다. variable1과 variable2가 아닐 경우 그리고 잘 못된 .. 2023. 2. 7. DOM 이해 하기 🔎 DOM(Document Object Model) ? : XML과 HTML 문서에 접근하기 위한 인터페이스. Web API로 브라우저 웹 문서 조작할 수 있음. 🔎 Web API? API (web or XML page) = DOM + JS (scripting language) 예시) const contentBox = document.querySelector('.contentBox'); document.style.backgroundColor = 'red'; const innerHeight = document.innerHeight; DOM의 노드들 중에서 특정 노드를 선택하고, 선택한 노드의 색을 변경하거나 viewport의 높이를 찾는 등 DOM을 조작하는 데 사용하는 스트립트 메서드들을 Web API라.. 2022. 1. 13. ES6로 깔끔한 코드 만들기 이번에 프로젝트할 때 asnyc ~ await, arrow function, const & let script 기능을 사용했었는데, 프로젝트가 끝나고 여유롭게 ES6문법을 자세히(?) 보는 도중 놀라운 기능들이 많이 있다는 걸 알게 되었다. 진작 알았으면 좀 더 깔끔한 코드를 짤 수 있었을 텐데... 참고로 ES5가 표준처럼 쓰이다가 지금은 ES6~ES8까지 표준으로 쓰이는 추세인 것 같다. 밑에 링크를 통해 ES6 + 브라우저 지원 현황을 살펴보자. 참고 : https://kangax.github.io/compat-table/es6/ 1. ES6(ECMAScript)? : ECMA 인터내셔널의 ECMA-262 기술 규격으로 정의된 표준화 스크립트 프로그래밍 언어. 그냥 자바스크립트 표준 언어라고 생각하.. 2022. 1. 9. javascript function 개념과 종류 javascript랑 나름 친하다고 생각했는데 이번에 이론적으로 개념을 잡으면서 살짝 멀어졌다. 고차함수에 익숙해지자! 1급 객체 javascript function는 1급 객체이다. 1급 객체가 뭔지 알아보자. 1급 객체 (First Class Object) 1. 변수에 저장이 가능하다. 2. 함수의 Parameter로 전달할 수 있다. 3. 함수의 return 값으로 사용할 수 있다. 4. 자료 구조 (Object, Array 등)에 저장할 수 있다. 아래는 가장 기본적인 function의 선언 방법이다. ES6 이상을 사용한다면 Arrow function을 사용하여 선언할 수 있다. function call(params){ //code } call('value'); //Arrow function c.. 2021. 11. 14. 호출 스케줄링 setInterval, setTimeout | setInterval 함수 즉시 종료 일정 간격으로 데이터를 불러와 그래프를 그려낼 때 '일정 시간 간격을 두고 함수를 실행하는 방법'이라는 설명을 읽고 아무 생각없이 setInterval로 구현했다가 일정 간격으로 데이터를 불러오지 못하고 clearInterval을 사용해도 setInterval 함수 호출이 중단되지 않는 현상을 발견했다. 나와 같은 사람이 없기를 바라며 .. 호출 스케줄링에 대해 제대로 알아보도록 하자. 🔎 호출 스케줄링 (Scheduling a call) 일정 시간이 지난 후에 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링'이라고 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다. setTimeout : 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval : 일정 시간 간격을 두고 함.. 2021. 11. 10. 이전 1 다음
