고양이손으로 개발

# 이슈 useNavigate 사용 시 다른 훅들 또는 개발구조 상의 이유로 navigate가 여러 번 동작하여해당 페이지에 진입 후 다시 뒤로 가기가 안 되는 상황. 말 그대로 navigate가 중복 실행되어 브라우저 history에 스택이 여러 번 쌓여서 그런 것인데 뒤로 가기는 스크립트로 제어하지 않으면 현재 히스토리 스택의 -1 하여 이동하기 때문에 당연한 현상이다. useNavigate를 사용한 경우 옵션을 이용해 해결할 수 있다. # 방안 리액트 라우터 문서이다. 대충 options replace를 true로 지정하면 히스토리 스택을 새로 추가하지 않고 현재 스택에 대체한다는 뜻이다 navigate('/subpage', { replace: true }); 이렇게 옵션을 지정해 주면 해당 페이지..

# 이슈 리액트 개발을 하다 보면, 특히 함수형 컴포넌트를 사용하면서 중복 실행되는 코드들을 모두 점검하고 수정했음에도 useEffect가 두 번 실행되는 경우가 있다. useEffect의 의존성 배열을 공백으로 두면 컴포넌트가 마운트 되는 순간 한번 실행되는데 useEffect(() => { // 한번만 실행되는 로직 }, []); 이 로직을 제외한 다른 useEffect, console.log 등 등 제거해도 해당 로직만 두 번씩 실행돼서 당황했었다. 찾아보니 리액트에서 제공하는 기능 중 하나인 'StrictMode'의 영향이라고 한다. 다행히? 개발 모드에서만 발생하는 현상으로, 실제 빌드 시 한 번만 실행된다고 하는데.. 그런 건 중요하지 않다면, 지금 이 기능을 사용하고 싶지 않다면 # 방안 우..

# 이슈 리액트 환경에서 커스텀 훅, 또는 공통 함수가 필요한 경우가 더러 있다. 커스텀 훅이란 리액트에서 사용하는 훅들 (use~ 이름의 함수들)을 제외한 사용자 정의 함수인데, 개인적으로는 쉽게 공통함수와 비슷한 결로 이해하고 있었다. 그리고 이렇게 이해한 게 문제였다,, 문제 해결 부분만 보고 싶으신 분들은 아래 #방안 부터 읽으시면 됩니다. 문제가 발생한 순서는 이렇다. 일부 페이지에서 id값을 받아 특정 텍스트로 변환하는 함수가 필요함 공통 함수만 만들면 되겠다! 커스텀 훅이 공통 함수인가? 이걸로 해보자 물론 커스텀 훅은 공통함수가 맞지만, 반대의 경우는 성립되지 않는다. 문제의 코드이다. export default function useFuction() { // 공통 함수 내용 return ..

# 이슈 까지는 아니고.. script setup에서 defineExpose로 올린 값을 부모에서 참조하는 법이다 vue에서 ref로는 컴포넌트 또는, 엘리먼트도 참조 할 수 있다는 점을 이용한다. # 방안 vue에서 ref로는 컴포넌트 또는, 엘리먼트도 참조 할 수 있다는 점을 이용한다. 부모 컴포넌트 ... ... 자식 컴포넌트 ... 다른 데이터는 두고 exposeData만 defineExpose 해보자 # 참고 https://stackoverflow.com/questions/73344760/defineexpose-from-components-script-setup-not-working-in-vue-3

# 이슈 ERROR in ./node_modules/dotenv/lib/main.js 2:13-28 Module not found: Error: Can't resolve 'path' in 'PROJECT_PATH\node_modules\dotenv\lib' 개인 프로젝트 진행 중 환경변수를 설정할 수 있게 해주는 dotenv 모듈 설치 후 사용 중 해당 오류 발생 dotenv 직접 설치하고 사용하는 것은 처음이라 살짝 삽질.. # 방안 import dotenv from 'dotenv' dotenv.config() 다른 모듈처럼 main.js에서 import를 해서 생긴 문제였다 해당 구문을 지움으로 해결됐다. dotenv의 작동 방식이 생각보다 복잡해서 이해하기는 일단 보류.. node.js 에서 기본적..

기본적인 import import ... from '...'; import {...} from '...'; ... Dynamic (동적) import let module = await import('...'); 동적 import는 기본적으로 원하는 시기에 import가 가능하기 때문에 효율적인 초기 로딩에 도움을 준다 # 이슈 수십 개의 스크립트 데이터 테이블을 import + 페이지 진입 시 id값을 받아 해당하는 데이터를 동적으로 보여줘야 하는 상황,, dynamic import에 대해 어느 정도 알고는 있었지만 문제는 데이터가 데이터 별로 각각 파일이 있는 게 아니라 한 파일에 모두 있던 것.. // dataList.js export const data1 = { ... } export const d..

# 이슈 라디오 박스나 체크박스를 컴포넌트로 만드는 경우 혹은 기타 폼 요소를 컴포넌트로 만든 경우 제목과 같은 이슈를 겪을 때가 종종 있다. 현재 프로젝트에서 작업한 라디오박스가 해당 이슈를 뿜었을 때의 코드이다. {{ label }} 다음과 같이 id, for를 지정하는 경우 같은 value를 갖는 컴포넌트가 여러 개 있을 때, 모든 라디오박스가 하나의 input에만 반응하는 문제가 생긴다. # 방안 간단한 이슈이며 해결 방법도 여러가지이다. 사실 퍼블리싱만 생각하면 이슈라고 하기도 그렇지만, 이제는 개발도 같이 하는 입장이 되다 보니 나름 재밌는? 이슈라고 생각한다. 1. value를 다르게? 아무것도 모르던 시절 퍼블리싱만을 위해 이런 식으로 작업한 경우가 있었다. 폼 요소의 경우 보통 개발 데이..