JavaScript&TypeScript22

• 

  TypeScript에 대해서 알아보자 💡 타입스크립트란(위키백과) 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[4] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[5] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든.. JavaScript&TypeScript 2023. 1. 17.

• JavaScript 회원가입 정규표현식 정규 표현식이란? 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다. (이런걸 형식 언어, formal languange라고 합니다.) 정규표현식을 이용하면, 특정 패턴에 매칭되는 문자열을 쉽게(?) 찾아낼 수 있습니다. 예를 들어 010-1111-2222 라는 전호번호는 "숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있는데, 정규표현식으로 아래와 같이 패턴을 만들어주면, 특정 문자열이 해당 패턴에 맞는지 체크할 수 있습니다. const regex = /\d{3}-\d{4}-\d{4}/; // (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.) regex.test('010-1111-2222') // true; regex.test('01-11-22') /.. JavaScript&TypeScript 2022. 12. 21.

• 파이썬 JS Python Dictionary와 JavaScript Object 파이썬과 Javascript를 병행해서 공부하니 두 개의 언어가 비슷해서 자주 헷갈렸다. 오늘은 파이썬의 Dictionary와 자바스크립트의 Object를 비교하면서 공부해 보자. 사전형 데이터 타입, 객체 {} 위와 같이 표시하는 타입을 Python에서는 사전형(Dictionary) 데이터 타입 Javascript에서는 객체(Object)라고 한다 Python # python a = {} b = dict() print(type(a)) ## print(type(b)) ## print(a) ## {} print(b) ## {} Javascript // javascript a = {} b = new Object() console.log(typeof(a)) // object console.log(typeof(.. JavaScript&TypeScript 2022. 12. 16.

• JavaScript Array 자주 쓰이는 내장함수 복습하기 최근 알고리즘 문제를 풀면서 느낀 것도 많았고 배운 것도 많았다 그중에서 크게 와닿는 것이 있었는데 바로 내장함수였다. 본인은 내장 함수를 거의 사용하지 않았다 ... 그래서 오늘은 내장함수에 대해서 복습하는 시간을 가지려고 한다!! 바로 시작해 보자 Array 내장함수 join() split() reverse() splice() slice() find() some() every() reduce() sort() map() filter() forEach() 1. join() join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 원본 배열은 바꾸지 않음. 비파괴적 처리 let color = ['red','black','orange','blue','gray'] console.log(colo.. JavaScript&TypeScript 2022. 12. 16.

• JavaScript 클래스를 알아보자 class class란?? 현실과 비슷한 개념(객체)을 나타내기 위한 도구를 **클래스(Class)**라고 부릅니다. 클래스는 미리 정의해놓으면 필요할 때마다 해당 클래스로 동일한 틀을 가진 객체를 만들 수 있습니다. 여기서 동일한 클래스를 이용해 생성한 객체를 **인스턴스(Instance)**라고 부릅니다. class User { } const 사람 = new User(); 사람.name = "오길환"; 사람.age = 29; 사람.tech = "Node.js"; console.log(사람.name); // 오길환 console.log(사람.age); // 29 console.log(사람.tech); // Node.js 생성자(Constructor) 👉 “클래스 내부에서 constructor()로 정의한 메서드를.. JavaScript&TypeScript 2022. 12. 12.

• JavaScript Error handling 에러 핸들 Error handling 에러 핸들링은 에러를 관리하는 방법이고, 예상치 못한 상황에 대처하는 방식입니다. 에러는 예상할 수 있는 에러와 예상치 못한 에러로 구분할 수 있는데, 일반적인 어플리케이션을 설계할 때에는 예상치 못한 에러 상황이 더욱 많이 일어날 것으로 가정해야 합니다. 프로그래머가 작성한 코드에서 예상치 못한 에러가 일어날 가능성은 언제나 존재하고, 이러한 에러 상황을 대비해 언제든지 처리할 수 있어야 합니다. try / catch 서버에서 에러가 발생하지 않게 하기 위해서 저희는 예외 처리를 진행합니다. 예외 처리는 일반적으로 try … catch 문을 사용합니다.이렇게 예상치 못한 에러에 대처하기 위해선 try … catch문으로 코드 전체를 감쌀 수 있습니다. users에 들어있는 이.. JavaScript&TypeScript 2022. 12. 12.

• Javascript 동기(Sync)&비동기(Async) 동기(Sync) & 비동기(Async) 동기(Sync)와 비동기(Async)에 대한 개념 일반적으로 "동기로 실행된다" 라고 함은, 먼저 실행된 코드의 결과가 나올때까지 대기하는것을 말합니다. 놀이기구를 생각하면 쉽습니다. 정원이 30명인 놀이기구가 있다고 가정합니다. 놀이기구를 한번 태우는데 약 5분이 걸린다고 가정하면 놀이기구를 막 태우기 시작한 시점에서는 대기자 모두 5분이 지나 이미 놀이기구에 탑승했던 사람들이 다 내리기 전까지는 탑승을 할 수 없습니다. 이것은 놀이기구 탑승/하차가 동기적으로 관리된다고 볼 수 있습니다. 일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는것을 말합니다. 맛집을 생각하면 쉽습니다. 정원이 최대 30명인 맛집이 있다고 가정합니다. 입장.. JavaScript&TypeScript 2022. 12. 12.

• 

  JavaScript 고급 함수 forEach() 콜백 함수 선언적 함수 사용하기 function callThreeTimes(callback){ for(let i = 0; i < 3; i++){ callback(i) } } function print(i) { console.log(`${i}번째 함수 호출`) } callThreeTimes(print) 아래와 같은 결과 값 출력 익명 함수 사용하기 function callThreeTimes(callback){ for(let i = 0; i < 3; i++){ callback(i) } } callThreeTimes(function (i){ console.log(`${i}번째 함수 호출`) }) 콜백 함수를 사용하는 함수 forEach() 콜백 함수를 활용하는 가장 기본적인 함수는 forEach() 메소드 입.. JavaScript&TypeScript 2022. 12. 10.

• 

  JavaScript 클래스와 객체 함수의 차이? 클래스와 객체 오늘 클래스와 객체 공부를 하던 도중 나온 코드다 class shop { constructor(color, size, price) { this.color = color this.size = size this.price = price } info() { console.log(`color : ${this.color} price : ${this.price} size : ${this.size}`) } } const shirt = new shop('red', 'XL', 20000) const tshirt = new shop('orange', 'M', 15000) console.log(shirt, tshirt) //////////////////////////////////////////////////.. JavaScript&TypeScript 2022. 11. 22.

• Form 태그 새로고침 막는법 미니 프로젝트에서 조원 검색 기능을 넣어두고 태그 속에 버튼을 클릭하면 자꾸 새로고침을 해서 데이터를 받아오지 못했다 이와 같은 문제 해결 방법을 아래와 같은 방법으로 해결했다 $(document).ready(function () { show_comment(); const todoForm = document.getElementById("fix") todoForm.addEventListener("submit", handleToDoSubmit) function handleToDoSubmit(event) { event.preventDefault(); } }); todoForm이라는 변수에 태그의 아이디 값을 넣어주고 todoForm.addEventListener("submit", 함수명) todoForm 이 .. JavaScript&TypeScript 2022. 11. 19.