Elixir Phoenix Project 생성과 Project의 폴더 구조

Phoenix Project 생성용 Tool 설치

 

Phoenix는 Elixir가 설치된 PC에서 , 터미널 창에서 command

mix local.hex 를 실행한 후 

mix archive.install hex phx_new 1.4.10 를 실행하면 Phoenix Project를 생성할 수 있는 환경이 갖추어집니다. 

위의 2개의 command는 Phoenix Project를 생성할 수 있는 환경을 만드는 것이지, 실제 Phoenix Project를 생성하는 것은 아닙니다. 

(Java의 Spring과 비유한다면, 위의 두개의 명령에는 STS를 설치하는 것과 같다고 할 수 있습니다.)

참조 : https://hexdocs.pm/phoenix/installation.html#content 

(글 쓰는 시점의 phoenix 버젼은 1.4.10 입니다.)

 

위의 두개의 명령은 사실,  elixir의 mix 에서 사용될 수 있는 task 를 추가하는 것 입니다.

elixir 의 mix는 새로운 project를 만들고, compile 하고 실행하는 등의 개발관련일을 수행하는 tool 이며, 

mix에는 새로운 task를 추가할 수 있습니다.

 

위의 두개 명령어는 phoenix project를 생성하는 task를 추가하는 것입니다. 

이 mix task는 원하는 기능을 추가할 수 있으며, phoenix task도 이와 같이 추가된 항목입니다.

참조 : https://elixirschool.com/ko/lessons/basics/mix-tasks/

Elixir School

위의  명령어 "mix archive.install hex phx_new 1.4.10"는 mix 의 hex 라는 elixir program repositiry 에서 phx_new 라는 task (일종의 elixir 프로그램입니다.)을 설치하라는 것 입니다. 

 

"mix local.hex" 는 hex 에서 프로그램을 설치할 수 있는 기능을 mix에 추가하는 것 입니다. 

 

사용자의 home folder 아래에 .mix 라는 폴더가 있고,

위의 두개의 command를 실행하면,

와 같이 hex 와 phx-new 항목이 설치된 것을 확인할 수 있습니다. 

 

hex는 Elixir library repository 이며,  www.hex.pm에서 원하는 라이브러리를 찾아서 프로젝트에 추가할 수 있습니다. 

자세한 사용법은 홈페이지의 내용을 참조하세요. 

 

Phoenix Project 생성 및 폴더 구조

Elixir 의 일반 project를 "mix new project_name"으로 생성하는 것과 거의 유사하게 

Phoenix Project는 "mix phx.new project_name" 으로 생성합니다. 

 

mix phx.new는 여러가지 옵션을 제공하며, 이에 대한 도움말은 "mix help phx.new"로 볼수 있습니다. 

 

지금은, DB와의 연계를 하지 않을 것이고, webpack을 설치하지 않을 것이므로, 

"mix phx.new hello_web --no-ecto --no-webpack --module HelloWeb" 로 새로운 Phoenix Project HelloWeb 을 만들어 봅니다.

 

명령을 실행하면, 프로젝트 관련 파일들을 생성한 후 

 

 

 

와 같이 관련 dependencies를 설치할지를 물어보는데, Y를 해서 지금 설치를 해도되고 나중에 프로젝트 폴더에 들어가서 설치를 해도 됩니다.

 

아래는 생성된 Project의 폴더구조입니다. 

Phonenix Project 폴더 구조

Phoenix Project는 일반 Elixir Project와 같은 구조를 가지고 있습니다. 다음 소스파일이 위치하는 lib 폴더에는 Web 관련된 추가 하위 폴더들이 생성됩니다. 

 

다음은 폴더 및 파일에 대한 설명 입니다. 

 

• Web 이외의 기능 구현 폴더 : 웹과 직접적인 연관이 없는 로직이나 함수들을 구현하는 폴더 입니다. 웹의 구현중에 사용할 공통 함수들을 구현하거나, DB를 사용하는 경우 DB의 각 Table에 해당하는 Schema를 정의하기도 합니다.  DB를 사용하는 경우에 대한 설명은 다른 글에 적도록 하겠습니다.
• Web 기능 구현 폴더 : 웹의 구현과 직접관련된 내용들이 들어가는 폴더 입니다.
• endpoint : http 서버 통신모듈의 정의에 해당 합니다.  어떤 파일들을 static 으로 표현할찌, 암호화에 대한 내용은 어떻게 할지, 통신중에 로그는 어떻게 표현할지, 세션에 대한 내용은 어떻게 처리할지등의 통신과 관련된 설정내용이 들어갑니다. 
• web macro : 아래에 설명할 controller, view에서 공통적으로 사용하는 macro들을 정의 합니다.
• App Main : Project App의 main module 입니다. 웹서버에 해당하는 endpoint를 구동시키고, DB에 접속을 하기위한 Ecto Module 등을 구동시키는 역할을 합니다.  어플리케이션의 구동시 최기화야 하는 일들을 정의 합니다.
• etc. function : 프로젝트 생성시에는 비어있습니다. 원하는 기능을 정의해서 사용하면 됩니다.

위에 있는 항목들은 , 사실 Phoenix로 Web App 을 제작할 때 거의 손대지 않아도 되는 내용들 입니다. 

프로젝트의 실행에 영향을 주는 설정내용들이지만, 거의 대부분 프로젝트 생성시의 내용을 그대로 사용하게 되며, 아주 세부적이며 하위의 기능을 변화하고자 할때만 수정합니다.  

 

Phoenix로 Web App을 제작할때는 다음의 사항들에 대해서만, 주로 작업을 하게 됩니다. 

• router : 어떤 URI에 대해서 어떤 모듈의 어떤 함수가 처리할 지를 지정합니다. 
• controller : router에서 지정한 URI 에 대한 처리를 할 모듈과 함수들을 정의 합니다.
• view : controller의 처리 결과 HTML 또는 JSON을 생성할 모듈과 함수들을 정의합니다.
• template : view 에서 사용될 HTML 또는 JSON 생성용 Template 입니다. 

 

https://github.com/BitzFlex/hello_web에서 생성된 프로젝트를 다운받아 내용을 살펴보시기 바랍니다.

 

프로젝트의 실행은 

"mix deps.get" 로 필요한 dependency 를 가져온 후 

"iex -S mix phx.server"  로 실행을 하면, 

 

와 같이, 웹 서버가 구동됩니다.  위에 그림에서와 같이, 프로젝트가 실행된 동일 PC에서 브라우저로 localhost:4000 에 접속을 하면 

 

 

과 같이 웹서버의 구동을 확인할 수 있습니다. 

 

위에 적었듯이, Phoenix는 HTTP 통신 서버인 Cowboy가 내장되어 있으므로, 별도로 Tomcat등을 실행시킬 필요가 없이 바로 웹서버가 동작됩니다. 

 

이후의 글에서는 Router, Controller, View, Template에 대한 설명을 진행하겠습니다.