POMOTODO(11)

진행상황은 깃허브에 매일매일 기록하고 있습니다.

https://github.com/coqoa/PoMoToDo-

---

---

2021.12.20~ 2021.12.28

 

1. 해결한 문제점들

 

  - 모바일 환경에서 출력 안되던 문자 교체

     : 회원가입 유효성 체크할 때 모바일 환경에서 문자가 이상하게 출력되던 문제가 발생

     ->  맥북 특수문자여서 모바일화면에서는 안보였었음, 교체를 통해 해결

  - 전체컬러변경

     : 출력기기마다 컬러가 다르게 출력되는데 모바일에서는 파랑과 초록이 돋보여서

       물빠진 청바지색으로 출력되는 문제

     -> 컬러변경해서 해결

  - 반응형 디자인 수정

     : 모바일 / 태블릿 / 컴퓨터로 나눠서 반응형디자인 수정

 

2. 수정한 코드

  - css에서 각 요소마다 컬러를 넣었는데 컬러변수화를 통해 유지보수가 쉽도록 변경

  - 모달창이 나왔을때 모달창 외부 클릭시 모달창이 닫히도록 구현

 

3. 구현한 코드

  - 사용자가 접속하면 로그인 상태에 따라 다른화면 보여지도록 구현

   : 기존에는 변수를 통해 사용자의 정보를 db에서 조회하고 화면에 출력하도록 했는데

     전역변수라서 다른사용자에도 영향을 미치는 문제가 있었음, 

    -> 세션을 체크해서 세션ID를 바탕으로 회원화면과 비회원 화면을 구분해서 출력하고

         회원정보를 불러오도록 구현

  

- 크롬확장프로그램 개발

    원래는 팝업창을 열면 모바일화면으로 보이게 할 생각이였는데?

    2가지 문제가 발생

      1. 팝업창을 닫으면 pomodoro timer가 기록이 안남은채 초기화되던 문제

         -> 해결하기위해  timer를 서버사이드에서 처리하려고 했으나 서버사이드에서는

              dom을 사용할 수 없어서 보류

      2. ejs템플릿을 사용하고있는데 popup창에서는 html을 사용해야해서 서버로부터

          정보를 받아서 출력하는 부분을 못했음

    그래서 확장프로그램 기획을 바꿨음 

    (확장프로그램 momentum에서 아이디어 얻었음)

    확장프로그램을 설치하면 크롬에서 새탭버튼 누르면 뜨도록 구현

    사용자가 새탭을 누르는 경우는 검색을 하기 위함이기 때문에 검색창을 추가로 구현했음

    

  - 검색창 구현

     '/', '/record'요청시 검색창이 뜨면서 포커스해줌

     focus가 풀리면 검색창의 display를 none으로 바꿔서 없애주고 돋보기버튼을 상단

     네비게이션 바에 출력

     돋보기를 누르거나  shift + enter를 누르면 검색창 다시 뜨도록 구현

     검색어 입력시 새창으로 검색결과 출력하도록 구현

검색창 display:none;

 

 

4. aws관련

  - 고정ip사용하도록 변경

 

다음주 목표

  - DNS연동

  - 파비콘

  - 기능 체크 후 배포

  - what is POMOTODO 문저 작성 & 연결