본문 바로가기

Frontend/JavaScript

 (11)
2022-05-16:: [TypeScript]타입을 하고싶어요... 타입은 튜링 완전하다 타입스크립트의 타입 시스템은 튜링 완전하다. 튜링완전성 어떤 프로그래밍 언어나 추상 기계가 튜링 기계와 동일한 계산 능력을 가진다는 의미이다. 이것은 튜링 기계로 풀 수 있는 문제, 즉 계산적인 문제를 그 프로그래밍 언어나 추상 기계로 풀 수 있다는 의미이다 말이 어렵지 그냥 타입스크립트의 타입 시스템 만으로도 프로그래밍이 가능할 정도로 고수준이라는 뜻이다. 타입스크립트는 런타임이 아닌 타입 시간에 평가(evalueate)되는 코드이다. 타입시간 IDE에서 타이핑 하는 시간이다. IDE를 통해서 일종의 REPL을 수행한다. P는 커서 위에 나타나는 콤보박스이다. REPL Read, Evaluate, Print, Loop의 약자이다. python이나 node.js의 shell모드를 의..
고양이 사진첩 문제를 풀며 느낀점 화살표 함수의 한계점 처음 이 문제를 풀때, 컴포넌트를 화살표 함수로 표현했고 이들을 모듈로 관리했다. 하지만 아래와 같은 화살표 함수의 제한점들을 관과 했다. this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다. new.target 키워드가 없다. (new로 생성된 시점을 파악한다.) 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 사용할 수 없다. 생성자로 사용할 수 없다. yield를 화살표 함수 내에서 사용할 수 없다. React에서는 컴포넌트 파일 안에 상태를 함께 관리했다. 컴포넌트에서 상태는 단순히 활용되는 데이터 이상의 의미를 갖는다. 선언적 프로그래밍과 컴포넌트 추상화 컴포넌트 형태로 추상화하는 것은 DOM 접근을 최소화하고..
고양이 사진 검색 사이트2 :: 동적 컴포넌트와 이벤트리스너 바인딩 이번에 해결할 문제와 조건이다. 필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다. 현재 그리드의 아이템을 클릭하면 모달의 랜더링 여부를 결정하는 변수 visible이 true가 되어 모달이 innerHTML 형태로 추가되는 구조이다. visiblitiy가 변하는 시점에 생성과 랜더링이 진행되기 때문에 초기에 grid형태로 데이터가 load될 때의 overhead를 줄일 수 있다. 일반적으로 이벤트를 설정하는 방법은 html코드가 있고 js코드에서 DOM으로 접근해 addEventListener를 등록하는 형태이다. 하지만 이 경우에는 컴포넌트가 동적으로 생..
고양이 사진 검색 사이트1 :: 개요, Responsive web 순수 HTML, CSS, JS를 이용해서 웹 프론트앤드 작업을 하는 과제이다. Vanila JS로 하는 이 작업은 무언가 React와 많이 닮아있다. JS의 객체지향적 특성을 활용해 컴포넌트를 구성한다. 생성된 하나의 객체가 컴포넌트가 된다. 하나의 Class를 하나의 파일로 관리한다. 객체들은 HTML/DOM이 그렇듯 트리 구조로 관리된다. 하나의 Class에서 생성자로 자식 컴포넌트의 생성자를 호출하는 방식으로 생성체인을 관리한다. 생성된 자식 컴포넌트는 부모 컴포넌트의 상태로 관리된다. Class의 멤버변수는 해당 컴포넌트가 관리하는 상태가 된다. 상태는 지역적으로 관리되지만, 자식 컴포넌트로 전해줄수도 있다. 따라서 전역적으로 관리해야하는 데이터는 루트 컴포넌트에서 관리한다. Responsive ..
Sync vs Async Sync는 한줄씩 내려가면서 실행한다. Async 역시 한줄씩 내려가면서 실행하지만 async코드를 만나면 분기하여 비동기로 작업한다. JS에서 async로 인해 분기된 경우 한 코드 안에서 여러 쓰레드가 돌아가게 된다. 이는 오래 걸리는 작업을 효율적으로 처리하기 위해서이다. 하지만 비동기 코드의 실행순서는 복잡해질 수 있기 때문에 혼란을 야기한다. 비동기 코드를 만났다면 해당 코드가 처리되기를 기다릴 필요 없이 분기하여 다음 코드를 바로 실행시키면 된다. fetch와 같은 작업 역시 시간이 얼마나 걸릴지 모르기 때문에 비동기로 작업을 해준다. let a = 1 setTimeout(function() { console.log('timeout: ' + a) }, 100) a = 10 위 코드의 경우 콘솔..
JEST Jest는 페이스북에서 관리하는 자바스크립트 테스팅 프레임워크이다. 따로 설정해야할 사항이 없고 간결하고 직관적인 점이 특징이다. 사용 법은 아래와 같다. 1. 패키지 설치 npm i --save-dev jest npm을 이용해 jest 패키지를 개발용으로 설치한다. 2. package.json에 스크립트 변경 "scripts" : { "test": "jest --coverage" } --coverage 옵션을 부여하면 테스트 결과를 더욱 자세히 볼 수 있다. 3. 테스트 파일을 생성 테스트 파일의 형식은 {fileName}.test.js으로 한다. 테스트 파일 내에 테스트할 함수를 require한 뒤 test()메서드를 사용한다. test메서드의 첫 번째 인수는 테스트에 대한 설명을 넣고 두 번째 인수..
history, location, match History 히스토리 API는 여러 자바스크립트 환경에서 세션 히스토리를 관리할 수 있는 패키지이다. 히스토리의 종류로는 다음 3가지가 있다. 보통 히스토리 객체는 browser history를 의미한다. browser history란 HTML5의 history API가 지원되는 브라우저에서 사용되는 히스토리 객체이다. history 객체는 또한 다음과 같은 속성을 가진다. length: 히스토리 스택의 사이즈 action: 현재 액션 push, replace, pop location: 현재 location. location은 아래 속성을 가질 수 있다. pathname: (문자열)URL의 경로 search: (문자열)URL의 쿼리 문자열 hash: (문자열)URL의 해시부분 state: (객체) pu..
프론트 비동기 작업 이해하기(feat. React) 프론트 단에서 데이터를 랜더링할 때, 데이터를 먼저 패치받아야 한다. 따라서 위의 작업은 비동기 방식으로 진행 되어야 한다. 자바스크립트에서 비동기 작업을 처리하는 방법에는 여러가지가 있다. 그 중 몇 가지 방법에 대해 설명하겠다. 콜백함수 function increase(number, callback) { setTimeout(()=> { const result = number +10; if(callback) callback(result); }, 1000); } increase(0, result => { console.log(result); }) 하지만 만약 비동기적으로 처리해야할 작업의 수가 많아진다면 어떻게 될까? 작업의 수만큼 콜백의 깊이가 깊어지고 가독성이 매우 나빠지게 될 것이다. 우리는 이러한..

티스토리툴바