본문 바로가기

프론트엔드

package.json의 version을 환경 변수로 설정하기 키워드: package.json, yarn version, $npm_package_version, .env(dotenv), bitbucket pipeline, grep/awk/sed/tr 상황 웹페이지에 현재 package.json의 version field 값을 string으로 표시하고자 한다. (ex> 'v2.4.2') npm scripts의 package.json vars를 사용하면 $npm_package_version이라는 값으로 쉽게 version을 가져올 수 있다. https://www.npmjs.cn/misc/scripts/#packagejson-vars 또는 'yarn version' command를 사용하여 현재 package.json의 version을 확인할 수 있다. https://c.. 더보기
리액트에서 무한 영역 UI 만들기(feat. requestAnimationFrame, useRef) 프로젝트: 채식 지도(가명) 키워드: infinite UI, requestAnimationFrame, mouse event, touch event, useRef 상황 피드백 페이지는 포스트잇이 무한히 나열된 UI로 구현하고자 한다. 마우스나 모바일기기의 터치를 이용하여 원하는 방향으로 움직일 수 있어야한다. 또한, 손가락을 움직이다가 뗐을 때 속도가 점점 감속되면서 멈춰야한다. 해결 과정 무한한 것처럼 보이기 위해선 어떤 장치가 필요할까? 를 먼저 고민해보았다. 내가 생각한 답은 자연스럽게 특정 영역을 계속 순환하는 것이었다. 복사 영역 복사 영역 복사 영역 복사 영역 메인 영역 복사 영역 복사 영역 복사 영역 복사 영역 위의 표와 같이 실제로 유의미한 '메인 영역'이 중앙에 위치하고 그 주변은 복사 영.. 더보기
Vercel log를 통해 Next.js 500 error 원인 분석하기 프로젝트: 채식 지도(가명) 키워드: Next.js, vercel, logging, realtime log, firebase 상황 mock으로 개발 중이었던 유저 피드백 데이터를 firestore에 저장된 실제 데이터로 교체하고자한다. 먼저 firebase를 package.json에 추가하고, firebase initialize 파일을 작성한다. // firebase/index.ts import { initializeApp } from '@firebase/app'; import { getFirestore } from '@firebase/firestore'; initializeApp({ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: proce.. 더보기
Button에 pointer-events, -webkit-tap-highlight-color 설정하기 프로젝트: 채식 지도(가명) 키워드: pointer-events, -webkit-tap-highlight-color 상황 페이지 상단에 Header가 있고 Header는 3개의 버튼으로 이루어져있다. Header는 flex container이다. 지도영역이 Header에 가려져 터치/마우스 이벤트가 일어나지 않았다. 그래서 header의 마우스 이벤트를 막았다. header.flexContainer { pointer-events: none; } 자식 컴포넌트인 왼쪽(loplat logo)과 오른쪽 아이콘 버튼들도 눌리지 않게 되었다. 해결방법 css pointer-events: none에 대한 MDN 문서를 확인했다. 요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 poin.. 더보기
RxJS를 이용해 함수형으로 데이터 다루기 프로젝트: 채식 지도키워드: functional programming, reactive programming, RxJS, POI, filter, cluster상황json 데이터는 '도/특별시/광역시(lv1) -> 시/군/구/동(lv2) -> 매장(lv3)' 으로 level이 매겨진 POI 정보들이 객체 형식으로 들어있다. [ { "name": "서울", "lv": 1, "coordinates": [37.5462411, 126.9489439], "children": [ { "name": "망원합정", "lv": 2, "coordinates": [37.5543362, 126.9133601], "children": [ .. 더보기
Firebase storage로 첨부파일 다운로드 구현하기 프로젝트: 공우 홈페이지키워드: firebae storage, download file in javascript, attachment상황공우 지원 방법 section에서 첨부파일 다운로드 기능을 구현해야한다.파일들은 firebase storage '/example' 폴더 하위에 저장되어있다.해결 방법Attachment Component는 이름과 파일명을 prop으로 받는다. export interface Props { title: string; // ex> 파일이름.docx filename: string; // ex> example/file.docx}const Attachment: React.FC = ({ title, filename }) => { ...}최초로 버튼을 누르면 setUrlFrom.. 더보기
absolute와 fixed로 다양한 스마트폰 너비 대응하기 프로젝터: SNU FESTIVAL키워드: absolute, responsive web상황보통 화면 레이아웃은 flex, grid 등의 css 속성을 이용하지만 축제 메인화면이라는 특수한 상황에 맞도록 디자이너와 함께 레이아웃을 고민했다. 결과적으로 아래와 같은 디자인이 확정되었다.통계상 80%의 유저가 모바일로 접속하기 때문에, 모든 기기에서 레이아웃이 깨지지 않도록 신경을 써야한다.배경 이미지(island)를 화면에 꽉 차도록하고, 하위 요소(굿즈, 공연, 행사, 미니게임, 방명록 등)의 위치를 상대적으로 잡아야한다.해결방법먼저 모든 기기에 대해 화면에 딱 맞게 배경이 그려져야한다. 보통은 '100%' 를 이용하여 표현하지만 이 경우엔 배경 이미지의 비율이 바뀌지 않고 항상 일정(늘어짐없이 디자인과 일.. 더보기
svg mask fill 속성은 white로 지정하기 프로젝트: loplat UI 키워드: svg, mask, fill 상황 팀원분께서 IconButton이라는 컴포넌트를 개발하셨는데, 이상한 점이 있다고 하셨다. "svg에 border와 동일한 색상을 설정했는데 svg의 색상이 border색상보다 좀더 밝게 나타납니다." 실제로 확인해보니 border color와 svg fill 에 동일한 색상을 전달하지만, storybook 상에는 색상이 다르게 보이는 것을 확인했다. border-color: ${({ border }) => border.default}; svg path { fill: ${({ text }) => text.default}; } 해결 과정 개발자도구로 확인한 결과, svg path에는 정상적으로 fill 속성이 채워져있었다. fill의 색.. 더보기

티스토리툴바