[WIL] 항해 99 12주차 회고록

1. 오류핸들링 컴포넌트에 대한 레이아웃 확장성 고민

기존 오류 핸들링에 대해서는 메세지 컴포넌트가 담당하고있었고, 항상 기본 100vh에서 헤더의 높이를 뺀 나머지 height를 기준으로 50% 위치에 오류메세지가 나타나게 했었다.

 

기능에 대한 확장성을 이어나가다보니 아래의 문제상황이 나타나게 되었다.

 

이제는 투표함의 버튼들 밑에 메세지 컴포넌트를 넣어야되는데, 물론 이곳에서만 쓸 것 같다면 전체 height를 calc 사용해서 헤더부터 진행중인 투표까지 px을 뺀 나머지를 height로 사용하자고! 했겠지만 ^^.. 반응형디자인(모바일)과 확장성때문에 고민할 수 밖에 없었다. 그래서, 상황에 맞춰서 유동적으로 계산해줄 순 없을까 싶어서 찾아보게 되었다.

 

참고자료

https://mommoo.tistory.com/85

[JavaScript] 요소의 절대좌표 상대좌표 구하기.

 

코드

아래의 코드에서 볼 수 있다싶이, 첫 렌더링 시에 getBoundingClientRect( )를 이용하여 자동적으로 계산해주었다.

import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import { history } from "../redux/configureStore";
import mixin from "../styles/Mixin";

/**
 * @author jiyeong
 * @param   message:에러메세지(string), link:이동할 주소(string), buttonValue:버튼에 넣을 값(string)
 * @returns 에러페이지
 * @역할 에러페이지 렌더링
 * @필수값  message : 에러메세지를 담는 곳이다.
 */

const Message = ({ message, link, buttonValue }) => {
    //사용자의 미디어 크기에 따라 Message 컴포넌트가 위치한 절대 위치를 계산하여 top으로 설정하였습니다.
    //top은 사용자에게 보여질 message의 가로세로중앙정렬을 하기위해 사용하고 있습니다.
    const [top, setTop] = useState(null);
    const topRelativeFromViewport = top;
    const baseComponent = useRef(null);
    useEffect(() => {
        setTop(baseComponent.current.getBoundingClientRect().top);	//ref 특성상 useEffect에서 함수를 실행하여 값을 받아오고 있습니다.
    }, []);
    return (
        <MessageContainer ref={baseComponent} top={topRelativeFromViewport}>
            <p>{message}</p>
            {link && (
                <Button onClick={() => history.push(link)}>
                    {buttonValue}
                </Button>
            )}
        </MessageContainer>
    );
};

const MessageContainer = styled.div`
    height: calc(100vh - ${props => props.top}px);	//전체 뷰포트에서 top값을 뺀 나머지를 height로 쓰고있습니다.
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
        ${mixin.textProps(40, "extraBold", "black")};
    }
`;

const Button = styled.button`
    margin-top: 30px;
    padding: 0 10px;
    height: 46px;
    min-width: 164px;
    border-radius: 20px;
    background: ${({ theme }) => theme.color.mainGray};
    ${mixin.textProps(18, "semiBold", "white")};
    ${props => props.rightGap && `margin-right: ${props.rightGap};`};
    ${props => props.leftGap && `margin-left: ${props.leftGap};`};
    &:hover {
        background: ${({ theme }) => theme.color.danger};
    }
`;

export default Message;

 

2. 피드백 받고 해결하기 위해 머나먼 곳으로

아래는 기존 머테리얼ui로 디자인했었던 국가선택부분이다. PC디자인을 마치고, 피드백을 받는데, 아이콘을 눌렀을 때, 셀렉터가 열리게 해달라는 답변을 받았다. 희성님과 열심히 해결방안을 찾아보았지만, 그 부분까지 할 수 있을만큼 머테리얼 ui의 자유도가 높지않다는 결론을 얻었다. 

 

소희님(디자이너분)께서 모바일반응형 디자인 짜주신 것을보니 아예 국가셀렉터를 갈아엎어야될 판...... 어짜피 이렇게 된거 그냥 머테리얼ui지우고 그냥 손수 만들기로 했다. 

 

PC버전

 

모바일버전

 

한 가지로 모바일버전에서는 메뉴에 위치, PC버전에서는 헤더에 위치.. 그리고 레이아웃 변경..... 대대적인 공사가 이루어졌다 🌋🌋 레이아웃의 모든것을 갈아엎어야 됐었다.... 코드가 희생양이 될 수 밖에 없었는데...(가엽다 정말) 그래도 해냈다... 그리고 짠하다 내 자신 토닥토닥...

 

3. 피드백 받고 해결하기 위해 머나먼 곳으로 2

유저입장에서 봤을때, 국가셀렉터의 위치가 적절하지 않고, 저것이 무슨 동작을 하는지 잘 와닿지 않아서 다시 한 번 대대적인 공사가 이루어졌다 🌋🌋 이번에는 진짜 제대로 갈아엎었다... 한 코드내에서 사용하지않고, 아예 코드를 분리해서 사용하기로! 기존에는 PC이냐 모바일이냐에 따라서 국가셀렉터의 위치와 레이아웃이 변경되었다면 이젠 메뉴에 항상 국가선택기능이 있고, 플루팅버튼에서도 국가선택을 할 수 있게하는 것으로!  그렇다면 두군데에서 데이터가 동일해야되므로 리덕스를 이용하여 데이터를 한곳에서 관리하는 것이 합당하며, 기존 리덕스를 갈아엎고 ^^.. 함수를 갈아엎고..^^ 레이아웃을 갈아엎고.. ^^ 그냥 새로 만들었다

헤더의 국가범위 설정

 

 

플루팅버튼의 국가범위 설정

클릭 안되었을때

클릭 되었을 때

 

완성

소희님 아이콘 받으면 국가 아이콘 적용해야지 🚀 행복하다 🚀

 

3. 구글 애널리틱스 적용

우리의 배포담당자 희성님께서 https를 적용시켜주셨고, 이후, 나는 구글 애널리틱스를 적용하게 되었다. 구글 애널리틱스에는 유니버셜 태그와 글로벌사이트 태그가 있는데, 여기저기서 react-ga를 이용해서 적용하는 글들을 많이봐서 react-ga를 후닥닥 적용했었는데, 통계가 이루어지지 않았다. 열어보니 글로벌인........ 😥 이때알았다 글로벌과 유니버셜이 나눠져있다는 것을.. 여기서 유니버셜 태그는 구글애널리틱스 사용자만을 위한, 글로벌사이트 태그(gtag)는 구글마케팅플랫폼 통합 사용자를 위한 코드이다.

http://www.da-hub.net/web/pages/lec_view.html?code=ab-1331&idx=96 

2-4. 글로벌사이트 태그(gtag.js) 와 유니버셜 태그(analytics.js) / (2019)-디에이허브 구글애널리틱스

 

적용방법은 docs에 자세하게 나와있다! :-) 추적id를 프로젝트에 심어놓으면 된다.

https://developers.google.com/analytics/devguides/collection/gtagjs/

Add gtag.js to your site  |  Universal Analytics for Web (gtag.js)

그외 참고링크

https://bbon.kr/google-analytics-on-single-page-application/

 

싱글 페이지 응용프로그램에 구글 애널리틱스 적용

 

 

https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk

Tag Assistant Legacy (by Google)

 

4. 커스텀 슬라이더 만들기

pc버전에서 잘 사용하고 있던 우리의 slick 슬라이더

 

모바일에서는 당연히 깨질 수 밖에 없었고, 반응형으로 만들고 싶었으나, 너무 험난한 여정을 겪고 난 이후! 기존 slick의 css가 되어있는 이 곳에서 내가 기대하는 것을 얻을 수는 없겠다. swiper을 쓰려다가 지금 어제부터 오류가 나는 것 같길래 그냥 슬라이더 만들기로 했다 😓..... 그래서 만들었다!

 

모바일에서 쓸 나의 커스텀 슬라이더! 뭐니뭐니해도 내 맘대로 css 조정이 잘되서 너무 좋다 😊

5. 리액트를 공부하는 모든 자는 이 에러를 싫어할 것이다.

도대체 어디서 틀렸는 지 몰라서 한참 돌고 돌아서야 해결하게 되는 오류 ... ^^.. 이번에는 아래처럼 스타일드 컴포넌트 사용하는데 백틱 안찍어서 난 오류였다...^^... 새벽코딩을 하면 백틱 실수를 합니다.

 

6. 못난 레이아웃 잡으러 가즈아 😡

모바일에서 글작성페이지 레이아웃이 깨지는 것을 발견! PC 디바이스 툴바에서는 레이아웃이 깨지지 않는데, 핸드폰으로 사이트 들어가보니 깨지는 현상... 어라라? 개발자도구 디바이스 툴바에서는 정상적이니 뭐가 문제인지 까볼수도 없고 난감한 상황.. 결국 그래서 모바일로 개발자도구를 열 수 있게 작업했고, 다행히도 원인을 찾아서 문제를 해결했다.

 

참고링크

https://backstreet-programmer.tistory.com/30

[Android 개발] 크롬 개발자 도구 모바일 디버깅/Mobile Debugging/ PC에서 모바일 디버깅 / 모바일 개발

 

위의 링크를 따라가다보면 아래처럼 모바일화면의 개발자도구를 열어볼 수 있다.