1. 문제의 발단

• 스타일 가이드를 고치면서 확인하니, z-index가 모든 alert, modal등에서 꼬여있다.
• 가장 최상의 단위를 잡고, 위계를 생각하며 기획이 되어야 하지만 추가되는 사항이 많고, 리팩토링 하지 못 해서 꼬여있었다.
• 그래서 임시로 추가할 alert에 z-index를 9999로 설정하고 만들었다.
• 하지만 하위 노드에서 이미 modal을 만들고, 그것을 기준으로 다음 컴포넌트들을 만들어 z-index와 상관없이 최상위로 올라오지 않는 이슈가 있었다.
• 그래서 아예 처음부터 가장 최상위에 올려서 렌더링 하기로 하였다.

2. Potal?

• 지정한 DOM의 외부에 렌더링을 하게 만들어주는 함수
• 첫 번째 인자에는 컴포넌트, 두 번째 인자로 DOM을 넣어준다.

3. 예시

import { Dispatch, SetStateAction, useEffect } from 'react';
import { createPortal } from 'react-dom';

export function Alert({
  children,
  setState,
}: {
  children: React.ReactNode;
  setState: Dispatch<SetStateAction<boolean>>;
}) {
  // useEffect로 timeout을 걸어 3초 뒤 자동으로 꺼지게 만든다.
  useEffect(() => {
    const timeout = setTimeout(() => {
      setState(false);
    }, 3000);

    // 다시 alert가 열리더라도, 처음 timeout을 초기화 하여 가장 나중에 열린 alert를 3초 유지시킨다.
    return () => clearTimeout(timeout);
  }, []);

  // 가장 최상위 DOM을 선택한다.
  const modalRoot = document.getElementById('modal-root');
  
  // createPortal로 return한다. 
  return createPortal(
    <Backdrop onClick={() => setState(false)}>
      <div onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </Backdrop>,
    modalRoot!
  ) as any;
}

4. 소감

• 처음 스타일 가이드를 잡을때, z-index도 따로 설정에 잡아 놓는 것이 가장 좋겠다.
• 예를 들어, 항상 최상위에 오는 Backdrop을 최상위, 그 아래로 header, footer 등으로 말이다.
• 그리고 상수로 z-index를 관리하면 중간에 다른 단계를 넣거나 수정하더라도 편하게 사용할 수 있다.

1. 문제의 발단

• axios response type을 'Blob'으로 받아 서버에서 엑셀 다운로드를 가능하게 하는 API를 연결하는 작업을 하고 있었다.
• 받는 타입을 Blob으로 해야 브라우저의 다운로드 기능까지 연결되어 처리가 가능하다.
• 기능은 원하는 방향으로 잘 작동하나 문제는 에러가 났을 경우이다.
• response도 blob 형식으로 온다. 그래서 서버와 합의한 error code를 뽑아 상황에 맞는 에러 처리가 되지 않았다.
• 액세스 토큰이 만료되었을 때, axios 인스턴스에 설정해 놓은 대로 reissueToken이 안 되는 현상을 발견하여 확인해 보니, 토큰 만료 시 나오는 에러 code를 잡지 못하고 있었다.

2. 처음 상황

export async function getData() {
  return await axiosInstance.get(`${baseURLV3}/data`, {
    responseType: 'blob',
  });
}

• 위와 같이 api를 호출하는 코드를 만들어 놓은 상황
• 에러가 날 경우 Blob 객체 형태로 error를 받음

3. 해결법

export async function getData() {
  return await axiosInstance.get(`${baseURLV3}/data`, {
    responseType: 'blob',
  });
}

...
catch(err) {
	const errorResponse = JSON.parse(await err.response.data.text());

	if(errorResponse.code === '토큰이 만료 되었을 때 나는 에러 코드') {
		return reissueToken()
	} else {
		return console.log('is not token issue')	
	}
}

• JSON.parse(await error.response.data.text()); 으로 다시 처리하면 우리가 알던 방식 그대로 error의 형태를 바꿀 수 있다.
• 대신, 비동기로 작동한다는 것! 

비즈니스 모델 vs 사용자 경험

• 비즈니스 모델 : 어떠한 상품을 소비자에게 제공할때, 어떻게 이윤을 추구 할 것인가?
• 사용자 경험 : 사용자가 생각하는 제품을 이용할때 축적하게 되는 경험

개발자가 생각하는 관점 vs 유저가 생각하는 관점

• 유저에게 어디까지 친절할 것인가? → 사용하지도 않는 버튼으로 가득찬 TV 리모컨
• ‘개발자 지식의 저주’ → 개발자와 똑같이 유저가 모든 환경과 기능을 이해하고 사용할 것이라는 착각. Qa 때도 자주 발생한다.
• 통제감 → 단순하게 만들어야 유저는 제품에 대해 통제감을 느끼고 사용할 의지를 느끼게 된다.
  • 디자인도 중요하지만, 만들어지는 방식, 사용법등 제품에 대한 모든 것을 단순화 하는 것이 더욱 도움이 된다.
  • 조니 아이브 : 본질적이지 않은 부분을 제거하여 그 제품의 본질만을 남기는 것 = 단순화
• 좋은 사용자 경험이란? → 비즈니스 모델을 생각한 (중점이 되는) 유저 사용감의 상승
  • 즉, 개발자도 비즈니스 모델을 이해하고, 비즈니스 모델을 극대화 하는 사용자 경험을 만들어야 한다. 이것이 단순화가 될 수 도 있고, 오히려 복잡해 질 수 도 있다.
  • 사용자 경험에 절대적인 명제는 없으며, 비즈니스 모델, 로컬의 문화 등의 모든 부분을 종합하여 고려해야 한다.

내가 사용자 경험을 말할 때

네이버 활용백서

네이버 PC 메인

• 처음 애니메이션 및 스크롤 애니메이션으로 시선을 끔
• 텍스트는 양을 줄이고 기능을 강조
• 기능확인 탭 → 네비게이트 버튼 있음 (최상, 하단에서는 사라짐, 컨텐츠를 보고 있을 경우에만 존제)
• 개인설정 탭 설명은 동영상으로 대체 → 너무 많은 정보를 담고 있고, 자신이 관련없는 개인설정일 경우에 확인 할 필요가 없는 컨텐츠이므로
• 견해
  • 장점 : 화려함. 설명이 부족한 부분이 없고 필요한 정보만을 제공중. 어떤 연령의 이용자가 보아도 어느정도 납득이 가는 컨텐츠
  • 단점 : 유저가 보지 않을 경우 말짱 도루묵 → 그만큼 사용하기 어려운 검색 포털 → 검색 포털이 이렇게 어려울 필요가 있을까? → 비즈니스 모델과 관련이 있을 것으로 예상, 주된 비즈니스 모델이 ‘광고’인데 네이버 광고는 블로그, 카페 등으로 이루어진 컨텐츠형 광고가 많은 것으로 생각됨. 그래서 그런 광고의 노출도를 올리고 광고 컨텐츠의 생산을 위해 어쩔 수 없는 경우가 아니였을까 생각됨.
  • 그런거 치고도 꽤 깔끔하고 직관적이라고 생각됨. 아마 기업 이미지나 이때까지 사용하던 사용자 경험이 큰 영향을 주고 있다고 생각됨.

1. 문제의 발단

• 주간 보고를 간단하게 표로 만들어 공유만 했는데, 잘 파악하기 어려웠다.
• 그래서 템플릿을 찾으니, 잘 없어서 만들었다. 이거 한 장으로 CTO님께 이쁨 받는 글 잘 쓰는 개발팀, 동료들에게 생색 한 번 더 내는 개발자가 되자.

2. 노션 링크

3. 유의점

• 위 창에서 새로 만들기를 하면 날짜를 더 늘릴 수 있고, 자동으로 매월 1일이 되면 다음 탭이 생깁니다.

• 이때, 생성되는 탭을 수정하고 싶다면 위 그림처럼 새로 만들기 옆의 화살표를 누르고 템플릿 자체를 수정해야 합니다. (탭 안에 들어가서 수정하면 그 탭만 영향을 받고, 다음에 생성될 탭은 영향을 받지 않습니다.)

• 그리고, 그 템플릿 편집으로 들어가 '김코딩' 옆의 + 버튼을 눌러 동료의 이름을 입력합니다. 그리고 '생성자' 필터도 그 동료의 이름으로 바꿔 줍니다.
• 아래의 표에서 생성자도 동료의 이름으로 바꿔줍니다.
• 귀찮다면, 동료에게 직접 생성하라고 합니다. (기본값이 저 버튼을 누른 사람이기 때문에 + 버튼을 눌러 이름만 추가해 주면 나머지는 자동으로 됩니다.)
• 위의 편집을 하지 않으면 올바르게 사용할 수 없습니다!

4. 템플릿 복사 하기

• 위의 유의사항을 잘 읽어 봅니다. 꼭이요. 그래서 일부러 복사 하는 법을 더 아래에 놓습니다.
• 위의 링크를 눌러 주간 업무 노션 페이지로 들어갑니다.
• 우측 상단의 '복제' 버튼을 누르면 자동으로 복사 됩니다.
• 가저가 셔서 편집한 이후, 사용하시면 됩니다! 복제, 복사 등등 마음대로 요리해서 사용하셔도 됩니다.
• 혹시나, 상업적인 이용은 불가능합니다. (될 것 같지도 않습니다...)
• 질문은 댓글로... 고맙다는 인사는 마 고마, 됐심더...!