[링크] React HOC(higher-order component) 관련
사용처 UI패턴은 유사한데(e.g. 목록화면), 데이터소스가 다른 경우(분류/필터링이 달라서 다른 목록이 도출되는 화면들), UI출력 관련 중복코드를 줄이는 데 사용하는 것 같다. 참고 [React] Hook과 함께 HOC 사용해보기
Author Archives: itpsolver
[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에 잡히는 건가?
[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 } }
[링크] 웹 개발 시간을 줄여주는 팁 4가지
design mode 변수 교체 javascript performance.now() debugger 코드 원문 https://yozm.wishket.com/magazine/detail/1585/
[javascript] 객체(object)를 완전히 상수화(constants) 하기 (deepFreeze)
const 선언으로는 변수 바인딩을 고정할 수 있지만, 해당 변수의 값이 object일 경우, object 내의 값이 변경되는 것을 막을 수는 없다. Object.freeze()로는 1depth까지는 막을 수 있어도 2depth 이상은 막을 수 없다. 그래서 찾아보니 deep freeze를 구현한 구현체가 npm에 존재했다. https://www.npmjs.com/package/deep-freeze
[링크] mybatis 에서 package 단위의 typealias를 정의할 때 wildcard (*) 사용하기
요약 아래의 형태 가능 (since mybatis-spring 2.0.1) mybatis.type-aliases-package=com.example.**.model mybatis.type-handlers-package=com.example.*.typehandler mybatis-config.xml 에서는 지원하지 않음 그냥 mybatis 가 아니라 mybatis-spring에서 지원하는 기능이기 때문 원글 https://github.com/mybatis/spring-boot-starter/issues/314
[링크] java 병렬 프로그래밍 관련 (concurrent, multi thread..)
Double-Checked Locking with Singleton Double-checked Locking Pattern (DCLP) 을 쓰지 말아야 하는 이유 Java volatile이란?
[링크] HTTP Status 정리
https://activeks.tistory.com/entry/ks-life
[링크] 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
크롬에서 ajax 요청시 ‘NET::ERR_CERT_AUTHORITY_INVALID’ 에러 발생할 경우
내 경우는 self-signed SSL certificate 를 사용했을 때였는데, chrome 개발자도구에서 해당 ajax의 링크를 새 탭으로 열어 ‘무시하고 이동’을 한 번 수행해 주니 또 잘 넘어갔다. 참고 https://kinsta.com/knowledgebase/neterr-cert-authority-invalid/
[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 »
[링크] 버전 생성 규칙 semver (Semantic Versioning)
https://semver.org/
[링크] 리액트(React) 개념 정리
[javascript] 의존성 관리 [javascript] 성능 최적화 [javascript] 디버깅 React Hooks: useRef 사용법 React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef)
[펌글] SpringDoc (swagger 생성기) 을 노출하지 않기 (운영환경에서 필요할 듯)
Hi, This feature will be added on v1.2.12, of springdoc-openapi. This property helps you disable only the ui. springdoc.swagger-ui.enabled=false The following property, will help you disable the api-docs Rest endpoints as well: springdoc.api-docs.enabled=false 출처 https://github.com/springdoc/springdoc-openapi/issues/191
[링크] [리액트] 두번 렌더링 되는 이슈에 대하여(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
[링크] [java/spring] 쿼리 로그 출력시 파라미터 값이 바인딩된 채로 출력되게 하는 방법 (parameter bound query sql log) – log4jdbc-log4j2
https://rimkongs.tistory.com/312 이게 2013년 이후 업데이트가 끊긴 라이브러리라 최근에는 사용할 수 없을 거라고 막연히 생각했었는데, 웬걸, 2022년 지금도 잘 돌아가고 있는 모양이다. 괜히 p6spy 쓴다고 낑낑댄 건 아닌지 모르겠다. 심지어 이넘은 쿼리 결과도 테이블 모양으로 이쁘게 찍어준다.