뫙뭉

자동완성 기능을 만들어보자! 전에 소개한 아이디어의 중요한 기능 중 하나가 자동완성 기능이었다. 여러 식재료의 이름들을 샘플로 기본적으로 주고, 검색창에 문자를 입력할 때마다 일치하는 재료만 보이게 하는 것이 목표이다. 내가 하면서 고민해야 될 부분은 다음과 같았다. - 모든 아이템은 처음에 보여지는 상태여야 함. - 타자가 한글자씩 입력 될 때마다 일치하는 항목들만 보여야 함. 시행착오 내가 처음 고민했던 방법은 다음과 같다. 미리 만들어 놓은 식재료 data를 받아온다. className에 화면에 보여질 재료들에 active를 부여하여 목록생성 onChange 이벤트를 통해 input에 값이 입력되면 모든 아이템에 active를 지우고 filter해서 active를 다시 부여하면 일치 항목만 남아 있..

새로운 프로젝트의 시작 - 냉장고를 털어보자 평소에 요리를 자주(일주일에 두세 번이 자주라면..) 해 먹는 나에게 있어 평소 불편한 점이 하나 있었다. 머피의 법칙이던가, 유튜브 알고리즘에 홀려 들어간 요리 영상에는 없는 재료로 만든 것이 왜 이리 많은지. 그런 고로 있는 재료로 검색을 하여 레시피를 보여주는 기능이 있으면 좋을 것 같다는 생각을 하였다. 이러한 불편함은 새로운 것을 만드는 데에 좋은 원동력이 되는 듯하다. 간단한 기능이라 구글링을 하면 이미 개발되어 있는 자료를 찾을 수 있을 것이라 예상되지만 상관없다!! 내가 만들어 보고 싶어서 만들 뿐. 그리하여 내일부터 시작하게 될 프로젝트는 일명 '냉장고 털기' 프로젝트. 구상 중인 아이디어 현재 내가 구상한 레이아웃은 이렇다. ( ppt 말고는..