001. 프론트 엔드 시작

https://github.com/lkimilhol/healingwords-frontend

프로젝트 시작입니다. 어떠한 프로젝트인지, 왜 이 프로젝트를 시작했는지는 추후 공개하도록 하겠습니다.

 

먼저 프론트엔드는 svelte를 사용해보기로 했습니다. 별다른 이유가 있지 않습니다. 경험이 없어서 무턱대고 요새 많이 사용 되는 프레임워크를 선정하였습니다. 

 

구글링을 통하여 node js를 설치하고 svelte를 설치하였습니다. 

 

Bundler는 Rollup bundler로 선정하였습니다만, 이것이 무엇인지는 자세히 모르겠네요.

 

sevelte 개발 환경을 구축하고, 실제로 프로젝트를 실행하여 아래와 같은 페이지를 만났습니다.

제가 필요로 하는 부분은 API 요청을 해야 하는 부분이기 때문에 구글링을 통해서, 아주 간단하게 라도 코드를 수정해 보았습니다.

(참고 사이트)

 

이후 다시 프로젝트를 실행하여 

 

위와 같은 결과를 얻었습니다. 코드를 잠시 파악해보겠습니다.

 

<script>
	import { onMount } from "svelte";
	import { apiData, drinkNames } from './store.js';

	onMount(async () => {
	fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=Bourbon")
	.then(response => response.json())
	.then(data => {
			console.log(data);
		apiData.set(data);
	}).catch(error => {
		console.log(error);
		return [];
	});
	});
</script>

위의 url을 통하여 응답으로 데이터를 받아오게 되네요. 응답은 json 형태인것으로 보여집니다.

다음에는 백엔드를 구축해서 제가 원하는 데이터를 받아 오는지 확인해봐야겠습니다. 

 

스벨트와 프론트엔드에 관한 지식들은 차근차근 알아가며 정리해보려고 합니다.

다만 저는 프론트엔드에는 큰 개발은 하지 않을 예정입니다.

 

감사합니다.