본문 바로가기

전체 글

 (133)
스마트폰 가상 키보드 활성화시에 UI Resize 현상 방지 이슈설명 웹 페이지를 만든 후 vercel을 통해 배포 진행하였습니다. 스마트폰에서 input 창에 입력이 필요한 경우 가상 키보드가 화면에 출현하여 본래의 UI가 Resize 되면서 화면이 일그러지는 현상이 발생하였습니다. 가상 키보드 출현 전의 화면 가상 키보드 출현 후의 화면 input 창과 부모 요소인 테두리의 사이즈가 변경된 것을 확인할 수 있습니다. (참고) 가상 키보드 화면 테스트 가상 키보드 화면을 crome에서 확인할 수 있습니다. 크롬-toggle device toolbar- 디바이스 기종(Nexus5, Nexus5x) - portrait keyboard 선택(우측 상단 스마트폰 회전 버튼) 이슈설명 화면 전체 영역의 height 값을 기존에는 %로 설정했는데 px로 고정을 해주었습니다..
Cannot update a component (xxx) while rendering a different component (xxx) 위의 웹 페이지에서 왼쪽의 컴포넌트 목록에서 각 메뉴를 클릭하면 오른쪽의 화면의 내용이 전환된다. 웹 버전을 모바일 버전으로 변경을 하게 되면 아래처럼 변환되고 좌측 상단의 메뉴 버튼을 클릭하면 메뉴가 표출된다. 지금이야 잘 작동을 하지만 최초 버전에서 제목의 에러 메시지를 만나게 되었다. Cannot update a component (`Main`) while rendering a different component (`MenuBar`). To locate the bad setState() call inside `MenuBar`, 화면의 컴포넌트 구조는 단순하다. 웹 버전일 때는 아래와 같고 모바일 버전에서는 다음과 같다. 문제는 모바일 버전에서 목록을 클릭할 때 마다 Main 컴포넌트의 인덱스가 변하..
Mocha, chai, jsdom을 활용한 JS 테스팅(3) - custom event dispatch 드디어 JS 테스팅의 마지막 이해 단계인 커스텀 이벤트 디스패치 단계까지 왔다. 참고자료 코드를 먼저 보자. const getButtonBy = function (text, buttons) { const result = buttons.filter(function (button) { return button.textContent === text; }); if (result.length > 1) { throw new Error("no extra buttons allowed"); } else if (result.length < 1) { throw new Error("no button"); } return result[0]; }; const clickEvent = new window.MouseEvent("cli..
Mocha, chai, jsdom을 활용한 JS 테스팅(2) - Mocha 와 chai 오늘도 열정, 감사, 겸손! 1편에서 jsdom을 활용하여 테스트할 window.document 객체를 생성하는 부분을 알아 보았다. 2편에서는 실제적인 테스팅 도구인 Mocha와 chai를 가지고 기술을 한다. 테스트 자동화와 Mocha를 알고 싶다면 클릭 Mocha는 js 테스트 프레임워크이고 chai는 Node.js 기반의 assertion 라이브러리이다. 먼저 Mocha의 적용 부터 살펴 볼 예정인데, 아래의 활용 코드를 보자. describe("Step 1 - 숫자 버튼을 누르고 화면에 숫자를 입력하기", function () { it("처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다.", function (done) { const test = ["3", "3"]; co..
Mocha, chai, jsdom을 활용한 JS 테스팅(1) - jsdom (Testing) Mocha, chai, jsdom을 활용한 JS 테스팅(2) - Mocha 와 chai (Testing) Mocha, chai, jsdom을 활용한 JS 테스팅(3) - custom event dispatch Bare minimum 수준의 테스트 통과 사례이다. JS테스팅에서 DOM을 생성하는 자바스크립트 파일을 테스팅할 때 이벤트를 직접 만들어서 자바스크립트 웹 애플리케이션이 제대로 작동하는 지를 점검해야 하는 경우가 있다. Mocha로 단순 JS파일을 테스트하는 작업도 낯선데 DOM을 조작하는 calculator 애플리케이션에 대해서 testing을 하는 작업에 대해 기술하도록 하겠다. 1. Node.js와 jsdom으로 document 객체 생성하기 if (typeof window..
(에러핸들링)Non-interactive elements should not be assigned interactive roles 위의 코드 처럼 태그에 onClick 이벤트 리스너 속성을 추가하였다. 이럴 경우 2가지의 에러 메세지를 마주하게 된다. 마주치는 에러 메세지는 아래와 같다. 태그 요소가 button이 아닌 경우에 onclick 속성을 주게 되면 가장 많이 보게 되는 에러 메세지이다. "Visible, non-interactive elements with click handlers must have at least one keyboard listener." 위 에러 메세지의 의미는 태그에 onClick 추가했더니 keyboadr 리스너를 달아야 한다는 것이다. 위의 에러 메세지에 대한 정책은 아래 링크에 있다. click-events-have-key-events 위의 에러 메세지에 대응하기 위한 정책을 바탕으로 한 개선..
(네트워크) CORS 동작 방식 1. Preflight Request 실제 요청 보내기 전 OPTION 메소드로 사전 요청을 보내어 해당 출처에 접근 권한이 있는지 확인한다. 브라우저가 프리프라이트 요청을 보내고, 서버에서 응답 헤더 Allow-Control-Allow-Origin 값으로 요청을 보낸 출처가 돌아오게 되면 실제 요청을 보내게 된다. Preflight Request Origin: http://localhost:3000/ Response Allow-Control-Allow-Origin: http://localhost:3000/ 만약 출처에 대한 접근 권한이 없다면 응답 헤더에 Allow-Control-Allow-Origin가 들어 있지 않다. 이런 경우 브라우저는 CORS 에러를 띄우게 되고 실제 요청은 전달되지 않는다. ..
(CSS) Skeleton UI 제작 도입 Skeleton UI로 Loading 컴포넌트를 만들어 본다. 3가지의 주요 image를 핸들링하는 요소와 2가지의 animation 요소로 구현한다. image 핸들링 요소 background-image background-position background-size animation 핸들링 요소 background-repeat animation 제작 프로세스 1. linear-gradient 로 그라데이션 이미지 구현 background-image는 배경의 이미지를 설정한다. color와는 다른 의미이다. Skeleton UI에서 hightlight 되는 이미지는 linear-gradient로 구현된다. CSS 그레이디언트 보러가기 rgba(255, 255, 255, 0)은 '흰색' 이다. 이 ..

티스토리툴바