본문 바로가기

분류 전체보기95

Cannot find module 'png' or its corresponding type declarations. > 이슈 Typescript 프로젝트 중 src경로로 이미지 파일을 불러올 때, 아래와 같이 React에서는 발생하지 않던 오류가 발생하는 경우가 있다. Cannot find module 'xxx.png' or its corresponding type declarations. 타입을 정의하지 않았기 때문에 발생하는 오류이며 png 뿐만 아니라 jpg, webp, css, sass 파일 등도 등록을 해야 TypeScript에서 읽을 수 있다고 한다. > 해결 declare module을 통해 오류를 해결하면 된다. src/types/global.d.ts 파일 생성 // global.d.ts declare module "*.png"; declare module "*.jpg"; declare module "*.. 2022. 10. 26.
google analytics 내부 트래픽 필터링 > 이슈 구글 애널리틱스의 추적 코드는 사이트 운영자에게도 적용된다. 즉 회사 사이트에 우리 팀원들이 방문을 해도 집계에 포함된다는 말! 내부 트래픽을 필터링 하는건 방문자 분석을 위해 꼭 필요한 설정인것 같다. > 해결 필터 조정 > +필터 추가 > 해당 메뉴 기입 2022. 10. 25.
google analytics 중복 호스트 문제 해결하기 [구글 안내 멘트] 중복 호스트 이름은 보고서에서 별도의 행으로 집계되므로, 사이트에서 동일한 페이지로 전송된 조회도 유입된 출처인 호스트 이름이 다르면 여러 행으로 분류됩니다. 데이터가 여러 행으로 분류된 경우에는 구체적인 페이지로 유입된 트래픽이 실제보다 적게 나타납니다. 이 문제가 발생하지 않게 하려면, 중복 호스트 이름 중 하나에서 다른 호스트 이름으로 301 리디렉션을 설정하거나, 찾기 및 바꾸기 필터를 이용해 호스트 이름에서 'www.'을 삭제하세요. > 이슈 www.whoyoung90.com whoyoung90.com 이런식으로 데이터가 분할되어서 수집되고 있다는 말이다. 즉, 이 데이터를 하나로 합치라는 말! > 해결 1. GA에 들어가서 필터 만들기(경고창으로 와서 "필터 조정" 클릭) .. 2022. 10. 24.
node관련 > yarn 관련 # 패키지 업데이트 (yarn.lock만 변경됨) $yarn upgrade # yarn.lock에서 설치된 버전으로 package.json을 업데이트 $yarn global add syncyarnlock $syncyarnlock -s -k # package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트 $yarn [참고 URL] https://jhyeok.com/yarn-sync-package-json/ https://velog.io/@hahbr88/npm-yarn-%EB%AA%85%EB%A0%B9%EC%96%B4-%EB%AA%A8%EC%9D%8C > nvm 관련 1. node 설치 (nvm) $brew install nvm 2. 환경 변수 설정 ~/ 위치에 nvm 디.. 2022. 10. 20.
구글 애널리틱스 적용하기 1편(vue-gtag) > 구글 애널리틱스 적용 Vue.js 를 통해서 SPA의 형태로 만든 회사 사이트에 구글 애널리틱스를 적용하게 되었다. 온클릭 등의 이벤트가 발생할 일이 없는 단일 페이지이거나, 웹 페이지 진입 여부만 체크하면 되는 경우라면 public/index.html에 아래와 같은 Google Analytics에서 제공하는 임베디드 코드를 바로 넣어도 큰 상관은 없다. 그러나 여러 컴포넌트와 페이지, 그리고 이벤트들이 존재하는 경우에는 임베디드 코드를 붙여넣는 것만으로는 부족해서 Vue.js를 위한 Google Analytics 패키지가 몇가지 존재한다. (vue-analytics, vue-gtag) > vue-analytics 지원 종료 구글측에서도 Google Analytics를 단순 분석/트래킹용 (analy.. 2022. 10. 20.
"malformed array literal:" > 이슈 hasura에서 쿼리를 POST하기 위해 mutation insert을 적용하던중 value값을 배열리터럴로 보내야 할때 (즉, key: "['value']"로 보내야 할 때) 아래와 같은 에러가 나타날 때가 있다. "message": "malformed array literal: \"['value']\"" DB(우리는 postgresql)에 타입이 텍스트배열인데, 데이터는 객체리터럴 { }로 들어가있기 때문에 생기는 오류였다. 배열리터럴을 객체로 한번 더 감싸주면 해결된다. > 해결 key: "{['value']}" 또는 DB에 텍스트배열이 세팅되어 있다면 key: "{value}" 2022. 10. 18.
"Not-NULL violation. null value in column \"created\" violates not-null constraint" > 이슈 아래는 mutation insert 혹은 update할 때 종종 볼 수 있는 오류이다. "message" : "Not-NULL violation. null value in column \"created\" violates not-null constraint" > 해결 말그대로 created 키값이 필수라는 오류이며 POST하려는 쿼리에 created도 추가해주면 된다. 백엔드에서 DB를 어떻게 설정하느냐에 따라 다르겠지만 보통 데이터를 새로 생성하거나 업데이트할 때 created, modified, id는 필수값으로 들어간다고 생각하면 된다. - created는 newDate().toISOString();를 활용하여 생성! - id는 uuid 생성 함수를 활용하여 생성! 2022. 10. 18.
table 태그에 직접 적용 안되는 속성들 > 텍스트 생략 (ellipsis) td 내부 태그에 걸어야 적용된다! (td not working) {{ address }} div.address-width { width: 100px; // 필수 고정값! overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } > 스크롤바 (overflow-y) table 외부 태그에 걸어야 적용된다! (table not working) div.content { overflow-y: auto; } 2022. 9. 28.
HTML input number maxLength 설정하기 > type tel 숫자만 입력 X maxlength 적용O > type number 숫자만 입력 O maxlength 적용 X 이중에서 number 속성을 가지고 최대 길이(maxLength)를 설정하는 방법을 정리해보고자 한다. solution 1 oninput상태일 때 slice하는 방법인데, 핸드폰 번호 4자리를 잘라낼때 유용하게 사용할 수 있을 듯! function maxLengthCheck(object){ if (object.value.length > object.maxLength){ object.value = object.value.slice(0, object.maxLength); } } solution 2 스택오버플로우에서 찾은 Vue solution으로 잘 동작하니 참고해보는 것도 좋을 .. 2022. 9. 26.

티스토리툴바