LOFS(감정 일기) 만들기

Gorae·2021년 10월 11일
0

스몰 프로젝트

목록 보기
8/9
post-thumbnail

LOFS(lake of feelings) Project

1. 목표

  1. 리액트로 프로젝트 만들어서 배포까지 완료하기
  2. 강의에서 배운 내용 활용하면서, 리액트 확실하게 이해하기

2. 계획

  • 화면 계획 이미지
  • 계획표( + 실천)

3. 프로젝트 진행 기록

  • 10월 6일
    • ‘마담 프루스트의 비밀 정원’ 이라는 영화를 보면 “나쁜 감정들은 행복의 홍수 속에 가라앉도록”이라는 말이 나온다(정확하지는 않다). 영화를 감명깊게 본 친구가 해 준 이야긴데, 나쁜 감정들과 좋은 감정들이 호수 속에 나타나는 걸 시각적으로 보여주는 감정 일기를 만들면 좋겠다는 생각을 했다. CSS 로 물의 흔들림도 표현할 수 있으면 좋을 것이다.
  • 10월 7일
    • firebase 로 구글 로그인 구현을 했고, 이메일 로그인은 좀 더 어려워 보여서 일단 뒤로 미뤘다.
  • 10월 8일
    • 5개의 감정 이모티콘 중에 하나를 선택하게 만들어야 했는데, ul, li 로 구현했다가 다중 선택이 가능하다는 것을 깨닫고, 하나만 선택하게 만드는 html 의 input type radio 를 사용하여 다시 만들었다. radio 버튼을 삭제하는 방법을 찾으려고 한참 구글링을 했는데, 또 다중 선택이 돼서 허무했다! 결국 선택지를 넣은 배열 리스트 select를 만들어, 맨 마지막 요소를 선택하도록 구현했다.
  • 10월 9일
    • 감정의 종류별로 위치를 다르게 표시해야 하는데, 하나의 컴포넌트에 emotions를 한꺼번에 받아와서 다르게 배치하는 것이 어려웠다. 수많은 시도 끝에, write 화면과 lake 화면을 home 이라는 한 화면에 표기하기로 했다.
    • 호수에 나타난 감정을 클릭하면 ‘/:id’ 루트의 디테일 페이지로 이동하게 되는데, 이 과정에서 에러가 나 한참을 헤맸다. 찾아보니 랜더링 되기 전에 undefined 데이터를 렌더링 하게 동작해서 에러가 난 듯 했다.
      컴포넌트에서 props를 받아와야 한다면, props 의 유무를 체크해주는 것으로 일단 해결했다. emotions 배열을 받아와야 한다면 emotions && emotions.length>0 이란 조건을 추가해줬고, history 의 state를 받아오는 부분에서 historyState = history?.location?.state 변수를 추가했다.
    • 로그인하지 않는 유저가 home 화면으로 갈 수 없게 만들었다. home 화면에서 user 유무를 체크한다.
  • 10월 10일
    • firebase Realtime DB 를 써서 유저의 데이터가 보관되도록 했다.
    • input 에 텍스트를 쓰지 않거나, emotion 을 선택하지 않은 채로 createEmotion 을 할 수 없도록 했다.(DB에도 마찬가지)
    • CSS를 전체적으로 수정했다. 물결 흐름을 표현하는 CSS 를 구현한다고 시간을 꽤 썼다. 하지만 이 프로젝트의 핵심 컨셉이기 때문에 포기할 수 없었다!
    • 이메일 로그인 구현을 남겨두고, netlify 배포를 하여 확인했다. 개발 단계에서는 잘 나타나던 부분들이 배포를 해보면 허점이 드러난다. lake 가 잘려서 나오는데 아직 원인을 찾지 못했다.
    • 모바일 로그인이 가끔 에러가 나는데, 원인을 찾아야 한다.
  • 10월 11일
    • 모바일 로그인 에러는 웹 인증 코드로 ios, android 에서 인증하려고 하면 나타나는 오류였다. 새로 코드를 작성해서 구현해야 하는데, 웹에서 정상 동작하는 것으로 일단락지었다.
    • 모바일에서 lake 가 잘려 나오는 것을 해결하고자 lake 를 한번 더 감싸서 너비, 높이를 지정했으나, 여전히 해결하지 못했다.
    • 유튜브 클론 프로젝트를 마무리하면서, 끝낸 후에 다시 시도해 볼 예정이다.
  • (+추가) 10월 12일
    • lake 가 잘려 나오는 에러를 해결했다..! 높이 지정의 문제인가 싶어 어제 새벽까지 CSS를 수정했는데, 아이패드 가로 화면에서도 lake 가 잘려 나오는 것을 보면서 크기의 문제가 아니겠다고 판단할 수 있었다.
    • 물결을 표현하는 부분에서 overflow:hidden 이 적용되지 않는 에러라고 생각해서 구글링 했더니, 같은 사례를 바로 찾을 수 있었다. "overflow:hidden" 이 적용된 속성을 "쌓임 맥락"에 넣어줌으로써 해결할 수 있는 버그였다!

4. 구현 화면


5. 배운 점

  • CSS
    • text 줄바꿈은 word-break : break-all;
    • 물결 표현 CSS는 div 박스를 기준 박스 크기보다 훨씬 크게 만들어서 rotate 시키면 된다. 물결 모양은 border-radius 를 40에서 50 사이로 두면 자연스럽게 표현 가능. 기준 박스에 overflow:hidden 적용하면 됨.
    • 쌓임 맥락을 활용할 수 있다.
  • Tools
    • git 에서 브랜치 변경하기
      • git checkout “브랜치명”
profile
좋은 개발자, 좋은 사람

0개의 댓글