Final_Team_project_devlog_15

kyoungyeon·2022년 5월 10일
0

FinalProject

목록 보기
9/11

리액트 반응형 웹 (react-responsive)

✍ 반응형 웹

테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 별 *뷰 포트에 따라 사용자들에게 보기 쉽게 하기 위해 웹페이지의 크기가 '재조정' 되는 것을 말합니다.

@media screen, print { ... } 
@media (hover: hover) { ... }
@media (조건) {
  스타일
}
  • 본인 프로젝트 예시 코드
import { useMediaQuery } from 'react-responsive'

const PC = ({children} :any)=> {
  const isPC = useMediaQuery({minWidth: 768})
  return isPC ? children : null
}

const Mobile = ({children} :any) => {
  const isMobile = useMediaQuery({maxWidth: 767})
  return isMobile ? children : null
}

export {PC, Mobile};
  • 아쉬운점
  • 컴포넌트 구조의 아쉬움

    위의 이미지는 참고형, 프로젝트 파일도 분류하려고 노력했으나

위와 같이 기획에서 디테일한 부분을 잡지 못해서 그런지 각자 알아서 넣어버림.
게다가 전역 스타일을 제대로 분류하지 않아, 따로 구현해놓고, 그다지 적용 못한거 같은 아쉬움이..

  • CSS에서 벗어나고자..그렇게 노력했으나 또다시 CSS를 쓰고있다.

  • react-natvie 있는줄 몰라서 못써본게 아쉽다

  • 리액트 반응형 웹 (react-responsive) 라이브러리도 있다고 함

  • 이모션이라는 솔루션?이 있었음 (슬라이드부터 모바일 반응형까지 자동완성)
    이모션

  • 최근 면접에서 홈페이지는 기업에서 그렇게 힘을 쓰지 않는 추세인듯 하다. (관제 솔루션에 FE가..?)

  • 과연 FE의 전망은..? (앞으론 기능 구현및 로직, 응용력에 좀더 중점을 두어야 할 듯)

  • 최근 FE 디자인 트렌드를 공부하자. 디자인 감각은 중요하다.

FEEDBACK
최근 트렌드로는 모바일과 웹 design을 일체화하는 경향이 있다고 한다
내 취향도 바뀌어야 할듯..

요약 : 나는 따로 ui/ux를 만드는게 좋은 줄 알았음

가정 1 일단 모바일 앱 ui/ux로 운동기록 어플 서비스를 제공한다

예상 모바일 화면과 달리 홈페이지 접근성이 떨어질것이라고 예상했음. 그래서 FRAMEWORK에서 모바일/웹 디자인을 따로 만들기로 합의함. 왜 안말리셨어요 엔지니어님..

게다가 홈페이지는 모바일과 통일성을 위해 디자인적으로 색의 공통성은 주되 좀 더 화려한 effect 및 추가 기능 구현( 번개/ 예약/ 근처 헬스장 검색등)에 있어서 차별화를 두어야 한다고 생각했는데 현직 엔지니어님 피드백 들어보니.. 그것도 아닌듯 하다.

profile
🏠TECH & GOSSIP

0개의 댓글