[Elixir] Phoenix 란? / 사용법

 

[Elixir] Elixir 란? / 사용법

 

---

Phoenix란?

Elixir로, 웹 개발을 쉽게 만들어주는 도구 ( 웹 프레임워크 )

 

환경 구성 / 설치

Elixir는, Erlang 가상머신에서 동작하므로, Phoenix에도 설치되어 있어야 합니다.

( 1.14 버전 이상 / 이전 게시글 참고 )

# hex 패키지 관리자 설치
mix local.hex

 

DB 연동

공식 홈페이지에서 권장하므로 PostgreSQL을 선택 ( 다른 것도 사용 가능 )

Elixir 패키지인, Ecto를 사용한다.

 

Live Reloading

코드 저장시, 웹에 즉각 반영

React, Flutter 등, 요새 프론트 엔드 개발에서 빼놓을 수 없음

---

프로젝트 만들기

# hello 라는 이름의 피닉스 프로젝트 만들기
mix phx.new hello

# 생성중에 웹 프로젝트에 필요한 Elixir 라이브러리들을 설치할거냐는 질문이 나옵니다 - Y 선택

 

데이터베이스 만들기 (Ecto)

# 프로젝트 폴더로 이동
cd hello

# ecto 라이브러리로 데이터베이스 만들기
mix ecto.create

# 마찬가지로 Y

 

피닉스 서버 실행

# 실행이 완료되면, localhost:4000 주소로 접속!
mix phx.server

---

Phoenix 프로젝트 구조

---

mix.exs

Elixir의 패키지 관리자인 mix의, 프로젝트 설명이 담긴 파일이다. ( 종속성 - Node.js의 package.json )

무수한 설치 요청

 

 

Elixir 라이브러리 설치하기 ( mix.exs ) 사용

# npm install 과 같다!
mix setup

라이브러리 설치 ( 종속성 )
컴파일
정적 파일 빌드
데이터베이스 설정 등, 여러가지 작업을 해준다.

 

---

VSCode 설정

Elixir 문법 하이라이트 & 자동완성

ElixirLS: Elixir support and debugger - Visual Studio Marketplace

Phoenix 문법 & 자동완성

Phoenix Framework - Visual Studio Marketplace

 

settings.json 설정

기본 설정

"elixirLS.suggestSpecs": false,
"elixirLS.dialyzerEnabled": true,
"elixirLS.signatureAfterComplete": false,
"elixirLS.fetchDeps": false,

"files.associations": {
  "*.heex": "phoenix-heex"
},

"[elixir]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "JakeBecker.elixir-ls"
},

"[phoenix-heex]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "JakeBecker.elixir-ls"
},

LiveView 확장 설정

"emmet.includeLanguages": {
  "elixir": "html",
  "phoenix-heex": "html"
},
"emmet.triggerExpansionOnTab": true,

---