본문 바로가기

전체 글368

[Vue] test-utils TypeError: Cannot read property 'parentNode' of undefined

에러 TypeError: Cannot read property 'parentNode' of undefined 왜 뜰까? 채널톡 sdk 추가하고부터 에러가 발생함. 에러 코드도 위에는 안 적었지만, 채널톡 js파일에서 나고 있었다. 해결방법은 옵셔널 처리함. 2022. 11. 27.

[Vue] textarea 스크롤말고 높이가 늘어나게 처리하기

개요 textarea에서 높이는 그대로인채로 스크롤이 길어지게 경험을 제공했는데, 불친절한 경험을 줄 수 있다는 피드백을 받았다. 그래서, 글자가 길어져서 줄바꿈이 일어났을 때, 스크롤 높이를 감지해서 그만큼 높이가 길어지게 구현했다. vue 파일 사이즈를 조절하는 함수를 실행시키는 트리거는 @keydown이나 @keyup보다 @input이 더 자연스러웠다. @input을 쓰자 2022. 11. 26.

[javascript] iframe 부모 자식 통신 방법

부모 자식 에러 문제 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3334') does not match the recipient window's origin ('http://localhost:3333'). 2022. 11. 26.

[Vue]test utils에서 props 변경하는 방법

개요 에러를 일으킨 코드 test('테스트', () => { wrapper.vm.currentPage = 3; }) 에러 콘솔 메시지 console.error [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentPage" 다음처럼 currentPage가 propsData인데, currentPage를 바꿨거든요. 그랬더니 다음처럼 에러가 발생합니다. 해결방법 setProps를.. 2022. 11. 25.

[javascript] 한글 이름 파일 업로드 후, 한글 이름 서버에 저장 및 검색 안 되는 버그

원인 맥OS에서 한글 파일이름으로 만들면, 자료 -> ㅈㅏㄹㅛ 이렇게 저장된다고 함. 표기는 다르지만. 해결 방법 normalize()는 Javascript 빌트인 메서드고 unicode normalization form string으로 반환해준다. 여기서 NFC는 분해된 한글을 조합해 준다. 'ㅈㅏㄹㅛ' -> '자료' 파일이름.normalize('NFC') 참고 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize 2022. 11. 24.

[javascript]클립보드 복사 기능 개발

개요 모바일에서 복사버튼 누르면, 키보드 올라옴 해결방법 1. input에 readonly 추가 2. https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API Clipboard API - Web API | MDN Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. developer.mozilla.org 2022. 11. 23.

[AWS]CLoudFront로 한 개의 도메인으로 두 개의 웹 실행하기

개요 한 개의 도메인으로 두 개의 다른 웹 사이트를 띄워야 하는 상황이 생겨서 CloudFront로 이를 구현했다. cloudFront 도메인 설정을 해주면 된다. 한 개의 cloudFront에 원본 두 개를 올린다. 그리고, 동작에서 경로에 따라서 사용할 원본을 매핑해주면 된다. 방법 동작 생성으로, 다음처럼 만들어주면 된다. 이러면, /class로 유입되는 경우, A 웹으로 이동하고, /*로 유입은 B 웹으로 이동되게 할 수 있다. 그런데, 안 되는 경우가 있었다. 해결 방법으로는. 이미 원본이 다른 클라우드프론트에서 사용하고 있다면, 그 원본이 매핑된 경로 패턴으로 가도 안 뜰 것이다. 원래 매핑되어 있던 CloudFront의 원본과 동작을 제거하면 잘 뜬다. 2022. 11. 22.

[Vue] input type=number 엘리먼트에서 스크롤로 값 변경 막기

개요 스크롤로 값이 변경되는 현상을 발견하였다. 해결방법 귀한거디.... scroll 휠 2022. 11. 21.

[Javascript] 배열 1~9까지 만들기

console.log(Array.from({ length: 9 }, (v, i) => (v = i + 1))); // [1,2,3,4,5,6,7,8,9] 2022. 11. 20.

[AWS] EC2로 클래식 콘솔 시작하기

https://docs.aws.amazon.com/ko_kr/AmazonECS/latest/developerguide/getting-started-ecs-ec2.html Amazon EC2를 사용하여 클래식 콘솔 시작하기 - Amazon Elastic Container Service Amazon EC2를 사용하여 클래식 콘솔 시작하기 Amazon Elastic Container Service(Amazon ECS)는 컨테이너를 손쉽게 시작 및 관리할 수 있게 하는 컨테이너 관리 서비스로서 속도와 확장성이 뛰어납니다. Amazon ECS docs.aws.amazon.com 2022. 11. 18.