크루시의 개발공부

기존 자바스크립트로만 이루어진 프로젝트에 타입스크립트를 적용하려고 한다. 우선 아래 명령어로 타입스크립트를 설치한다. npm i typescript --save-dev 혹은 npm i typescript --D 타입스크립트는 컴파일이 필요하기 때문에 설정파일이 필요하다. (없으면 에러천국) tsconfig.json 파일을 생성해주고, 기본 값을 설정해준다. { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./dist", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"] }, "include": ["./src/**/*"] "exclude": ["node_modu..

스택과 큐는 자바스크립트에 내장되어있진 않지만 배열을 이용하여 구현할 수 있다. 스택 (Stack) 스택은 LIFO (Last In, First Out) 구조로 마지막에 들어간 데이터가 먼저 나오는 구조이다. 입구가 하나인 통에 탑을 쌓는다고 생각하면 된다! 자바스크립트에서의 Stack? - 자바스크립트 배열 메서드인 push()와 pop()을 이용하여 구현할 수 있다. - 삽입, 삭제는 시간복잡도는 O(1)로 배열의 크기가 아무리 커도 자료를 삽입,삭제할땐 효율적인 로직을 짤 수 있다. - 자바스크립트의 콜 스택과 같은 구조이다. - 자바스크립트의 특성상 배열의 크기를 정하지 않기때문에 편리하게 구현할 수 있다. 큐 (Queue) 큐는 FIFO(First in, First Out) 구조로 먼저 들어온 ..

Promise(프로미스)? 비동기 처리를 원활하게 도와주는 객체입니다. ES6 부터 콜백 지옥을 벗어나게 해주고 비동기 작업에 대해 훨씬 쉽게 다룰 수 있게 해줍니다. 여기서 콜백지옥이란? 1. 콜백 지옥 예시 function getName(callback) { setTimeout(() => { callback("Croossh"); }, 2000); } setTimeout 을 써서 2초뒤에 콜백함수를 실행하는 비동기 함수가 있습니다. 이러한 함수가 여러개 있고, 콜백함수가 서로 연관되어있다면 어떨까요. function getId(callback) { setTimeout(() => { callback("1"); }, 2000); } function getName(callback) { setTimeout((..

classList 선택된 element(HTML 요소)의 class 속성값을 변경할 수 있는 메서드이다. 이제부터 버튼에~ onClick을 주고~ js 파일에서 바꾸고~ 복잡하게 하지 말자! (setAttribute 도 마지막에 적어놓았으니 참고하세요!) ↓↓ 아래의 예시를 이용할 HTML 코드 입니다. ↓↓ ... ... + addEventListener 와 같은 이벤트를 이용하면 좋다. 1. element.classList.add(); const divEl = document.getElementById("box1") divEl.classList.add("red"); "box1" 이라는 id 를 가진 요소를 찾고, 그 요소에 "red" 라는 class 속성값을 부여할 수 있다. 2. element.cl..