choi95의 TIL📝

문제 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때..

문제 입력된 문자열에서 소괄호 () 사이에 존재하는 모든 문자를 제거하고 남은 문자만 출력하는 프로그램을 작성하세요. 문제풀이 문자열의 각 문자들을 순회 및 참조할 때, 여는 괄호와 문자일 경우에는 스택에 계속 Push(저장)해준다. 만약에 해당 문자가 닫는 괄호일 경우에는 스택에 저장했던 인덱스 요소 중 가장 최근에 적재 된(스택 상 가장 상위에 저장) 여는 괄호가 나올때까지 저장해두었던 문자 데이터들을 하나씩 Pop(삭제)해준다. 코드 function solution(s) { let answer = []; for(let i = 0; i = ..

캐러셀(Carousel)은 위와 같이 컨텐츠를 슬라이드 형태로 순회하며 표시하는 UI를 말한다. 이때 무한 루핑 기능이 가능하기 위해서는 처음에 이미지 슬라이드에서 이전 버튼을 클릭할 시 마지막 슬라이드로 이동을 하고 반대로 마지막 슬라이드에서 다음 버튼을 클릭할 시 처음 슬라이드로 이동을 해야 한다. 이를 위해 본래 준비된 총 4장의 이미지 이외에 처음 나오는 이미지와 마지막에 나오는 이미지를 각각 복사하여 자료구조의 양 끝에 위치시킨다. 결과적으로 슬라이드 이미지의 정보를 담고 있는 자료구조의 맨 처음 이미지는 마지막 슬라이드 이미지이고 마지막 이미지는 처음 슬라이드 이미지가 적재된다. $container.addEventListener('click', e => { if(!e.target.classLi..

오류 const img = new Image(); img.src = images[0]; //image src를 담은 배열 console.log(img.width); 이미지의 사이즈를 참조해야 되서 다음과 같이 Image 객체를 통해 인스턴스를 생성하고 해당 인스턴스에 경로를 지정해 준 뒤, 이미지의 가로 사이즈를 참조하려고 했지만 원래 이미지 사이즈가 아닌 0 값이 계속 나오는 변수가 발생하였다. 검색해서 확인해 보니 모든 리소스와 같이 이미지를 로드하는 것은 비동기 작업으로 이루어진다는 사실을 확인하였다. 즉, 이미지의 너비를 요청할 때, img.width의 값은 아직 값을 불러오지 않은 상태이기 때문에(비동기 작업은 다른 작업이 동기적으로 모두 실행이 마친 뒤에 실행) 값이 0이 되는 문제가 발생했던..

문제 괄호가 입력되면 올바른 괄호이면 "YES", 올바르지 않으면 "NO"를 출력합니다.(())() 이것은 괄호의 쌍이 올바르게 위치하는 거지만, (()()))) 은 올바른 괄호가 아니다. 문제풀이 스택 스택(stack)은 제한적으로 접근할 수 있는 순차 리스트(나열) 자료 구조 FIFO(First In Last Out) 선입 후출: 처음에 들어간 것이 나중에 나오도록 되어 있는 자료 구조 요소의 삽입과 삭제가 자료 구조의 한쪽 끝에서만 이루어지는 것이 특징 push 연산: 자료구조 내에 비어 있는 끝 공간에 데이터 적재 pop 연산: 자료구조 내에 끝에 있는 데이터를 삭제 괄호는 여는 괄호와 닫는 괄호가 한 쌍이다. 완전한 괄호가 되기 위해서는 각 괄호가 한 쌍이 이루어져야 한다. 이를 위해 다음 그림..

문제 S문자열에서 T문자열과 아나그램이 되는 S의 부분문자열의 개수를 구하는 프로그램을 작성하세요. 아나그램 판별시 대소문자가 구별됩니다. 부분문자열은 연속된 문자열이어야 합니다. 문제풀이 Map1 객체에 맨 처음 문자에서부터 연속부분 수열의 최대 문자열 길이까지의 문자에 대한 데이터(Key, Value)를 적재한다. 비교의 기준이 될 Map2 객체에 0~(T문자열 길이 - 1) 범위에 해당하는 문자를 적재한다. 해당 문제에서는 초기에 Map2 객체에 a와 b가 적재된다. 다음 인덱스 요소에서부터 반복문을 시작하여 Map1 객체에 포인터2가 현재 가리키고 있는 인덱스(시작 인덱스 요소)의 문자를 적재한다. 두 Map 객체를 비교한다. 비교가 끝난 뒤에 포인터1이 가리키고 있는 인덱스 요소를 Map1 객체..

문제 Anagram이란 두 문자열이 알파벳의 나열 순서를 다르지만 그 구성이 일치하면 두 단어는 아 나그램이라고 합니다. 예를 들면 AbaAeCe 와 baeeACA 는 알파벳을 나열 순서는 다르지만 그 구성을 살펴보면 A(2), a(1), b(1), C(1), e(2)로 알파벳과 그 개수가 모두 일치합니다. 즉 어느 한 단어를 재 배열하면 상대편 단어가 될 수 있는 것을 아나그램이라 합니다. 길이가 같은 두 개의 단어가 주어지면 두 단어가 아나그램인지 판별하는 프로그램을 작성하세 요. 아나그램 판별시 대소문자가 구분됩니다. 문제풀이 key와 Value를 한 쌍으로 적재하는 Map() 객체를 사용하여 각 문자열에 대해 자료구조를 만든다.두 문자열에서 Key의 값인 알파벳이 다르다면 아나그램의 전제 조건을 ..

https://choi95.tistory.com/70 동적 Tabs Tabs 동적 생성 위와 같이 Tabs-Content를 만들 때 각 Tab의 너비는 200px로 일정하고 박스 내에 들어가는 Tab은 가변적이다.즉, CSS 상에서 Width의 값을 정적으로 주게 되면 정적인 Tabs를 만들지 못한다. choi95.tistory.com JS 상에서 HTML 태그 동적 생성 이전 포스팅에서 Tabs-Content는 HTML 상에서의 정적인 태그가 아닌, 서버로부터 받은 Tab-Data들의 갯수와 내용에 따라 동적으로 생성되어야 한다. 이를 위해 다음과 같이 요구되는 태그들을 setAttribute()와 createElement()를 통해 동적으로 생성해 주는 함수를 만들었다. function createN..