반응형

프론트엔드 14

React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 3 (Git을 사용해보자)

Git을 사용해 버전 관리를 해보자! 이전 게시글에서 자동완성 기능을 만들어 보았는데 일부분 기능 구현이 되었으니 Git을 사용해 버전 관리를 해보려 한다. Git이란 무엇이냐... 분산 버전 관리 시스템중 하나인데 이것에 대해서는 인터넷에 이미 굉장히 많은 글들이 친절히 알려주고 있으니 생략하도록 하겠다. 검색을 해 보시길 권장드림. 그래도 검색을 하기 귀찮아하시는 분들을 위해... 내가 공부할 때 자주 보는 드림코딩 채널의 Git에 관련된 링크를 남겨 놓도록 하겠다. https://www.youtube.com/watch?v=lPrxhA4PLoA&t=29s - Git, Github이 무엇일까. https://www.youtube.com/watch?v=Z9dvM7qgN9s&t=2378s - Git 초기 ..

React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 2 (자동 완성)

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

React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 1(아이디어)

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

블로그로 자기개발 하기

지금은 블로그의 시대?? 요즘 개발자를 꿈꾸는, 또는 이미 그 길을 걷고 계신 많은 분들이 자신의 지식을 기록하고 공유하기 위해서 블로그를 많이 이용하고 있다고 느낀다. 사소한 정보 하나를 찾기 위해 들어가는 링크의 대부분이 블로그인 것을 감안하면 정말 방대한 양의 정보들이 블로그에 담겨있다고 느낄 수 있는 것 같다. 블로그를 시작해 볼까에 대한 계기는 우선은 단순 호기심이다. 프론트엔드 개발 공부를 반년 정도 해 보면서 기록이라고는 깃헙에 커밋한 내용들과 내 컴퓨터 바탕화면에 있는 심심찮은 파일들이 전부였기에 글로서 기록하는 것이 얼마나 나에게 도움이 되는지 한번 시험해 볼까? 라는 생각이 문득 들었기 때문. 내가 생각하는 기대 효과 우선 가장 기대되는 효과는 시간 절약이지 않을까 한다. 무언가 새로운..

반응형