js

contentEditable로 수정 기능 구현하기

스크립트에서 수정 기호를 선택한 채로 어떤 단어를 클릭하면 수정 가능하도록 하는 기능을 구현해야 했다. 클릭 이벤트를 감지해서 input text를 단어 위에 띄우고 고생하고 있었는데(input을 띄우면 기존 기능들이 적용이 안 됐다) contentEditable이라는 옵션이 있다는 걸 알게 되었다. https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable contenteditable - HTML: Hypertext Markup Language | MDN contenteditable 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다. developer.mozilla.org 수정 가능한 텍스트 위..

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)되어..

JS arrow function

화살표 함수를 사용하면 function 키워드를 사용해서 함수를 만드는 것 보다 간단하게 표현할 수 있다. // function const sum = function(a, b) { return a + b; }; //arrow function const sum = (a, b) => a + b; () 안에 매개변수를 넣고 화살표 오른쪽에 함수 본문을 넣는다. 매개변수 지정 방법 //매개변수가 없을 경우 const ex = () => { ... }; //매개변수가 하나인 경우 괄호 생략 가능 const ex = a => { ... }; const ex = (a) => { ... }; //매개변수가 여러개인 경우 const ex = (a, b, c) => { ... }; 함수 본문 지정 방법 // 함수 본문이 ..