본문 바로가기

코딩기록/JavaScript

 (5)
[JavaScript]얕은 복사, 깊은 복사 이해하기 서론 코딩을 함에 있어서 꼭 알아야 될 개념이 얕은 복사(shallow copy)와 깊은 복사(deep copy)입니다. 문자열(string), 숫자형(number) 등의 자료형과 array 또는 object 같은 객체형 자료가 복사될 때의 차이점을 아시나요? 이 개념을 모르고 코딩을 한다면, 의도치 않게 데이터값들을 무자비(?)하게 훼손하는 코딩을 하고 있을 확률이 높고 언젠가는 미궁에 빠질지도 모릅니다. 여태까지 무탈했다면 그냥 운이 좋았던 겁니다. 목차 원시타입 자료형 vs 참조타입 자료형 콜스택과 힙메모리 얕은 복사 깊은 복사 원시타입 자료형 서론에서 말씀드렸던 string, number, boolean 과 같은 자료형들은 크기가 유한합니다. 예를 들어, 이름, 이메일 같은 문자열이나, 숫자같은 ..
[JavaScript] 웹 스토리지 알아보기 - local storage, session storage 서론 웹 개발을 수행하면서 데이터 저장이 필요할 때가 있습니다. 보통 이런 경우 서버DB 송수신을 쉽게 떠올리 실 텐데, 만약에 저장하려는 데이터가 크게 중요치 않고 사용자의 편의 등을 위해 가볍게(?) 쓰일 목적이라면 웹 스토리지 사용을 고려해볼만 합니다. 여기서, 웹 스토리지는 서버와 송수신 작업을 하지 않고 웹 브라우저 자체에 데이터를 저장하는 기술을 말합니다. 목차 로컬 스토리지(local storage) 세션 스토리지(session storage) 사용방법 로컬 스토리지 vs 세션 스토리지 위 서론에서 언급한, 웹 스토리지의 종류는 2가지로 나뉩니다. 로컬 스토리지와 세션 스토리지입니다. [공통점] 2개 모두 웹 스토리지의 주요 목적인, 서버와 송수신 없이 웹 브라우저 내에 데이터가 저장된다는 ..
[JavaScript] this 알아보기 서론 자바스크립트의 this는 다른 언어의 this와 달리 좀 변덕(?)스럽게 느껴질 수 있습니다. 어디서 어떻게 쓰이냐에 따라서 개발자의 생각과는 다른 녀석을 가르키고 있을 수 있거든요.이번 블로그에서는 자바스크립트의 this가 어떻게 작동하는 지 그리고 주의해야될 사례들에 대해 소개하며 this 교통정리 좀 해보도록 하겠습니다. 목록 기본사용 일반함수 객체 내 메소드로 사용될 때 콜백함수의 this 생성자 화살표 함수 이벤트 리스너 기본사용 자바스크립트에서 this는 대부분의 경우 함수가 어디서 호출되었는가에 따라 결정됩니다. 이 말은 this가 포함된 함수가 어디서 또는 어떻게 사용되느냐에 따라 가리키는 대상이 달라지게 된다는 걸 의미합니다. 이 내용이 this의 핵심이기 때문에 꼭 기억하셔야 됩니..
[JavaScript] Date 객체 서론 날짜, 시계열 데이터를 다룰 때 유용한 Date객체에 대해 알아보려합니다. 날짜는 정말 다양한 곳에서 사용됩니다. 가장 일반적으로 웹페이지, 어플리케이션 등에서 조회를 할 때도 사용되고, 시계열 데이터가 들어간 자료를 만들때도 활용됩니다. 제대로 정리를 해놓으면 저 스스로에게도 다시 찾아와서 참고할 수 있는 글이 될테니 꼼꼼히 적을 생각입니다. 아래 소개할 내용으로 Date 객체생성, 메소드(내장함수), 날짜표현 형식변경, 날짜계산 등에 대해 다룰 예정입니다. 목차 Date 객체 메소드 get메소드 : getFullYear(), getMonth(), getDate(), getDay(), getHour(), getMinutes(), getSeconds(), getMilliseconds() 날짜 For..
[JavaScript]for 반복문 정리(for, for in, for of, forEach) JavaScript 에서 빼먹을 수 없는 for 관련 반복문들의 소개 및 차이점을 소개합니다. 목차 for for ... in for ... of forEach 1. for 문 일반적인 형태의 반복문 입니다. 구조는 초기식, 조건식, 증감식을 포함하고 이에 따라 반복할 코드 블럭으로 구성되어 있습니다. // for-loop for (let i = 0; i < 5; i++) { console.log(i); } 주의할 점은 i의 값은 반복문의 증감식에 의해 변하게 되니 재할당이 가능한 let 선언자로 선언을 해야됩니다. 또한 증감식은 for문 블록 내 코드내용이 실행된 이후 그 다음 실행됩니다. 즉, for문의 동작원리는, 반복문의 초기식을 가지고 코드내용이 실행되면, 이후 증감식이 실행되고, 반복문 내 변..

티스토리툴바