JavaScript

JS e.target vs e.currentTarget (미스터리 해결기...)

카드 목록에서 카드를 클릭했을 때 해당 카드의 id를 넘겨주어 위치를 변경하는 코드를 짜던 중 ㄹㅇ 의문스러운 일이 일어났다. 이 목록에서 각 presentation의 id는 1, 2, 3이다. 클릭했을 때 `/presentation/summary?presentation_id=${currentId}`로 위치를 변경했디. const navigateToPresentation = (e) => { const currentId = e.target.id; navigate(`/presentation/summary?presentation_id=${currentId}`); }; {presentationList.map((p) => ( {p.title} {p.date} ))} 위 코드로 카드를 클릭했을 때 navigateT..

Postman Mock Server & API

아직 동작하지 않는 API에서 데이터를 받는 테스트를 해야할 때 Postman은 유용한 도구다. 백엔드와 본격적인 연동을 할 수 없는 상황에서 가상의 서버를 만들어 데이터를 받는 것이다. 이 가상의 서버를 Mock Server라고 한다. Mock Server & API 만들기 Postman에서 원하는 워크스페이스에 접속한 후 Collections에서 + 버튼을 눌러 새 Collection을 만든다. Collection을 만든 후에는 Add a request를 클릭해 새 request를 생성해 준다. 그리고 Add example로 Example을 추가해 주면 API 준비가 끝난다. Mock Servers 탭에서 새 Mock Server를 만들어 준다. 생성 페이지에서 Select an existing co..

JS sort (문자열 배열 정렬 & 숫자 배열 정렬)

JS의 내장 함수 sort()를 이용하면 간편하게 배열을 정렬할 수 있다. 문자열 배열 문자열 배열의 경우 sort()를 사용하면 오름차순으로 정렬된다. const arr = ["ab", "a", "dad", "c"]; console.log(arr.sort()); //결과: ['a', 'ab', 'c', 'dad'] 내림차순으로 정렬하고 싶은 경우 직접 비교 함수를 전달해 주거나 reverse()를 사용하면 된다. const arr = ["ab", "a", "dad", "c"]; console.log( arr.sort((a, b) => { if (a > b) return -1; else if (b > a) return 1; else return 0; }) ); console.log(arr.sort().r..

[2447] 별 찍기 - JavaScript

/* 문제 */ 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 하나씩 있는 패턴이다. N이 3보다 클 경우, 크기 N의 패턴은 공백으로 채워진 가운데의 (N/3)×(N/3) 정사각형을 크기 N/3의 패턴으로 둘러싼 형태이다. 예를 들어 크기 27의 패턴은 다음과 같다. 처음에는 각 단계에서 이전 단계의 결과물이 새로운 패턴 한 칸이 된다는 점을 이용해 문제를 풀려고 했다. 크기가 3인 리스트를 선언하고 각 요소를 첫째 줄, 둘째 줄, 셋째 줄로 설정해 계산한 후 마지막에 출력하는 방식이었다. 첫째 줄과 셋째 줄은 이전 단계의 결과물을 3번..

[2941] 크로아티아 알파벳 - JavaScript

/* 문제 */ 예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다. 예를 들어, ljes=njak은 크로아티아 알파벳 6개(lj, e, š, nj, a, k)로 이루어져 있다. 단어가 주어졌을 때, 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다. dž는 무조건 하나의 알파벳으로 쓰이고, d와 ž가 분리된 것으로 보지 않는다. lj와 nj도 마찬가지이다. 위 목록에 없는 알파벳은 한 글자씩 센다. 단어가 몇 개의 알파벳으로 이루어져 있는지만 출력하면 되기 때문에 전체 단어의 길이에서 한 글자로 취급되는 크로아티아 알파벳의 수를 빼주기만 하면 된다고 생각했다. 그렇게 작성한 첫 번째 코드는 // 틀린 코드 const fs = r..

[2775] 부녀회장이 될테야 - JavaScript

로직은 잘 짰다고 생각했는데 생각지도 못한 곳에서 실수를 해서 시간을 많이 쓴 문제다. /* 문제 */ 평소 반상회에 참석하는 것을 좋아하는 주희는 이번 기회에 부녀회장이 되고 싶어 각 층의 사람들을 불러 모아 반상회를 주최하려고 한다. 이 아파트에 거주를 하려면 조건이 있는데, “a층의 b호에 살려면 자신의 아래(a-1)층의 1호부터 b호까지 사람들의 수의 합만큼 사람들을 데려와 살아야 한다” 는 계약 조항을 꼭 지키고 들어와야 한다. 아파트에 비어있는 집은 없고 모든 거주민들이 이 계약 조건을 지키고 왔다고 가정했을 때, 주어지는 양의 정수 k와 n에 대해 k층에 n호에는 몇 명이 살고 있는지 출력하라. 단, 아파트에는 0층부터 있고 각층에는 1호부터 있으며, 0층의 i호에는 i명이 산다. 처음에는 ..

JS Image preloading

웹 페이지를 변경하거나 다른 페이지로 이동할 경우 이미지가 많거나 크기가 커서 시간이 오래 걸릴 때 사용하는 방법이다. 사용자의 요청이 들어오기 전에 이미지를 미리 로드해 캐시로 이미지를 바로 가져오는 방식이다. const preLoadImgSrc = [ "./lib/img1.png", "./lib/img2.png", "./lib/img3.png" ]; const preLoadImg = (images) => { images.forEach((image) => { const img = new Image(); img.src = image; }); }; preLoadImg(preLoadImgSrc); 이미지 사전 로드를 사용하면 이미지를 순차적으로 다운하는 것이 아니라 병렬적으로 다운하기 때문에 전체 이미지 로..

JS LocalStorage

게임을 로비 화면과 게임 플레이 화면으로 분리하면서 html 페이지 간 데이터를 공유해야 했다. (현재 플레이 중인 스테이지, 최고 점수, 현재 점수, 쿠키 체력 등) 따로 서버를 이용하지 않고도 페이지 간 데이터를 전달하는 간단한 방법이 있다. https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org LocalStorage에 원하는 값을 저장하면 명시적으로 연결(import)되어..