baebae
424
2021-03-18 22:13:28 작성 2021-03-18 22:14:35 수정됨
19
7281

프로젝트하나 만들어봤는데 어떤지 봐주실 수 있으신가요?


안녕하세요. 프론트엔드 취준생입니다.


코로나 통계 사이트입니다.

프론트(react) + 백엔드(express) 호스팅은 netlify + heroku 두가지로 호스팅 하고있습니다.

간단히 적어보면

1. 국내

        - 종합 데이터

        - 시도별 데이터

2. 해외

        - 해외 종합데이터 

        - 주변국가 (일본 미국 러시아 중국 + 한국) 데이터

3. 국내 백신 접종센터 위치정보 제공

4. 네이버 & 다음 '코로나 백신' 키워드 검색 문서

등의 정보를 여러 api를 통해 제공하고있으며 모바일, 타블렛, 데스크탑 버전의 반응형으로 만들었습니다.

(* css 프레임워크는 사용하지 않았으며 전처리기는 postCSS를 사용중입니다.)

사실 백엔드에서의 기능적인 부분이 없긴하지만

그래도 제가 미처 발견하지못한 버그같은 부분이 있을까 싶어서 한번 올려봅니다.


https://project-goc.netlify.app/


+ 제가 발견한 버그는

타블렛, 모바일 버전에서는 burger menu로 메뉴가 숨겨지는데 피씨버전에서는 그냥 투명하게보이는데

모바일 버전에서는 제대로 glass효과가 나오고 있습니다.


감사합니다.

12
10
  • 댓글 19

  • 이게뭔가싶다
    771
    2021-03-18 22:23:40

    좀더 일찍 만드시지 그랬어요

    작년에 만드셨으면 대박쳤을텐데

    이미 중학생들이 먼저만들어가지고 ㅜ 

    -1
  • 고양이용사
    110
    2021-03-18 22:23:45

    와 잘만드셨네요!

  • baebae
    424
    2021-03-18 22:27:51
  • 레아르
    103
    2021-03-18 23:34:39

    좋은 사이트네요. 타이밍이 아쉽습니다 ㅎㅎ

    물론 저런 다양한 API들이 그 당시엔 없었을테지만

    아쉬운건 디자인이네요 ㅠㅠ

  • baebae
    424
    2021-03-18 23:46:00
  • 장독깨기
    3k
    2021-03-19 05:00:36

    깔끔하게 잘 하셨네요.

    프런트는 충분하다 못해 차고 넘칩니다. ㅎ

    이제 프런트 외의 영역으로 확장해보세요..

    잘 하실 거 같습니다. ^^

  • Luppy
    120
    2021-03-19 07:40:43

    기능도 굉장히 다양하고 멋지네요!! 저도 이런 프로젝트 한번 완성해보고 싶내요 ㅠ

  • baebae
    424
    2021-03-19 09:06:30 작성 2021-03-19 09:16:01 수정됨

    장독깨기

    과찬의 말씀 감사합니다 !

    Luppy

    이렇다할 기능은 많이 없어서 부끄럽습니다. 감사합니다.

  • 고등생물
    78
    2021-03-19 17:07:32 작성 2021-03-19 17:07:56 수정됨
    멋지네요 디자인도 너무 깔끔해요!
  • 아머두어라두
    51
    2021-03-19 17:28:44

    엄청난 실력자시네요 ~ 정말 잘 만드신거같아요.

    굳이.. 흠을 잡아보자면 스크롤 내릴때나 그래프 툴팁 같은거에 렉이 좀 있는것같아요

  • 프로그램 탐험가
    287
    2021-03-19 18:17:40

    와 대단하십니다!

    저도 프론트엔드 취준생인데 본받고 싶습니다ㅠㅠ

    저는 아직 글쓴이님처럼 하려면 갈 길이 먼....

  • baebae
    424
    2021-03-20 02:24:50
  • 저런종이컵
    30
    2021-03-22 09:30:31

    깔끔하게 잘 만드셨네요

    깃허브 공유 부탁드립니다~~

  • baebae
    424
    2021-03-22 14:54:40

    저런종이컵

    https://github.com/baegofda/Project-GOC

    입니다. readme는 아직 작성 못했습니다.


    댓글 달아주신김에 확인차 호스팅된 사이트에 들어가봤는데 주변국가별 차트가 제대로 보여지지 않는 오류를 발견하였습니다. 코드 확인해보니 제가 날짜 포맷 변경하는 코드를 잘못 작성해서 생기는 오류였습니다 !

    (API서버 문제였으면 에러 페이지로 갔을텐데 다른 문제였습니다.)

    아마 제대로 나오지 못하는 상황을 보셨지 않았을까했는데 현재는 코드 수정으로 고쳐졌습니다.

    덕분에 또하나 배웠습니다. 감사합니다 !



  • 드코
    3k
    2021-03-23 17:03:05 작성 2021-03-23 17:09:53 수정됨


    99 점입니당 !  해당 항목만 수정해주세요

    a태그에는 해당 태그를 눌렀을 시 어떤것이 일어나는지 alt="" 또는 title="" 속성을 이용하여 명시를 해주어야 

    시각장애인이 스크린 리더기로 tab키로 이동하며 객체를 이동 시 읽어줍니다.

    설명 및  tab키로 메뉴를 이동시 합리적으로 이동하는지도 체크가 필요합니당


  • 드코
    3k
    2021-03-23 17:11:40

    https://validator.w3.org/#validate_by_input

    https://jigsaw.w3.org/css-validator/

    해당 사이트에서 소스파일도 점검하시면 됩니당 !

  • baebae
    424
    2021-03-23 23:55:09

    드코

    다른부분은 접근성을 위해서 노력하였으나 anchor태그 같은경우엔 처음 알게되었습니다.

    감사합니다.


  • zini
    99
    2021-03-25 16:35:11

    전체적으로 완성도가 높은 프로젝트네요. 고생하셨습니다

    상태관리는 redux로 하신건가요? 아머두어라두 님이 말씀하셨듯이 컴포넌트 별 렌더링에 시간이 다소 소요되는 것 같습니다. 무료 호스팅 + 외부 API라서 그런걸 수도 있을 것 같네요

  • baebae
    424
    2021-03-25 17:03:51 작성 2021-03-25 17:05:18 수정됨

    zinirun

    리덕스는 사용하지않고있습니다. 
     

    렌더링 소요시간에 대해서는 음..

    무료 호스팅 + 외부 API라는 부분이랑 

    최초 렌더링부분은 heroku 서버가 요청이 없으면 앱이 수면상태가 된다는걸로 알고있는데

    그것때문인가 싶기도합니다 ㅠ


    아직 리액트에대해서 부족한부분도 많아서 그런것같습니다.

  • 로그인을 하시면 댓글을 등록할 수 있습니다.