bergerac 님의 블로그

TypeScript에서 변수 충돌을 방지하는 두가지 방법

프로젝트르 TypeScript로 작성할 때에는 한 파일에서 선언한 변수가 다른 파일에서 똑같이 선언될때 충돌이 일어난다. 문제 상황: 전역 스코프 충돌// helloWorld.tslet num: number = 10;// basic.tslet num: number = 10;위처럼 num이라는 변수를 두 파일에 각각 선언하면 TypeScript는 블록 범위 변수 'num'을(를) 다시 선언할 수 없습니다.ts(2451)이와 같은 에러메시지를 발생시킨다. TypeScript는 파일 단위로 스코프를 구분하지 않기 때문에  module로 인식되지 않는다면 프로젝트 내의 모든 파일이 같은 전역 스코프를 사용하게 된다.  변수 충돌을 막는 두 가지 방법 ✅ 중괄호 블록으로 지역 스코프 생성{ let num = 1..

JavaScript의 상위확장언어, TypeScript

TypeScript란?타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, 자바스크립트를 기반으로 하여 만들어졌습니다. 자바스크립트에 정적 타입이라는 기능을 더한 언어이다. 자바스크립트의 모든 문법과 기능을 그대로 포함하면서, 그 위에 타입 시스템을 얹은 **"상위 집합(Superset)이라고 볼 수 있다. 특징 요약:자바스크립트의 모든 문법을 그대로 사용 가능정적 타입 시스템을 도입해 컴파일 시점에 오류 탐지 가능코드 작성 시 개발 도구의 자동완성, 타입 추론, 리팩토링 지원이 뛰어남TypeScript가 필요한 이유자바스크립트는 동적 타입 언어이기 때문에 다음과 같은 문제가 자주 발생합니다:변수의 타입이 실행 시점까지 결정되지 않아 사전 에러 탐지가 불가능런타임 오류로 이어지는 예상치..

TypeScript 환경설정하기

타입스크립트를 활용하여 개발하기 위해서는 환경설정이 매우 중요하다. 1.  Node.js 설치하기TypeScript 는 JavaScript의 상위 집합(superSet)이기 때문에 Node.js가 필요합니다.  📌 기존 Node.js 삭제윈도우에서 삭제하는 법1. 프로그램 추가/제거에서 Node.js 삭제하기2. 아래 경로에 있는 폴더들을 수동으로 삭제하기C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs C:\Users\사용자이름\AppData\Roaming\npm명령 프롬프트(cmd) 실행 후 아래 명령어로 완전히 삭제되었는지 확인node -v npm -v ==> 내부 또는 외부명령.. 메시지가 뜨면 삭제 완료! Mac에서 삭제하는 법brew uni..

1. 로컬 스토리지란?localStorage는 웹 브라우저가 제공하는 클라이언트 측 영구 저장소다. HTML5에서 도입된 이 API는 사용자의 컴퓨터에 데이터를 영구적으로 저장할 수 있게 해준다.데이터를 문자열로 저장브라우저를 껐다 켜도 데이터 유지쿠키보다 더 많은 용량을 저장 가능 (대부분 5MB 이상)서버로 전송되지 않아 보안성이 조금 더 우수2. 로컬 스토리지에 데이터 저장로컬 스토리지는 localStorage.setItem(key, value)를 통해 데이터를 저장한다. 저장 가능한 데이터는 문자열이어야 하며, 객체나 배열 같은 복잡한 구조는 **JSON.stringify()**로 변환해야 한다. // 기본 자료형 저장localStorage.setItem('username', 'bergerac')..

1. 쿠키란?웹 사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일이다. 쿠키를 통해 웹 서버는 사용자의 상태를 기억하고, 로그인 정보나 설정값, 방문 기록 등을 저장할 수 있다. 2. 쿠키의 구조하나의 쿠키는 다음과 같은 요소들로 구성된다.이름(Name): 각 쿠키의 식별자 역할값(Value): 쿠키에 저장할 정보 (문자열 형태)만료 날짜(Expires): 쿠키의 유효기간을 결정그 외에 선택적으로 아래와 같은 옵션들을 설정할 수 있다.경로(Path): 쿠키가 접근 가능한 경로 지정도메인(Domain): 쿠키가 유효한 웹사이트의 도메인Secure 플래그: HTTPS 연결에서만 전송HttpOnly 플래그: JavaScript에서 접근 불가, 서버만 접근 가능3. 쿠키의 한계 용량 제한: 보통 하나의 쿠..

프론트엔드 개발에서 클라이언트 측 저장소는 사용자 경험을 향상시키고, 서버 리소스를 절약하는데 매우 유용한 기술입니다.  클라이언트 측 저장소(Client-side Storage)란?클라이언트 측 저장소는 서버가 아닌 **사용자의 로컬 환경(브라우저)**에 데이터를 저장하는 기술입니다. 사용자의 컴퓨터나 모바일 장치에 직접 데이터를 저장함으로써 서버와의 불필요한 통신을 줄이고, 더 빠르고 효율적인 데이터 접근이 가능해집니다. 클라이언트측 저장소(Client-side Storage)의 주요 특징 퍼포먼스 개선 : 서버와의 통신 횟수와 필요성을 줄이기 때문에 응답 시간과 성능이 향상된다.오프라인 엑세스: 네트워크 연결이 없어도 데이터에 접근 가능사용자 경험 개선 : '개인설정이나 이전 상태를 저장'하여, 사..

에러란? 부정확하거나 유효하지 않은 동작을 의미한다.자바스크립트에서는 구문오류(SyntaxError)외의 대부분의 오류를 예외(Runtime Exception)라고 분류합니다.  🧨 예외의 종류 1. 구문 오류(Syntax Error)프로그램 실행 전에 발생문법이 언어의 정의된 규칙을 따르지 않을 때 발생// 예: 괄호 닫기 생략// console.log('프로그램이 시작되었습니다.'위와 같이 정의된 규칙을 따르지 않으면 실행이 되지 않으며 개발도중 IDE가 감지해주는 경우가 대부분임 2. 런타임오류(Runtime Error) 프로그램 실행 중에 발생예측 가능한 비정상적인 조건이나 예외적인 사건코드 실행 도중 오류가 발생하면 실행이 중단됨 // console.rog('log를 rog로 잘못 입력하였습니..

DOM이란?DOM은 Document Object Model의 약자입니다. 웹 페이지의 HTML 문서를 객체(Object)처럼 다룰 수 있도록 해주는 프로그래밍 인터페이스입니다.HTML의 각 요소는 JavaScript에서 객체로 인식됩니다. 이 객체들을 활용해 요소를 선택하고, 수정하고, 삭제하거나, 새롭게 생성하는 등 다양한 조작이 가능합니다. 쉽게 말해, JavaScript에서 HTML 요소를 **문서 객체(document object)**로 다룬다고 보면 됩니다.DOM 사용 방법OM은 기본적으로 다음과 같은 CRUD 작업에 사용됩니다:Create: 새로운 요소 생성Read: 기존 요소 선택 및 읽기Update: 요소의 내용이나 속성 수정Delete: 요소 삭제이러한 작업은 DOM에서 제공하는 메서드와..

async&awaitasync : 비동기 함수를 정의할 때 사용하는 키워드로 항상 Promise 객체를 반환함async function example() { return 'Hello'; // 자동으로 Promise.resolve('Hello')로 처리됨}await: Promise 가 처리될 때까지 기다림, async 함수 내부에서만 사용 가능async function getData() { let result = await fetch('https://api.example.com/data'); let json = await result.json(); console.log(json);}  async function fetchUserData() { let data = await fetch('https:..

Promise란?Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다.현재는 알 수 없지만, 미래에 결과가 생기는 **"약속된 값"**을 다루는 방식콜백 함수보다 가독성이 좋고 에러 처리도 쉬움Promise의 세 가지 상태대기(pending) : 비동기 작업이 아직 끝나지 않은 상태이행(fulfilled) : 비동기 작업이 성공적으로 완료되어 결과값을 반환한 상태거부(rejected) : 비동기 작업이 실패하여 에러를 반환한 상태 Promise 생성하기promise는 newPromise()생성자 함수를 통해 만들 수 있다.const myPromise = new Promise((resolve, reject) => { const condition = true; if (condition) {..