본문 바로가기

Frontend

 (46)
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 ..
View port 뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 뷰포트는 랜더링된 페이지와 다르다. 랜더링된 페이지는 뷰포트를 넘어서 스크롤을 통해 접근가능한 형태로 되는 것이 일반적이다. 모바일과 같이 좁은 스크린을 가진 기기는 페이지를 virtual window나 veiwport를 통해 랜더링한다. 이때 window나 viewport의 크기는 모바일 기기의 화면보다 넓기 때문에 우리는 레이아웃이 무너진 콘텐츠를 보게 된다. 이러한 문제를 해결하기 위해서 Apple은 처음 meta테그를 이용해 viewport의 크기를 조절하는 방법을 제시했다. 해당 방식은 아직 어느 웹 표준으로도..
Sync vs Async Sync는 한줄씩 내려가면서 실행한다. Async 역시 한줄씩 내려가면서 실행하지만 async코드를 만나면 분기하여 비동기로 작업한다. JS에서 async로 인해 분기된 경우 한 코드 안에서 여러 쓰레드가 돌아가게 된다. 이는 오래 걸리는 작업을 효율적으로 처리하기 위해서이다. 하지만 비동기 코드의 실행순서는 복잡해질 수 있기 때문에 혼란을 야기한다. 비동기 코드를 만났다면 해당 코드가 처리되기를 기다릴 필요 없이 분기하여 다음 코드를 바로 실행시키면 된다. fetch와 같은 작업 역시 시간이 얼마나 걸릴지 모르기 때문에 비동기로 작업을 해준다. let a = 1 setTimeout(function() { console.log('timeout: ' + a) }, 100) a = 10 위 코드의 경우 콘솔..
React Build 빌드하기 터미널을 통해 리액트 프로젝트 폴더에서 아래 명령어 실행 npm run-script build 빌드를 완료하면 해당 폴더 아래 build라는 폴더가 새로 생성된다. 그 안에 index.html 파일과 static/js 안의 js 파일이 있다. package.json 파일의 script 부분에 다양한 스크립트가 등록되어 있다. react 프로젝트를 실행할 때 사용하는 커맨드인 npm start 역시 해당 부분에 등록되어 있다. 커스텀 스크립트를 npm 명령어를 통해 실행하고 싶을 때 사용하는 것이 run script라는 npm 명령어이다.
Jest with React React에서 Jest를 사용하기 위해서는 Babel을 이용해 몇 가지 설정을 해주어야 한다. npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react 바벨 설정을 위해 babel.config.js파일을 생성하고 아래와 같이 설정해주자. module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react', ], }; 자바스크립트의 유명한 컨밴션에 따라 Jest는 __test__폴더에서 테스트 파일을 찾는다. 또는 .test.js과 같은 형식으로 작성해도 무방하다. TDD는 개발자들 사이에서 상당이 핫한 주제이다. TDD란 함수를 작성하기 전에..

티스토리툴바