수피의 느슨한 개발

자바스크립트 개인 프로젝트 후기 프로젝트 개요 및 기능 자바스크립트 기본 문법에 익숙해지기 위한 미니 프로젝트입니다. TMDB에서 Top rated movie API를 통해 영화 정보를 제공합니다. 키워드 검색 구현을 통해 영화 title과 overview를 기준으로 일치하는 단어가 포함된 영화 필터링을 구현합니다. 주요 구현 기능 페이지네이션 ▶︎ 페이지 번호에 쿼리문 추가하여 TMDB API 주소의 page 쿼리와 연동 ▶︎ 페이지를 5개 단위로 보여지도록 구현 (ex. 1 2 3 4 5 >>) ▶︎ '이전 페이지', '다음 페이지'를 꺽쇠 기호로 구현 ▶︎ 조회 가능한 페이지를 100페이지로 제한함 ▶︎ 동적 구현 1: 꺽쇠 기호가 필요없을 경우 숨김 ▶︎ 동적 구현 2: 현재 페이지가 7페이지면 ..

기본 환경 설정하기 node에서 MySQL 데이터베이스를 사용하기 위해 Community Server 설치가 필요하다. https://dev.mysql.com/downloads/ 또한 node와 데이터베이스를 ORM 방식으로 사용하기 위해 추가적인 npm 패키지 설치가 필요하다. npm install mysql2 sequelize sequelize-cli 위 패키지 중 sequelize-cli는 필수 패키지는 아니나 데이터베이스 생성이나 마이그레이션 등을 cli 명령으로 가능하게 하여 작업의 편의성을 더해준다. 💡 Tip ORM은 데이터베이스에 있는 객체를 하나의 객체에 매핑시키는 기술 데이터베이스 문법을 잘 모르더라도 자바스크립트 언어로 비교적 쉽게 상호작용을 하기 위해 사용된다. 이제 ORM 환경 설..

라디오 버튼에 대한 오해와 진실로 인해 많은 시간을 흘려 보낸 과정을 정리합니다. 라디오버튼 구현 English Korean 라디오버튼은 위와 같이 간단하게 구현할 수 있습니다. 위 코드에서 input 태그가 선택버튼에 해당하고, label 태그를 통해 각 선택 항목이 어떤 항목인지에 대한 텍스트를 부여합니다. 여기서 중요한 부분은 `name` 부분입니다. 두 개의 input 태그의 name을 language로 설정해두었는데 이렇게 같은 이름을 붙여줘야 한 묶음으로 인식하고, 그렇게 해야 양자택일이 가능해집니다. 또한 `checked` 라는 단어가 부여된 input 태그는 사이트 접속 시 기본적으로 선택되도록 하는 옵션입니다. 오해와 진실 처음에 라디오버튼을 사용하기로 했을 때 저는 input태그의 ch..

단어 포함 확인 시 대소문자 구분 없이 필터링 하도록 구현 const keyword = 'Apple'; const keywordRegExp = new RegExp(keyword, 'i'); movies = movies.filter((movie) => keywordRegExp.test(movie.original_title)); 위 코드와 같이 특정 단어가 데이터베이스에 포함되어 있는지 확인할 때 정규표현식을 활용할 수 있습니다. 위 예시는 영화 데이터에서 제목 부분을 가져와 keyword가 제목에 포함되어 있는지 확인합니다. RegExp의 작동 방식은 아래와 같습니다. RegExp 객체를 생성하여 찾고자 하는 키워드를 정규표현식으로 등록 'i' 옵션을 통해 검증 시 대소문자를 구분하지 않도록 지정 movi..