[WIL] 첫 프로젝트

항해에서 시작한 첫 풀스택 미니 프로젝트

7월 11일에 항해를 시작하고 4일의 기간동안 첫 프로젝트를 마쳤다.

조가 랜덤으로 짜여지고 프로젝트를 간단하게 기획, 구상하여 Flasent (flower + present)라는 프로젝트를 완성했다.

사람들에게 꽃을 랜덤으로 추천해주는 프로젝트를 기획했는데 기능들을 구현하면서 몇 가지 문제점이 있었다.

 

1 . 크롤링

기획한 페이지는 로그인, 회원가입, 메인페이지, 상세페이지 였고 나는 그 중 상세페이지를 맡았다.flasent 라는 프로젝트를 구상하면서 꽃들에 대한 정보는 크롤링으로 가져오면 될 것이라고 생각했는데 여기서 문제가 생겼다. 꽃의 정보와 꽃말이 필요했는데 그것과 관련된 api나 크롤링 할 사이트가 아무리 찾아도 보이지 않았다.게다가 항상 프론트쪽만 만지다보니 서버쪽 언어나 DB에 대한 개념은 부족한 상태였고,

관련해서 배웠던 것이라곤 항해를 시작하기 전에 제공해준 사전강의를 들은 것 뿐이었다. 

크롤링을 여기저기서 해서 합치기엔 부족한 실력이었고 시간도 4일밖에 없었기에 결국 내가 선택한 것은 json파일을  만들어 db에 직접 담는 것이었다..그래서 우리의 꽃의 종류는 총 24가지 정도밖에 되지 않았다.정말 개발자스럽지 못한 선택이었지만 어찌됐든 크롤링할 시간은 벌었기에 기획하지 않았던 부분을 구현해야겠다고 생각했다.

 

2. 로그인 및 회원가입

처음에 프로젝트의 역할 분담을 페이지 별로 하다보니 로그인과 회원가입이 각자 다른 팀원의 몫이었다.하지만 db에 들어간 정보로 로그인을 확인할 수 있었기에 회원가입이 먼저 구현된 이후에 로그인 기능 구현이 가능하단 것을 프로젝트를 진행하면서 알게되었다.게다가 크롤링을 포기하면서 상세페이지에 댓글 기능을 추가하고 회원의 아이디까지 보여줄 계획이었는데 회원가입을 맡은 팀원이 어느 정도 진행되었는지 알 수가 없었다.결국 지급된 강의를 보며 로그인과 회원가입을 함께 구현해봤다. 회원가입을 할 때 hash로 사용자의 비밀번호에 암호화를 해두고  로그인을 할 때 복호화를 해 일치하는지 확인하는 방식인 것 같다.

password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()

 

로그인을 할 때는 jwt라는 Json Web Token을 이용해 서버에서 보내준 내 토큰을 쿠키에 담고,

사이트를 돌아다니며 HTTP header에 실린 내 토큰을 다시 서버로 보내 권한을 받는 방식이라고 이해했다.

$.ajax({
    type: "POST",
    url: "/sign_in",
    data: {
        username_give: username,
        password_give: password
    },
    success: function (response) {
        if (response['result'] == 'success') {
            $.cookie('mytoken', response['token'], {path: '/'});
            window.location.href = '/'
        } else {
            // 로그인이 안되면 에러메시지를 띄웁니다.
            alert(response['msg'])
        }
    }
});

로그인과 회원가입까지 구현해보니 대충 서버와 클라이언트의 통신 흐름을 알 것 같았는데 HTTP 에 대한 지식이 더 필요할 것 같다는 생각이 들었다.

 

3. jinja2 템플릿

python과 flask도 처음 써봐서 익숙하지 않은데 이번 프로젝트에는 flask 패키지에 내장된 템플릿 엔진인 jinja2를 적용하여 완성해야 하는 부분도 있어서 ajax 대신에 jinja2를 이용해서 구현했다.

서버에서 가져온 데이터를 ajax로 받는 것이 아니라 템플릿을 사용하여 바로 html에 적용시킬 수 있었다.

문법은 간단해서 익히는데 어렵진 않았는데 문제는 기획하면서 사용자가 카테고리를 선택하면 카테고리에 포함된 꽃들이 나와야하는데 아무리 생각해도 현재 실력에서는 jinja2로는 구현이 어려울 것 같았다.

예상한 흐름은 대충 이러한 방식이었다.

 - 사용자(클라이언트)가 카테고리 선택시 그 값을 서버로 보내줌

 - 서버에서 카테고리 별로 정렬하여 응답

 - 클라이언트에서는 정렬된 카테고리를 받아 화면에 노출

몇 번의 시도 끝에 서버에서 받아온 대로 값은 바뀌지만 화면은 계속 그대로였기에 결국 포기하고 ajax를 사용해서 구현했다.

jinja2는 아마 다시는 쓸 일이 없을 것 같지만 좀 더 고민해서 해결했으면 좋았을껄 하는 아쉬움이 남았다.