Blog.Sangzi.

Written by@Sangzi
Hi, This is sangzi blog

(이펙티브 타입스크립트) 아이템 2. 타입스크립트 설정 이해하기

아이템 2. 타입스크립트 설정 이해하기 이 코드는 오류 없이 타입 체커를 통과할 수 있을까? ⇒ 이를 알기 위해서는 타입스크립트 컴파일러의 설정을 알아야한다. 이 설정들은 에서 사용 가능함. 하지만 보통 설정이 많고, 동료들과 통일된 옵션을 사용해야 하므로 에 설정해두는 걸 추천 (참고: 을 실행하면 생성됨) 설정을 제대로 사용하려면 와 를 이해해야…

(이펙티브 타입스크립트) 아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기

이 아티클은 책을 읽고 학습하는 과정에서 내용을 정리하고 있습니다. 아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기 흔히 타입스크립트에 대한 설명을 읽다보면 다음과 같은 문장들을 볼 수 있다. “타입스크립트는 자바스크립트의 상위 집합(superset)이다.“ “타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다.” 이 문장들이 정확히 무슨 의…

[JS] n개의 빈배열 리스트 만드는 법

문제 발견 swipping 컨텐츠에 첫번째 이미지가 노출되지 않는 문제가 있어 이를 해결하기 위해 디버깅을 하고 있었다. 원인은 이미지 리스트의 index number와 하단 페이지 인디케이터를 만들 때 index number가 제대로 매핑이 안되고 있기 때문이었다. 기존 작업자의 관점으로 왜 이런 실수를 했을까 생각해보면, 총 배너 이미지 개수는 4개…

scss 주석, 똑똑하게 사용하는 방법

목적 scss를 사용하는 프로젝트에서 원활한 작업을 위해 을 추가하는 작업을 진행하였습니다. 이 과정에서 아래 기능들을 조사하였고, 공유하고자 합니다. jsDoc처럼 mixin에 주석 추가 해당 mixin을 include하여 사용할 때, auto complete나 help 툴팁 활성화 여러 mixin, variable 등을 Document 형태로 서빙해주…

Whats New in Chrome 103

2022년 6월 21일 정식 릴리즈 된 Chrome 103의 와 에 관한 내용을 정리합니다. 도움이 될만한 내용이라고 생각되는 부분을 주관적으로 선별하여 추가해보았습니다. 전체 내용 및 원본 내용이 궁금하신 부분은 아래 링크를 참고하시면 됩니다. 🙏🏻 참고 Chrome 103 - What’s New in DevTools https://chromestatus…

Whats New in Chrome 102

2022년 6월 10일 정식 릴리즈 된 Chrome 102의 와 에 관한 내용을 정리합니다. 도움이 될만한 내용이라고 생각되는 부분을 주관적으로 선별하여 추가해보았습니다. 전체 내용 및 원본 내용이 궁금하신 부분은 아래 링크를 참고하시면 됩니다. 🙏🏻 참고 Chrome 102 - What’s New in DevTools https://chromestat…

[JS] 객체에 조건부 프로퍼티 적용하는 방법

객체에 조건부 프로퍼티 적용하는 방법 작업 중 query 객체의 특정 프로퍼티를 조건부로 적용해야하는 경우가 생겼다. 예를 들어 page라는 param을 주는 상황에서 특정 값이 있을 때 param을 주고 싶다. 위 코드처럼 if문으로 query 객체에 prop을 추가해줄 수 있다. 하지만 조금 더 간단하게 짤 방법을 알아봄 를 사용하면 조금 더 간단하게…

a태그에 noreferrer, noopener 속성을 써야하는 이유

문제 발견 eslint가 설정된 jsx파일에서 에 속성을 주게되면 react/jsx-no-target-blank 경고를 보게된다. 경고 내용을 살펴보면 속성이 있을 경우, 속성을 추가하지 않으면 보안 문제(security risk)가 생길 수 있다고 알려준다. 응? 어떤 보안 문제일까 궁금해졌다. 1. target=”_blank” 의 동작 방식…