본문 바로가기

전체 글

 (147)
tsconfig | ts compiler npx tsc $ npx tsc app.ts --watch $ npx tsc app.ts -w $ npx tsc --init watch 모드를 이용하면, 컴파일러가 지정된 ts 파일의 변화를 관찰하며 자동으로 변환한다. 큰 규모의 프로젝트에서 이런 방식의 컴파일은 불편할 수 밖에 없는데, 여러 개의 ts 파일로 작업하기 때문이다. init 옵션을 이용하면(프로젝트 폴더를 ts 프로젝트로 지정할 때 한번만 사용하면 된다), 해당 프로젝트 폴더를 ts가 관리한다. tsconfig.json 파일이 생성된다. 폴더에 존재하는 모든 ts 파일에 대해 컴파일을 진행한다. => html 에 컴파일된 js를 연결한다. tsconfig.json shortcut) ctrl + space를 이용하면, 옵션에 가능한 자동완성..
Types Js types vs. Ts types JS에도 다음과 같이 타입의 개념은 존재한다. // js에도 타입의 개념은 존재한다 function add(x, y) { if (typeof x !== 'number' || typeof y !== 'number') throw new Error('type is not a number'); return x + y; } // ts에서는 다음과 같이 작성할 수 있다 function add2(x: number, y: number) { return x + y; } 자바스크립트는 데이터의 타입을 동적으로 결정하는 언어이다(dynamic typing). typeof 연산자를 이용하면 스크립트가 실행될 때 데이터의 타입을 제한할 수 있다. 어플리케이션이 실행됨에따라 에러를 발생시킨..
Intersection Observer Intersection Observer Intersection Observer API는 브라우저에서 제공하는 api이다. 우리가 지정한 요소와, viewport 또는 그 요소의 부모가 겹치는 영역이 어떻게 변하는지 비동기적으로 관찰할 수 있다. 예를 들어, 카드 리스트의 마지막 아이템이 viewport에 보이면(아이템과 viewport가 겹치기 시작하면), 새로운 리스트 아이템 정보를 요청할 수 있다. => infinite scroll how to create intersection observer? const options = { root: null, rootMargin: '0px', threshold: 1.0 } const observer = new IntersectionObserver(callbac..
Deployment | firebase hosting Deployment steps Test code Optimize code Lazy loading Build app for production building app doesn't mean we have to write more codes. 이미 작성되어있는 특정 script를 실행하는 것이다. => production을 위한 코드(자동으로 최적화되고 압축된 코드)를 반환한다. Upload code to server 3에서 만들어진 코드 패키지를 업로드한다. Configure Server Optimize what is lazy loading? 코드를 최적화하는 방법은 여러 가지가 있다. 예를 들어, props이 변경되었을 때에만 컴포넌트를 재평가하는 React.memo도 최적화의 한 방법이 된다. Lazy..
React-router(v6) $ npm i react-router-dom@6 $ npm i react-router-dom@latest +) upgrainig from v5 BrowserRouter index.js에 똑같이 제공해 주어야 한다. Switch => Routes import { Redirect, Route, Routes } from 'react-router-dom'; function App() { // ... return ( ); } element | Route의 자식 요소로 렌더링할 컴포넌트를 전달하는 것이 아니라, element props으로 전달한다. without exact | v6는 exact props을 전달하지 않아도, 정확히 일치하는 route를 선택해서 반환한다. "something/*" | v5에서 ex..
React-router what is react-router? $ npm i react-router-dom@5 react-router vs. react-router-dom vs. react-router-native react-router는, 클라이언트 측에서 다양한 페이지를 갖는 리액트 어플리케이션을 만들 수 있도록 도와주는 패키지이다. react-router-dom은 브라우저에서 실행되는 리액트 어플리케이션을 위한 react-router이다. how react-router works? 리액트 라우터를 이용한다는 것은, 서로 다른 경로가 서로 다른 컴포넌트(or page)를 렌더링하게 만든다는 것을 의미한다. 즉, SPA에서 MPA의 장점을 이용하는 것이다. 어떻게 이것이 가능할까? 사용자가 새로운 url을 요청하면, 리액트 ..
MPA vs. SPA multiple pages app vs. single page app MPA | traditional multiple pages application 하나의 어플리케이션이 여러 URL을 가지고 있다. 각 url 마다 서로 다른 html 파일을 서버에 요청함으로써, 새로운 페이지를 보여준다. 즉, 새로운 컨텐츠를 보여주기 위해 서버에 새로운 요청을 보내야 한다. 이처럼 서로 다른 url 경로가 서로 다른 html 페이지를 보여주는 것을 routing이라고 한다. SPA | single page application 어플리케이션이 시작될 때 한 번만 html 파일을 서버에 요청하고, 페이지를 보여준다. 새로운 컨텐츠를 보여주기 위해서, 새로운 페이지를 요청하지 않아도 된다. SPA에서 url에 따라 다른 컨..
React-redux & Redux-toolkit $ npm i redux $ npm i react-redux redux | 모든 js 프로젝트에서 사용할 수 있는 state management 패키지 react-redux | 리액트 어플리케이션에서 redux의 store/reducer에 간단히 접속할 수 있도록 도와주는 패키지 src/store 폴더를 만들어서 redux와 관련된 파일을 관리한다. redux dev tool | redux toolkit을 이용하면 확장 프로그램을 설치만 하면 사용할 수 있다. 아니면 추가적으로 코드를 작성해야 한다. redux with react 컴포넌트에 store 제공하기 | provider // src/store/index.js import { legacy_createStore } from 'redux' impor..

티스토리툴바