타입스크립트를 설치해도 tsc 명령어가 동작하지 않는 현상 해결

이 글을 읽기 전에.. 오 마이 갓... 이 글을 다 작성한 후 큰 문제가 터져버렸다. 역시나 예상했던 대로 글로벌 환경 을 잘못건드린 것 같다. 기존에 설치됬었던 node.js 버전을 무시한 채 node.js 의 가장 최근 버전이 자동으로 설치되었다. (그것도 lts 버전 인 18 버전 도 아닌 19 버전 이 설치되었다.) 아래 작성한 내용은 node.js 버전이 크게 관계 없을 때 시도할 경우 사용하면 좋을 것 같다. 1. 문제 발생 웹 컴포넌트 기반의 라이브러리 lit 과 관련한 프로젝트를 새롭게 생성하였다. 타입스크립트 를 지원하여 설치를 하였는데 tsc 명령어를 실행하려고 하자 명령어를 찾을 수 없다(zsh: command not found: tsc) 는 상황이 발생했다. 2. 문제의 흐름 1)..

• format_list_bulleted 프론트엔드/트러블 슈팅
• · 2023. 1. 26.
• textsms

[자바스크립트 딥다이브] 6장 데이터 타입

# 개요자바스크립트의 모든 값 은 데이터 타입 을 갖는다.데이터 타입 이란 값의 종류 이며, ES6 기준으로 7 개의 데이터 타입을 제공한다.데이터 타입은 크게 원시타입 과 객체타입 으로 나뉜다. 1. 원시 타입 primitive type- number : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입 만 존재한다.- string: 문자열, 하나 이상의 문자를 의미하며, 하나의 문자 타입 만 존재한다.- boolean: 논리적 참(true), 거짓 (false)- undefined: var 키워드로 선언된 변수에 암묵적 으로 할당되는 값으로, 없다는 의미의 null 과는 의미가 다르다.- null: 값이 없다 는 것을 의도적으로 명시 할 때 사용하는 값- symbol: ES6 에서 추가된 7번째 타입으..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2023. 1. 26.
• textsms

티스토리에서 코드펜 사용하기

들어가며 자바스크립트 딥다이브 스터디와 관련한 글을 정리해서 올리고 있다. 이때 코드 블록으로 된 내용을 많이 올리고 있는데, 단순하게 올리는 것보단 코드펜을 활용해서 적용하면 더 좋을 것 같다는 생각이 들었다. 이번에는 티스토리 에서 코드펜 을 사용하는 방법을 올려보려고 한다. 선행조건 티스토리에 코드펜 을 사용하려면 우선 코드펜 계정이 있어야한다. 코드펜 링크 위의 링크에 접속하여 회원가입하면 된다. 방법은 어렵지 않으므로 따로 작성하진 않겠다. 코드펜 내용 위의 그림과 같은 코드펜 내용을 사용하고자 한다. 1.embed 버튼을 클릭한다. 2.HTML (Recommended) 탭의 Copy Code 를 클릭한다. 코드를 복사하면 embed 코드가 복사된다. 3.티스토리 에서 기본 모드 를 HTML 로..

• format_list_bulleted 웹 페이지/티스토리
• · 2023. 1. 25.
• textsms

[자바스크립트 딥다이브] 5장 표현식과 문

# 값값 이란 식이 평가되어 생성된 결과이다.평가 란 식을 해석해서 값을 생성 하거나, 참조 하는 것을 의미한다.변수 란 하나의 값을 저장하기 위해 확보된 메모리 공간 으로, 변수에 할당되는 것은 값예제let sum = 10 + 20;변수: sum평가: 10 + 20값: 10 + 20 의 결과 # 리터럴사람이 이해할 수 있는 문자 혹은 약속된 기호를 사용해 값을 생성하는 표기법이다.3 // 숫자 리터럴 3자바스크립트 엔진 은 런타임 시점에서 리터럴 값을 평가 해 값을 생성 한다.리터럴예시비고정수100 부동소수점10.5 2진수0b010000010b로 시작8진수0o101ES6 에서 도입. 0o로 시작16진수0x41ES6 에서 도입. 0o로 시작문자열'hello' / "world" 불리언true / false..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2023. 1. 25.
• textsms

[자바스크립트 딥다이브] 4장 변수

# 변수란 무엇인가? 왜 필요한가?변수란 데이터 를 관리하기 위한 핵심 개념으로 연산된 결과 를 재사용 하기 위한 방법이다.데이터 는 피연산자 와 연사자의 결과 를 의미한다.10 + 20 위의 과정은 피연산자 10 과 20, 연산자 + 를 연산하는 과정이다.피연산자 는 각각 임의의 메모리 주소 에 저장되며, 이 값을 읽어 연산된 결과 또한 임의의 메모리 주소 에 저장되게 된다.이러한 연산된 결과를 재사용 하기 위해서는 해당 메모리 주소 로 접근 해야한다. TIP.자바스크립트 에서는 치명적 오류를 야기할 수 있는 메모리 직접 접근 은 허용하지 않으며 , 메모리 주소 는 임의 로 결정된다.따라서, 코드가 실행되기 전 에는 연산된 결과의 메모리 주소 를 알 수 없다.변수 란 값을 저장하기 위한 메모리 공간 을..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2023. 1. 25.
• textsms

[자바스크립트 딥다이브] 3장 자바스크립트 개발 환경과 실행 방법

# 자바스크립트 실행 환경모든 브라우저 는 자바스크립트를 해석하고 실행 할 수 있는 자바스크립트 엔진 을 내장하고 있다.또한 브라우저 뿐만 아니라 Node.js 도 자바스크립트 엔진 을 내장하고 있다.따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다. 1. 브라우저와 Node.js의 주된 목적브라우저 : HTML, CSS, 자바스크립트 를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것Node.js : 브라우저 외부 에서 자바스크립트 실행 환경을 제공하는 것브라우저와 Node.js 모두 자바스크립트의 코어 기능인 ECMAScript 를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호되지 않는다.1) 브라우저파싱된 HTML..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2023. 1. 25.
• textsms