투포인터 알고리즘 (Two Pointers Algorithm)

투포인터 알고리즘이란?배열/리스트에서 두개의 인덱스(포인터)를 사용하여 특정 조건을 만족하는 구간을 효율적으로 탐색하기 위한 알고리즘일반적으로 탐색하는 배열/리스트가 정렬되어 있을 때 사용한다. 사용하는 경우1) 일반적으로 두 인덱스를 탐색범위의 시작과 끝으로 사용하여, 탐색 범위 내에서 특정 조건을 만족하는 요소를 찾거나 조건을 만족하는 부분배열을 찾는 데에 사용한다.2) 동일한 인덱스를 시작으로, 한 인덱스를 고정하고 다른 인덱스를 이동시키다가 특정 조건에서 고정한 인덱스도 이동시키며 탐색하는 방법도 사용할 수 있다.  구현 방식1) 배열의 탐색할 위치에 두 포인터를 설정한다.2) 두 포인터 혹은 그 구간을 탐색하고 조건에 일치하는지 확인한다.3) 조건을 만족시키는 경우 탐색을 종료한다.4) 조건을 ..

• format_list_bulleted 알고리즘
• · 2024. 6. 26.
• textsms

한식메뉴 렌더링하기

최종 결과  구현 목표주어진 데이터 menuItems 를 배열 메서드를 활용해 화면에 표시하기const menuItems = [ { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' }, { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' }, { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' }, { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' }, { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }];  추가한 기..

• format_list_bulleted 프로젝트/개인 과제
• · 2024. 6. 26.
• textsms

[jQuery] 간단한 메뉴바 만들기 (클릭한 요소 스타일 바꾸기)

배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.이전에 사용해본 jQuery의 attr()을 활용해보았다.  간단 요약1) 선택할 수 있는 카테고리 메뉴들을 나열한다.2) 선택한 카테고리에 입힐 스타일을 css로 작성한다.3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다.  적용한 방법1) 카테고리들을 나열한다. 전체보기 밥 국/찌개 전 카테고리들의 나열이므로, ul을 활용해 묶어주었다.  2) 선택한 카테고리에 입힐 스타일을 작성한다..categoryItem:..

• format_list_bulleted JavaScript
• · 2024. 6. 24.
• textsms

[CSS] 카드 Flip 효과 만들기 (transition, transform, grid)

반복을 활용하여 위와같이 메뉴와 설명을 출력하는 과제를 진행하고 있다.화면을 구성한 후에 마우스를 올렸을 때 카드가 돌아가면 재밌을 것 같아 방법을 찾아보았다!  간단 요약1) 카드의 앞면, 뒷면을 담당할 요소를 각각 만들어준다.2) rotateY로 Y축 기준 회전시켜주고, 요소가 화면에 뒷면을 보일 때는 보이지 않도록 설정한다. (hidden)3) (상황에따라 선택) 레이아웃이나 포지션을 활용해 앞면/뒷면 요소들이 같은 위치에 위치하도록 한다. 회전시키는 메서드 등은 있을 것 같았는데 앞뒷면을 별도의 요소로 제작 -> 둘을 같은 위치에 놓고 -> 회전시키면서 요소가 뒷면일 때는 보이지 않게한다는 건 떠올리지 못했다!너무 직관적으로 돌리는 것만 생각하지 말고 간접적으로 적절히 연출하는 것도 필요하다는 생..

• format_list_bulleted HTML + CSS
• · 2024. 6. 21.
• textsms

[Javascript] 숫자기억게임 만들기

최종 결과 구현 목표1) 시작버튼 클릭시 1000~9999 사이의 숫자가 무작위로 나타나고, 3초 뒤 사라진다.2) 사용자가 숫자를 입력하고, 제출 버튼을 통해 정답 유무를 확인한다.3) 정답일시 "정답입니다!" 오답일시 "오답입니다! 정답은 nnnn입니다."를 노출한다.4) 그 외 자유! 추가한 기능1) 숫자가 보여지는 동안 입력 및 제출 제한, 사용자가 입력한 정답은 다시 게임을 시작할 때 지워주기2) 정답 제출 후 2초 뒤 초기화3) 제한시간(3초) 카운트다운 보이기4) 입력 필드에 안내문구 표시  setTimeout 활용 오류거의 끝났다 생각하고 즐겁게 테스트를 해보던 중.. 내가 외워야하는 숫자가 바뀌고 카운트다운도 멈추는 상황을 발견했다. 의심가는 곳에 중단점을 찍어보다가 화면 구성을 초기화하..

• format_list_bulleted 프로젝트/개인 과제
• · 2024. 6. 20.
• textsms

[Javascript] 시간 간격을 두고 함수 호출하기 (setTimeout / setInterval)

숫자맞추기 게임을 만들며 제한시간을 화면에 표시하고싶어 setInterval을 사용해보았다.알아본 내용을 정리해보자. setTimeout사용법지정한 시간만큼 기다렸다가 함수를 실행해야할 때 사용할 수 있다!setTimeout(실행할 함수, 기다릴 시간);setTimeout(() => { console.log("1초 지남");}, 1000);setTimeout(foo, 3000);function foo() { console.log("3초 지남");} 실행할 함수를 바로 작성해주거나 함수명을 적어주고, 기다릴 시간을 ms 단위로 작성해주면 된다. (1000ms == 1초) clearTimeout중간에 실행을 취소하고 싶은 경우 clearTimeout()을 사용하면 된다!setTimeout을 실행할 때 ID가..

• format_list_bulleted JavaScript
• · 2024. 6. 19.
• textsms