본문 바로가기

js47

[Electron] 0. Electron이란? & 초기설정 JS 기반으로 크로스플랫폼 데스크톱 앱을 개발할 수 있는 프레임워크인 Electron에 대해 알아보자! 1. 소개 Electron은 JS, HTML, CSS를 활용해서 크로스플랩폼 데스크톱 앱을 개발할 수 있는 프레임워크이다. 2013년 Atom Editor를 만들기 위해 시작된 Atom Shell에서 시작하였고 2015년 그 명칭이 현재의 Electron으로 변경되었다. Electron의 아키텍쳐는 백엔드의 경우 Node.js, 프론트엔드의 경우 Chromium 이라는 구글 Chrome 브라우저의 기반이 되는 오픈소스 프로젝트를 사용한다. 따라서 Web 기반의 기술은 Chromium에서 처리하고 OS 기반 기능은 Node.js에서 처리하게 된다. 이를 이용하는 대표적인 예시는 Atom Editor, V.. 2023. 5. 1.

JS_기본 문법 (26)_ 접근자 프로퍼티와 private필드 JS의 객체 프로퍼티 중 접근자 프로퍼티에 대해서 알아보자! 1. 접근자 프로퍼티 접근자 프로퍼티는 스스로 값을 갖지 않고 다른 프로퍼티의 값을 읽거나(get) 저장할 때(set) 사용한다. 다른 언어에서도 찾아볼 수 있고 getter함수, setter함수라고 부르기도 한다! getter - 반드시 값을 반환해야 한다. - 특정 프로퍼티를 원하는 방식으로 가공하여 내보낼 때 사용한다. setter - 특정 프로퍼티에 값이 저장되는 방식을 조작하거나 제약사항을 적용할 때 사용한다. - 하나의 인자를 받는다. 사용방법 방법 1) 객체 리터럴 방식 예시 1) 물체의 길이 단위 (인치와 센티미터) const obj1 = { inch : 1, get cm() { return this.inch * 2.54; }, .. 2023. 4. 10.

JS_기본 문법 (25)_ 클래스 2023.03.31 - [🌌 | WEB DEV/Vanilla JS] - JS_기본 문법 (24)_ 생성자 함수 저번에 다루었던 생성자 함수에 이어서 이번에는 클래스에 대해서 알아보자! 1. 클래스 // 클래스 class Player { constructor(name, job){ this.name = name; this.job = job } info () { return `소환사명 : ${this.name} | 직업군 : ${this.job}`; } } const player1 = new Player('Kassid', '전사'); const player2 = new Player('Nyang', '마법사'); console.log(player1, player1.info()); console.log(playe.. 2023. 4. 2.

JS_기술 (3)_ Hoisting(호이스팅) 뿌수기 JS의 호이스팅에 대해서 자세히 알아보았다! 1. 호이스팅이란? ( 1 ) 호이스팅(Hoisting)이란 무엇일까 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. - MDN (https://developer.mozilla.org/ko/docs/Glossary/Hoisting) MDN 문서에서는 위와 같이 번역을 하였다. 즉, JS의 인터프리터가 코드를 읽기 시작할 때 선언된 변수, 상수, 함수 등을 모두 미리 할당을 하는 작업을 의미한다. 글의 본격적인 시작에 앞서 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다! ( 2 ) var의 특징 JS에서 변수, 상수를 선언하는 방법은 3가지가 있다. 1.var .. 2023. 3. 31.

JS_기본 문법 (24)_ 생성자 함수 1. 생성자 함수 함수는 재사용가능한 코드를 묶는 것 외에도 객체를 생성하는 역할을 수행할 수 있다. ※ function으로 선언된 함수는 기본적으로 생성자 함수의 기능을 갖는다. 예시) 객체 생성 const student1 = { name : 'Sam', idNum : 20, say () { return `안녕하세요. ${idNum}번 ${name}입니다.`; } }; const student2 = { name : 'Tom', idNum : 25, say () { return `안녕하세요. ${idNum}번 ${name}입니다.`; } }; 위와 같이 비슷한 형태의 객체를 여러개 만들어야하는 경우 같은 코드를 반복하는 것이기 때문에 함수를 활용하면 더욱 편리하게 구현할 수 있다. 생성자 함수 생성 Ru.. 2023. 3. 31.

JS_기본 문법 (23)_ 객체 + 2022.02.10 - [🌌 | WEB DEV/Vanilla JS] - JS_기본문법 (3)_객체 기존에 다루었던 JS의 객체에 대해서 조금 더 알아보자! 1. 객체 생성 & 접근 예전 포스트에서 다루었던 대괄호 표기법은 다양한 방식으로 활용할 수 있다. 1) 식별자 명명 규칙에서 벗어난 키 이름에 접근 const obj = { 'ab-1' : 100, 'c d' : 'Hello' }; console.log( obj['ab-1'], obj['c d'] ); >>> 100 >>> 'Hello' 위처럼 명명 규칙을 어긴 경우에도 ' '(따옴표)를 이용하여 키 이름으로 설정하고 이를 대괄호 표기법으로 접근할 수 있다. 2) 표현식에 이용 연산을 하여 키값으로 설정을 할 경우에도 대괄호를 이용한다. let id.. 2023. 3. 26.

JS_기술 (2)_ IIFE(즉시 실행 함수 표현) JS에서 사용하는 IIFE에 대해서 알아보자. 오늘날에는 잘 사용하지 않지만 과거에 사용했던 코드를 분석하기 위해서 알아보자! 1. IIFE란? 즉시 실행 함수 표현(Immediately Invoked Function Expression, IIFE)은 정의되자마자 즉시 실행되는 함수를 말한다. 구조 (function() { ... }) (); Self-Executing Anonymous Function 으로 불리는 디자인 패턴이라고 한다. 여기에서는 두 개의 괄호에 주목을 해야한다. 먼저, 익명함수를 둘러싼 괄호이다. 이를 통해서 전역 Scope의 불필요한 변수들에 의한 오염 방지와 IIFE 내부 안으로 다른 변수들이 접근하는 것을 방지할 수 있다. 그 다음으로는 후미에 위치하는 즉시 실행 함수를 생성하.. 2023. 3. 16.

JS_기본 문법 (22)_ 매개변수 (기본값, arguments, 나머지 변수, 이상적인 함수?) JS 다루는 함수의 매개변수에 대해서 살펴보자. 1. 함수의 매개변수 개수보다 많이 값을 전달한 경우 예시 1) 두 개의 인자를 받는 함수이다. function sum(a, b){ return a + b; } console.log( sum(1, 2), sum(1, 2, 3), sum(1, 2, 3, 4) ); >>> 3 3 3 위의 결과처럼 JS에서는 다른 언어와 다르게 함수 정의 시 설정한 매개변수의 개수보다 많이 값을 전달하는 경우 순서대로 값을 받은 후 나머지는 무시하며 오류를 일으키지 않고 값을 반환한다. 2. 기본값 기본값(default parameter)은 매개변수에 값이 들어오지 않아도 기본적으로 값을 설정해주는 것이다. function sum(a = 0, b = 0){ return a + .. 2023. 3. 12.

JS_기술 (1)_ 커링(currying) JS에 존재하는 커링에 대해서 알아보자. 1. 커링이란? 커링은 함수와 함께 사용하는 고급기술로, JS 뿐 아니라 다른 언어에서도 사용할 수 있는 기술이다. 필요한 인자보다 적은 수의 인자를 받으면, 나머지 인자를 인자로 받는 다른 함수를 반환한다. 즉, 한 함수를 실행하기 위해 필요한 인자가 아직 덜 준비 되었을 경우 현재 존재하는 인자를 저장하기 위해서 커링으로 작성할 수 있다. 예시 1) 아래는 일반적으로 함수를 작성한 경우이다. function mulTwoTerm (a, b, c, d) { return (a + b) * (c + d); } const mulTwoTerm2 = (a, b, c, d) => (a + b) * (c + d); console.log( mulTwoTerm(1, 2, 3, 4.. 2023. 3. 11.

이전 1 2 3 4 5 6 다음

티스토리툴바