🖥 pc뷰로 만들어진 웹사이트 모바일 뷰 개발 외주 📱

처음 작성해보는 회고록... 음...
이렇게 쓰는게 맞나...

발단

종강 일주일 전, 웹개발 동아리 단톡방에 한 톡이 올라왔다
외주맡아 개발하시던 연구실 사이트의 모바일 웹 프론트 개발을 구하는 내용

금액도 제시되어있는 진짜 외주 였다

전개

종강도 안했으면서 이걸 하겠다고 하는건 미친짓이 분명했다.
그리고 내 실력으로 무슨 외주인가.. 했지만

• 핵심적인 기능들과 내용들은 이미 구현된 상태이고
• pc 뷰가 이미 만들어진 상태에서 모바일 뷰만 추가적으로 진행하는 작업

이 조건이 정말 흔치 않은 조건이라고 생각했고 (무엇보다 시험공부하기 싫었다)
결국 야심차게 도전하게 되는데...

위기

역시 미친짓이 맞았다...^^

지금까지는 프로젝트가 크거나 작거나 상관 없이 전부 처음부터 개발에 참여했었고, 또 비슷한 커리로 공부를 한 동아리원들과 함께 했었기에 코드 구성이나 진행상황들을 정말 당연하게 알 수 있었다

근데 이건,,,, 이미 다른 개발자들의 손을 거친 프로젝트 였고 그만큼 코드 스타일도 정말 낯설었다 8ㅁ8

이제.. 이런 긴----- 코드가 페이지별로 있는.. 그런........
페이지수도 생각보다 많았고, 코드도 생각보다 훨씬 길고 난잡했다 😇

그렇게 2주간의 나홀로 챌린지가 시작됐다

절정

본 프로젝트에서 기술적인 면에서 가장 많이 고민했던 부분은 두가지였다

📱 반응형 📱

유튜브 클론코딩 프로젝트에서 반응형을 다뤘었기에 크게 어렵지는 않았다

@media (max-width: 430px) {}

전체적으로 styled-component를 이용해서 스타일을 적용한 상태라, css 스타일을 바꾸는 경우에는 동아리에서 배운 미디아 쿼리를 사용했다

근데 이제 본 프로젝트는 모바일뷰를 아예 고려하지 않고 개발한 웹사이트라서 모바일뷰를 구현하기 위해 return 되는 부분의 컴포넌트들을 건드려야하는 경우가 생겼다

그리하여

useState 를 이용해 뷰 크기를 상태로써 관리

할 수 있게 했는데,

//모바일 여부 감지
  const [isMobile, setIsMobile] = useState(false)
  const resizingHandler = () => {
    if (window.innerWidth <= 430) {
      setIsMobile(true)
    } else {
      setIsMobile(false)
    }
  }
  useEffect(() => {
    if (window.innerWidth <= 430) {
      setIsMobile(true)
    }

    window.addEventListener('resize', resizingHandler)
    return () => {
      window.removeEventListener('resize', resizingHandler)
    }
  }, [])

출처 : https://darrengwon.tistory.com/720

이 코드만 포함시키면 isMobile 를 이용해 모바일 뷰 여부를 인식시킬 수 있었다. 그래서 다음과 같이 응용했다

• ex1. pc뷰일 때와 모바일 뷰일때 메뉴 헤더를 아예 다른걸로 해야하는 경우

//위쪽에 모바일용 메뉴바와 pc용 메뉴바를 따로 구현
return (
    <div style={{ height: '70px', margin: '0px' }}>
      {isMobile ? menuBarMobile : menuBar}
    </div>
  )

• ex2. style로 특정 컴포넌트에만 준 스타일을 뷰 크기에 따라 변경해야하는 경우

// <Paragraph /> 는 외부라이브러리에서 가져온 컴포넌트
<Paragraph
style={
  isMobile
  ? { display: 'flex', flexDirection: 'column' }
: { display: 'flex', flexDirection: 'row' }
}
  >

🍔 모바일 드롭다운 메뉴 🍔

원래는 이런식으로
1. 각 페이지에 갈 수 있는 버튼들
2. 한영 변환 버튼 (state로 관리해서 페이지 변경으로 관리하는 방식 - 이거 크게 배웠다)
으로 간단하게 이루어진 pc용 메뉴바가 있는 형태였고

그냥 이렇게 모바일 메뉴바 용 컴포넌트를 따로 만들어서 왼쪽 햄버거 버튼 누르면 메누 슬라이드가 스륵 하고 나올 수 있게 간단하게 구현했다

그런데...

그중 두개의 페이지는 각 페이지 내에 또 이런식으로 페이지를 변경하는 버튼들이 있는 형식이였다..
저 버튼들을 도저히 모바일 뷰에 넣을 수가 없었기에 모바일 메뉴바 형태를 다음과 같이 세로로 길게 나오는 형태로 크게 바꿨다.

버튼을 누르면 해당 페이지에서 들어갈 수 있는 상세 페이지들이 토글형태로 주르륵 나오고 그 안에서 또 선택할 수 있는 형태로, 디자인은 그냥 어디서 많이 봤던 기억을 참고했다

<SlideItem onClick={() => history.push(`/main/${change}`)}>
  {change == 'kor' ? '홈' : 'Home'}
</SlideItem>

<SlideItem
onClick={() => {
  setIsOpenProgram(false)
  setIsOpenLab(isOpenLab => !isOpenLab)
}}
  >
    {change == 'kor' ? '소개' : 'About'}
</SlideItem>

<ul className={isOpenLab ? 'show-program' : 'hide-program'}>
  <DetailSlideItem
	onClick={() => history.push(`/lab/${change}`)
	setIsOpen(false)}}
  >
    {change == 'kor' ? '연구소 소개' : 'Lab'}
</DetailSlideItem>

//후략

근데 정말 큰 문제가 있었다.
기존 pc 뷰에서 홈, 소개, 프로그램 소개, 연구소 소식 페이지로 들어갈때는 react-router 를 이용해서 이동하는 형태고, 그 내부에 상세 페이지들은 아래쪽 컨텐츠를 상태로 관리해서 버튼을 통해 컨텐츠가 변경될 수 있도록 하는 형태..

즉, '연구원 소개' 페이지에 이동하려면 '소개' 페이지 주소인 /lab/kor 로 이동하고 아래 컨텐츠를 관리하는 Detail 컴포넌트에 상태를 전달해서 뷰를 띄워야 하는것 8ㅁ8

결국, pc뷰에서는 상관이 없었지만 모바일 뷰에서 내가 만든 메뉴바를 통하려면

react-router 로 페이지 이동하며 컴포넌트 상태까지 동시에 관리

해줘야 하는 것이였다

다행히 세상에는 나와 같은 고민을 하는 사람들이 아직 많이 잇었다
https://velog.io/@dhlee91/this.props.history.push%EB%A1%9C-props-%EB%84%98%EA%B2%A8%EC%A3%BC%EA%B8%B0

<SlideItem onClick={() => history.push(`/main/${change}`)}>
  {change == 'kor' ? '홈' : 'Home'}
</SlideItem>

이렇게 사용하던 history.push() 를

<DetailSlideItem
onClick={() => {
  history.push({
    pathname: `/lab/${change}`,
    state: { detail: 1 },
  })
  setIsOpen(false)
}}
  >
    {change == 'kor' ? '연구소 소개' : 'Lab'}
</DetailSlideItem>

이런식으로 state:를 써서 detail 이라는 변수를 전달 할 수 있다

받는 페이지에서는

import { useHistory, useLocation } from 'react-router-dom'

//중략

  const location = useLocation(1)
  console.log(location.state)

//중략
 <DetailPage
num={
  isMobile
  ? location.state === undefined
  	? 1 : location.state.detail
  : numState
}
lang={lang}
/>

이렇게

location.state.detail

로 전달받은 수에 접근 할 수 있었다

결말

우선 크게 기억나는 고생?은 이 두가지였던 것 같다

오히려 그 외에는 그냥 배웠던거 이용해서 스타일 바꾸고 모바일용 컴포넌트 따로 만들어서 보여지게 만들고 .. 이런 작업들의 반복이라 수월하게 할 수 있었다.

그 외에 자잘하게 배운 것들

• css Background 속성
  https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1

• html/css 자동 줄바꿈
  https://mouselish.com/165

회고를 이렇게 쓰는게 맞나... 싶지만 뭐 내가 내 복습을 위해 작성하는거니까 형식은 상관.. 없겠지..??

계속 공부한 내용만 짤막짤막하게 기록하다가 이렇게 내 이야기가 많이 들어간 긴 글을 작성하니 조금 어색하긴 하다... 이 글만 따로 빼놓고 싶음... 블로그를 하나 더 만들어? (나도 글 잘쓰고 싶다 ㅠㅠ)

아무튼 정말 무모하게 도전한 프로젝트였지만 그만큼 배운것도 정말 많았다.
따로 정답이 없는 프로젝트에서 누군가에게 물어보지 않고 내가 혼자 찾아보면서 문제를 해결하는 과정이 생각보다 재미있었고 그만큼 뿌듯함도 컸던 것 같다

기회가 된다면 이 프로젝트 리팩토링 거하게 한번 해보고 싶다. 코드 정리도 하고,,, (이제 다른 프로젝트를 바로 들어가야해서 당장은 못하겠지만🥺)