분류 전체보기 (17) 썸네일형 리스트형 Git hooks - Gitlab, Jira, Slack 연동 상황Gitlab merge request 생성될 때마다 Slack에 코드 리뷰 요청 메시지를 송부하고 있는데, 자동화해 보고 싶다.조건Gitlab 사용중브랜치명은 Jira 티켓 번호Jira 티켓 타이틀 작성 필요팀원 태그 필요생각Gitlab webhook을 이용해서 mr 생성을 감지할 수 있다. Gitlab WebhooksSlack webhook을 이용해서 메시지를 송부할 수 있다. Slack webhooks브랜치명이 이슈 티켓 번호니까 추출해서 Jira에서 api로 검색하면 티켓 제목을 가져올 수 있지 않을까?테스트1. Slack에 메시지 보내기일단 테스트용 앱을 하나 만들고, 테스트용 채널을 만들어서 Incoming webhook을 연결했다.(여기는 캡쳐와 설명이 없음... 귀찮으니 생략해두고 나중에.. 서버 없이 브라우저에서 외부 api 호출하기 (Vite proxy 설정 + vercel.json 설정) 상황oauth 인증해서 외부 서비스 이용하는 과정 테스트 중이다.POC니까 간단하게 하려고 DB는 로컬스토리지로 대체하고 클라이언트에서만 http 요청으로 처리하려고 했다.유튜브는 별 문제 없이 되었는데, 인스타그램은 리다이렉트 url 설정에 로컬호스트를 지원하지 않아서 배포 환경에서 테스트해야 했다. CORS 에러 임시 해결을 위한 proxy 설정원칙적으로는 CORS 에러는 보안을 위한 브라우저 기본 정책이므로 서버에서 allow origin으로 설정해서 통신해야 한다. 하지만 지금은 POC를 얼른 만들고 싶어서 임시로 클라이언트에 프록시 서버를 설정해 줬다. (oauth 처음 해 볼 때 삽질하면서 express로 서버도 만들었었는데 그냥 클라이언트에서 하는 게 편하긴 하다 나는 프론트니까^^ 사실 백.. AWS MFA Authenticator app 사용해서 인증하기 삽질의 기록... 혹시나 누군가 나와 같은 삽질을 하고 있을까 봐...ㅠ AWS 콘솔에서 루트 이메일 계정으로 패스워드 쳐서 로그인을 하다 보면 MFA(Multi Factor Authentication)을 하라고 한다. 내 계정은 소중하니까 귀찮아도 꼭 하는 게 좋고 특히 AWS는 계정 보안을 신경 쓰지 않으면 잠깐새 돈이 어마무시하게 나와버릴 수도 있으니 얼른 하자. AWS에서도 계정 생성 후 특정 기간(아마 30일인 듯) 안에 하도록 시키고 있다. 깃헙도 폰에 Authenticator 앱 깔아서 사용중이었어서 이걸로 해야겠다~ 하고 등록하려고 했더니 자꾸 에러가 나서 등록을 못했다. 나는 분명히 앱에 뜬 여섯자리 숫자를 입력했는데 자꾸 틀렸다고 나오더라. 문제는 내가 여섯자리를 입력해서였다.AWS 가.. manualChunks 옵션 설정하여 빌드파일 크기 줄이기 (+lazy loading) Manual Chunks블로그 프론트엔드를 드디어 배포해보려고 빌드했더니 이런 경고문이 떴다. js 파일 사이즈가 커서 나타난 경고문으로 해결 방법도 함께 표시해주고 있다. 여담이지만 프론트엔드 최적화가 중요하다고 말만 많이 들었지 체감을 할 수 있는 경험이 없었는데 직접 배포를 시도하니 자연스럽게 알게 되고 하게 되어서 좋다.일단 참고한 블로그 글은 이곳이고, lazy loading, dynamic import, manualChunks 옵션 설정의 세 가지 방법 중 manualChunks 옵션으로 처리하는 게 지금 상황에서 가장 효과적일 것으로 생각해 시도해보았다.1차 시도크기가 큰 react-icons를 별도로, 그리고 react 관련된 모듈을 묶어주었다. 다시 빌드해 보니 지정한 옵션에 따라 잘 나.. forwardRef로 전달받은 ref의 current값 접근 및 사용 방법 forwardedRef.current 사용법결국 필요없게 되었지만 블로그 포스트 TOC 만들면서 forwardedRef의 current값을 사용하고 싶어서 찾아본 내용.https://stackoverflow.com/questions/62238716/using-ref-current-in-react-forwardref// useForwardRef hookimport { ForwardedRef, useEffect, useRef } from "react";export const useForwardRef = ( ref: ForwardedRef, initialValue: any = null) => { const targetRef = useRef(initialValue); useEffect(() => { .. 해시 링크로 TOC 메뉴에 해당하는 특정 위치로 스크롤시킬 때 margin 처리 scroll-marin-top CSS 속성개발블로그 만들면서 해시 링크로 TOC 만들고 있었는데, href로 id값 찾아 이동할 때 브라우저 최상단으로 해당 타이틀이 위치하도록 이동해버려서 GNB에 가려지는 상황이 발생했다. 방법을 찾아보다가 이미 잘 되어 있는 사이트 한 번 뜯어보라고 팀원이 조언해주셔서 mdn 문서에서 확인해보니 scroll-margin-top이라는 딱 봐도 내가 찾는 것 같은 속성명이 보였다. The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined.. TypeScript mapped type과 다른 정적 타입을 함께 사용하고 싶을 때 & 로 타입 병합 Mapped type// Mapped type exampletype Enum = 'a' | 'b' | 'c';type MappedType = { [key in Enum]: { foo: string; bar: number; }}Mapped type과 다른 정적으로 지정한 타입을 함께 사용하고 싶을 때상황: theme 설정 중 variant에 따라 스타일을 다르게 지정한 Typography에서 테마 모드에 따른 기본 색상을 지정해주고 싶었다.// theme.tsconst light = { ... typo: i18n.language === "ko" ? { ...typoKo, ...lightTypoColor } :.. CSS flex-shrink 속성 부여시 overflow 처리 필요 블로그 백엔드를 구현하기 전까지 깃헙 TIL 레포에 기록하고 있었는데, 한 곳에 모아둬야겠다 싶어서 그동안 쌓인 글 올린다. flex-shrinkflex-container보다 flex-item이 더 커서 넘어갈 때 flex-item 크기를 줄여 flex-container 크기에 맞춘다.The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negative fre.. 이전 1 2 3 다음 목록 더보기
