본문 바로가기

Ecmascript

 (24)
실서비스에서 타입스크립트로 포팅하며 느낀 점 자바스크립트와 리액트로 되어있던 레거시 프로젝트를 타입스크립트와 리액트로 다시 제작하고 느낀 장단점이다. 처리가 복잡한 프로젝트에서는 확실히 단점보다 장점이 더 와닿았다. 장점 type과 interface가 주석보다 뛰어난 개발명세서 역할을 한다. 주석은 개발이 변경되도 안바꿔도 그만이지만, type은 안바꾸면 에러나므로 항상 최신 내역을 유지한다. api나 url parameter처럼 서버에서 생성한건 interface, 본인이 필요해서 만든건 type으로 규칙을 정해서 관리했는데, 이런 것들이 소스만 보고도 개발명세에 대한 빠른 파악을 할 수 있게 돕는다. 좀더 견고한 로직을 작성하게 강제한다. 빈값(null, undefined)처리등을 하지 않으면 런타임상에서 에러를 뱉기때문에 처음부터 방어코딩을 ..
[Error]Cannot use JSX unless the '--jsx' flag is provided 글로벌로 설치된 TS 버전이랑 현재 IDE에서 인식하는 버전이랑 달라서 발생 나같은 경우에는 글로벌은 4.3인데 CRA로 타입스크립트 플젝을 만들었더니 node_module에 설치된 건 4.1.2이라서 발생한 문제였다. IDE 오른쪽 아래에 숫자로 버전 적힌곳 클릭 -> Select Tyoescript Version -> Use Workspace Version
[JsDoc] 타입체크 하는 자바스크립트 코딩 타입체크 하는 자바스크립트 코딩 타입스크립트 없이 vscode의 설정과 jsDoc으로 좀 더 타입세이프 하게 코딩 가능 jsconfig.json 생성 compilerOptions에 아래와 같은 값들 추가 { "compilerOptions": { "jsx": "react", "module": "commonjs", "target": "es2020", "checkJs": true }, "exclude": ["node_modules"] } JsDoc 작성법 /** * @param {array} * @param {...*} args * @param {DOMElement} node * @param {ReactElement} element */ /** * optional한 param: 타입= * @param {obj..
(styled-component의 근간을 이루는) Tagged Template Literal Template Literal의 문제점 객체 타입인 경우에는 대입이 안된다 const obj = { a:1, b:2, c:3} console.log(`${obj}`); // [object Object] 함수의 경우 함수 자체가 담긴다. var obj = () => { return { a:1, b:2, c:3} } console.log(`${obj}`); // () => { return { a:1, b:2, c:3} } Template Literal의 문제점 극복 함수 자체가 담긴다는 성질을 이용해서 극복 Template Literal을 통해 만든 함수(Tagged Template Literal)는 성질이 다름 Tagged Template Literal의 이해 첫번째 인수에는 배열로 텍스트들이 분할되서 담..
[비공개] 디바운스와 스로틀링 // 디바운스 : 입력하다가 특정시간동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청 function debounce(func, delay) { let inDebounce; return function(...args) { const context = this; if (inDebounce) { clearTimeout(inDebounce); } inDebounce = setTimeout( () => func.call(context, ...args), delay); } } const run = debounce(val => console.log(val), 1000); run('a'); run('b'); run('2'); // 1초뒤 2 출력 // 스로틀링..
[Web Storage] 총 정리 및 모듈 구현 Web Storage Origin(host:port) 단위로 관리된다. (같은 URL은 같은 스토리지를 사용한다는 것) 객체와 매우 비슷(key-value 타입, iterator 미구현) local과 session 2가지 존재 배열처럼 length 구현(Array.prototype과는 무관하며, 데이터를 순회하기 위해서 구현한 것으로 보임) 모든 데이터를 문자화(toString)해서 삽입한다.(즉 참조형 데이터는 JSON 처리 필요 -> 코드 참고) 쿠키 역할 대체 가능(만료시간은 직접 구현해야 함) Web Storage와 Cookie와의 차이점 항목 스토리지 쿠키 크기 5MB 4KB 만료시간 없음 있음 서버통신 없음 HTTP 헤더에 담아 송신 Local storage 창/탭 전반에 걸쳐 데이터 공유 가..
[테트리스 만들기] 점수와 난이도, 게임 종료/중지 하드드랍 안전장치 space를 눌러서 블록을 내릴때 가끔 발생하는 에러 해결 현재 블록이 하드드롭인 상태일때는 x축 y축을 변경 못하는 코드를 추가하자 class Piece { hardDropped; spawn() { // ... 기존 코드 this.hardDropped = false; } move(p) { if(!this.hardDropped){ this.x = p.x; this.y = p.y; } this.shape = p.shape; } hardDrop(){ this.hardDropped = true; } } //*** main.js // 스페이스 누를 경우 하드 드롭 if (event.keyCode === KEY.SPACE) { while (board.valid(p)) { account.score..
[ES6] Proxy 객체와 Symbol Proxy 객체 이름처럼 대리자 역할을 해주는 객체 객체의 값이 변경이 일어나면 대신 나서준다 변경 동작에 맞는 메서드를 실행할 수 있다. 값의 변경을 감지하는 get, set, has, deleteProperty, defineProperty등의 내장메서드가 구현이 되어있다. 특정 객체의 값이 바뀌었을때 화면의 글씨를 바꾼다던지 할때 유용함 -> 화면과 데이터의 양방향 바인딩 구현 용이! // 점수 계산 var dummy = { score: 0, lines: 0 } var prx = new Proxy(dummy, { set: (obj, prop, value) => { // 대상 객체, set이 일어난 대상, 할당된 값 console.log("set동작", obj, prop, value); }, get: ..

티스토리툴바