3월 4주차 기록

타지에서 루틴 찾기

배워가기

Document.execCommand

HTML 문서가 designMode일 때, document 객체의 execCommand 메서드를 사용하여 현재 편집 가능한(editable) 영역(ex. form input, contentEditable 요소)을 조작할 수 있다.

현재는 ClipboardAPI가 나오면서 deprecated되었지만, 여전히 일부 상황에 유용하게 쓰일 수 있다.

예) 사용자가 선택한 영역에서 특정 문자열을 찾아서 교체하는 것

// 텍스트 복사 (클립보드에 저장)
document.execCommand("copy"); // 기존 방식
window.navigator.clipboard.writeText();

Ref https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

class-transformer

자바스크립트 객체는 두 가지 타입이 있다: 순수(리터럴) 객체, 클래스(생성자) 객체

API 등으로 받아온 리터럴 자바스크립트 객체를 ES6 클래스로 바꾸고 싶을 때, JSON.parse 를 이용하면 원하는 클래스의 인스턴스로 만들 수 없다. (여전히 리터럴 자바스크립트 객체다.)

이 리터럴 자바스크립트 객체를 클래스의 인스턴스로 만들어주고 싶을 때 class-transformer 를 사용한다~

fetch("users.json").then((users: Object[]) => {
  const realUsers = plainToClass(User, users);
  // 이제 realUsers의 각 user는 User 클래스의 인스턴스가 된다.
});

Ref https://github.com/typestack/class-transformer#what-is-class-transformer

Nest.js Interceptor

• 메서드 실행 이전/이후에 로직 binding
• 함수의 리턴값 변환
• 함수가 throw한 exception 변환
• 기본 함수 동작의 확장
• 특정한 조건에 의존하는 함수를 완전히 override하기

🚦 Interceptor로 Response Transformer 만들기

• https://velog.io/@junguksim/NestJS-노트-4-Interceptors
• https://jakekwak.gitbook.io/nestjs/overview/interceptors

Nest 구성 요소

• DB 데이터를 추상화한 것 = Entity
• 추상화된 Entity를 기반으로 DB에서 데이터를 실제로 가져오는 곳 = repository
• repository를 여러개 이용하거나 서비스 비즈니스 로직을 만드는 곳 = service
• Route endpoint 단위로 로직의 시작점을 표현해놓은 곳 = controller

lodash xor

두 배열에서 서로 중복되지 않은 데이터를 뽑아 새로운 배열로 만든다.

_.xor([2, 1], [2, 3]);
// => [1, 3]

Ref https://lodash.com/docs/4.17.15#xor

scroll listener vs IntersectionObserver

scroll listener에 caching과 throttling을 걸어도 IntersectionObserver가 더 부하가 적다.

Ref https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6

react-router의 match

react-router의 match는 route path와 url의 매칭에 관한 정보를 가지고 있다.

아래처럼 사용

<Switch>
  <Route path="/:type" component={MyPage}></Route>
  {/* ... */}
</Switch>

// MyPage.tsx
const MyPage = ({ match }) => {
  const pageType = match.params.type;
};

🤓 팁

• match는 route → component
• props는 component → component 로 변수를 넘길 때 사용한다.

role vs aria-hidden

role/aria-hidden 어트리뷰트를 지정하는 것은 각각 아래와 같은 의도의 차이가 있다

• role 지정
  • 시맨틱 의미에 대한 구분을 세부적으로 진행하겠다는 것
  • img, presentation, … 등등 정말 많음
• aria-hidden 지정
  • 아예 접근성 트리(Accessibility Tree)에서 제거하겠다는 것

e.preventDefault() 주의사항

input에서 엔터키를 눌렀을 때 상위 form의 onSubmit 이벤트의 트리거를 막기 위해서는 e.preventDefault()를 사용한다.

onKeyDown, onKeyPress 등 먼저 실행되는 이벤트에 대한 핸들러에 preventDefault를 사용해도 submit 이벤트가 막히지만, onKeyUp 이벤트의 핸들러에서는 preventDefault를 해도 submit 이벤트가 막히지 않는다

이미 keydown, keypress가 먼저 실행되어 submit이 되버리기 때문이다…

React Hook Form 이모저모

• watch vs getValues: getValues는 값이 변경될 때 리렌더링이 트리거되지 않고 인풋의 변경에 subscribe하지 않는다.
• resetField
  • option에 defaultValue를 넣지 않으면 필드 자체의 defaultValue로 돌아간다.
  • defaultValue를 넣으면 해당 값으로 필드 값이 변경되고 필드의 defaultValue가 해당 값으로 업데이트된다.

vite local https 환경 설정

vite에서 local 환경 실행 시, https를 사용하려면 vite.config.ts 파일에 아래와 같이 서버 설정을 추가해야 한다.

server: {
  host: "my.baemin.com",
  port: 3000,
  https: {
    key: fs.readFileSync("./key.pem"),
    cert: fs.readFileSync("./cert.pem"),
  },
},

이것저것

• AOP(Aspect Oriented Programming) - 관점 지향 프로그래밍; 흩어진 관심사(Crosscutting Concerns)를 모듈화 할 수 있는 프로그래밍 기법
• 504 Gateway Timeout - 게이트웨이나 프록시로 동작하는 서버가 upstream 서버로부터 제한 시간 내에 응답을 받지 못했을 때 발생하는 에러로, 프론트에서 고칠 수 있는 건 없다… gitlab CI를 돌릴 때 가끔 발생하기도 하는데, 다시 돌려보면 해결된다 😅
• HTMLElementEventMap - window event들을 모아 놓은 집합의 타입 정의(Ref)
• 체리피커 - 상품을 구매하지 않으면서 혜택만 이용하려는 소비자
• cURL copy - 1) 개발자도구 2) network 탭 3) fetch 내용 우클릭 4) copy as cURL 👉 터미널에서 브라우저와 동일한 결과를 얻을 수 있는 명령어가 복사된다.

기타공유

Image Converter

깃랩 등 마크다운 에디터에서 이미지를 복사+붙여넣기 시 이미지의 크기를 지정할 수 없는데, 붙여넣어진 raw image 텍스트 영역을 선택만 하면 자동으로 <img> 태그로 변환하여 크기를 조절할 수 있게 해주는 익스텐션이다. 최고선배 팀원 분께서 만들어주셨는데 엄청 유용하게 쓰고 있다. 😎

Ref https://chrome.google.com/webstore/detail/image-tag-converter/gphnlefpfhjngabcknbklfmhfdmpmjfc/related

청소부도 자바 값 내라? 😱

이게 머선 일이고…

Ref https://news.hada.io/topic?id=8782

ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)

ChatGPT로도 진짜 코드를 짜주는구나..! 🙀 그러면 Copilot은 무슨 소용이지? (그래도 더 특화됐겠지?)

그래도 아직 실직하진 않을 것 같다.

Ref https://fe-developers.kakaoent.com/2023/230323-chatgpt-and-fe-developer/

Github Copilot X

대화형 코파일럿으로, 코파일럿을 이미 사용하고 있는 사람만 신청 가능하다고 한다.

대체 어디까지 가는거야…

Ref https://github.com/features/preview/copilot-x

AI-free Contents Badge

Copilot, ChatGPT 등 AI의 도움을 받은 컨텐츠들이 난무하는 세상 속에 AI 콘텐츠가 아닌 ‘진짜 사람’이 만든 저작물에 붙일 수 있는 notbyai 뱃지라는 것도 등장했다…

(법적으로 실효성이 있는 건 아니다)

AI 프롬프트 엔지니어링과 프롬프트를 훔치는 ‘인젝션’

ChatGPT 등 텍스트 기반 명령어를 입력하는 ‘프롬프트’ 입력이 기반이 되는 도구에, 내부 기술 정보에 대한 질문을 하여 대외비를 탈탈 털어간다. ㅋㅋㅋ 웃을 일이 아닌데, 웃기다… 🤦‍♀️

Ref https://yozm.wishket.com/magazine/detail/1939/

마무리

한 주를 또 열일하며 보내고, 주말엔 골드코스트에 다녀왔다. 3년 전 호주를 왔던 기억이 제일 생생하게 잘 떠오르던 곳이었다. 넘 어렵지만 재밌었던 바다서핑도 배우고, 코알라 모자를 뒤집어쓴 캥거루 인형을 샀던 스타벅스에서 자바칩 프라푸치노 먹으며 힐링했다. 저녁은 폭립&킹새우로 flex… 근데 사이드로 나온 고구마튀김이 젤 맛있었다 ㅎ 한국에 수입하고 싶다.

그리고 일요일에 온갖 근육통을 안고 테크트리 해커톤 달려버렸다… 🏃‍♀️ 이렇게 또 호주에서의 주말이 순삭되었당