xu의 개발일지

스택 (Stack)LIFO (Last In First Out) 구조가장 마지막에 넣은 걸 먼저 꺼내는 자료구조 주요 메서드 push(item)스택에 데이터 추가pop()스택에서 데이터 꺼냄 (마지막 값)peek()가장 위에 있는 값만 확인 (꺼내진 않음)isEmpty()스택이 비었는지 확인length 또는 size()현재 스택의 길이 확인 JavaScript에는 Stack 자료구조가 따로 없지만, 배열을 통해 구현할 수 있다.배열에서 Stack의 메소드를 쓰면 스택처럼 동작하는 것!const stack = [];stack.push(1); // [1]stack.push(2); // [1, 2]console.log(stack.pop()); // 2 꺼냄console.log(stack); // ..

타입스크립트 (TypeScript)마이크로소프트가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합.타입스크립트는 자바스크립트를 확장하여 정적 타입 검사와 고급 기능을 제공!■  정적 타입 시스템: 코드를 작성하는 동안 타입을 명시하거나 자동으로 추론하여, 런타임 전에 타입 관련 오류를 잡을 수 있게 함. ■  ES6+ 문법 지원 및 트랜스파일링: 최신 ECMAScript의 문법 사용 가능, 브라우저 호환성을 위해 ES5로 트랜스파일 됨. ■  객체지향 프로그래밍 지원 강화: 클래스, 인터페이스, 모듈 등 객체지향 개념을 자바스크립트에서 더 자연스럽게 사용할 수 있도록 도움 타입스크립트의 등장 배경자바스크립트의 단점을 보완하기 위해 등장!1. 자바스크립트의 동적 타입 문제- 자바스크립트는 런..

자바스크립트에서 중요한 개념인 클로저!클로저함수가 자신이 선언될 때의 환경(변수, 상수 등)에 접근할 수 있는 권한을 가진 함수 일반적으로 함수가 실행을 마치고 종료되면, 그 함수 내에서 선언된 변수들은 소멸하게 접근할 수 없게 되지만,클로저는 함수가 종료된 후에도 그 함수가 선언된 시점의 환경을 기억하기 때문에, (렉시컬 스코프)외부 함수가 종료된 이후에도 내부 함수에서 외부 함수의 변수에 접근할 수 있다. 클로저의 생성 원리주로 함수 내에 중첩된 함수가 있을 때 생성자바스크립트는 함수가 생성될 때 외부 함수의 변수를 기억하는 방식으로 클로저를 형성함! 클로저의 동작 방식1. 중첩된 함수에서 외부 함수의 변수에 접근할 때 중첩 함수가 외부 함수의 변수들을 계속 참조할 수 있음2. 외부 함수가 실행을 마..

JavaScript를 복습하는 차원에서, 간단한 Todo List를 만들어 보았습니다.완성본은 이렇게 생겼습니다!   TODO LIST 추가 전체 삭제 xu..

자바스크립트 강의를 마무리 하면서, 계산기를 만들어 보았습니다.기능 구현뿐만 아니라 보기 좋은 코드에 대한 고민을 가지고 코드를 작성했으며, 실제로 리팩토링도 여러 번 진행하였기에 기록하기 위해 블로그를 작성합니다. 0 C ± % / 7 8 ..

SOLID 원칙이 뭔데?SOLID 원칙이란 소프트웨어 설계에서 유지보수성과 확장성을 높이기 위한 다섯 가지 객체 지향 설계 원칙이다.말 그대로, 좋은 코드를 만들기 위한 원칙! 이 원칙들은 잘 구조화된 소프트웨어를 작성하는 데 중점을 두며, 코드의 가독성, 유연성, 테스트 가능성 등을 향상시키는 데 기여한다! 객체 지향 설계 원칙...?자바스크립트는 완전한 객체 지향 언어가 아닌데? 그렇다.JavaScript는 전통적인 객체 지향 언어인 Java, C++과는 다르게 프로토타입 기반 객체 지향 언어이다. 그럼 프로토타입 기반 OOP와 클래스 기반 OOP는 뭐가 다를까?특징클래스 기반 OOP프로토타입 기반 OOP객체 생성 방식클래스를 정의하고, 클래스를 통해 객체 생성기존 객체를 복사하거나, object.c..

현재 JavaScript의 기초 부분을 학습 중이다.document.createElement() 메소드를 활용하여 몬스터 잡기 게임을 만들어 보았다. 우선 HTML 코드는 이렇게 작성해 보았다. container 의 style은 추후에 작성하겠지만 monster의 움직임을 구현하기 위해 작성하였다.const container = document.getElementById("container");// 몬스터 모양 만들기const monster = document.createElement("div");monster.textContent = "*_*";monster.style.width = "50px";monster.style.height = "50px";monster.style.backgroun..

JavaScript란?JavaScript는 웹 개발을 중심으로 사용되는 스크립트 언어이다.주로 웹 페이지의 동적 콘텐츠를 구현하는 데 사용된다.웹 브라우저에서 기본적으로 실행되며, 사용자가 웹 페이지와 상호작용할 수 있는 기능을 추가하는 데 중요한 역할을 한다.JavaScript는 ECMAScript(ECMA-262 표준) 기반으로 발전해 왔으며, 현재는 웹뿐만 아니라 다양한 환경에서 사용될 수 있는 범용 프로그래밍 언어로 발전했다.   JavaScript의 주요 특징1. 인터프리터 언어: 컴파일 과정을 거치지 않고 바로 실행! 덕분에 빠른 개발과 테스트가 가능2. 동적 타이핑: 변수 선언 시 타입 명시가 필요하지 않다! 유연성을 제공하지만 그만큼 오류를 발생시키기도 함. 변수 사용은 최소화하자.3. 프..

자바스크립트에서 var, let, const는 변수 선언을 위해 사용된다.그렇다면 이 셋의 차이점은 무엇일까?크게 스코프(Scope), 호이스팅(Hoisting), 중복 선언 이렇게 3가지 차이가 있다.하나씩 뭔지 알아보자. 스코프- 어떤 변수가 선언된 공간 또는 환경- 어떤 변수의 스코프는 해당 변수가 접근될 수 있는 범위1. 글로벌 스코프- 함수나 블록 바깥에서 선언된 변수- 어디에서든지 접근 가능2. 함수 스코프 (= 지역 스코프)- 함수 안쪽에서만 접근이 가능한 변수- 블록 스코프를 무시3. 블록 스코프 (ES6)- 블록({}) 안에서만 접근 가능 (함수 포함)- let, const에만 적용 호이스팅 자바스크립트 스코프 안에서 변수를 최상단에서 선언하는 것.- var, let, const 변수는 ..