본문 바로가기

WEB

 (47)
[TS] Interface란 무엇인가? 인터페이스(Interface)는 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스를 사용하지 않은 예 : let person = { name: 'me', age: 21 }; const logAge = (obj: { name: string ,age: number }) => { console.log(obj.name); // me console.log(obj.age); // 21 } logAge(person); 인터페이스를 사용한 예 : interface personAge { age: number; name : string; } const logAge = (obj: personA..
[TS] 기본 타입 및 타입 추론 기존에 자바스크립트에서 지원하는 Number, String, Boolean, Array 타입들은 모두 지원한다. 이외에도 추가적으로 지원하는 것이 있다. let num: number = 1; let str: string = "Hello"; let bool: boolean = true; let arr: string[] = ["a", "b"]; let arr2: array = ["a", "b"]; Number 자바스크립트의 Number와 동일하다 int, double 구분없이 모두 실수로 표현한다. String 자바스크립트의 String과 동일하다. " ", ' '. ` `(백틱)으로 문자열을 감싸면 된다. Boolean 자바스크립트의 Boolean과 동일하다. Array Array에 사용법은 두가지가 있는..
[TS] TypeScript는 무엇인가? 타입스크립트는 자바스크립트의 상위 개념이다. 자바스크립트에는 이미 원시타입인 string, number, object, undefined 가지고 있지만 변수를 선언할 때 변수의 타입을 일관되게 대입하였는지 확인하지 않는다. TypeScript의 타입 검사기는 개발자가 생각한 타입과 JavaScript가 실제로 대입하는 타입 사이의 불일치를 경고를 한다. 어째서 사용해야 하는가? 위에서 설명 하였듯이 개발자가 의도한 타입과 실제 자바스크립트가 할당하는 타입이 다를 수 있는걸 미리 경고하여 사전에 에러를 방지하여 안정성과 신뢰성을 얻는다. 자동완성 기능과 가이드를 볼 수 있게 해주어 생산성을 얻는다. 1. 에러 방지 첫번째로 자바스크립트는 변수를 선언할 때 ES6 기준으로 let과 const를 사용한다. 그..
[SWR] 실시간 상태를 반영할 수 있는 라이브러리 SWR! 시작전 알려드립니다. 현재 SWR이 많은 업데이트가 진행이 된 상태이기 때문에 굵직한 변경점은 없지만 사용방법이 세부적으로 다를 수 있다는 점을 알려드립니다. SWR은 비동기 작업을 도와주는 React Hooks 라이브러리이다. Redux 특유의 복잡함 때문에 단점으로 작용하고 있고 대체할 라이브러리들이 속속들이 나오고 있다. 간단 설명 SWR은 stale-while-revalidate를 뜻하는 것으로, 데이터를 검증하는 동안 stale(Cache) 데이터를 사용하는 것을 말한다. 다시 설명하자면, Cache된 데이터를 보여주고, 데이터 요청을 보낸 후, 새롭게 받은 데이터를 보여주는 것을 말한다. npm i swr (Login.tsx) const LogIn = () => { const { data, e..
[Redux] 미들웨어란? (Redux Thunk, redux-promise-middleware) 미들웨어 미들웨어는 소프트웨어 각 분야에서 세부적으로 다르게 뜻한다. 위키백과에서는 OS와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 말한다. 유의해야할건 소프트웨어 분야에서는 같은 이름을 가지고 있지만 다른 것을 의미 하는 것들이 상당히 많다. Redux Thunk나 Redux Saga나 Redux Promise 등은 Redux 에서 동작하는 미들웨어이다. 어떠한 두 가지 요소의 중간에서 동작하는 소프트웨어라고 생각하면 크게 보았을 때 그 의미가 대략 같다. Redux 미들웨어 리덕스가 가지는 상태관리 라이브러리들 중 핵심 기능 중 하나는 미들웨어를 사용할 수 있다는 점이다. Context API나 Mobx에 경우에는 미들웨어를 지원하지 않는다. 리액트에서 리덕스의 미들웨어를 사용..
[JS] Formik Formik과 Yup은 Form 작업을 좀 더 편리하게 해주는 라이브러리이다. Formik에 공식문서에는 Form 작업을 할때 가장 성가신 작업이 3가지로 분류된다고 한다. 폼에서 값 가져오기 유효성 검사 및 오류 메세지 폼 submit 핸들링 Formik 먼저 설치하는 방법은 터미널에 입력한다. npm install formik 위에서 설명 했듯이 폼에서 입력한 데이터를 받는 역할을 하고 유효성 검사와 오류 메세지를 동적으로 띄워줄 수 있다. Form 기능이 그러하듯 버튼을 클릭하면 Form에 입력한 값들을 객체로 담아 처리할 수 있도록 해준다. 이 기능을 좀 더 간편하게 할 수 있는데 사실 차이가 그렇게 크지 않아서 사용을 하지 않아도 된다. import React from "react"; /* Li..
Reflow와 Repaint 브라우저가 렌더링을 완료하고 페이지가 그려진 이후에도 다시 Layout과정을 수행하는 경우가 있다. 보통 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함해서 Layout 과정을 다시 수행하게 된다. 이런 경우 불가피한 상황이 아니라면 최소화 하는 것이 좋으며 최적화의 대상이기도 하다. Reflow(Layout) 브라우저 렌더링이 끝난 이후에 html 요소의 크기나 위치등 레이아웃이 변경되면 그에 영향받는 모든 요소들은 Layout단계를 거친뒤에 Repaint 과정을 수행하게 된다. Layout단계는 노드의 위치나 크기를 계산하는 단계이다. Render Tree 생성한뒤 브라우저 렌더링 과정을 다시 거치는 것이다. Re..
[HTML] <!DOCTYPE> 크롬 개발자 도구로 HTML 문서를 보면 항상 최상위에는 가 있다. 은 태그와 비슷한 모습을 하고 있지만 태그는 아니다. 바로 브라우저에게 HTML에 버전을 알려주는 구문이다. 그렇기 때문에 브라우저가 파싱을 하기전에 문서의 버전을 알려주기 위해서 최상단에 위치하고 있는 것이다. HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. 하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. SGML(Standard Generalized Markup Language) : IBM에서 1960년대 개발한 마크업 언어이다. ISO 표준이라고 한다. SG..

티스토리툴바