게시 됨 업데이트 됨javascript1분안에 읽기 (약 165 단어)

js template literals

1
2
3
4
5
6
7
8
9
10
function wow(strings, ...values) {
  console.log(strings);
  console.log(values);
  // ["안녕하세요. 제 이름은", "입니다.", ""]
  // ['친성', '와우 엄청난 문법이다']
}

const name = '친성';
const suffix = '와우 엄청난 문법이다';
wow`안녕하세요. 제 이름은 ${name} 입니다. ${suffix}`;
  • 와우
  • css in js 할 때 쓰던 문법인가?!

String.raw()

1
2
3
4
const filePath = String.raw`C:\Development\profile\aboutme.html`;

console.log(`The file was uploaded from: ${filePath}`);
// "The file was uploaded from: C:\Development\profile\aboutme.html"
  • 오우.. \가 그대로 출력된다!

참고

 게시 됨 업데이트 됨typescript몇 초안에 읽기 (약 60 단어)

typescript keyof

example.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export type User = {
  name: string;
  email: string;
};

const user: User = {
  name: 'chinsung',
  email: 'chin_sung@naver.com',
};

// keyof User === 'name' | 'email'
const updateUser = (name: keyof User, value: string) => {
  return {
    ...user,
    [name]: value,
  };
};

updateUser(''); // wow 자동완성!!
  • 나이수

참고

 게시 됨 업데이트 됨aws1분안에 읽기 (약 210 단어)

aws lambda handler callback

example.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {
  APIGatewayProxyCallback,
  APIGatewayProxyEvent,
  APIGatewayProxyResult,
  Context,
} from 'aws-lambda';
import { makeResponse } from './makeResponse';
import { service } from './service';

export const handler = async (
  _e: APIGatewayProxyEvent,
  _c: Context,
  callback: APIGatewayProxyCallback
): Promise<APIGatewayProxyResult | undefined> => {
  let response;

  try {
    const res = await service();
    response = makeResponse(200, res);
  } catch (err) {
    console.error(err);
    callback(err as any);
  }

  return response;
};

상황

  • 람다 로직에서 외부 api를 호출하는 경우가 있다
  • 근데 종종이 운 나쁘게 실패할 때가 생긴다
  • 람다는 에러가 발생하면 알아서 재시도를 한다
  • 재시도를 시키기 위해 실패를 알려야 한다
  • catch에 잡히면 재시도를 했으면 좋겠다

해결

  • 3번째 인자로 callback을 받고, catch에서 호출해준다

참고

 게시 됨 업데이트 됨typescript1분안에 읽기 (약 224 단어)

typescript is keyword

1
2
3
4
5
function isValidPostAttributes(
  attributes: any
): attributes is PostMarkdownAttributes {
  return attributes?.title;
}
  • remix 튜토리얼하다가 요상한 문법을 보았다
  • any같은 . 찍으면 자동완성 안뜨는 타입들을 특정 타입으로 좁혀줘서, 자동완성 지원도 받을 수 있다
example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function isNumber(x: any): x is number {
  return typeof x === 'number';
}

function isString(x: any): x is string {
  return typeof x === 'string';
}

function hello(value: any) {
  if (isNumber(value)) {
    return value.toFixed();
  }
  if (isString(value)) {
    return value.length;
  }
  throw new Error(`hello error`);
}
  • any로 받았는데, 타입 가드를 통과하면
  • 해당 타입처럼 다룰 수 있다
  • as로 강제 캐스팅하여 사용하지 않아도 된다!

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 157 단어)

promise all vs allSettled

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo')
);
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result.status))) // 여기에 걸림
  .catch((err) => console.error(err));
// > "fulfilled"
// > "rejected"

Promise.all(promises)
  .then((results) => results.forEach((result) => console.log(result.status)))
  .catch((err) => console.error(err)); // 여기에 걸림
// > foo
  • all은 한개라도 실패하면 종료
  • allSettled은 실패하더라도 모든 프로미스 실행

allSettled 값 꺼내쓰기

example allSettled
1
2
3
4
const [job1, job2] = await Promise.allSettled(promiseJobs);
if (job1.status === 'rejected') throw job1.reason;

console.log(job1.value);
  • rejected : reason에서 실패사유를
  • fulfilled : value에서 값을 꺼내 쓸 수 있다

참고

 게시 됨 업데이트 됨eslint몇 초안에 읽기 (약 93 단어)

eslint ignorePatterns

린트하고 싶지 않은 디렉터리를 설정해줄 수 있다

  • 스토리북이 src 밑에 있어서 린트가 같이 적용되었다
  • eslint가 스토리북 디렉터리를 무시하도록 해보자
.eslintrc
1
2
3
4
{
  // ...
  "ignorePatterns": ["/src/stories/**/*"]
}
  • 루트 경로부터 표현해야 한다

참고

 게시 됨 업데이트 됨web1분안에 읽기 (약 200 단어)

first-child vs first-of-type

The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. Try changing it to “:first-of-type”.
The pseudo class “:nth-child” is potentially unsafe when doing server-side rendering. Try changing it to “:nth-of-type”.

  • first-child를 사용하면 콘솔에 에러가 찍힌다
  • 그러면서 first-of-type을 사용하라고 알린다
  • 이참에 둘의 차이를 알아보았다
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  h1:first-child {
    color: red;
  }
  h4:first-of-type {
    color: green;
  }
</style>
<body>
  <div>
    <h1>first-child로 빨간색이 된다</h1>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
  </div>
  <hr />
  <div>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
    <h1>효과를 안 받는다</h1>
  </div>
</body>

참고

카테고리

아카이브

광고

×