study

패스트캠퍼스 챌린지 27일차

회원 가입 폼 - 밸리데이션 구조 설계 지난번까지 회원 가입 폼의 전체적인 구조를 알아봤다. 앞으로는 동작의 순서대로 하나하나 파일의 진행 순서와 기능에 대해 순차적으로 동작을 파악한다. index.html에 대표적으로 script 태그에 삽입되는 파일은 index.ts 파일인데 index.ts 파일은 글로벌로 설정되는 것들과 App 오브젝트의 인스턴스를 생성하고 render 라는 메소드를 실행했다. import { AnyObject } from './types'; import App from './app'; declare global { interface Window { Handlebars: { compile: (template: string) => (data: AnyObject) => string; ..

2022. 2. 19. 22:40

study

패스트캠퍼스 챌린지 26일차

회원 가입 폼 - 밸리데이션 구조 설계 지금까지 작업한 결과물에 해커뉴스에 관련된 하나의 웹앱을 만들었다. 지금까지 만든 웹앱의 구조는 API형태로 데이터를 받아오고 그 데이터를 SPA 형식으로 화면에 나타내는 형태였다. 이번 장에서는 데이터를 받아와서 출력하는 형태 뿐아니라 데이터를 입력하고 전송하는것과 밸리데이션 체크를 하는것까지의 구조이다. 기존에 만들었던 화면보다 세세한 부분에서 렌더링이 일어나기 때문에 폴더의 구조는 좀 더 복잡해진다. src |- types - address.ts - common.ts - index.ts - user.ts |- utils - index.ts |- views - address-field.template.ts - address-field.ts - index.ts -..

2022. 2. 18. 10:20

study

패스트캠퍼스 챌린지 25일차

라이프 사이클과 스코프 스코프는 하나의 그룹핑 되어있는 영역을 말하며 라이프 사이클은 어떠한 영역 안에서 실행되고 그 영역을 벗어나게 되면 삭제되는 형태를 말한다. 스코프는 전역 스코프, 블록 스코프, 함수 등이 있으며 함수 또한 fucntion(){} 형태의 스코프 안에서 동작하고 함수 실행이 끝나고 다른 영역으로 넘어갔을 때 사라지게 된다. 스코프, 예를 들어, 함수가 여러개 있다고해서 메모리에 모든 함수가 등록되는 것이 아니다. 선언되어 있는 모든 스코프가 메모리에 올라갈 수는 없다. 메모리는 한정 되어있는 자원이기 때문에 효율적으로 사용할 수 있어야 한다. 스코프는 그러한 것들을 유동적으로 이용하고 있는 셈이다. let myname = 'kim'; // 전역 스코프 function foo() { ..

2022. 2. 17. 09:46

study

패스트캠퍼스 챌린지 24일차

비동기 함수 4장까지 작업한 해커뉴스 클라이언트의 마지막은 데이터를 가져오는 부분에서 API를 통해 서버에서 가져오기 때문에 비동기처리를 해야했다. 비동기 처리를 하기위해 비동기 함수를 사용했는데 callback 함수를 사용하거나 Promise를 반환하는 Promise 패턴을 사용했다. 그 중에서 Promise 함수를 리턴하는 함수와 Promise를 then()~catch()나 async & await을 통해 사용하는 방법이 있다. function delay(ms:number) : Promise { return new Promise((resolve, reject) => { setTimeout(() => { if(Math.floor(Math.random() *10) % 2 ===0){ resolve('su..

2022. 2. 16. 09:47

study

패스트캠퍼스 챌린지 23일차

콜백함수 없는 비동기코드 작성법 지금까지의 코드에서 비동기 처리를 해야하는 부분(서버에서 데이터를 가져오는)은 XHR을 통해 콜백함수로 받아오거나, fetch를 사용해서 Promise를 리턴하는 방법이 있다. Promise 패턴을 사용하게되면 then(), catch(), finally 등으로 코드를 단계적으로 확인할 수 있는데, 이 방법 말고도 보기에는 동기적인 코드로 작성하지만 작동은 비동기적으로 사용할 수 있는 패턴이있다. 마찬가지로 이것은 Promise를 반환할 때 사용하며, 내부적으로 비동기처리에 대한 사이클이 달라지는 것은 아니지만 다른 프로그래밍 언어의 코드 진행처럼 비동기처리를 작성할 수 있다. async & await async export default class Api { ... as..

2022. 2. 15. 09:41

study

패스트캠퍼스 챌린지 22일차

XHR to Fetch & Promise 지금까지 작성한 모든 소스코드는 동기적 방식으로 작성했다. 현재 해커뉴스 클라이언트의 API를 통해서 json형태의 데이터를 받아온다. export default class Api { ... getRequest(): AjaxResponse { this.ajax.open('GET', this.url, false); this.ajax.send(); return JSON.parse(this.ajax.response) as AjaxResponse; } ... } Api 클래스의 getRequest 메서드는 XHR 형태로 데이터를 받아오지만 동기적으로 받아온다. 그렇다는 것은 데이터의 양이 많거나 서버의 통신이 조금 느릴 때, 해당 작업을 처리하는 시간동안 만들어놓은 시스..

2022. 2. 14. 10:24