2022년 04월 회고: 스파르타코딩클럽 수료식!

[1주차] 04.01(금) ~ 04.03(일)

 

 

				04.01 (금)	04.02 (토)	04.03 (일)
				팀 프로젝트 파이널 (30)	팀 프로젝트 파이널 (31)	팀 프로젝트 파이널 (32)
				만우절 파티

 

후기

  4월 1일(금)  

 

다들 이번주에 계속 밤을 새서 오늘은 조금 쉬면서 진행했다. 19시에 게더타운에서 만우절 파티라고 미니 퀴즈대회가 있었다. 그동안 고생하신 매니저님, 튜터님들과 함께 참여하면서 이번주를 마무리할 수 있었다. (나중에 확인하니까 상품을 받게 됐다~ 야호~)

 

 

---

[2주차] 04.04(월) ~ 04.10(일)

 

 

04.04 (월)	04.05 (화)	04.06 (수)	04.07 (목)	04.08 (금)	04.09 (토)	04.10 (일)
팀 프로젝트 파이널 (33)	팀 프로젝트 파이널 (34)	팀 프로젝트 파이널 (35)	팀 프로젝트 파이널 (36)	팀 프로젝트 파이널 (37)	팀 프로젝트 파이널 (38)	팀 프로젝트 파이널 (39)

 

후기

  4월 4일(월)  

 

데스크탑 버전의 마이페이지, 프로필 수정 페이지를 만들었다. 우리 팀의 메인페이지는 핀터레스트처럼 mansory 레이아웃이라 창의 크기에 따라 column의 개수를 조절했다. 일단 내 컴퓨터에서 다 만들고 다른 팀원 분들 컴퓨터에서 실행해봤는데, 아무래도 화면 크기가 작은 노트북에서 작업하다보니 다른 분들은 화면 비율이 잘 맞지 않는 일이 생겼다. 주로 vw, vh 보다는 px를 많이 사용했는데 그래서 그런지 화면의 크기에 따라 레이아웃이 다르게 보였다. 우선 피그마에서 구상한대로 모든 페이지가 완성되었으니, 차차 세부사항을 수정해야겠다.

 

오늘 팀원 한 분이 전날 새벽에 열이 39도까지 오르는 바람에 약간 늦게 오셨다. 다른 조에서도 팀원끼리 돌아가면서 코로나가 확진되어서 와이파이로 전염되는게 아니냐는 말을 들었는데, 정말 사실이 아닐까 생각될 정도로 게더 타운에도 많은 분이 확진되었다. 비대면이어서 다행인 점은 확진자도 참여할 수 있다는 점일까? 그래도 건강이 우선이다.

 

 

  4월 5일(화) ~ 4월 8일(금)  

 

내가 맡았던 데스크탑 버전 프론트엔드는 얼추 마무리 되었다. 맨 처음에 피그마로 계획했던 것과 비슷하게 나온 것 같다. 물론 실제로 구현해보면서 어색한 부분들은 팀원들의 의견을 듣고 수정했다. 이번 주는 실제 사용자들의 의견을 듣고 피드백하는 기간이었다. 피드백에서 나온 의견들은 다음과 같다.

 

그 전에 내 AWS 계정으로 만든 S3가 배포 당일날, AWS 키 유출로 정지되었다. 복구까지 시간이 걸릴 것 같아서 일단 다른 분의 AWS 계정으로 옮겼는데, 그 사이에 피드백이 진행되어서 이미지나 CSS 에러에 대한 내용이 많았다. (그래서 그 부분은 제외함.) 중간 에러로 장시간동안 구글폼을 열어두지 않았음에도, 총 38명의 소중한 의견을 받을 수 있었다.

 

좋았던 점

 

• 사이트가 전체적으로 심플, 깔끔함.
• 실시간 사용자 위치에 맞는 온도를 받아서 패션을 추천하는 점.
• 커뮤니티 페이지가 잘 구성되었음.
• 컨텐츠 피드마다 댓글 기능이 잘 구성되었음.
• 아이콘을 이용해 직관적으로 구현하였음.
• register, login 프론트가 버벅거리지 않고, UI/UX가 컨셉과 맞게 잘 구현되었음.
• 피드 업로드나 유저정보 기능 제외하고는 로그인 없이 볼 수 있어 많은 사용자들이 사용하기 좋음.
• 북마크 기능으로 마음에 드는 패션을 볼 수 있어 좋음.
• 사이트 속도가 빠름.
• 업로드하고 댓글을 달 수 있는 SNS 기능이 잘 구현되었음.

 

개선해야할 점

 

• 회원가입-로그인 할 때 엔터키 적용되면 좋겠음.
• 추천된 패션의 성별, 스타일, 코디 설명, 쇼핑 정보, 브랜드 등 자세한 정보가 필요함.
• 메인 피드의 포스팅을 날씨를 기준으로 카테고리화 하면 좋을 것 같음.
• 포스팅 디테일 컨테이너 크기가 상대적으로 작음.
• 사용자의 데이터(업로드한 게시물 정보, 패션 스타일, 유저 기본정보 등)으로 추천 필요함.
• 비밀번호 찾기 기능이 되지 않음. (CSRF 에러)
• 게시글 삭제, 북마크 기능에도 cursor: pointer; 넣어주기.
• 메인페이지의 무한스크롤 기능 사용시 로딩 관련 표시 넣어주기.
• 닉네임 중복 방지하기.
• 회원가입 시 input 박스를 나와 다른 곳을 클릭해야 예외처리 메시지 확인 가능함.
• 날씨에 따른 추천 스타일에 중복이 많음.
• 옷차림 추천서비스에서 제공 의상 예시가 너무 외국 패션피플들이라 직접적인 참고가 어려움.
• 처음 사용하는 유저들을 위한 도움말이 있으면 좋겠음.

 

다들 엄청 자세하게 써주셔서 감사했다. 확실히 서비스를 처음 접하는 사용자의 입장에서는 당연하다고 생각하는 것들을 미처 고려하지 못했던 것 같다. 아무래도 시간 관계상 모든 점을 완벽히 수정할 수는 없겠지만, 개선된 사용자 경험을 위해 다시 구현해봐야겠다. 더불어 우리 팀을 소개하는 멤버 페이지도 새롭게 넣어서 추가해야겠다. 

 

 

---

[3주차] 04.11(월) ~ 04.17(일)

 

 

04.11 (월)	04.12 (화)	04.13 (수)	04.14 (목)	04.15 (금)	04.16 (토)	04.17 (일)
팀 프로젝트 파이널 (40)	팀 프로젝트 파이널 (41)	이력서 피드백	모의면접	진짜 끝!
	최종 발표회	협력사 특강	수료생 특강
	이력서 특강

 

후기

전부 정리했는데 실수로 뒤로가기 버튼 눌러서 초기화 되었다. 휴 잊지말자 저장의 생활화! 어쨌든 드디어 과정이 끝났다! 지난 4개월동안 총 5개의 프로젝트를 진행했는데 이제 전반적인 웹 서비스 구현과정을 알 것 같다. 아직 많이 부족하지만 계속 쌓아가면 될 것 같다. 작년 12월의 나보다는 훨씬 많이 성장했다.

 

이번 최종 프로젝트에서는 전반적인 프론트엔드를 담당했었다. 아무래도 마지막 프로젝트이고 실제 사용자들에게 피드백 받는 시간이 있다보니, 사용자 입장에서 어떻게 하면 더 편하게 접근할 수 있을지 고민을 많이 했다. 최대한 직관적인 UI를 구현하고 싶어서 여러 참고 자료들을 참고하고, Figma로 설계했는데 거의 유사하게 결과물이 나왔다. 우리 프로젝트에는 랜딩페이지가 따로 구현되어있지 않아서 사용자가 최대한 직관적으로 이해할 수 있게 배치하려 했다. 백엔드와 프론트엔드를 연동하는 작업은 재미있었다. 하드코딩으로 임시 작성된 부분이 실제 유효한 데이터로 채워지는게 좋았다. 아래는 몇 번의 피드백을 받고 수정 완료해서 최종 구현한 페이지들이다. (멤버 페이지, 상세 페이지는 팀원들의 개인정보가 있어서 넣지 않았다.)

메인페이지

 

마이페이지

 

로그인페이지 / 뒤의 배경은 영상이다.

회원가입 페이지

 

업로드 페이지

 

날씨 페이지 / 위치정보를 받아서 추천 코디를 보여준다.

 

---

[4주차] 04.18(월) ~ 04.24(일)

 

후기

 

  4월 20일 (수)  

 

이번 주부터 함께 스파르타코딩클럽 내일배움캠프를 했던 동료 3명과 토이프로젝트를 만들어보기로 했다. 사실 실제로 모인 것은 바로 지난 주 수료식 전날이었다. 이번 주는 각자 모의면접이나 이력서를 작성하면서 마무리하기로 했다. 그 과정 속에서 서로 스스로가 부족하다고 느낀 부분들이 있는데, 이 프로젝트로 한번 채워보려고 한다. 매일 오전 10시에 회의가 있고, 알고리즘 스터디, 면접 CS 스터디도 같이 해보기로 했다. 알고리즘은 이번에 공부하게 되었는데 아직 백준 브론즈이다. 여기에는 새롭게 알게 된 점들만 적으려고 한다. 부지런히 해야지 화이팅~

 

오늘의 알고리즘

 

• python에서 input 대신 sys.stdin.readline() 사용하면 속도가 더 빠르다.
• 왜냐면 prompt message를 출력하지 않고 + rstrip()으로 입력받은 문자열의 개행문자를 삭제하지 않기 때문.
• list comprehension: 파이썬의 꽃
• 예시: [user["mail"] for user in users]
• print 정렬: .rjust(n): 전체 n 중 오른쪽 정렬, .ljust(n): 왼쪽 정렬, .center(n): 가운데 정렬
• 예시: print(stars.rjust(n))
• print 한 줄로 출력하기: print(1, end = " ")
• 백준 3052번:
• print 연속으로 입력받기: [int(sys.stdin.readline()) for i in range(10)]
• 백준 1065번:
• 숫자를 자릿수대로 분리: num = list(map(int, str(n)))

 

  4월 21일 (목)  

 

오늘의 알고리즘

 

• 백준 2941번: 크로아티아 알파벳
• 주어진 문자열이 포함된 것을 찾는 문제였는데, 굳이 각각 문자열이 포함된 개수를 구할 필요가 없었다.
• replace를 이용해서 '*'로 변경하면 간단하게 해결되었던 문제! 진짜 많이 돌고 돌아서 답을 구했다..
• 예시: for i in 리스트: / word = word.replace(i, '*')

 

  4월 22일 (금)  

 

오늘의 알고리즘

 

• 백준 2839번: 설탕 배달
• 이중반복문을 빠져나가려면 try, except 사용하자. 조건을 만족하면 NotImplementedError 발생하도록.
• 백준 10809번: 알파벳 찾기
• 배열의 원소들을 반복문 없이 한 줄에 출력하려면 print(*array) 사용하면 됨.

 

  4월 23일 (토)  

 

오늘의 알고리즘

 

• 백준 2908번: 상수
• 리스트를 거꾸로 출력하려면 [::-1] 이용하면 된다.
• 아니면 ''.join(map(str, list)) 사용해도 괜찮음.

 

---

[5주차] 04.25(월) ~ 04.30(토)

 

후기

 

  4월 27일 (수)  

 

바쁘게 지나간 1주일이었다. 알고리즘 공부를 부지런히 했다. 초반에는 풀지 못한 문제가 많은데, 크게 2가지 유형으로 나뉜다. 1) 파이썬 작성법을 모르는 경우, 2) 논리를 표현하지 못하는 경우. 그래도 이것저것 자료를 찾아보고 문서 들여다봤더니 지금 백준 실버 4등급이 되었다. 휴 이제는 난이도가 올라가서 한 문제 풀 때마다 기본으로 1시간은 소요되는 것 같다.

 

프로젝트 주제는 시간표 웹 서비스 구현이다. 지난 주와 이번 주 초에 기획 회의를 끝내서 기본적인 틀은 잡혔다. 팀원은 총 4명으로, 프론트엔드 2명, 백엔드 2명으로 구성되어있고, 사용할 스택은 각각 장고와 리액트이다. 리액트는 프론트엔드에서 필수적이라고 들었지만, 4명 다 접해본 적이 없어서 이번 주는 학습 기간으로 지정했다. Udemy의 React 강의를 수강하기로 했다. 나는 백엔드를 맡았기에 오늘 다른 팀원 분과 함께 AQuerytool로 간단한 DB 구조를 작성했다. 공통으로 각자 장고와 리액트 연동하는 강의를 듣고 오기로 했다. 내일 오전에도 화이팅~

 

  4월 28일 (목)  

 

오늘의 회의에서는 우리가 만든 repo에 장고, 리액트를 연동해서 만든 임시 프로젝트 파일을 올려두었다. 유튜브에 있는 튜토리얼 강의를 같이 봤는데, 리액트 문법이 최근에 전체적으로 변동되어서 오류가 나는 부분이 많았다. 끝난 뒤에는 알고리즘 풀이를 했는데 조금씩 난이도가 올라가고 있다. 이번주는 강의를 최대한 많이 듣고 복습해야겠다. 화이팅!

 

오늘의 알고리즘

 

• 백준 2447: 별 찍기 - 10
• 리스트를 개행문자를 이용해서 출력하기
• print('\n'.join(draw_stars(N))