WEEK 0주차 개발일지: 프로젝트 시작과 주요 결정사항
프로젝트 개요
WEEK 0주차에는 웹 개발을 진행하는데, 프론트는 HTML, CSS, JS 및 jQuery 백엔드는 Flask를 활용하여 프로젝트를 구현하는 것이 미션이었습니다. 3일안에 배포까지 완성된 상태로 발표를 진행해야했문에,범위를 최대한으로 줄여서 기획을 잡았다. 0순위를 배포 완료로 잡으라고 당부하시기도 했다.
(프로젝트의 핵심조건은 jinja2로 서버사이드렌더링 구현과 함께 회원가입 기능을 포함시키는 것)
프로젝트 범위 및 기획
Swjungle멤버끼리 물건을 빌려주기 위한 모바일 웹이었고, 공유한다는 의미에서 ShareJungle이라는 이름의 프로젝트를 기획하고 개발에 착수했다. (나는 프론트엔드 개발을 맡았다.)
개발 중간부터 들었던 생각이지만 이게 단기프로젝트이지만 개선했을때 정말로 사용될 수 있는 여지가 있는 사이트였으면 정말 좋았을 것 같다는 생각이 들었다. 시간이 부족할 것 같아서 빠르게 개발을 진행하려다보니 좀 뻔하면서, 실용성없는 프로젝트로 기획이 된 것 같은게 너무 아쉽다.
와이어프레임
중간 보고를 위한 와이어프레임을 빠르게 구성했습니다. 빠르게 구현할 수 있도록 페이지를 최소화했고, 회원관련 2페이지 (로그인,회원가입), 기능관련 3페이지로 총 5개의 페이지로 이루어져있습니다.
서버사이드 렌더링과 jinja2
요구 사항에 따라, Jinja2를 활용한 서버사이드 렌더링을 구현했습니다. 서버에서 데이터를 받아온 뒤, 클라이언트로 데이터를 동적으로 전송하는 것이다.
아래는 예시코드인데, 예시 페이지에서는 다음과 같이 사용자에게 메시지를 전달할 수 있습니다
@app.route('/example')
def example():
return render_template('example.html', message="EXAMPLE MESSAGE")HTML 내부에서는 다음과 같이 {{변수명}}을 사용하여 메시지를 표시할 수 있다.
<h1>{{ message }}</h1>
프론트엔드 개발
프론트엔드 개발에는 사용된 주요 라이브러리
- SweetAlert2: 간단한 코드로 아름다운 경고 모달 창을 구현할 수 있습니다.
- TailwindCSS: 클래스 이름을 사용하여 빠르고 간편하게 스타일을 적용할 수 있습니다.
- SwiperJs: 글목록화면에서 Swipe로 넘길 수 있게끔 Carousel을 구현해줄 때 사용하였습니다.
회고
프로젝트가 끝나고 나서 보다 개선된 사이트 아이디어가 생각났는데, 여유가 생긴다면, 해당 아이디어를 개발하고 개발일지를 처음부터 체계적으로 작성하는 것도 스스로에게 공부가 많이 될 것 같다는 생각이 들었다.
