[html/css] 탑메뉴(gnb) 작성시 드롭다운 메뉴가 컨텐츠 영역 뒤로 숨겨지던 문제 (dropdown menu gets hidden behind the content)
일반적인 조언들 z-index 를 충분히 큰 값으로 설정 position: relative 를 활용 탑메뉴 영역이 overflow:hidden 으로 되어 있는지 확인 내 경우는 탑메뉴 영역이 overflow: auto 로 되어 있는 것이 문제였다.
Category Archives: Lang
[링크] 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 사용해보기
[펌글/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
[react/vite] Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=
vite 환경에서 토스트그리드(toast grid)를 사용하는데, 로컬에서는 잘 돌아가는데, 빌드 후 nginx에 올리니 위 제목과 같은 스크립트 에러가 발생하고 화면이 뜨질 않았다. 얼마간의 검색 후, 해결이라기 보다는 우회책을 찾게 되어 기록한다. Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= 페이지보다 선행되는 ajax call에 에러가 없는지 점검 (e.g. /api/v1/getMsgList) 1에 문제가 없다면 일부 서드파티 라이브러리에서 ESM에 적합하지 않은… Read More »
vite react build시 에러 메시지와 함께 엔터를 한 번 눌러줘야 빌드가 되었던 현상
package.json … "scripts": { … "dev": "cross-env NODE_ENV=development API_ENV=dev vite", "build": "cross-env NODE_ENV=production API_ENV=dev tsc && vite build", "buildProd": "cross-env NODE_ENV=production API_ENV=prod vite tsc && vite build", … }, … 여기서 bulidProd 실행시에 [Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.] 라는 에러메시지와… Read More »
[eslint] anchor 태그 <a /> 를 버튼 처럼 사용하는 것을 허용
.eslintrc 파일에 추가 { "rules": { … "jsx-a11y/anchor-is-valid": 0 } }
[javascript] 객체(object)를 완전히 상수화(constants) 하기 (deepFreeze)
const 선언으로는 변수 바인딩을 고정할 수 있지만, 해당 변수의 값이 object일 경우, object 내의 값이 변경되는 것을 막을 수는 없다. Object.freeze()로는 1depth까지는 막을 수 있어도 2depth 이상은 막을 수 없다. 그래서 찾아보니 deep freeze를 구현한 구현체가 npm에 존재했다. https://www.npmjs.com/package/deep-freeze
[링크] java 병렬 프로그래밍 관련 (concurrent, multi thread..)
Double-Checked Locking with Singleton Double-checked Locking Pattern (DCLP) 을 쓰지 말아야 하는 이유 Java volatile이란?
[링크] React Query에서 staleTime과 cacheTime의 차이
https://velog.io/@yrnana/React-Query%EC%97%90%EC%84%9C-staleTime%EA%B3%BC-cacheTime%EC%9D%98-%EC%B0%A8%EC%9D%B4
[node.js] 초간단 api 서버 샘플코드
환경 node 16.15.1 package.json { "name": "test-mock-server", "main": "app.js", "packageManager": "yarn@3.2.1", "dependencies": { "cors": "^2.8.5", "express": "^4.18.1" } } app.js var express = require("express"); var cors = require("cors"); var app = express(); app.listen(4000, () => { console.log("Server running on port 4000"); }); app.use(cors()); app.get("/testList", (req, res, next) => { res.json({ data: { list: [ {… Read More »
[링크] 리액트(React) 개념 정리
[javascript] 의존성 관리 [javascript] 성능 최적화 [javascript] 디버깅 React Hooks: useRef 사용법 React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef)
[링크] [리액트] 두번 렌더링 되는 이슈에 대하여(Feat.StrictMode, Twice)
https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%91%90%EB%B2%88-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACFeatStrictMode
[링크] vite 프로젝트(project) 생성 템플릿(template) 모음(curation) 사이트 (react, vue…)
https://github.com/vitejs/awesome-vite
[링크] [typescript] type/interface 에서 일부 필드의 타입을 변경(override) 하기 (Omit 과 & 사용)
https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file
[링크] Typescript에서 window 객체에 property 추가하기
https://velog.io/@kineo2k/Typescript%EC%97%90%EC%84%9C-window-%EA%B0%9D%EC%B2%B4%EC%97%90-property-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 참고 위 내용을 찾아봤던 이유는, header/footer.tsx 에 속한 함수를 어떻게 호출할 방법이 없을까 찾아보다가 window객체의 프로퍼티로 함수를 편입시키는 방법을 알게 되었기 때문이었음.
[React] Cannot find module ‘webpack/lib/ParserHelpers’ 오류 해결
yarn add webpack -D
[react] useEffect 함수 내에서 async 함수 호출하기
[React]useEffect Hook에서 async await를 사용하여 API 호출
[react] useState의 setter 를 동기함수(sync ≒ async ~ await) 처럼 사용할 수 있게 해 주는 방법 (결론: 안됨)
나의 코드 샘플 const [dataList, setDataList] = useState<any[]>(); … const data = await getData(id); setDataList(preList => { const tmpList = [ …preList ]; tmpList[i] = data; return tmpList; }); 이것으로 된다고 착각했었으나, 진짜 동기식으로 처리 되는 것이 아니라, setter를 연속 호출 했을 떄, 이전 값이 보존되는 수준의 처리였던 것이다. 진짜 코드 흐름 내에서 동기식으로 처리하려면… Read More »
[AG Grid] client row model 에서 그리드의 row 순번(num, seq) 자동으로 생성하기
환경 ag-grid-react 26.0.0 칼럼 정의 … { field: 'seq', headerName: '순번', valueGetter: 'node.rowIndex + 1' }, … 그리드 property <AgGridReact rowData={rowData} columnDefs={columnDefs} … onSortChanged={(e) => { e.api.refreshCells() }} // client row model 에서 칼럼 헤더 클릭해서 정렬이 변경되었을 때, valueGetter: 'node.rowIndex + 1', 로 만든 순번을 다시 리프레시 해 준다. ></AgGridReact>