프론트엔드 개발자 모집 공고를 보면 자격 요건 또는 우대사항에 TypeScript 학습 경험을 적어둔 경우가 많다. 그래서 일단 이번에 진행하는 프로젝트에서는 JavaScript말고 TypeScript를 한 번 써보기로 했다. TypeScript를 공부해보기 전에 TypeScript에 대해 좀 더 자세하게 알아보고 공부하는게 더 의미있을 것 같아서 정리해봤다. 여러분의 두뇌로 타입 추론을 하지 말고, 여러분보다 똑똑한 컴파일러가 판단하도록 합시다. 타입 스크립트란?‘TypeScript’는2012년 마이크로소프트가 개발한 언어로 JavaScript 에 정적 타입 문법과 객체 지향적 기능(인터페이스, 제네)을 추가한 ‘프로그래밍 언어’이다.티오비는 타입스크립트를 2024년의 유망한 언어로 꼽았다. TypeS..

classListclassList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체이다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있다.구문element.classList;classList의 주요 메서드add()classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가하는 메서드이다.구문element.classList.add(className1);// 여러 개의 클래스 값을 한 번에 추가할 수도 있다.element.classList.add(className1, className2);element.classList.add(className1, className2, /*...,*/ classNameN);remove()classList.r..

속성 접근 및 변경 방법. 점 표기법DOM 객체의 프로퍼티에 접근하거나 설정할 때 점 표기법을 사용한다. 이를 통해 속성을 읽고, 수정할 수 있다.이 방법은 JavaScript 객체의 프로퍼티를 직접 조작하는 방법으로, 요소의 현재 상태를 반영하게 된다.구문예제const banner = document.querySelector('#banner');// 1. 점 표기법banner.src = 'new_image.jpg';getAttribute()getAttribute() 메서드는 Element의 메서드로, 해당 Element요소에서 속성 값을 가져오는 함수이다.구문element.getAttribute(name);주어진 요소에 속성이 존재하면 그 속성의 값을 문자열로 반환한다. 존재하지 않으면 null을 반환..

텍스트 변경하기HTML 요소의 텍스트를 변경하는 방법을 알아보자.innerTexttextContentinnerTextinnerText는 Element의 속성으로, element 내에서 사용자에게 보여지는 text 값들을 가져오거나 설정할 수 있다. 이 때 해당 요소뿐만 아니라 해당 요소의 자식들 안의 텍스트도 같이 갖고 온다.구문/* 가져오기 */const renderedText = htmlElement.innerText;/* 설정하기 */htmlElement.innerText = string;textContenttextContent는 Node의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 나 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.구문/*..

1. 문제 쪼개서 분석하기- 동작 단위로 쪼개ㅓ 분석하는 습관을 들일 것 2. 제약 사항을 파악하고, 테스트 케이스를 추가하기- 제약 사항을 정리해 둔 뒤 이를 고려해서 테스트 케이스를 추가하는 연습을 할 것 -> 어떤 알고리즘을 적용할지 고민할 떄 유용하고, 코드 구현 과정에서 예외를 거를 때 도움이 됨 3. 입력값을 분석하기- 알고리즘의 시간 복잡도는 입력값에 의해 결정되는 경우가 대다수 -> 입력값의 크기를 확인하면 제한시간 내에 문제를 풀 수 있는 알고리즘과 그렇지 않은 알고리즘을 미리 걸러낼 수 있음. 4. 핵심 키워드 파악하기- 문제의 핵심 키워드를 빨리 파악해야 문제를 빨리 해석할 수 있음. 핵심 키워드가 특정 알고리즘을 암시하는 경우가 많음ex) 최적의 해 -> 너비 우선 탐색 알고리즘을 ..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM이란>DOM은 HTML과 XML 문서를 구조화하여 프로그래밍적으로 접근하고 조작할 수 있도록 만든 문서 객체 모델이다.웹 페이지의 각 요소는 JavaScript 객체로 표현되는데, DOM은 이 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 이를 변경하면 페이지에 즉시 반영된다.📌 DOM의 핵심 역할HTML 문서를 JS에서 조작할 수 있도록 변환웹 페이지의 구조, 스타일, 콘텐츠를 JS를 통해 동적으로 변경 가능DOM 요소 선택 메서드DOM에서 요소를 선택하기 위해 사용하는 다양한 메서드가 있다.getElementByIdgetElementById 메서드에 문자열을 전달하면 해당 문자열과 일치하는 ID 속성을 가진..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM의 정의DOM은 문서 객체 모델을 의미하며, 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 예를 들어 HTML 요소 중 태그를 모델링하는 JavaScript 객체가 존재하는 것이다. 태그를 나타내는 JS 객체를 변경하면 페이지에 변경 사항이 반영되게 된다. 문서 객체 모델은 JS에서 엡페이지 콘텐츠로 접근하는 통로이다.문서 객체의 메서드들Selecting요소 선택을 도와주는 메서드들을 공부해보자.getElementByIdgetElementById 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. 없으면 null을 반환한다.getElementsByTagName태그 이름을 전달하면, 한 번에..

기본 매개변수함수를 쓸 때 매개변수가 있으면 그걸 쓰고 없으면 기본 매개변수의 값을 사용한다.디폴트 매개변수는 여러 개 사용할 수 있지만,function rollDie(numSides = 6) {}스프레드 연산자스프레드 연산자를 사용하면 배열과 같이 반복 가능한 객체를 전개구문을 사용해 확장한다.반복 가능한 객체를 펼치면 어떻게 되는가?배열 펼치기Math.max(1,3,6,15,25,4,23,99,45,101,143,21,5); //143const nums = [1,3,6,15,25,4,23,99,45,101,143,21,5];Math.max(nums); //NaN - not a numberMath.max(...nums); //143 - 배열이 펼쳐지고 인수는 따로 따로 들어가게 된 것이다!console..

이정환 강사님의 인프런 강의 '한 입 크기로 잘라먹는 리액트' 의 강의 내용과 자료를 바탕으로 복습을 위해 정리한 글입니다!동기동기란 여러 개의 작업이 있을 때, 차례대로 하나의 작업씩 처리해 나가는 방법을 말한다.동기여러 개의 작업을 순서대로, 하나씩 처리하는 방법console.log('1');console.log('2');console.log('3');/* 실행 결과 1 2 3*/동기의 장점프로그램의 실행 흐름을 파악하기 쉽다 (위에서 아래로 읽어나가면 됨)동기의 단점과 보편적 해결방안모든 프로그램의 실행 시간이 0.1초 등으로 짧다면 상관이 없겠지만, 실행 시간이 긴 프로그램이 중간에 껴있게 되면 그 다음 작업들을 수행할 수 없어 전체 프로그램의 성능이 저하된다는 치명적인 단점이 존재..

자바스크립트의 경우 Object나 Map을 사용해서 해시 테이블을 구현할 수 있다.Object: 키로 string만 사용할 수 있다.Map: 다양한 데이터 타입을 키로 사용할 수 있으며, 삽입 순서를 유지하는 장점을 갖는다.하지만 내부적으로 어떻게 동작하는지 이해하기 위해, Object나 Map을 사용하지 않고 직접 해시 테이블과 해시 함수를 구현해보려고 한다.해시 알고리즘의 처리 방식해시 테이블은 키(Key)와 값(Value) 형태의 데이터 구조이다.이때 키는 해시 함수를 통해 '고유한 해시값' 으로 변환된다. 변환된 해시 값은 해시 테이블에서 {key: value} 쌍이 저장될 위치인 해시 인덱스가 된다.해시 알고리즘을 사용하면 효율적인 검색과 데이터 저장을 할 수 있다. 하지만 충돌이 발생할 가능성..

1.15 ~ 1.16) 객체객체 생성하기객체를 생성하는 방법은 두 가지가 있다.let obj1 = new Object(); // 객체 생성자let obj2 = {}; // 객체 리터럴 (대부분 사용)객체 프로퍼티객체에 프로퍼티를 추가할 때는 key: value의 쌍으로 추가할 수 있다. 여러 프로퍼티가 존재하는 경우 ,를 통해 구분한다.value에는 여러 원시타입과 배열, 객체등 다양한 값이 올 수 있다.key는 따옴표로 묶어줄 필요가 없다.단, like cat과 같이 띄어쓰기가 존재하는 키의 경우에는 따옴표로 묶어줘야 한다.let person = { name: '냐냐', age: 25, hobby: '강아지 산책', 'puppy name': '모리' //따옴표로 묶어줘야 함!};객체 프로퍼티 다..

forEach자바스크립트의 forEach메서드는 배열을 순회하는 여러 방법 중 하나이다. 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드이다.특징배열 안의 아이템 각각에 대해 함수의 코드를 한 번씩 실행한다.for...of가 나온 이후로는 잘 사용되지 않는다.예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없다.구문forEach(callbackFn)forEach는 매개변수로 콜백함수를 전달한다. 이 때 콜백 함수는 배열의 각 요소에 대해 실행된다.콜백 함수배열.forEach((currentValue, index, array)=>{});콜백 함수의 매개변수로는 세 개가 들어갈 수 있다.Current Value (명명된 매개변수): 배열에서 처리할..