본문 바로가기

전체 글

(219)
(canvas) 마우스로 사각형 여러개 그리기 (feat.forEach) JS나 React에서 canvas 태그를 활용하여 하나의 캔버스 태그에 여러개의 사각형을 그리는 방법을 설명하겠다. 마우스로 사각형을 그리는 주제를 검색하면 자료가 많이 있지만 한번 그린 사각형에 또 다른 사각형을 추가할 수 있는 방법을 설명한 자료는 찾기가 어려워서 공유하고자 한다. canvas에서 마우스로 사각형을 한번만 그리는 것을 안다는 가정하에 결론을 먼저 말하자면 '현재 내가 그리고 있는 rectagle의 정보를 useState를 활용하여 elements 변수에 배열 형태로 저장해주고 다음 사각형을 그릴 때 저장된 elements와 현재 그리고 있는 rectagle의 정보를 forEach로 순회하며 strokeRect 해주는 것이 포인트이다.' 아래는 마우스가 이동할 때 호출되는 drawing..
[JS] 마우스 클릭 좌표 (feat. canvas) JS 에서 2D로 화면에 그림을 그릴 때 canvas를 많이 활용한다. 이때 마우스 클릭의 좌표의 값을 체크하는데 기본적인 좌표값의 이름들을 알아보자. 중요도 순서 1. clientX, clientY 뷰포트를 기준으로 좌표를 표시한다. 스크롤바가 움직이더라도 마우스로 클릭한 clientX, clientY의 값은 바뀌지 않는다. 2. offsetX, offsetY DOM을 기준으로 좌표를 표시한다. React에서 useRef로 설정한 DOM 객체의 영역에서 왼쪽 상단 모서리 부분(0, 0)을 기준으로 offsetX와 offsetY 좌표값을 출력한다. 나머지 screenX, screenY pageX, pageY도 있다. 추가 참고는 아래 링크 https://hianna.tistory.com/493
(알고리즘) binary Search(이진탐색) 이진탐색 문제 오름차순 정렬된 정수의 배열(arr)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. const binarySearch = function (arr, target) { let left = 0; let right = arr.length - 1; while(left target 인 경우 - arr[mid]를 기준으로 배열의 오른쪽에 target이 있을 수 있다. - 그래서 다음 차례에서 그 배열의 오른쪽에서 탐색을 할 것이기 때문에 left의 값은 mid + 1이 된다. 2) arr[mid] < target 인 경우 - arr[mid]를 기준으로 배열의 왼쪽에 target이 있을 수 있다. - 다음 차례에서는 배열의 왼쪽에서 탐색을 할 것이기 때문에 right의 값은 ..
(프로그래머스 LV.2) 방문 길이 구하기 문제 설명 게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다. U: 위쪽으로 한 칸 가기 D: 아래쪽으로 한 칸 가기 R: 오른쪽으로 한 칸 가기 L: 왼쪽으로 한 칸 가기 캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다. 예를 들어, "ULURRDLLU"로 명령했다면 1번 명령어부터 7번 명령어까지 다음과 같이 움직입니다. 8번 명령어부터 9번 명령어까지 다음과 같이 움직입니다. 이때, 우리는 게임 캐릭터가 지나간 길 중 캐릭터가 처음 걸어본 길의 길이를 구하려고 합니다. 예를 들어 위의 예시에서 게임 캐릭터가 움직인 길이는 9이지만,..
(SQL) union을 활용한 결과물 order by 하기 프래그래머스 SQL 문제를 통해 union으로 2개의 쿼리문이 합쳐진 결과물을 order by하는 방법을 알아보자. 문제 설명 FRIENDS 테이블은 게임 내 친구 관계 정보를 담고 있습니다. FRIENDS 테이블 구조는 다음과 같으며 ID1, ID2 쌍은 ID1과 ID2가 서로 친구라는 뜻입니다. 이 테이블에서, 친구 관계는 양방향이며, 친구 관계가 중복으로 등록되는 경우는 없습니다. (id1가 id2의 친구이면 id2는 id1의 친구이고, 레코드 id1, id2가 등록되어 있을 때, 레코드 id2, id1가 등록되는 경우는 없습니다) FRIENDS 테이블 구조 NAME TYPE NULLABLE ID2 VARCHAR(N) FALSE ID3 VARCHAR(N) FALSE 문제 FRIENDS 테이블로, s..
[알고리즘] isIsogram 문제 문자열을 입력받아 아이소그램인지 여부를 리턴해야 합니다. 아이소그램(isogram)은 각 알파벳을 한번씩만 이용해서 만든 단어나 문구를 말합니다. 입력 인자 1 : str string 타입의 공백이 없는 알파벳 문자열 출력 boolean 타입을 리턴해야 합니다. 주의 사항 빈 문자열을 입력받은 경우, true를 리턴해야 합니다. 대소문자는 구별하지 않습니다. 입출력 예시 let output = isIsogram('aba'); console.log(output); // false output = isIsogram('Dermatoglyphics'); console.log(output); // true output = isIsogram('moOse'); console.log(output); // fals..
스마트폰 가상 키보드 활성화시에 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 컴포넌트의 인덱스가 변하..