우아한테크코스 3기 프리코스 최종 미션(2) - 개발 환경 설정 & 파일 구조

 

미션을 할 에디터로는 Visual Studio Code를 사용 합니다.

 

1. [Visual Studio Code] 라이브 서버(Live Server) 설정하기

파일을 실행시키고 브라우저에서 수정된 소스코드를 즉각적으로 확인 하기 위해 Live Server를 설정합니다.

vsc의 확장에서 Live Server를 검색 후 설치하면 됩니다.

Live Server 설치

Live Server 실행하는 방법으로는 마우스 오른쪽 클릭 후 Open with the Liver Server를 클릭하거나 오른쪽 하단에 있는 Go Live를 클릭하시면 됩니다.

 

 

2. [Prettier] 설정하기

개발자가 작성한 코드를 일정한 코드 스타일로 변환시켜주는 Code formatter이다

Prettier를 설치하면 자동으로 작성된 코드가 간격, 줄 바꿈, 쌍 따옴표, 콜론 등 정해진 코드 스타일로 변환시켜 주기 때문에 가독성과 코드를 작성하기 편하다.

 

3. [파일 구조] MVC 패턴

초기 디렉토리 구성

초기 화면 구성이고 MVC패턴으로 설계를 할 생각이다.

간단히 MVC패턴을 설명하자면 디자인 패턴의 종류 중 하나로써 소프트웨어를 설계할 때 각각의 모듈이나 기능들이 다른 소프트웨어 시스템들을 개발할 때에도 비슷한 설계에 재사용되거나 이러한 패턴을 사용함으로써 팀원들 간의 의사소통을 원활하게 해주는 것을 말한다.

그중 MVC패턴은 Model, View, Controller로 구성되어 각자의 주어진 역할을 수행한다.

위의 그림을 보면 Model은 사용자가 필요로 하는 데이터를 가지고, View는 사용자 인터페이스 요소를 나타내며 둘 사이를 잇는 Controller가 있다. Model과 View는 자신의 변경에 대하여 Controller에서 통지만 해주고 Controller는 그를 바탕으로 메인 로직과 이벤트들을 처리하게 된다.

 

MVC 패턴에 대한 내용은 다음에 다뤄보도록 하겠습니다.

 

 

참고

m.blog.naver.com/jhc9639/220967034588