Go로 TodoList 만들기(1)

참고
Github
front : bootstrap 사용
back : Go
db는 일단 구현하지 않고 인메모리상에서 구현

---

📚 GET 메소드를 통해 list읽기

main.go

package main

import (
	"log"
	"net/http"

	"github.com/soosungp33/Go_TodoList/app"
	"github.com/urfave/negroni"
)

func main() {
	m := app.MakeHandler()

	n := negroni.Classic() // 미들웨어(기본 파일 서버 기능을 제공 -> public에 있는 파일들을 제공함, 로그 기능도 제공) -> 템플릿 기능을 간단하게
	// mux := pat.New()
	// mux.Handle("/", http.FileServer(http.Dir("public")))과 같은 의미이다.

	n.UseHandler(m) // 래핑

	log.Println("Started App")
	err := http.ListenAndServe(":3000", n)
	if err != nil {
		panic(err)
	}
}

HTTP 미들웨어인 negroni 패키지를 사용해 public 폴더에 있는 bootstrap 템플릿을 사용(html, css, js)
negroni 패키지 알아보기

app폴더 안의 app.go

package app

import (
	"net/http"
	"time"

	"github.com/gorilla/mux"
	"github.com/unrolled/render"
)

func indexHandler(w http.ResponseWriter, r *http.Request) {
	http.Redirect(w, r, "/todo.html", http.StatusTemporaryRedirect)
}

var rd *render.Render

type Todo struct {
	ID        int       `json:"id"`
	Name      string    `json:"name"`
	Completed bool      `json:"completed"`
	CreatedAt time.Time `json:"created_at"`
}

var todoMap map[int]*Todo // 인메모리 db역할

func getTodoListHandler(w http.ResponseWriter, r *http.Request) {
	list := []*Todo{}
	for _, v := range todoMap {
		list = append(list, v)
	}
	// 렌더링을 사용해서 JSON으로 반환
	rd.JSON(w, http.StatusOK, list)
}

func addTestTodos() { // 테스트용 데이터
	todoMap[1] = &Todo{1, "Test1", false, time.Now()}
	todoMap[2] = &Todo{2, "Test2", true, time.Now()}
	todoMap[3] = &Todo{3, "Test3", false, time.Now()}
}

func MakeHandler() http.Handler {
	todoMap = make(map[int]*Todo)
	addTestTodos()

	rd = render.New() // 렌더링을 사용해서 JSON 변환을 쉽게하기
	r := mux.NewRouter()

	r.HandleFunc("/todos", getTodoListHandler).Methods("GET")
	r.HandleFunc("/", indexHandler) // 처음 서버를 시작하고 local:3000으로 들어갔을 때 바로 local:3000/todo.html로 리다이렉트 하는 핸들러

	return r
}

먼저 todoMap에 테스트 데이터를 넣어준다.
처음 서버를 실행하면 "/"로 들어가게 되는데 indexHandler를 이용해 todo.html로 리다이렉트 시켜준다.
"/todos"로 리다이렉트되면 GET메소드와 getTodoListHandler를 이용한다.
getTodoListHandler에는 인메모리 db역할을 하는 todoMap에 있는 데이터들을 JSON 데이터로 변환해 응답한다.

---

📚 list를 웹에 나타내기

bootstrap 코드를 살짝 변경해서 나타내주자

...
        var addItem = function(item) {
            if (item.completed) {
                todoListItem.append("<li class='completed'><div class='form-check'><label class='form-check-label'><input class='checkbox' type='checkbox' checked='checked' />" + item.name + "<i class='input-helper'></i></label></div><i class='remove mdi mdi-close-circle-outline'></i></li>");
            } else {
                todoListItem.append("<li><div class='form-check'><label class='form-check-label'><input class='checkbox' type='checkbox' />" + item.name + "<i class='input-helper'></i></label></div><i class='remove mdi mdi-close-circle-outline'></i></li>");
            }
        };
    
        $.get('/todos', function(items) {
            items.forEach(e => {
                addItem(e)
            });
        });
...

다음과 같은 화면을 볼 수 있다.