[링크] CSS 학습 관련
이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자
[React] 특정 엘리먼트 ‘외부’를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 (when click outside of element trigger event) [메뉴, 자동완성 구현 등에 사용]
공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ export const useBindClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: (e: React.MouseEvent) => void) => { useEffect(() => { // Invoke Function onClick outside of element const handleClickOutside = (e: any) => { if (ref.current && !ref.current.contains(e.target)) { onClickOutside(e); } }; document.addEventListener('mousedown',… Read More »
[React] css로 배경이미지(background image) 넣는 샘플코드
<div style={{ backgroundImage: `url("http://blabla/bg.png")`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', }} ></div>
[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기
환경 React 18.2.0 Typescript 4.6.3 eslint 8.16.0 common.ts /** * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기 */ export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => { // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); func(e); } }; test.tsx //… Read More »
[링크] Frontend (프론트엔드) 개발 팁(tip) 모음
스토리북으로 인터랙션 테스트하기 (20220111) React UI 상태를 URL에 저장해야 하는 방법과 이유 (20211214) 우선순위 힌트로 리소스 로딩 최적화하기 (2021117) CORS에서 이기는 방법 (20211110) 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 (20211027) 당신이 모르는 자바스크립트(javascript)의 메모리 누수의 비밀 (20210611) 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까 (cross origin) (20220831)?
[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)
/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 antd table 내의 스크롤바를 가공해 보았음 * – webkit 계열에서만 사용할 수 있다고 함. */ /* 스크롤바 폭 */ .ant-table-body::-webkit-scrollbar { width: 8px; /* 여기서 height가 의미가 있나? */ } /* 스크롤바에서 움직이는 부분 */ .ant-table-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 2px; background-color: #bbb;… Read More »
[react] jsx(tsx) 파일 내 텍스트에서 따옴표(quote, quotation) 입력하기
방법 중괄호(curly braces)로 감싸주고 javascript string 으로 표현. 예시 return (<p>{"I've seen the movie."}</p>) 참고 https://stackoverflow.com/questions/32979512/react-jsx-how-to-render-text-with-a-single-quote-example-pive-p
[링크/react-router] 리액트 라우터 – 중첩된 라우트 (레이아웃(layout) 구성, outlet, path variable…)
리액트 라우터 – 중첩된 라우트 Passing props to when nestining routes in React Router v6?
[Mapbox] cluster 클릭시 zoom이 되지 않던 현상
cluster 기능을 사용하면서, map.getSource([source name]).getClusterExpansionZoom() 함수 호출시 결과로 리턴되는 zoom의 숫자가 증가되지 않아, 결과적으로 줌이 되지 않는 문제가 발생한 적이 있다. 정확한 원인은 알 수 없으나, mapbox studio 로 자작한 맵이 문제인 것으로 판단된다. 커스텀 맵이 아닌 기본형 맵을 사용하니 zoom 숫자가 정상적으로 증가되었다. 이래서 솔루션 삽질은 늘 알 수 없는 변수가 있다니까..
[링크] html과 css만으로 탑메뉴(GNB, top menu) 만들기
https://www.cssscript.com/multi-level-navigation/
[링크] 타입스크립트 열거형 (typescript enum) 관련 이슈/문제점
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
[링크] 타입스크립트 제네릭 (typescript generic) 관련
https://www.typescriptlang.org/docs/handbook/2/generics.html
[링크/react] 재귀 컴포넌트 만드는 예시 (메뉴, GNB 트리구조 등…)
How to Recursively Render the React Component
[html/css] 탑메뉴(gnb) 작성시 드롭다운 메뉴가 컨텐츠 영역 뒤로 숨겨지던 문제 (dropdown menu gets hidden behind the content)
일반적인 조언들 z-index 를 충분히 큰 값으로 설정 position: relative 를 활용 탑메뉴 영역이 overflow:hidden 으로 되어 있는지 확인 내 경우는 탑메뉴 영역이 overflow: auto 로 되어 있는 것이 문제였다.
yarn berry (yarn 3.x) 사용법 메모
특정 모듈을 최신버전으로 업그레이드 (예시) yarn up lodash 참고 https://yarnpkg.com/cli/up
[링크] React Render Props 패턴 관련
메모 hooks가 render props를 대부분 대체하지만, 그래도 render props가 필요한 경우가 있다… 라는 류의 글들이 심심찮게 보임 참고 Render Props vs React Hooks: Which Is More Efficient?
[링크] React HOC(higher-order component) 관련
사용처 UI패턴은 유사한데(e.g. 목록화면), 데이터소스가 다른 경우(분류/필터링이 달라서 다른 목록이 도출되는 화면들), UI출력 관련 중복코드를 줄이는 데 사용하는 것 같다. 참고 [React] Hook과 함께 HOC 사용해보기
[vscode] 파일(리소스) 검색시 특정 패턴(디렉토리) 제외하는 설정
Ctrl + P 로 기능 검색 (검색어 "setting ui") Open Settings (UI) 로 진입 텍스트편집기 > 파일 > Exclude > 검색대상에서 제외할 패턴 추가
[펌글/typescript] 함수(function)의 인수(인자,매개변수,arguments)의 형식을 타입(type)으로 선언하기.
예시 type TestParams = Parameters<(a: string, b: number) => void> // [string, number] type SecondParam = TestParams[1] // number 출처 https://stackoverflow.com/questions/51851677/how-to-get-argument-types-from-function-in-typescript
분명히 요청(request)/응답(response)이 존재하는데 크롬(chrome) 네트워크(network) 탭의 xhr이나 doc에서 찾을 수 없을 경우
JSONP 요청인지 확인해 보자 (개발자도구 > js 탭에서) 기타 postMessage를 사용하는 경우도 있다고 하는데… 이건 xhr에 잡히는 건가?