[TypeScript] 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기 자바스크립트에서 객체란?키/값 쌍의 모음키는 보통 문자열값은 어떤 무엇이든 될 수 있다 파이썬, 자바에서 볼 수 있는 ‘해시 가능’ 객체 표현이 자바스크립트에는 없다.toString 메서드가 호출되어 객체가 문자열로 변환되어 버린다.> x={} {} > x[[1,2,3]] = 2 2 > x { '1,2,3': 1 } 숫자는 키로 사용할 수 없다.자바스크립트 런타임이 문자열로 변환해 버린다.> { 1: 2, 3: 4 } { '1': 2, '3': 4 } 배열은 분명히 객체이다때문에 숫자 인덱스를 사용하는 것이 당연하다.> typeof [] 'o..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

__[TypeScript] 01. 타입스크립트와 자바스크립트 관계 이해하기__

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. 💡타입스크립트는 자바스크립트의 상위집합(superset)이다타입스크립트와 자바스크립트의 관계타입스크립트는 문법적으로도 자바스크립트의 상위집합자바스크립트 프로그램에 문법 오류가 없다면유효한 타입스크립트 프로그램이라고 할 수 있다.문법의 유효성과 동작의 이슈는 독립적인 문제자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니더라도 타입 체커에게 지적 가능성 높음하지만, 타입스크립트는 여전히 작성된 코드를 파싱하고 자바스크립트로 변환 가능확장자의 차이자바스크립트 파일은 .js 또는 .jsx 확장자타입스크립트 파일은 .ts 또는 .tsx 확장자하지만 타입스크립트는 상위집합이기 때문에 main.js를 main.ts로 바..

• format_list_bulleted Front-End
• · 2023. 7. 10.
• textsms

[React] 리액트 작업환경 준비 - node.js, yarn, webpack, babel

https://react.vlpt.us/basic/02-prepare.html 2. 작업환경 준비 · GitBook 2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토 react.vlpt.us 다음과 같은 항목들을 설치한다. 1. Node.js Webpack과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져있다. 때문에 해당 도구들을 사용하려면 Node.js를 설치한다. 2. Yarn 조금 개선된 버전의 npm이라고 생각하면 된다. npm은 Node.js를 설치할 때 같이 오는 패키지 매니저 도구이다. 프로젝트에서 사용되..

• format_list_bulleted Front-End
• · 2023. 6. 14.
• textsms

[React] 리액트 라이브러리 이해하기

https://react.vlpt.us/basic/01-concept.html 1. 리액트는 어쩌다가 만들어졌을까? · GitBook 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 react.vlpt.us DOM 변형시키기 위해 어떤 작업을 해야하는가? 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택하고, 특정 이벤트가 발생하면 변화를 주도록 설정 HTML 0 +1 -1 JS const number = document.getElementById('number'); const increase = document.getElementByI..

• format_list_bulleted Front-End
• · 2023. 6. 14.
• textsms

[React] 리액트 입문용 공부 - <벨로퍼트와 함께하는 모던 리액트>

https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 지인 추천으로 이 사이트를 알게 되었다. 리액트 입문용으로 정리가 참 잘 되어있는 듯 하다. SW 마에스트로 백오피스 구축을 위해 급하게 공부하는 리액트... 잘 할 수 있을까... ㅎㅎ 🔥 오늘부터 공부 시작 ~! 화이팅 🔥

• format_list_bulleted Front-End
• · 2023. 6. 14.
• textsms

[JavaScript] 자바스크립트 비동기 - 이벤트 루프

자바스크립트 비동기 자바스크립트 엔진은 비동기 처리를 제공하지 않는다. 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다. 이 함수들을 API라고 한다. 비동기 API의 예시로, setTimeout, XMLHttpRequest, fetch 등의 Web API가 있다. node.js의 경우 파일 처리 API, 암호화 API 등을 제공한다. // 타이머 비동기 처리 setTimeout(() => console.log('타이머 끝'), 1000) setInterval(() => console.log('인터벌 타이머'), 1000) // 네트워크 처리 fetch('https://google.com') .then(() => console.log('네트워크 요청 성공.')) .catch(() => con..

• format_list_bulleted Front-End
• · 2023. 4. 3.
• textsms