분류 전체보기 검색 결과
224 개의 검색 결과가 있습니다.
Frontend/TypeScript

[TS] 타입스크립트 개발환경 환경 설정하기(VS Code)

🌈 타입스크립트 개발환경 세팅하는 방법 타입스크립트 개발환경을 구성하기 위해서는 npm이 필요하기 때문에 node.js가 설치되어 있어야 하며, 개발 툴로는 Visual studio Code를 사용할 것이기에 두 가지 모두 설치되어 있다는 가정하에 포스팅한다. 또한, vscode는 추가적인 플러그인을 설치하지 않아도 Typescript에 대한 intellisense를 제공한다. 1️⃣ 타입스크립트 설치 아래 명령어를 통해 typescript를 설치한다. npm install typescript 설치가 정상적으로 완료되었는지 확인하기 위해 버전을 확인하는 명령어를 입력한다. npx tsc -v 2️⃣ tsconfig.json 생성 및 설정 tsconfig.json 파일이 필요한 데에는 두 가지 이유가 있다..

2023. 1. 18. 17:00
Frontend/JavaScript

[JS] 자바스크립트 논리 연산자 AND (&&)를 이용한 조건문

🌈 자바스크립트 논리 연산자를 이용하여 조건문 작성하기 자바스크립트의 논리 연산자 중 AND (&&) 연산자를 이용하여 조건문을 작성할 수 있다. 🙋‍♂️ 예제로 알아보기 논리연산자 && 는 앞에는 조건을 작성하며 조건이 True일 때 && 연산자 뒤의 괄호 속 코드를 실행한다. ◾ 변수의 값에 따라 값 할당 아래 코드는 && 연산자를 활용해 조건문을 대신한 코드의 예제이다. /* 조건이 false일 때 && 연산자 뒤 괄호 속 코드는 동작하지 않는다. */ let x = 10 x == 5 && (x = 100) console.log(x) // 10 /* 조건이 true일 때 && 연산자 뒤 괄호 속 코드가 동작하며 한번에 여러 일을 할 수 있다. */ let y = 10 y == 10 && (y = 1..

2023. 1. 17. 21:47
Frontend/JavaScript

[JS] 자바스크립트 특정 값으로 배열의 값 채우기(Arr.fill( ))

🌈 자바스크립트 특정한 값으로 배열을 채우는 방법 자바스크립트의 배열을 특정 값으로 채우는 방법은 배열의 기본 메서드인 fill( ) 을 사용하는 것이다. 또한, fill 메서드를 통해 특정 인덱스를 지정하여 해당하는 인덱스에 값을 할당할 수도 있다. 👨‍💻 기본 구문 arr.fill(value[, start[, end]]) ◾ 매개변수 ◽ value : 배열을 채울 값 ◽ start : 시작 지점의 인덱스, 기본 값은 0이며 생략할 수 있다. ◽ end : 끝나는 지점의 인덱스, 기본 값은 배열의 길이(this.length)이며 생략할 수 있다. const array1 = [1, 2, 3, 4]; /* 값 0을 2번째 인덱스부터 4번째 인덱스까지 채운다 */ console.log(array1.fill(..

2023. 1. 16. 12:53
Frontend/JavaScript

[JS] 렉시컬 스코프(Lexical Scope)란 무엇일까?

🌈 자바스크립트 렉시컬 스코프(Lexical Scope) 정리 렉시컬 스코프(Lexical Scope)는 클로저(Closure)를 이해하기 위해 알아두어야 할 개념이다. 👨‍💻 렉시컬 스코프(Lexical Scope) 렉시컬 스코프의 정의는 함수 또는 변수의 스코프를 결정하는 방식이다. 다른 말로는 함수의 호출위치가 아닌, 선언된 위치에 따라 스코프가 결정되는 것이라고 할 수 있다 즉, 함수의 선언 위치에 따라 상위 스코프를 결정한다는 뜻이며 정적 스코프(Static scope)라 부르기도 하다. 🙋‍♂️ 예제로 알아보기 아래 예제는 x의 값을 콘솔로 출력하는 코드이다. let x = 1; const first = (() => { let x = 10; second(); }) const second = (..

2023. 1. 15. 22:35
Frontend/Svelte

[Svelte] 스벨트 컴포넌트 생명주기(Lifecycle) 정리

🌈 스벨트 컴포넌트 라이프사이클(Svelte Lifecycle) 1️⃣ Creation ◾ Script Executes - DOM 이 랜더링 될 때 실행/초기화 - 컴포넌트 내 프로퍼티 및 변수 지정, 함수 정의 ... ◾ onMount( ) - 데이터가 페칭될때 실행 ◾ onDestroy( ) - 컴포넌트가 DOM에서 분리될 때 실행 2️⃣ Updates ◾ beforeUpdate( ) - 업데이트가 실제 DOM에 반영되기 직전에 코드를 실행 ◾ afterUpdate( ) - Svelte가 DOM에 연결된 직후에 실행 ◾ tkck( ) - 수행할 작업을 예약한 다음 작업이 완료되면 작업 루프에서 제거 - Node.js의 이벤트 루프를 생각하면 된다. - tick을 사용하면 각각의 완료된 작업을 연결할 ..

2023. 1. 13. 14:25
Frontend/Svelte

[Svelte] 스벨트 전개(Spread) 프로퍼티와 슬롯(Slot) 사용하기

🌈 Each문에서의 Spread 프로퍼티 및 Slot 사용 방법 Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다. 1️⃣ Spread 프로퍼티 기존에는 컴포넌트를 랜더하기 위해 each문을 쓸 때 아래와 같이 프로퍼티를 일일이 추가해 주었다. {#each products as product} {/each} 하지만 ES6의 전개연산자와 비슷하게 아래와 같은 문법을 사용함으로써 간결한 코드를 작성할 수 있다. {#each products as product} {/each} 2️⃣ Slot 상위 컴포넌트에서 하위 컴포넌트 사이에 태그를 작성하였을 때, 해당 하위 컴포넌트에서 slot태그가 존재하여야만 결과가 출력된다. 만약 slot 태그 없이..

2023. 1. 12. 15:23