104%

3. Longest Substring Without Repeating Characters (Medium) Given a string, find the length of the longest substring without repeating characters. Example 1: Input: "abcabcbb" Output: 3 Explanation: The answer is "abc", with the length of 3. Example 2: Input: "bbbbb" Output: 1 Explanation: The answer is "b", with the length of 1. Example 3: Input: "pwwkew" Output: 3 Explanation: The answer is "wk..

Typography에 유니온 타입을 지정했는데 prettier에 의해서 자동으로 개행되면서 파일이 너무 길어지는 현상이 생겨서 타입을 분리하려고 했다. 근데 외부에서 import된 타입을 에디터상에서는 잘 인식을 하는데 문제는 스토리북 docs 애드온에서 props가 잘 표시 되지 않는 문제가 있었다. 여기에 저 위에 유니온 타입 전부 표시되어야 하는데, any로 표시해버린다. 원인 현재 스토리북 5.3 버전을 사용하고 있고 react-docgen-typescript-loader를 통해 타입스크립트로 작성된 리액트 컴포넌트의 interface에 정의된 props를 스토리북의 props table로 만들어주고 있다. 문제는 외부에서 import된 타입은 이 친구가 제대로 해석을 못하는 버그가 있는것같다. ..

스토리북 관련 작업을 하던 도중 The base Typescript configuration uses babel-loader for Typescript transpilation, and optionally fork-ts-checker-webpack-plugin for checking. 라는 문장을 만났는데 fork-ts-checker-webpack-plugin이라는게 무슨 역할을 하는건지 궁금해서 정리합니다. Fork TS Checker Webpack Plugin typescript의 타입을 분리된 프로세스에서 체크해주는 웹팩 플러그인입니다. 만들어진 이유 웹팩이 타입스크립트 파일을 만나면 그 파일을 해석하기 위해서 첫번째로 로더가 필요합니다. awesome-typescript-loader와 Checke..

.eslintrc.js const path = require('path'); module.exports = { /** eslint는 자바스크립트만 해석할 수 있다. eslint가 타입스크립트를 해석 할수 있게끔 parser를 지정해주자. */ parser: '@typescript-eslint/parser', plugins: [ '@typescript-eslint', // 타입스크립트 문법이 들어있다. 'react' // 리액트 문법이 들어있다. ], env: { browser: true, // 브라우저 환경에서 eslint를 사용하겠다. }, extends: [ // @typescript-eslint/eslint-plugin에서 추천하는 규칙들로 타입스크립트 파일을 검사하겠다. 'plugin:@types..

https://byline.network/2020/02/26-89/

타입스크립트로 리액트 코드를 작성하다보면 컴포넌트의 타입을 정해줘야하는데 너무 여러가지 타입이 있어서 헷갈려서 정리하고자 합니다. 배경지식 클래스형 컴포넌트는 render메소드에서 ReactNode를 리턴한다. 함수형 컴포넌트는 ReactElement를 리턴한다. JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다. html 처럼 생긴 문법을 리액트 라이브러리의 렌더링 함수로 변환하는것이다. 그래서 JSX를 사용하지 않고도 리액트를 사용할 수 있으나(JSX없이 사용하는 React) 이렇게 하면 매우 불편하다. // jsx Hello {this.props.toWhat} JSX는 아래 처럼 변경된다. // transpile ..

www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/ How to enable ES6 (and beyond) syntax with Node and Express Have you ever tried to write front-end apps using ES6 syntax, but then when you decided to learn back-end development with Node.js and Express, you realized that you can’t use stuff like import from andexport default? If so, you came to the..

Custom Document는 서버사이드렌더링 되는 페이지의 마크업을 추가하기 위해 사용한다. 이 Custom Document내부에는 getInitialProps가 있는데 여기서의 getInitialProps는 서버사이드렌더링 될때 필요한 데이터를 비동기로 가져오기 위해서 존재한다. next.js는 기본적으로 Document.js를 가지고 있지만 서버사이드렌더링 될때 어떤 특정 데이터를 페이지에 내려주고 싶다던지 마크업을 수정하고 싶다던지 하는 커스텀 요구사항이 있을때 pages폴더 아래에 _document.js파일을 만들어주면 된다. import Document, { Html, Head, Main, NextScript } from 'next/document' class MyDocument extends..