이채현
Top level await
기존 await를 사용하려면 async 함수 내에서만 가능했다.
1 | (async function () { |
하지만, ES2022부터 이러한 규칙이 사라지고, await를 async함수없이 모듈에서 아래와 같이 작성가능해졌다.
이채현
기존 await를 사용하려면 async 함수 내에서만 가능했다.
1 | (async function () { |
하지만, ES2022부터 이러한 규칙이 사라지고, await를 async함수없이 모듈에서 아래와 같이 작성가능해졌다.
이채현
이 문서는 eslint.org를 참고하여 eslint 7.32.0 버전에서 작성되었으며, 아래 프로젝트를 기반으로 작성했습니다.
https://github.com/chlee1001/react-typescript-simple-boilerplate
1 | { |
[JS] 선언한 모듈로 이동하기 (alias) - Go to declaration
이채현
많은 사람들은 선언한 모듈들을 command/ctrl + click으로 해당 파일로 바로 이동하거나 자동완성이 되게하는 IDE나 Editor의 기능을 사용할 것이다. 그리고 babel-plugin-module-resolver을 통해 모듈의 경로를 별칭으로 바꿔서 사용할 것이다. 하지만 별칭으로 바꾸면서 위 기능이 깨지는 문제가 종종 있다. 그리고 이 문제는 플러그인쪽에서는 해결되지 않고 있다. npm에 올라온 최신버전은 이미 2년이 지났다.
우리는 jsconfig.json을 사용하여 IDE가 사용자 지정 resolve규칙을 따르도록 하는 것이 좋다. 이 접근 방식은 Webstorm과 VS Code 모두 작동한다.
이채현
Webpack으로 React 프로젝트를 초기 설정하다가 ,
1 | presets: [ |
위 코드의 presets가 과연 .babelrc에 있어야 하는지, webpack.config.js에 있어야하는지 잘 모르겠어서 각 파일의 목적을 정리해보았다.
.babelrc는 babel의 설정을 위해 사용한다.
이채현
프로젝트의 규모가 커지면 디렉토리 구조도 복잡해진다. 그 때문에 아래와 같이 컴포넌트의 위치를 찾기 어려워진다.
1 | import { whereIsThis } from "../../../../../aaa/bbb/ccc"; |
위와 같이 작성한 것을 상대경로라고 한다. 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생긴다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라 모두 수정해줘야 해서 코드 리펙토링(refactoring)이 상당히 불편하다.
물론 절대경로를 사용하면 되지 않을까 생각할 수 있지만, 개발자들마다 해당 프로젝트를 다른 디렉토리에 저장해놓을 것이기 때문에 현실적으로 적용하기 어려운 방법이다.
[React] React의 setState는 비동기로 동작한다
이채현
1 | function App() { |
위 코드의 결과는 버튼을 눌러도 1씩 증가한다.
결국, 위 코드는 setState 는 동일한 key 값에 대하여 이전의 값을 계속해서 덮어써서, 마지막 명령어만 수행되는 셈이다.
[Fastlane] Fastlane을 통해 빌드를 자동화하자 1편
이채현
이채현
1 | function returnX(){ |
1 | function privateData() { |
이채현
class 선언은 프로토타입 기반 상속을 사용1 | function Person(name, age) { |
이채현
자바스크립트는 프로토타입 기반의 언어다.
1 | function Person(name, age) { |
생성자함수는 프로토타입이 모든 자바스크립트에 들어있듯이 생성자도 모든 자바스크립트에서 확인가능하다.
1 | const one = new Person('one', 1); |