고양이손으로 개발

배포 과정에서 yaml파일이 어떤식으로 동작하는지 정확히 알지는 못하지만환경 변수 관련 이슈가 있었어서 기록하려한다. 일단 내 프로젝트는 기본적으로 firebase cli를 통해 배포했기 때문에 git에 배포세팅이 되어있다. 로컬에서 주로 쓰는 .env는 일반적으로 ignore 하기 때문에,우리가 코드에서 작성한 process.env.~~ 같은 환경 변수는 깃에 올린 순간 값을 알 수없다. 그래서 github의 actions에서 읽을 수 있게 secrets에 작성해야된다. 만약 .env에      NEXT_PUBLIC_KAKAO_API_KEY="value"  이렇게 작성했다면 Name이 변수 이름, Secret이 value이다. 시크릿 작성이 끝나고 배포 과정에 포함시키려면아래 처럼 작성한다.name: ..

최근 진행 중인 사이드 프로젝트 환경 세팅 중,구성원과 깃 워크 플로우를 공유하고자 github - discord 간 웹 훅을 이용하여 자동으로 공유 하도록 했다. 설정 도중Response 400 에러, Response Body에 아래와 같은 에러가 났었는데, 본인이 해결 한 방법을 함께 작성하겠다.{"message": "Cannot send an empty message", "code": 50006} 1. discord 서버 채널 설정(편집)에서 Webhook 설정 새 웹후크를 생성하면 'Spidey Bot' 생성된다. 이름과 적용할 채널을 정해주고 웹 후크 URL을 복사한다. 2. github repository 설정에서 Webhooks 추가 공유할 깃 repo의 설정에서 webhook을 만들어준다 ..

Vue 3에서는 컴포지션 API(Composition API)를 도입하여 더 유연하고 기능적인 코드 작성을 가능하게 했다.이 API는 주로 두 가지 방법으로 사용될 수 있는데,setup() 함수와 script setup이다 두 방법은 유사하지만, 사용 방식에 있어 약간의 차이를 보인다.setup()?setup 함수는 script 블록 내부에서 정의되며, vue 컴포넌트 인스턴스가 완전히 생성되기 전에 호출된다. {{ message }} 특징은 다음과 같다.컴포넌트의 최상위에 정의되며, props와 context를 인자로 받을 수 있다템플릿에서 변수 또는 함수를 사용하려면 setup()에서 객체를 반환해야 한다.setup() 내에서 정의된 변수와 함수는 기본적으로 컴포넌트의 인스턴스와 연결되지 않는다. ..

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

# 이슈 아코디언이나 드롭다운 메뉴 처럼 active시 인터렉션을 적용하는 경우간단하게 transiton을 사용 할 때가 많은데,height가 auto인 요소의 경우 transition이 적용되지 않는다. # 방안 스크립트 사용이 부담되어 css만으로 처리하고 싶은 경우 max-height를 활용하는 방법이 있다. .element { overflow: hidden; height: auto; max-height: 0; /* 초기 상태 */ transition: 0.2s; } .element.active { max-height: 500px; /* (예상 최대 높이) */ } transition은 시작과 끝이 명확한 속성에 대해서 작동한다. height: auto인 경우 브라우져가 값을 가늠 할 수 없기 때문..

# 이슈 리액트 개발을 하다 보면, 특히 함수형 컴포넌트를 사용하면서 중복 실행되는 코드들을 모두 점검하고 수정했음에도 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

# 이슈 설정이 완료되었다는 기분 좋은 문구지만 내가 만들어놓은 빌드 파일은 안보여주고 완료 됐다는 말만 반복하는 경우가 있다. firebase init을 진행하다 보면 ? What do you want to use as your public directory? public 이런 설정을 하게 되는데 빌드 후 생기는 정적 파일 폴더의 이름을 적어주면 된다. 필자의 경우 dist인데 모르고 public으로 적었다가 가볍게 두 시간 정도 날렸다 # 방안 설정을 다시 시작할 필요는 없었다. firebase.json 에서 public을 프로젝트에 맞게 바꿔주고 다시 배포하니 정상적으로 화면이 노출됐다. { "hosting": { "public": "dist", // 여기 "ignore": ["firebase.js..

# 이슈 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 에서 기본적..