한식 메뉴 렌더링 1일 차(HTML에서 웹페이지 구성하기)

오늘은 코드카타 20분 정도 하고 나머지 모든 시간을 HTML에서 웹페이지를 구성하는 데에 썼다. 

 

그 중 반은 숙제로 나온 음식 리뷰 페이지 설정하는 데에 사용했는데, HTML 조작으로 데이터베이스에 값을 추가하고, 다시 데이터베이스에서 웹페이지에 값을 불러오는 걸 코드로 구현하는 것이 요점이었다. 코드의 대부분은 제공되어 있기 때문에 내가 해야 하는 것은 변수를 정리하고 각 코드의 id 값을 잘 지정해주는 것이다. 하지만 배운대로 한다고 해도 한 번에 작동에 성공하기는 쉽지 않은 법이라, 계속해서 시도하는 와중에 구조를 보다 자세하게 이해할 수 있었다. 

 

먼저 const a = await getDocs(collection(db, "foods"));는 불러온 getDocs라는 함수?를 이용하여 미리 연결해둔 collection 디렉토리?데이터베이스?에서 foods 디렉토리의 데이터를 가져와서 a로 변수선언을 하는 코드이다. 값을 불러오는 것이고, 변수선언으로 역할을 끝냈으므로 디렉토리만 잘 지정했다면 신경쓰지 않아도 된다. 또 await 연산자를 이용하여 데이터베이스에서 값을 가져오는 것을 기다리기도 하니 인터넷 환경에 따라 코드에 오류가 발생할 걱정을 덜 수 있다. 

 

다음은 나를 고민하게 한 여러 변수 선언들이다.

1. let image = $('#floatingInput').val();
2. 'image': image,
3. let image = doc.data().image;

이것들은 다 이미지 변수를 선언하는 변수 선언들이지만 조금씩 쓰임이 달랐다. 

 

먼저 1번 변수 선언은 HTML 페이지에서 이미지 텍스트 박스에 입력한 값 $('#floatingInput')을 함수 내에서 image라고 부를 것이라는 선언이다. 이 변수 선언을 통해 HTML 페이지에서 입력한 값을 데이터베이스에 추가할 수 있게 된다. 

 

2번 변수 선언 1번 변수 선언과 같은 함수 내에서 사용된 것으로, 데이터베이스에 있는 값 형식 'image'에 image라고 부르는 HTML 페이지에 입력한 값 $('#floatingInput')을 배당하는 변수 선언이다. 즉 앞의 'image'는 데이터베이스의 값 형식이고, image는 $('#floatingInput')이다. 

 

3번 변수 선언은 앞 선 2개의 변수 선언과 다른 함수에서 사용되는 변수 선언으로, doc.data().image의 형식으로 된 데이터베이스에서 불러온 값을 image라고 부르겠다는 선언이다. 이 변수 선언을 통해 데이터베이스에서 불러온 image 값을 HTML 페이지에 삽입할 수 있게 된다. 

 

나머지는 소소하게 (반복할 것).repeat(반복횟수), (붙일 곳).append(붙일 것), (없앨 것).empty()를 알게 되었다. 

 

이렇게 정리하고 보니 별 거 없지만, 변수 선언에 대해 보다 잘 알게 되었다는 것은 큰 수확으로 느껴진다. 다음으로 내가 맞이한 난관 때문에 더욱 그렇게 느껴진 것이기도 할 것이다. 

 

다음 난관은 바로 한식 메뉴 렌더링 하기였다. 그냥 페이지를 만드는 것을 렌더링이라고 부르는 건지, 자바스크립트를 이용하여 동적으로 페이지를 만드는 것을 렌더링이라고 부르는 건지 헷갈렸는데, 후자로 보고 자바스크립트를 이용하여 페이지를 만들기로 하였다.

 

하지만 이에 대한 오늘 수확이라고는 .js 파일로 분리된 자바스크립트는 함수를 저장하는 용도라는 것을 알게 되었다는 것뿐이었다. 또 아주 기초 중의 기초인 배열을 생성하고 콘솔을 이용해서 log로 확인하는 것만을 해보았다. 문법에 대한 이해가 일천한지라 뭐하나 제대로 만든 코드가 없는데, 내일은 최소한 배열의 값을 적절하게 분리하는 방법을 알아보아야겠다.