본문 바로가기

FE26

[TypeScript] TypeScript 알아보기 TypeScript 알아보기 # 타입스크립트란 자바스크립트의 확장된 언어로, 자바스크립트에 타입이 부여된 언어이다. 자바스크립트는 동적인 언어로, 변수 선언 시 타입을 따로 지정하지 않고 런타임할 때 타입이 결정된다. 따라서 유연하게 이용할 수 있다는 편리함이 있지만 그만큼 에러 발생의 위험이 높다. 개인적으로 타입스크립트의 필요성을 정말 느꼈던 적이 있다. 프로젝트를 제작할 때, 아이템의 index를 지정해주고 버튼을 클릭할 때마다 index를 더하거나 빼서 다른 아이템을 보여주는 기능이 있었다. index가 1일 때는 1번 아이템, index가 2일 때는 2번 아이템, 이런 식으로! 그래서 index를 +하는 버튼과 -하는 버튼을 구현했는데, 자꾸 제대로 동작하지 않는 것이다. 한참을 헤매던 결과 타.. 2023. 1. 5.
[JavaScript] 실행 컨텍스트 실행 컨텍스트 # 실행 컨텍스트 (excution context) 실행 컨텍스트란, 자바스크립트에서 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 여기서 환경이란, 코드 실행에 영향을 주는 조건, 상태를 의미한다. 실행 컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단으로서, 이를 이해하면 자바스크립트의 주요 개념인 스코프, 클로저, 호이스팅 등을 이해할 수 있다. 자바스크립트 코드를 실행시키면, 자바스크립트 엔진은 콜스택이라는 공간에 실행 컨텍스트를 생성한다. 전역 범위에 해당하는 실행 컨텍스트를 생성하고 난 뒤, 그 속에 있는 함수A, 함수B, ... 들의 실행 컨텍스트도 생성한다. 이렇게 생성된 실행 컨텍스트는 위에서부터 차례대로 실행된다. 실행을 마친 실행 컨텍스트는 사라진다. 각 실.. 2023. 1. 3.
[JavaScript] 자바스크립트의 비동기 처리 자바스크립트의 비동기 처리 callback, Promise, async/await # 동기, 비동기란? 동기(synchronous)란 동시에 일어나는 것, 비동기(Asynchronous) 동시에 일어나지 않는 것이라는 의미이다. 동기와 비동기란 일을 처리하는 순서라고 해석할 수 있다. 예를 들어, 청소를 한다고 치자. 세탁기와 청소기를 돌려야 한다. 어떻게 해야 하는가? 세탁기 작동 버튼을 눌러놓고 세탁이 끝날 때까지 기다렸다가 청소기를 돌려야 하는가? 그건... 너무 비효율적이지 않은가?🤔 세탁기 작동 버튼을 눌러 놓고 세탁기가 돌아가는 동안 청소기를 돌리면 된다. 세탁기와 청소기는 각자 돌아가니까! 여기서 동기, 비동기 개념이 나온다. 하나가 끝나야 그 다음 일을 하는 것을 동기적 처리라고 한다. 세.. 2022. 12. 5.
[JavaScript] 이벤트 이벤트 # 이벤트 등록 click! const div = document.querySelector('div'); div.addEventListener('click', handleClick); const handleClick = (event) => { console.log(event); }; 화면에 동적인 기능을 추가하기 위해 addEventListener()로 이벤트를 등록할 수 있다. 사용자는 이를 통해 웹 페이지와 상호작용한다. 그렇다면 브라우저는 이벤트를 어떻게 감지할까? 브라우저가 이벤트를 감지하는 방법에는 두 가지가 있다. # 이벤트 감지 1. 이벤트 버블링 특정 요소에서 이벤트가 발생했을 때, 해당 요소의 상위 요소로 이벤트가 전파되는 것이다. 클릭 const divs = document.qu.. 2022. 11. 5.
[JavaScript] for, forEach, map 차이 for, forEach, map 차이 1. for 조건에 부합하면 계속해서 순회한다. 중간에 break를 만나면 중단한다. const arr = [0, 1, 2, 3]; for (let i = 0; i 2) break; else console.log(arr[i]); } // 출력 결과 // 0 // 1 // 2 2. forEach 배열의 각 요소에 대해 callback 함수를 실행한다. break를 사용할 수 없다. const arr = [0, 1,.. 2022. 11. 2.
[HTML] attribute와 property attribute와 property # attribute : element의 추가적인 내용 예시 div는 element, class는 attribute, example은 value이다. # property : HTML DOM 안에서 attribute를 가리키는 표현 위 예시는 DOM에서 example이라는 값을 가진 className이 있다고 표현된다. 이때 className이 property이다. 참고 자료 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-attribute-%EC%99%80-property-%EC%B0%A8%EC%9D%B4 2022. 10. 29.

티스토리툴바