개발일지/프로젝트 (9) 썸네일형 리스트형 [4주 프로젝트] 4. 프로토타입 작성 이번에는 와이어프레임을 바탕으로 프로토타입을 작성하였다. 우리 팀은 시중에 나와있는 여러 툴 중, miro를 사용하였다. 좋은 프로토타입 작성 무료 툴들이 많지만, 그 중 miro는 2주 프로젝트를 할때 사용하여 손에 익었기도 하고, 매우 조작하기 편해서 이번에도 그대로 사용하였다. 프로토타입은 와이어프레임과 다르게 디자인적 요소도 들어가고 실제 웹사이트와 흡사하게 만들어야하므로 더 디테일한 부분들을 팀원들과 정하였다. 1/ 로고 와이어프레임을 짜면서 서비스 이름도 같이 정하였는데, 팀원들이 낸 여러 후보들 중 '아팡'이 제일 눈에띄고 입에 잘 붙어 '아팡'으로 정하였다. (정말 아이디어는 자유로운 분위기에서 툭툭 던지는 것들 중 괜찮은 것이 많이 나온다..) 우리 서비스 이름인 '아팡'로고를 한글로 하.. [4주 프로젝트] 3. DB Schema 작성 와이어프레임을 작성하면서 웹 서비스에 넣을 기능들을 생각했고, 그걸 바탕으로 팀원들과 DB 스키마를 작성하였다. 2주 프로젝트에서도 DB스키마를 작성할 때 참여는 하였지만, 어떻게 DB스키마를 작성하는지 감이 잘 오지 않아 적극적으로 의견을 내기보다는 팀원들이 하는걸 보고 이해하는 정도였다. 2주 프로젝트때 이해한 걸 바탕으로 이번 4주프로젝트에서는 DB스키마를 작성하는데 적극적으로 의견을 내고 툴을 사용하여 직접 작성하였다. 참고로, 사용한 툴은 dbdiagram.io이다. (정말 편하고, 이런 툴을 무료로 사용할 수 있음에 너무나도 감사하다!) https://dbdiagram.io/home dbdiagram.io - Database Relationship Diagrams Design Tool dbdi.. [4주 프로젝트] 2. 와이어프레임 작성 프로젝트 아이디어를 선정한 후, 웹어플리케이션의 전체적인 레이아웃과 기능들을 팀원들과 논의하기위해 와이어프레임을 작성하였다. 와이어프레임 작성 툴 중, 우리팀은 figma를 이용하였다. https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 처음에는 와이어프레임 / 프로토타입 개념을 혼동하였다. 실제 실무에서는 두 개념을 같이 사용한다고 하지만, 그래도 정확하게 아는게 좋을 것 같아 찾아보았다. 나같은 사람이 있을 수도 있으니 간단.. [4주 프로젝트] 1. 프로젝트 아이디어 기획 프로젝트를 진행함에 있어 가장 먼저 해야 하면서도 가장 힘든 건 프로젝트 주제를 선정하는 것이었다. 우리팀은 아이디어 회의를 하는데만 2일 이상이 걸렸고, 중간에 한번 주제를 변경하기도 했다. 팀원들과 아이디어 회의 전날, 각자 간단하게라도 몇개 생각해오기로 하였다. 어떤 걸로 웹사이트를 만들면 좋을까, 고민하다가 내가 경험한 것 중에 평소 있었으면 좋겠다고 생각한 서비스, 일상생활에서 불편함을 느꼈던 부분 등을 먼저 생각해보았다. 아무래도 실제 내가 불편함을 느꼈던 걸 주제로 프로젝트를 진행하면 훨씬 열정적으로, 재미있게 할 수 있을것 같았다. 최근 내가 겪었던 문제들, 불편한점들을 쭉 나열해보았다. 내가 생각해낸 아이디어들은 다음과 같다. 1. 아파트 혹은 오피스텔 입주민간의 커뮤니티 서비스 : 최근.. [4주 프로젝트] 4주차. 2022. 01. 20. 목요일 AWS 개념이 부족하다보니 에러가 나도 왜 이게 에러가 나는지도 잘 모르겠고 어느 부분이 문제인지도 잘 모르겠다. 프로젝트 끝나고 AWS에 대해 공부를 좀 해야겠다. 배포에 대해 공부를 좀 다시 제대로 해야겠다. HTTPS 인증을 위해서는 AWS 어떻게 하는지도 다시 공부 좀 해야겠다. [4주 프로젝트] 4주차. 2022.01.19. 수요일 [오늘 구현한 것] - Review 영수증 또는 리뷰내용을 작성하지 않으면 alert창 뜨도록 하기 : 이건 server쪽에서 res.status이렇게 주지않고, res.send({status:400}) 이렇게 준 다음, 클라이언트 단에서 if문으로 res.data.status === 400 이면, 이렇게 하면 된다. 또 하나 공부를 하게 되었다. - 탈퇴유저도 계속 Kakao로 나오는 것 고치기 : 이건 고친 줄 알았는데 아니었다. 카카오 로그인 시, auth === 4로 주고 했는데 작동이 안되었다. 내일 다시 봐야겠다. - 카카오 유저도 회원정보 나오게 수정 : 어차피 카카오 유저는 회원정보를 수정하지 못하니 안나오도록 삼항연산자를 이용하여 안보이게 했는데 아무래도 안나오는것 보다는 나오되, 수정을.. [2주 프로젝트] D+7 - 프론트엔드 코드 작성 2021. 12. 19. 일. [오늘 구현한 것] - 상품등록페이지 모달화시키기 : 예전에 Styled-Component를 공부하면서 배운 모달 코드를 보고 복습하였다. - 로고를 클릭하면 처음 랜딩 페이지로 돌아가도록 하는것 구현 : React에서 navigate 함수 사용. 지난번에 공부할때는 useHistory 함수를 사용하여 그대로 사용했더니 계속 에러가 발생하였다. 에러를 찬찬히 읽어보니 version 6부터는 사용하지 않는다는 내용. useHistory가 아닌 navigate를 사용해야한다. - list 데이터를 props로 어떻게 가져오는지 연구. - 오후 2시부터 같은 프론트엔드 팀원과 회의를 하였다. 로직이 꼬이는 부분이 있어 내일 팀원들과 전체적으로 다시 회의를 해야할 듯하다. [느낀 .. [2주 프로젝트] D+2 기획단계 2021. 12. 14. Tue. 지금까지의 Section 1, 2, 3는 코드가 적혀 있는 파일에 나의 코드를 추가를 하여 끼워넣는 방식이었다면, 프로젝트는 아무것도 적혀 있지 않은 상태에서 코드를 작성하는 것이다. 0에서부터 시작하려고 하니 처음에는 굉장히 막막하였다. 내가 과연 프로젝트를 할 수 있을까, 눈앞이 캄캄하고 자신감이 떨어졌다. 그래도 팀원들 덕분에 이런 저런 아이디어를 얻었고, 이전 기수분들 프로젝트를 여러개 찾아보았다. [오늘 한 일] schema 작성 와이어 프레임 추가 node, npm 버전 팀원들과 맞추기 node -v : 16.13.0 npm -v : 8.3으로 맞추기 gitbook으로 API 작성 [잘한 일] 팀원들과 커뮤니케이션을 잘하고 있다. 모르는 점이 있더라도 끝까지 .. 이전 1 2 다음
