본문 바로가기

전체 글

(70)

[⚛️ react] synthetic event (ft. +17 비포&애프터) [이전 글]2024.08.16 - [👩🏻‍💻 dev] - [토스] Transpiler, “사용”말고 “활용”하기 [토스] Transpiler, “사용”말고 “활용”하기🗣️ 이벤트 버블링과 캡쳐링에 대해서 알고 계시나요?모던 자바스크립트 딥다이브에서 봤었는데;;버블링은 버블 정렬처럼 bubble up이라는 말에서 유추할 수 있듯이 어떤 이벤트가 아래에서 위pyotato-dev.tistory.com이벤트 위임+ 트랜스파일러를 통해서 로깅을 코드에 주입하는 토스의 이용 사례를 살펴봤었다.이벤트 버블링 대신 캡처를 사용한 이유에 대한 질문이 있었는데, 왜 그랬을까 나름대로 이유를 찾다가,리액트에서 이벤트 전파 방식이 dom과는 살짝 다르다는 글들을 읽게 되어 더 자세히 파보기로 했다.Legacy reac..

[토스] Transpiler, “사용”말고 “활용”하기 🗣️ 이벤트 버블링과 캡쳐링에 대해서 알고 계시나요?모던 자바스크립트 딥다이브에서 봤었는데;;버블링은 버블 정렬처럼 bubble up이라는 말에서 유추할 수 있듯이 어떤 이벤트가 아래에서 위로 전이되는 거고, 캡쳐링은 반대로 위에서 아래로 전이되는 거 아니었나?개념은 어느 정도 알고 있지만 실제 적용을 하는 경우로는 연결이 되지 않았었다.이번 기회에 실제로 캡쳐링을 활용한 토스의 'Transpiler, “사용”말고 “활용”하기'가 좋은 예시인 거 같아서 알아보고자 한다.법적 영역을 잘 모르는 입장에서 사용자의 일거수일투족을 로깅하는 건 동의하에만 가능할 거 같기 때문에 적용해 볼 기회가 있을지는 모르겠지만, 실제 사용 사례를 알아야 기억에 더 남을 거 같아서, 어떤 식으로 트랜스파일러와 이벤트 캡쳐링..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(7) Sentry 설정 2024.08.10 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6) [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6)[이전글] 2024.08.09 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react routerpyotato-dev.tistory.comsentry can't fix this 유튜브 광고로 종종 봤던 sentry! 오늘은 sentry 적용에 대해 정리를 하..

[Nextjs Image] The request resource XX has type "image/svg+xml" but dangerouslyAllowSVG is disabled 이미지 placeholder로 사용하기 위해 https://placehold.co/에서 가져오려고 했으나, 위와 같은 에러가 발생했다.next 문서를 찾아보니 해결방안은 dangerouslyallowsvg설정을 해주면 된다. 하지만 디폴트 로더가 SVG 이미지를 최적화하지 않는다는 문구와 함께, 그 이유를 설명하는데, 첫째는 SVG는 vector 포멧으로 이루어졌기 때문에 resize 필요성이 없고, 두 번째로는 HTML/CSS 와 같은 특성 때문에 적절한 CSP 헤더 없이는 취약성으로 이어질 수 있다는 것이다. 따라서 src prop이 SVG인 것을 알면 최적화하지 않은 방식으로 사용하는 것이 바람직하다고 한다.그리고 contentSecurityPolicy와 contentDispositionType을..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6) tanstack query 설정 [이전글] 2024.08.09 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정[이전글] 2024.08.08 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+husky) [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프pyotato-dev.tistory.com이전 포스팅에는 클라이언트 사이드 라우팅..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정 [이전글] 2024.08.08 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+husky) [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+hu2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(3) 준비물: authorization을 담당할 서버 코드 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝pyotato-dev...

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+husky) 2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(3) 준비물: authorization을 담당할 서버 코드 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(3) 준비물: authorization을 담당할 서2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서버에 이어서 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프pyotato-dev.tistory.com사용할 spotify api에 대한 준..

[💻 컴퓨터 용어 ] "Opinionated"란? 설정을 하던가 스펙을 체크하거나 사용법을 알아보려고 공식 문서에 들어가서 읽다 보면 "opinionated"라는 말을 종종 볼 수 있다. 사전적인 의미를 살펴보면 영어 설명으로는 원리를 강하게 주장/고수하는 성격으로 묘사가 되고, 한국어 번역은 '의견을 고집하는, 독단적인, 자부심이 강한..' 등으로 설명된다. 하지만 소프트웨어적인 콘텍스트에서 이 말이 와닿지 않고 한글 번역도 뭔가 반영하기 어색하다.🍀 오늘은 이 어색함을 해소하기 위해 "opinionated"를 소프트웨어 콘텍스트에서 이해하기 쉽게 정의와 예시를 살펴보자.Opinionated 표현 사용 예시들prettier프론트엔드 개발자라면 한 번쯤은 prettier 설정을 해봤을 것이다. 공식 홈페이지에 들어가면 아래의 그림처럼 prettie..

목록 더보기

티스토리툴바