본문 바로가기

분류 전체보기328

[자바스크립트] async & await async & await 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하기 위해 최근에 나온 자바스크립트의 비동기 처리 문법을 말한다 콜백함수가 여러번 사용되면 콜백 지옥이 발생한다 → 프로미스의 등장 프로미스가 여러번 체이닝(중첩)이 되면 콜백 지옥과 같은 문제점이 발생한다 → async & await을 사용해서 마치 동기적으로 코드가 진행되는 것처럼 사용 함수 앞에 async라는 키워드를 붙여주면 함수 블럭 안에 있는 코드가 자동으로 프로미스를 사용하는 것처럼 변환이 되어진다 async라는 키워드가 붙은 함수내에서만 await을 사용할 수 있다 기본문법 async function 함수명() { await 비동기처리메서드명(); } 비동기로 처리하고 싶은 함수 앞에 async라는 예약어를 붙인다 .. 2022. 11. 20.
[자바스크립트] 프로미스 (프로미스 체이닝, 프로미스 에러 핸들링) 프로미스(Promise)란? 비동기처리에서 흔하게 사용되는 콜백함수는 여러번 중첩될 경우 콜백지옥의 문제점이 생긴다. 프로미스는 콜백을 대신해 비동기 처리에 사용하는 객체다. 예제 새로운 프로미스가 생성될때 (new Promise) 프로미스 안에 있는 콜백함수가 바로 실행된다. const promise = new Promise((resolve, reject) => { // 비동기적으로 실행하고 싶은 코드를 작성 // doing some heavy work (network, read files) console.log('doing something...') }) 프로미스의 2가지 결과값 (성공과 실패) 성공: 정해진 시간에 수행했을 경우 → 성공의 메시지와 함께 처리된 결과값을 전달 실패: 예상치 못한 문제.. 2022. 11. 18.
[자바스크립트] 콜백함수와 콜백지옥 콜백함수(callback function) 콜백함수란 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 것 함수가 다른 함수의 입력값(argument)로 전달되서 다른 함수에 의해서 나중에 호출된다 function greeting() { console.log('hello'); } function func(cb) { // 함수 func가 다른 함수 greeting을 파라미터로 받는다 cb(); // 해당 함수 func 내부에서 호출한다 } func(greeting); 콜백의 두가지 종류 1. 동기적 콜백 동기적인 콜백함수인 () => console.log("sync callback") 는 순차적으로 실행된다 function printImmediately(print){ print(); } printI.. 2022. 11. 18.
[자바스크립트] 동기적 코드와 비동기적 코드 동기적 코드와 비동기적 코드 동기적(Synchronous) 코드 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식 (순차적 코드 진행) 요청을 보낸 후 응답 (결과물)을 받아야지만 다음 코드가 동작된다 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다 장점: 코드가 순차적으로 실행되므로 설계가 간단하고 직관적이다 단점: 요청에 대한 결과가 나올때까지 다음코드는 대기해야한다 // 동기적인 코드 (순차적으로 실행되는 코드) console.log(1); // 1번째 console.log(2); // 2번째 console.log(3); // 3번째 비동기적(Asynchronous) 코드 언제 코드가 실행될지 예측할수 없는것 (비순차적 코드 진.. 2022. 11. 18.
[자바스크립트] 이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임) 이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것 i.e.) 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 불러오는 것 * 이벤트 리스너 / 이벤트 핸들러: 어떤 이벤트 발생 시 처리하는 함수 이벤트의 종류 마우스 이벤트: 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트 키보드 이벤트: 키보드에서 특정 키를 조작할 때 발생하는 이벤트 문서 로딩 이벤트: 서버에서 웹문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여줄 때 발생하는 이벤트 폼 이벤트: 폼 요소에 내용을 입력하면서 발생할 수 있는 이벤트 이벤트 등록 방법 3가지 1. 인라인 방식 (Inline) 이벤트를 HTML 요소의 속성으로 .. 2022. 11. 18.
[자바스크립트] 자바스크립트에서 this란? this란? 자바스크립트에서 키워드 this는 해당 오브젝트를 가리킨다 전역공간 → window 일반 함수 호출시 → window 화살표 함수 호출시 → 상위 스코프 함수가 strict mode일때 → undefined 메소드 호출시 → 메소드를 부른 오브젝트 call, apply, bind → call, apply, bind는 함수의 메소드로서 this를 첫번째 아규먼트와 바꿔치기한다 (함수의 호출방식과 관계없이 this를 지정할 수 있다) 콜백 호출시 → 경우에 따라 다르다 일반적인 함수 호출일때: this는 전역객체 함수 메소드 call, apply, bind를 사용할 경우: this는 바꿔치기 됨 생성자 함수 호출시 → 해당 인스턴스 this의 특징 코드가 작성될때는 this가 어떤값인지 모른다 .. 2022. 11. 18.
[웹개발] 브라우저 저장소 (로컬스토리지, 세션스토리지, 쿠키) 배경설명 브라우저 저장소가 필요한 이유 클라이언트는 서버에게 요청하고 (request), 서버는 클라이언트에게 응답한다 (reponse) 통신이 끝나면 인증에 쓰이는 상태 정보를 유지하지 않는다 계속해서 통신 연결을 하지 않기 때문에 자원낭비가 줄어든다 하지만 통신을 할때마다 새로 서버 요청을 해야되기 때문에 클라이언트가 그때마다 인증을 다시 해주어야한다는 단점이 생긴다 클라이언트와 서버가 통신하지 않고도 인증에 쓰이는 상태 정보를 유지하기 위해 사용하는 저장소가 브라우저 저장소다! → 브라우저 저장소가 있기 때문에 사이트를 불러오는 속도가 빨라지며 네트워크 연결 없이도 사용이 가능하다 브라우저 저장소가 없다면? 웹사이트에서 로그인을해도 페이지를 이동할때마다 로그인을 다시 해줘야한다... 브라우저 저장소.. 2022. 11. 18.
[타입스크립트] 인터페이스란? (인터페이스와 클래스의 차이점) 인터페이스란? 오브젝트의 타입을 설정하는 일종의 오브젝트 설계도 + 추상화 클래스와 같이 표준화된 프로퍼티와 메서드를 갖도록하는 설계도 추상화 클래스 vs 인터페이스 공통점: 클래스의 모양을 결정할 수 있다 (클래스의 프로퍼티와 메서드를 지정) 클래스: 추상화 클래스는 자바스크립트로 변환되며 추상화 클래스를 상속받은 클래스의 프로퍼티와 메소드에 private, protected, public를 지정할 수 있다 인터페이스: 인터페이스는 자바스크립트로 변환되지 않아 파일이 가벼워지며 인터페이스를 상속받은 클래스의 프로퍼티와 메소드에는 public만 지정할 수 있다 추상화 클래스 예제 클래스 Player에서는 User의 모든 메서드를 구현해야한다. abstract class User { constructor(.. 2022. 11. 17.
[타입스크립트] 인터페이스란? (인터페이스와 타입의 차이점) 인터페이스란? 오브젝트의 타입을 설정하는 일종의 오브젝트 설계도 타입 vs 인터페이스 공통점: 오브젝트의 모양을 결정할 수 있다 (오브젝트 타입지정 가능) 타입: 여러 데이터의 타입을 지정할 수 있다 인터페이스: 오직 오브젝트 데이터의 타입만을 지정할 수 있다 타입 예제 type Team = 'red' | 'blue' | 'yellow' type Health = 1 | 5 | 10 type Player = { nickname: string, team: Team, health: Health } const nico: Player = { nickname: 'nico', team: 'yellow', health: 10 } 인터페이스 예제 type Team = 'red' | 'blue' | 'yellow' typ.. 2022. 11. 15.
[타입스크립트] 타입의 종류와 인터페이스 타입의 종류 1. 오브젝트 모양 알려주기 type Player = { nickname: string, healthBar: number } 2. 특정 타입이라고 지정해주기 (concrete type) type Food = string const kimchi:Food = 'delicious' type Friends = Array const kakao:Friends = ['Ryan', 'Muzi', 'Apeach', 'Frodo'] 3. alias(대체명, 별명)를 사용해 타입 지정해주기 type Nickname = string type Health = number type Player = { nickname: Nickname, healthBar: Health } 4. 특정값을 지정 타입을 지정된 옵션으로만 .. 2022. 11. 15.
[타입스크립트] readonly(읽기전용) 예제 클래스 Word의 프로퍼티가 public이므로 kimchi.def이 수정이 가능하다 type Words = { [key:string]: string } class Dict { private words: Words constructor(){ this.words = {} } add(word:Word) { if(this.words[word.term] === undefined) { this.words[word.term] = word.def } } def(term:string) { return this.words[term] } delete(term:string) { delete this.words[term] } } class Word { constructor( public term: string, publi.. 2022. 11. 15.
[한줄정리/웹개발] 메서드란? 클래스안에 존재하는 함수 2022. 11. 14.
[타입스크립트] 클래스 타입스크립트에서 클래스 만들기 타입스크립트 class Player { constructor( private firstName:string, private lastName:string, public nickName:string ){} } const nico = new Player('nico', 'las', '니꼬') 자바스크립트 "use strict"; class Player { constructor(firstName, lastName, nickname) { this.firstName = firstName; this.lastName = lastName; this.nickName = nickname; } } const nico = new Player('nico', 'las', '니꼬'); 타입스크립트에서 접.. 2022. 11. 14.
[타입스크립트] 다형성(polymorphism)과 제네릭(generic) 다형성(polymorphism)이란? polymorphism이란 poly(many) + morphos(form)의 합성어로 다수의 형태라는 의미다 다형성이 없다면? 아래의 예제처럼 사용할 모든 타입을 미리 정의해주어야한다 type SuperPrint = { (arr: number[]): void (arr: boolean[]): void (arr: string[]): void (arr: (number|boolean)[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3]) superPrint([true, false, true]) superPrint(['a', 'b', .. 2022. 11. 3.
[타입스크립트] 오버로딩(overloading)이란? 오버로딩(overloading)이란? function overloading 또는 method overloading이라고 한다 오버로딩은 함수가 여러개의 call signatures를 가지고 있을때 발생된다 대부분의 경우 직접 오버로딩 함수를 작성할 일은 없다. 일반적으로 라이브러리 또는 패키지에서 오버로딩 함수가 있어 사용하는 경우가 더 많다 call signature vs overloading call signature type Add = (a: number, b: number) => number overloading 함수가 여러개의 다른 call signatures를 가지고 있을때 발생된다 아래의 예제와 같이 사용하는 함수는 많이 없을테지만 오버로딩의 핵심을 보여준다 type Add = { (a: n.. 2022. 11. 3.
[타입스크립트] 호출 시그니처(call signature) 호출 시그니처(call signature)란? 함수가 선언되기 전에 타입을 미리 지정해 여러번 재사용할 수 있도록 하는 것을 call signature라고 한다 call signature는 함수를 어떻게 호출해야하는 것인지 알려준다 (일종의 타입 템플릿) call signature는 함수의 인자와 반환 타입을 알려준다 type Add = (a:number, b:number) => number // call signature const add: Add = (a, b) => a + b // 함수 add의 타입으로 call signature를 사용 2022. 10. 23.
[타입스크립트] 타입스크립트 기초문법 13가지 1. 원시형 데이터에 타입 지정 변수에 타입 지정하는 기본 문법 : 타입 let a : number = 1 let b : string = 'hello world' let c : boolean = true let d : undefined = undefined let e : null = null 원시형 데이터(number, string, boolean, undefined, null 등)를 변수에 할당할때는 타입을 지정하기 보다는 타입스크립트가 자동으로 타입을 추론하도록 두는 것이 낫다. 아래의 코드를 타입스크립트에서 사용하면 a, b, c가 어떤 데이터 타입을 사용해야하는지 타입스크립트는 이미 알고 있으므로 코드의 가독성을 위해 타입 지정을 하지 않는 편이 좋다. let a = 1 let b = 'hello.. 2022. 9. 16.
[한줄정리/웹개발] compile이란? 웹브라우저는 HTML, CSS, JS 파일만 이해하고 해석해서 웹사이트를 만들어준다 만약 개발시 편리성을 위해 CSS 대신 Scss를 JS 대신 TypeScript를 사용했다면 웹브라우저가 이해할 수 있는 언어로 변환해주어야한다. 이렇게 웹브라우저가 알아들을 수 있는 파일로 변환하는 것을 컴파일이라고 한다. 2022. 9. 16.
[타입스크립트] TypeSciprt 사용이유와 설치방법 TypeScript란? 자바스크립트에 타입을 더한 언어 TypeSciprt 탄생배경 자바스크립트는 Dynamic Typing을 지원하는 타입에 관대한 언어다 이로 인해서 문제점이 생기는데 코드가 길어지거나 프로젝트 규모가 커질때 에러가 발생할 확률이 높다 다른 사람이 짠 자바스크립트 코드를 수정할때 어려움이 있다 이러한 문제점을 보완하기 위해 자바스크립트 언어에 타입을 더한 타입스크립트 언어가 탄생하였다 설치방법 HTML CSS JS 1. 타입스크립트 설치 npm install -g typescript 2. 타입스크립트 파일생성 index.ts 3. 타입스크립트 자바스크립트로 변환 웹브라우저가 이해할 수 있는 자바스크립트로 컴파일해준다. 터미널에서 아래의 명령어를 입력하면 ts를 변환한 js 파일이 생성.. 2022. 9. 16.
[웹개발/한줄정리] zero configuration 이미 기능이 내장되어 있어 설정이 필요 없는 경우에 zero configurationd이라는 용어를 사용한다 2022. 9. 14.

티스토리툴바