전체 글787

• 

  [Svelte]상태와 이벤트(state and event) 상태(state) 다음 예제처럼 script 태그 내부에서 상위에 선언되는 변수들 중 HTML 요소가 참조하는 변수들은 컴포넌트의 상태(state)라고 말합니다. 상태는(state)는 특정 이벤트가 동작함에 따라 값이 변경될 수 있으며, 화면에 표시되는 값이 달라질 수 있습니다. [App.svelte] {num} + - script 태그 내부 상위에 선언된 변수 num은 h1 태그에서 사용되므로 상태(state)입니다. + 버튼을 클릭하면 num의 값이 1 증가하고 - 버튼을 클릭하면 num의 값이 1 감소합니다. 상태를 html 영역에서 사용하기 위해서는 중괄호( { } ) 사이에 상태명을 작성하면 되고 상태의 값을 변경하기 위해서는 이벤트 핸들러 함수에서 상태의 값을 변경합니다. 이벤트(event) .. Svelte 2022. 7. 8.

• 

  [Svelte]svelte 컴포넌트 및 구성요소 이번 포스팅에서는 svelte 컴포넌트 및 구성요소에 대해 설명합니다. svelte 파일은 상태와 특정 이벤트가 발생한 경우 로직을 정의하기 위해 JavaScript 코드를 작성하는 script, 상태 또는 버튼을 화면에 표시하기 위한 HTML, HTML을 꾸며주는 CSS로 구성됩니다. svelte 컴포넌트의 구성요소 스벨트의 컴포넌트는 React와 달리 클래스나 함수 또는 객체 리터럴로 만들어지지 않으므로 React 개발자에게는 다소 생소할 수 있습니다. Angular, Vue, React와 같은 JavaScript 프레임워크를 사용하지 않고 고전적인 방법으로 웹 화면을 구현해봤던 경험이 있는 개발자에게는 Svelte가 친숙할 수 있겠네요. 아무튼 svelte 파일에는 위에서 언급했듯이 script, .. Svelte 2022. 7. 8.

• 

  모듈 번들러(module bundler)란? JavaScript 프레임워크인 React, Vue, Svelte, Angular 등을 사용하다 보면 모듈 번들러(module bundler)는 필수적으로 언급되는 내용입니다. 모듈 번들러는 개념적으로 생각보다 쉬운 내용이지만 웹팩, 롤업, 파셀, 모듈, 번들러, 종속성, 로더 등 해당 용어는 무엇이고 어떻게 동작하는지 잘 모르기 때문에 대부분 이해하지 않고 넘어가게 됩니다. 하지만, FrontEnd 개발자라면 모듈 번들러의 개념과 필요성을 꼭 알아야 한다고 생각하고 개인적으로 헷갈리는 부분이 있어서 이번 포스팅에서 모듈 번들러에 대해 정리하고자 합니다. 모듈(Module) 모듈 번들러는 Module + Bundling이 혼합된 단어인데, 모듈은 '분리된 코드 조각'을 의미하고 번들링은 '묶는다'는 의미.. 기타 2022. 7. 7.

• 

  [Svelte]VSCode에서 스벨트 시작하기 Visual Studio Code를 사용하여 스벨트를 시작하기 전에 아래 항목들이 설치되어있어야 합니다. - Visual Studio Code - NodeJS 1. 터미널 활성화 후 svelte 설치 VSCode에서 터미널 활성화 후 아래 명령어를 입력합니다. npx degit sveltejs/template svelte-start-app svelte-start-app는 Svelte 프로젝트 이름입니다. 설치가 완료되면, 다음 그림처럼 설치가 완료되었다는 문구가 출력됩니다. 바탕화면에 설치된 svelte-start-app 프로젝트를 불러옵니다. 2. 프로젝트 이동 설치된 프로젝트로 이동합니다. cd 프로젝트명 3. 라이브러리 설치 프로젝트에 필요한 라이브러리를 설치하기 위해 npm install 명령어를.. Svelte 2022. 7. 7.

• 

  [JavaScript]스코프(Scope) 스코프(Scope) JavaScript에서 스코프(Scope)는 변수의 가용성(변수를 사용할 수 있는지)을 관리하는 중요한 개념입니다. JavaScript에서 사용되는 변수 또는 함수는 선언되는 위치에 따라 다르게 동작하므로 스코프에 대해 구체적으로 이해할 필요가 있습니다. [JavaScript]함수 호이스팅(Function Hoisting) 호이스팅(Hoisting) 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마 developer-talk.tistory.com [JavaScript]변수 선언과 호이스팅(Hoisting) JavaScript의 변수 선언 방법과 호이스팅(H.. JavaScript/기초 2022. 7. 7.

• 

  [JavaScript]함수 호이스팅(Function Hoisting) 호이스팅(Hoisting) 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마찬가지로, JavaScript에서도 선언되지 않은 변수를 접근할 수 없으며, 선언되지 않은 변수를 접근하면 ReferenceError가 발생합니다. 하지만, JavaScript는 다음 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있습니다. console.log(value); // undefined var value = 'Hello' console.log(value); // Hello ReferenceError는 발생하지 않으나 JavaScript는 호이스팅 된 변수를 undefined로 초기화합니다.. JavaScript/함수 2022. 7. 7.

• 

  [JavaScript]스택과 실행 컨텍스트(Stack and Execution Context) 이번 포스팅은 실행 컨텍스트 생성 과정 및 스코프 체인에 대해 설명하기 전에 기본적으로 알아야 할 스택(Stack)과 실행 컨텍스트 개념에 대해 설명합니다. 스택(Stack) 스택은 한쪽 끝에서만 작업을 수행하는 선형 데이터 구조입니다. 배열과 달리 특정 위치에 요소를 접근할 수 없으며, 맨 위에서만 요소를 삽입 및 삭제할 수 있습니다. 스택에서는 두 가지 작업을 수행할 수 있습니다. 맨 위(TOP)에 요소를 삽입하는 push, 맨 위(TOP)의 요소를 삭제하는 pop을 수행합니다. 스택은 LIFO(Last-In, First-Out) 또는 FILO(First-In, Last-Out) 개념이 적용됩니다. LIFO는 후입 선출이라 말하기도 하며, 마지막에(Last) 들어온(In) 요소가 맨 처음(First).. JavaScript/기초 2022. 7. 6.

• 

  [JavaScript]프로토타입의 프로퍼티 프로토타입의 프로퍼티 프로토타입 확장에서 프로토타입 객체인 Object.prototype에 새로운 함수를 추가하는 방법을 소개하였습니다. [JavaScript]프로토타입 확장(prototype extend) 프로토타입 확장 지금까지 프로토타입을 주제로 작성된 포스팅 내용을 정리하자면, 모든 객체(숫자, 문자열, 객체, 배열, 함수 등)는 내부 프로퍼티인 [[Prototype]]를 가지고 있습니다. 프로토타입 developer-talk.tistory.com 즉, 프로토타입 객체도 일반 객체처럼 동적으로 프로퍼티를 추가 또는 삭제할 수 있습니다. 다음 예제는 최상위 프로토타입 객체인 Object.prototype에 두 개의 프로퍼티를 추가합니다. // address 프로퍼티 추가(문자열) Object.pro.. JavaScript/함수 2022. 7. 6.

• 

  [JavaScript]프로토타입 확장(prototype extend) 프로토타입 확장 지금까지 프로토타입을 주제로 작성된 포스팅 내용을 정리하자면, 모든 객체(숫자, 문자열, 객체, 배열, 함수 등)는 내부 프로퍼티인 [[Prototype]]를 가지고 있습니다. 프로토타입 관련 포스팅(클릭하면 해당 포스팅으로 이동합니다.) ☞ [JavaScript]프로토타입(Prototype)이란? ☞ [JavaScript]프로토타입 체인(Prototype Chain) ☞ [JavaScript]함수의 프로토타입(prototype in function) [[Prototype]]는 현재 객체의 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다. 그리고 프로토타입 체인으로 상위 객체를 계속해서 참조했을 때, 프로토타입 체인의 종점은 Object.prototype 객체입니다. 즉,.. JavaScript/함수 2022. 7. 6.

• 

  REPL이란? REPL 개념 정리 REPL이란? REPL은 Read-Eval-Print-Loop의 약자로 애플리케이션 실행 상태에서 사용자가 입력한 명령어(소스코드)를 읽고(Read) 명령어를 평가(Eval)하고 결과를 출력(Print)한 다음 다시 입력을 기다리는 상태로 돌아가는 과정을 반복(Loop)합니다. REPL의 필요성 REPL은 주로 개발자들이 소스 코드 실행 결과를 빨리 확인해야 하는 경우 사용합니다. 특정 개발자들은 더 나은 단위 테스트를 작성하기 위해 REPL을 사용하기도 합니다. 테스트뿐만 아니라 프로그래밍 언어를 입문하는 경우에도 유용합니다. C#을 배우기 위해 컴퓨터에 VisualStudio를 설치하거나 Java를 배우기 위해 Eclipse 또는 Intelij를 설치하는 과정은 입문자에게는 어려울 수 있으며, 설치 .. 기타 2022. 7. 5.

• 

  [JavaScript]함수의 프로토타입(prototype in function) 함수의 프로퍼티 JavaScript에서 함수는 객체이지만, 일반 객체와는 다르게 함수 객체만의 표준 프로퍼티가 존재합니다. 이번 포스팅에서는 함수의 내부 프로퍼티인 [[Prototype]]와 다른 객체에 존재하지 않는 prototype 프로퍼티에 대해 설명합니다. 함수의 표준 프로퍼티인 length, name에 대해서는 아래 포스팅에서 자세하게 설명합니다. [JavaScript]함수의 length, name 프로퍼티 함수는 특별한 객체 JavaScript에서 함수는 객체입니다. 객체와 마찬가지로 함수에는 프로퍼티와 함수가 존재하며, 함수를 변수, 배열, 객체에 할당하거나 다른 함수에 인수로 전달할 수 있습니다. developer-talk.tistory.com 프로토타입에 대한 내용은 아래 포스팅에서 자세.. JavaScript/함수 2022. 7. 5.

• 

  [JavaScript]프로토타입 체인(Prototype Chain) 프로토타입 체인(Prototype Chain) JavaScript에서 변수를 객체(배열, 객체, 함수 등)로 선언하면 상위 객체의 프로퍼티를 호출할 수 있는데, 여기서 말하는 상위 객체를 프로토타입이라고 말합니다. var arr = []; // 배열을 할당했으므로 프로토타입은 Array var obj = {}; // 객체를 할당했으므로 프로토타입은 Object console.dir(arr); console.dir(obj); [실행 결과] 그리고 상위 객체의 프로퍼티를 호출할 수 있도록 해주는 메커니즘을 프로토타입 체인(Prototype Chain)이라고 말합니다. var arr = []; var obj = {}; arr.push(1); // Array는 push() 함수를 사용할 수 있음 obj.push.. JavaScript/함수 2022. 7. 5.