[WIL]항해99 1주차 미니 프로젝트 회고록

항해 99 부트캠프 시작

1주차 미니 프로젝트 (11.1월 ~11.5금 총 5일간)

미니 프로젝트

1일차에는 항해99의 OT를 시작하고 정해진 팀에 들어가 팀원분들과 인사를 나누고

1주차 미니 프로젝트를 시작하기 앞서 어떤 주제로 미니 프로젝트를 진행할지에 대해서

대화를 나눈 뒤 카페에 갔을 때 본인이 원하는 곡이나, 카페에 갔을 때 이 노래가 좋았다는

리뷰 같은 것을 작성할 수 있는 웹 페이지를 만들기로했다.

각자 맡은 역할을 분업을 했는데, 내가 맡은 페이지는 회원가입 페이지다.

회원가입 페이지를 구현하기 하기 위해서는

1. 아이디, 비밀번호, 유저이름 데이터에 저장
2. 아이디 중복확인
3. 비밀번호 확인
4. 회원가입 완료 후 alert 띄운 후 로그인페이지로 가기

이 네가지를 구현하기 위해서 우선 front쪽 작업에 bulma라는 CSS프레임워크를 사용을 했다.

bulma에서 박스를 가져오고, 아이디와 비밀번호 그리고 유저이름까지 적을 수 있는 form을 가지고 왔다.

그렇게해서 틀을 잡는 작업을 마치고, 이제 back에서 API를 클라이언트랑 연결시켜주는 작업을 시작했다.

우선 DB에 담는 비밀번호를 저장하기 위해서 암호화를 'hash'를 이용했고, 이름, 비밀번호, 아이디의

변수를 적어서 클라이언트로 돌아와 서버와 연결을 시켜주기위해 Javascript중 Ajax 콜을 하기 위해

회원가입에 필요한 코드를 자신있게 적어나갔지만, 웹 페이지에서 테스트로 실행해보니 중복확인이 되질 않았다...

다시 넘어와서 혹시 오타는 있는지 보다가 id값을 잘못 입력해서 생긴 오류였고,

수정한 결과 중복확인이 제대로 작동되는 것을 확인하고 회원가입 완료까지 버튼으로 저장을 한 뒤

alert이 잘 작동 되는 것 까지 확인을 했다. 이제 DB에 회원가입 정보가 잘 저장이 되었는지 확인을

해본 결과 잘 저장이 돼서 비밀번호 암호화까지 잘 구현이 되는 것 까지 확인을 완료했다.

완료 후에 팀원 한 분께서 양이 많아져서 제출 날까지 못 맞출것 같아서 완료 한 사람들은 도와주기로 했다.

그 중 나는 메인페이지중 정보를 적어서 저장한 뒤 빈칸에 정보가 들어있는 카드가 보여지게

Jinja2라는 템플릿 언어를 이용해서 수정 작업을 해주는 것이었다.

우선은 script태그 안에 있는 Ajax 콜을 했던 것을 주석 처리를 해주고 작업을 시작했다.

jinja2는 굳이 script태그 안에서 for문이나 if문을 안돌려줘도 body태그 안에서도

돌려줄 수 있는 것으로 기억해서

 

<div class="card-columns" id='cafes-box'>
            {% for info in info %}
                    {% if true %}
                        <img class="card-img-top" id="info-img" src="{{ url_for('static', filename=info.file) }}"
                             alt="Card image cap">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title" id="info-name">{{ info.name }}</h5>
                        <p class="card-text" id="info-station">{{ info.station }}</p>
                        <button type="button" class="btn btn-warning">상세페이지</button>
                        <button onclick="like_posting()" type="button" class="btn btn-danger">즐찾버튼(하트) FA사용?</button>
                    </div>
                </div>
            {% endfor %}

        </div>

를 사용해서 반복문과 조건문을 사용해줬다.

처음에는 이미지를 첨부해서 넣을 때 넣은 사진으로 다 다르게 카드르 띄우게끔 해주고 싶었는데

안돼서 여러방법을 시도를 해봤지만 계속 안돼서 이 문제를 가지고 2시간정도 있었던 것 같다.

그래서 검색의 힘을 빌려 구글링을 해본 뒤 실행이 되지 않는 동적 이미지를 구현을 할 수 있었다.

별 기대를 안했는데 정보들을 입력해서 저장버튼을 누른 뒤 원하는 사진과 정보들이 카드안에 담겨져 나오는 것을

확인할 수 있었다... 이때 뭔가 대단한건 아닐 수도 있겠지만 개발에 발을 막 담구기 시작한 나는

대단한 것을 구현해낸거 마냥 엄청 좋아했다. 완료가 됐으니 DB에 저장되어있는 것을 확인했고

우리 팀은 github를 통해서 본인들이 했던 코드를 취합해서 서버 배포를 해서 작동들을 구현해보고

미니 프로젝트를 시간안에 제출을 할 수 있었다.

프로젝트 회고

항해99처음 합류하자마자 1주차 부터 프로젝트를 진행했다. 처음에는 다들 어떻게하지 하다가

그래도 해야하니까 투박하게 진행을 하면서 구현이 안되는 것을 겪고, 계속 안되니까 허탈했다.

하지만 제출 시간이 다가오니까 다들 열심히 구글링하고 강의 영상을 참고를 해가며

원하는 모습들을 구현해 나가는 모습을 보니 우리가 정말 성장을 해나간다는 생각이 몸으로 느껴졌다.

얼른 나도 실무에 투입할 수 있는 사람이 되어 내가 원하는 서비스를 구현해보고 싶다.