Study/스파르타코딩(왕초보 시작반)

스파르타 메이킹 후기

maino77 2022. 2. 26. 21:27

저녁 10시부터 새벽 3~4시까지 회의를 진행하다보니 이번 스파르타 메이킹 일지를 매일 작성하지 못한 것이 아쉽습니다.

그래도 이번 메이킹도 무사히 마칠 수 있어 다행이라고 생각합니다.

처음에 8명정도 되는 인원이서 시작했는데 3분이 사정으로 나가시고 중간에 들어오신 분도 결국 나셔서서 5명이서 진행하게 된 프로젝트였습니다.

 

모두들 배운지 얼마 되지 않아서 내가 할 수 있을까? 하고 걱정을 많이 했지만 검색과 노력으로 커버하여 결국 만들고 싶었던 기능들을 전부 구현해낼 수 있었습니다.

 

프로젝트에 보완해야할 부분이 없는 것은 아니지만 그래도 여러가지 사정을 고려해보았을 때 이 정도면 충분히 잘 해냈다고 생각합니다.

 

메인 페이지 옷차림
옷차림, 도시, 이모티콘이 바뀐 모습
대전에 비가 내려 배경이 바뀐 모습, 로그인해서 문구도 바뀌었다

저희 웹 페이지는 크게 3페이지로 나누어져 있습니다.

그 중 옷차림 페이지는 openweathermap api를 활용하여 정보를 받아온 뒤 조건문에 따라 변화를 주고 있습니다.

왼쪽 하단이 현재 위치의 온도, 도시, 이모티콘을 보여줍니다.

그리고 배경은 맑음, 흐림, 눈, 비에 따라서 바뀌도록 설정했습니다.

오른쪽 현위치는 select태그를 이용해서 현위치 외에도 다른 도시들을 선택해 확인할 수 있도록 만들었습니다.

아래 옷그림은 기온에 따라 추천하는 옷이 바뀌며 아래 문구도 변경됩니다. 그리고 로그인하게 된다면 닉네임이 문구에 더해집니다.

현재 시간과 요일을 알 수 있으며 날씨에 대한 자세한 정보를 아래 보여주고 있습니다.

이야기 페이지 로그인 전
이야기 페이지 로그인 후

여기는 이야기 페이지로 자신의 도시와 날씨를 적어 간단하게 스몰토크를 할 수 있는 페이지 입니다. 보신 것처럼 로그인을 해야 입력할 수 있게 만들었습니다.

 

로그인 페이지

로그인 페이지의 배경은 저희 팀의 로고입니다. 저 페이지가 데이터를 불러올 때 로딩 페이지로 사용되기도 합니다.

간단하게 아이디와 비밀번호를 입력해 로그인하며 소셜로그인 기능도 구현하였습니다.

로그인할 때 hash를 사용하였고 jwt를 사용하여 보안에 신경을 썼습니다.

그리고 소셜로그인은 저희의 프로젝트 기간 중 1주일이나 걸린 노력의 결과입니다. 전부가 달려들어 열심히 검색, 실험, 에러, 집념을 쏟아넣은 결과 해낼 수 있었습니다.

 

회원가입 페이지

회원가입 페이지는 단순해보이지만 유효성검사를 통해 주어진 조건이 맞지 않으면 아래 비밀번호 input의 아래 글처럼 떠오르게 만들어보았습니다. 그리고 만족시키면 올바른 아이디, 닉네임, 비밀번호라고 뜨게 됩니다.

이렇게해서 회원가입을 하고 로그인하면 저희의 이야기 페이지를 사용할 수 있습니다.

 

 

2주라는 기간이 결코 짧지 않은데 짧게 느껴질 정도로 바빴던 것 같습니다. 실제로 바빴구요. 이런저런 일들이 많았습니다. 그럼에도 불구하고 프로젝트를 끝마칠 수 있었던 것은 팀원들 덕분이지요.

정말 좋은 분위기, 포기하지 않는 노력, 팀워크 등 좋은 사람들과 함께 할 수 있어서 좋았습니다.

 

개인적으로도 이번 프로젝트를 만족스러운데 그 이유는 제가 코딩을 배우기 시작한지 5달 정도 되었을때 이 페이지를 만들려다가 접은 기억이 있습니다.

api로 이모티콘을 어떻게 불러오는지 몰라서 그만 두었습니다. 그리고 이런 저런 기능을 생각해보니 당시 실력으로 무리라는 생각도 들었구요.

그랬던 제가 지금와서 그 프로젝트를 완성시키니 감회가 새롭습니다.

 

제가 공부한 것이 그래도 이정도는 해낼 수 있구나는 생각이 들더라구요.

 

보람찬 2주를 만들어줘서 좋았습니다, 재밌었습니다, 감사합니다.

팀원분들, 튜터님, 스파르타 코딩.

 

 

개발일지 첨부

https://www.notion.so/3-5e5e6088d6524e90a76d8e28419d49a0

728x90