학원 근처 맛집 추천 웹사이트 1

1. 와이어 프레임

 

기본적인 와이어 프레임은 간단하고 명확하게 구성했다.

navigation에 로고, 메뉴, 검색창을 넣을 거고,

carousel에 고화질 음식 사진들을 슬라이드로 보여줄 거고,

card 위치에 각종 조건에 따른 결과를 보여줄 것이다.

 

2. 데이터 베이스

 

(1) netlify

서버 컴퓨터를 운영하는 방법이 아니라 네틀리파이에 index를 업로드할 것이다.

개인 컴퓨터  ->  네틀리파이 서버에 index를 업로드해서 주소 생성  ->  인터넷 사용자들이 생성된 주소로 접속

이라는 구조를 가지며 무료로 사용 가능하다.

 

index에 수정할 사항이 있으면 수정한 index를 다시 네틀리파이 서버에 업로드하면 반영된다.

다만 사용자들이 index에 입력해 전송하는 정보를 받아오는 방법을 몰라서 데이터베이스를 손수 구축하기로 했다.

https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

 

(2) excel to JSON converter

사용자들에게 맛집 정보를 입력받을 수 없는 상황이라 직접 엑셀을 작성했다.

이때 엑셀에 있는 정보를 json 구조로 바꿔주는 html을 공유하는 깃허브 주소다.

여기서 알집을 받아서 html을 실행하고 파일을 선택하면 엑셀에 있는 데이터가 JSON구조로 변경되어 출력된다.

이걸 복사해서 JavaScript에 배열로 붙여 넣으면 수동 DB가 완성된다.

https://github.com/SheetJS/sheetjs

GitHub - SheetJS/sheetjs: 📗 SheetJS Community Edition -- Spreadsheet Data Toolkit

위처럼 작성한 엑셀을 JSON으로 변환하고 JavaScript에서 선언한다.

let data = [{}, {}, {"음식점 이름":"앤 미", "분류":"일식", "세분류":"일본 가정식",...}, {...}, {...},...];

 

앞에 빈 {}를 2개 넣은 건 인덱스는 0부터 시작하는 제로베이스이고

엑셀의 1행이 카테고리이기 때문에

for문에서 i를 2부터 시작하기 위함이다.

 

3. HTML, CSS

 

토일월 3일 연휴 안에 빠르게 배포하기 위해 부트스트랩을 사용했다.

https://getbootstrap.com/

Bootstrap

css와 script를 CDN방식으로 적용했고 필요한 구조를 가져다 입맛대로 수정했다.

아이폰 12 pro의 가로와 세로, 그리고 PC를 테스트 가능한 범위 내에서 최대한 반응형으로 구동하게 했다.

 

심미성을 위해 구글 폰트도 활용했다.

https://googlefonts.github.io/korean/

Google Fonts + 한국어 • Google Fonts + Korean

 

HTML

CSS

 

4. JavaScript

 

먼저 필요한 태그들을 가져왔다.

그리고 아직 모듈화에 익숙하지 않아서 함수를 각각 만들었다.

card 부분에 뿌려줄 데이터를 조건에 따라 백틱으로 만들었다.

검색에 사용될 함수다.

검색 버튼을 누르지 않고 엔터키를 눌러도 검색이 되게 끔 했다.

 

5. 완성

 

조건에 따라 맛집을 추천해 준다.

검색 기능.

dropdown 형태의 메뉴.

아이폰 12 pro 세로 모드.

아이폰 12 pro 가로 모드.

 

6. 배포

 

조 코딩의 네틀리파이 강의를 보고 배포에 대한 두려움을 덜어낼 수 있었다.

https://www.youtube.com/watch?v=4mRae9N2pU4 

 

 

네틀리파이에 접속해서 Sites를 누르고, 하단의 드롭박스에 index가 있는 폴더를 넣는다.

위 같은 경우 toyProject1이라는 폴더를 드롭박스에 넣는다.

업로드 후 https://~~에 적힌 주소를 어디서든 접속 가능하다.

도메인 주소를 바꾸려면 Site settings를 클릭한다.

Change site name을 누르고 원하는 도메인 주소를 입력한 뒤 Save 하면 도메인 주소가 바뀐다.

이제 지구 반대편에 있는 사람한테도 내가 만든 웹사이트를 자랑할 수 있다.

 

7. 느낀 점

 

3일 연휴 동안 마감을 해본다는 느낌으로 구현해봤다.

처음에는 백지부터 시작한다는 두려움이 있었다.

하지만 하나씩 레이아웃이 생기고 기능들이 추가되어 작동하자

점점 자신감이 생기면서 속도가 붙었다.

 

배포하는 순간에는 처음 느껴보는 종류의 설렘을 느꼈다.