본문 바로가기

개발(Development)/JS(자바스크립트)80

[자바스크립트] setInterval/clearInterval 반복 중단, 재시작(재개) 방법 setInterval(콜백함수, 시간) 는 "시간(ms)"을 간격으로 "콜백함수"를 반복 호출 하는 함수이다. 애니메이션 등을 구현하다보면, 잠깐 반복을 중단했다가, 재시작하는 코드를 구현해야할 때가 있다. 방법은 간단하다. setInterval 함수의 반환값을 변수에 할당해두고, clearInterval(변수)를 호출하여 반복을 중단하고, 다시 setInterval로 재시작해주면 된다. # setInterval 중단/재시작 방법 1. setInterval()함수의 반환값을 변수에 할당하여 반복 시작 let 변수 = setInterval(콜백함수, 시간); 2. clearInterval(변수)로 반복 중단 clearInterval(변수); 3. setInterval()함수의 반환값을 변수에 재할당하여 재.. 2021. 6. 3.
VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) 자바스크립트 작업을 할 때, 함수에 주석을 달아서 문서화(Doc?)해두면, 함수를 호출할 때 아래처럼 자동완성 툴팁이 노출되어 아주 편하다. 즉, 함수의 파라미터 타입, 반환값에 대한 정보를 보면서 프로그래밍할 수 있게 된다. (작업 환경: VSCode 자바스크립트 개발) # JS 함수의 문서화 주석 만드는 방법 1. 함수 선언 ▶︎ 평소처럼 함수를 만들어준다. ▶︎ 여기서는 id, name을 파라미터로 받아서 반환하는 getInfo 함수를 선언했다. 2. 주석 생성 ▶︎ 함수의 바로 윗부분에서 /** 까지만 입력한다. ▶︎ 아래와 같은 자동완성이 노출되면 엔터를 쳐준다. 3. 파라미터 타입 ▶︎ @param {*} 파라미터 형식의 주석이 자동완성 되면, ▶︎ 대괄호 { } 사이에 number, stri.. 2021. 5. 9.
[자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정 자바스크립트는 소스 코드를 2단계로 실행합니다. 1 단계: 실행 컨텍스트 생성하고, 변수 등을 등록하는 단계 2 단계: 소스 코드를 한 줄씩 실행하는 단계 이 글은 각각의 과정을 최대한 단순화하여 정리해봅니다. (세부적인 과정은 엔진마다 다르고, 훨씬 더 복잡할 것입니다.) 자바스크립트의 메모리 구조 및 콜스택/메모리힙에 대해서는 아래 글을 먼저 참고하시면 좋을듯 합니다. [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 먼저 아래 코드를 실행한다고 가정하자. // 변수 선언문 var a = 10; let b = 20; const c = 30; // 함수 선언문 function func_1(arg){ return arg; .. 2021. 4. 8.
[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 이 글은 자바스크립트의 콜스택/메모리힙에서 데이터가 어떤 방식으로 저장되고 참조되는지를 정리한다. 기본적인 메모리 구조와 변수 생성 원리에 대해서는 아래 글을 꼭 참고(필수) [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 # 콜스택, 메모리힙이란? 자바스크립트는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call Stack) : 원시타입(숫자 등) 데이터가 저장된다. : 실행컨텍스트(Execution Context)를 통해 1) 변수 식별자(이름) 저장, 2) 스코프 체인 및 this 관리, 3) 코드 실행 순서 관리 등을 수행. * 실행 컨텍스트의 상세 구조 및 원리는 이 글의 범위를 넘어가므로 다루지 않습니다. 2. 메모리힙(Mem.. 2021. 4. 7.
[자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 자바스크립트가 기본 타입 데이터를 저장, 참조하는 과정을 메모리의 관점에서 아주 단순화하여 정리해 본다. # 메모리 구조, 데이터 저장/참조 원리 컴퓨터의 메모리는 1Byte(8bit)크기의 메모리셀 여러개로 구성된다. 각 메모리셀은 본인만의 고유한 주소값을 가지며, 8개의 비트(2진수: 0, 1)로 데이터를 저장한다. 1. 메모리 구성 : 컴퓨터 메모리는 1byte(8bit) 크기의 메모리셀 여러개로 구성된다. 2. 메모리 셀 : 각 메모리셀은 고유한 주소값을 갖으며, 메모리셀(1byte) 단위로 데이터를 저장하고 읽는다. 3. CPU와 메모리 역할 : CPU는 메모리에 저장된 값을 꺼내와 연산을 하고, 연산 결과를 다시 메모리에 저장한다. 4. 데이터 저장 방식 : 용량이 큰 데이터는 메모리셀(1by.. 2021. 4. 7.
[VS Code] HTML 템플릿 자동완성 기능 사용 방법 기초/기본(Emmet: 에밋) Visual Studio Code에는 Emmet(에밋)이라는 플러그인이 기본으로 내장되어 있는데, 코딩을 아주아주 빠르게 할 수 있게 해주는 자동완성 기능이라고 보면 된다. 예를 들어, html 파일을 만들고, 느낌표( ! )만 입력하면 아래 화면 처럼 Emmet 자동완성 창이 뜨는데, 그대로 Enter를 치면, HTML기본 왁구가 완성된다. 또한 아래처럼 리스트를 만들려면, ul태그 쓰고, li태그 쓰고, 클래스 쓰고, 내용 쓰고, li 태그 닫고,,, 등을 반복해야 하지만. Emmet 자동완성 기능을 이용하면 아래 한 줄이면 끝난다. 클래스와 내용의 번호를 순차적으로 1씩 증가 시킨 것도 확인할 수 있다. 이번 글은 코딩 효율성을 엄청나게 높여주는 Visual Studio Code의 Emmet 기초 .. 2021. 3. 26.
[VS Code] 탭(Tab)으로 세미콜론, 괄호, 브래킷, 따옴표 점프 이동 방법(건너뛰기) VS코드에서 코드를 작성하다 보면, 따옴표"", 괄호(), 브래킷, 콜론:, 세미콜론; 입력 시, 매번 화살표로 조작해야해서 불편할 때가 많습니다. 다른 에디터(이클립스 등)에서는 Tab키만 누르면 자동으로 따옴표나 괄호, 세미콜론을 건너뛰어서 점프시켜주는데, VSCode는 그런 내장 기능은 찾기가 힘듭니다. 하지만 Tabout이라는 익스텐션을 설치하면 브래킷, 따옴표, 콜론, 세미콜론, 괄호 등을 탭으로 이동할 수 있습니다. 아래의 방법으로 설치하고 사용해보시면 신세계를 경험하실 겁니다. # 탭 이동 익스텐션: Tabout 설치 및 사용 방법 1. VSCode에서 Extension 설치 메뉴 선택 : 왼쪽 사이드바에서 Extenstion 메뉴를 선택합니다. 2. Tabout 검색 및 설치 : 검색창에서.. 2021. 3. 26.
[VS Code] 자주 사용하는 기본 핵심 단축키(shortcuts) 정리 모음 VS CODE에서 HTML, CSS, Javacscript 개발할 때, 자주 사용하는 단축키를 정리해 보았습니다. 글로만 읽으면 이해가 안 될 수 있으나, 그냥 한 번씩 눌러보면, 아~~! 하실겁니다. (문제가 발생할만한 단축키는 없으니 걱정 마시길!) ### VSCode 핵심 단축키 모음### # 기본 에디터 단축키 1. 사이드바 접기/펴기 Command + B 2. 코드 위/아래 이동 Option + 위/아래 3. 코드 위/아래 복사 Option + Shift + 위/아래 4. 한 행 삭제 Command + Shift + K 5. 행 삽입 위에 행삽입 : Command + Shift + Enter 아래행 삽입 : Command + Enter 6. 동일 단어 찾아서 한번에 수정 Command + D 연.. 2021. 3. 26.
[자바스크립트] JSON to TSV 변환 출력 파싱 방법 (+node.js TSV파일 생성 예제 포함 ) | Javascript: JSON 데이터를 TSV파일로 파싱하는 방법 별도 라이브러리 없이, 자바스크립트만으로 JSON을 TSV로 만드는 법을 정리합니다. (node.js 및 브라우저 환경 모두에서 작동) "아래의 jsonToTSV() 함수에 JSON형식의 배열객체를 넣어 호출하면 됩니다." (JSON파일, TSV파일을 다루는 예제도 샘플코드로 작성해두었습니다.) # JSON to TSV 함수 (JSON to TSV Converter) : JSON형식의 배열객체를 넣어 호출하면, TSV 형식의 문자열(string)을 반환합니다. : JSON형식의 문자열(string)을 넣어 호출할 경우엔, 함수의 1-1 코드 대신, 1-2 코드를 사용하면 됩니다. function jsonToTSV(json_data) {.. 2021. 3. 26.

티스토리툴바