random-olive.log

34. route path 다중 적용 v6

Thu, 30 Mar 2023 07:12:13 GMT

다음과 같이 다중 route path에 대해 같은 element로 접근시키려고 했는데
```
//App.tsx
}
/>
```
v5까지는 support 했지만 v6부터는 지원되지 않는다고 해서 map으로 처리했다.
```
{[PATH.HOUSE_WORK, PATH.TIPS].map((path, i) => {
return (
  }
  />
);
})}
```

33. 다국어 지원 (i18n) + 에러 해결

Sun, 26 Mar 2023 07:21:11 GMT

다국어지원을 하기 위해 i18n을 적용했다.

1. 설치

npm i i18next react-i18next @types/i18next @types/react-i18next

2. 설정

3. menuText 내용 i18n.json으로 옮기기

//locales/en/main.json
{
  "test": "Helo",
  "mainMenu": [
    {
      "title": "main",
      "href": "/home",
      "list": [
        { "title": "🐰", "href": "/housework" },
        { "title": "♥️🐇", "href": "/wandb" },
        { "title": "recipe", "href": "/address" },
        { "title": "hobby", "href": "/address" },
        { "title": "party", "href": "/address" },
        { "title": "travel", "href": "/address" },
        { "title": "community", "href": "/address" },
        { "title": "store", "href": "/address" }
      ]
    }
  ]
}

menuText로 지정했던 메뉴 이름들을 다국어지원이 가능하게 옮기려고 한다.

//Layouts.tsx
export const MenuBar = ({ selected, setSelected }: BarProp) => {
return (
  <>
    {mainMenu[0].list.map((el, idx) => (
        
        ...
      
    ))} 
  
);
};

를

//Layouts.tsx
import { useTranslation } from 'react-i18next';

export const MenuBar = ({ selected, setSelected }: BarProp) => { const {t} = useTranslation(); return ( <> {t('main:mainMenu')[0].list.map((el, idx) => (

...

))} ); };

단순히 바꿔서 써보았더니 
🟥 Property 'list' does not exist on type 'string'이라는 에러가 나온다: t('main:mainMenu') 부분이 string으로 나타나서 사용할 수 없다는 것 같아 해당 값을 화면에 출력해보니
![](https://velog.velcdn.com/images/random-olive/post/0a8ed8b2-60f7-4a73-a5dd-27d06a9bfded/image.png)

🟥 값은 key 'mainMenu (ko-KR)' returned an object instead of string.이라 나오고, 
콘솔로그에는 accessing an object 라는 메세지가 나온다.
[공식문서](https://www.i18next.com/translation-function/objects-and-arrays)를 참조 후, 다음과 같이 옵션을 추가했다.

t('main:mainMenu',{ returnObjects: true })

이번에는 콘솔로그에는 정상적으로 object가 찍히는데 화면에서 출력하려고 했을 때는 다음과 같은 에러가 발생했다.
🟥 Objects are not valid as a React child ...
![](https://velog.velcdn.com/images/random-olive/post/cee4ecce-7d0e-48bb-bb8e-4df773016ec4/image.png)

{JSON.stringify(t('main:mainMenu', { returnObjects: true }))}

[객체를 stringify해서](https://itprogramming119.tistory.com/entry/React-Objects-are-not-valid-as-a-React-child-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95) 렌더링하니까 성공적으로 출력되었다. 
하지만 string이라서 그 다음 코드(객체의 map 활용)를 제대로 활용할 수 없어서, object로 출력하는 JSON.parse()를 사용했다.

{JSON.parse(JSON.stringify(t('main:mainMenu', { returnObjects: true })))}

* 즉, JSON을 객체로 온전히 활용하려면 우선 JSON.stringify로 string화 시켜준 후, 다시 객체로 변형하는 JSON.parse 순으로 진행하면 된다. 

* stringify하지 않고 바로 JSON.parse만 한다면 
🟥 Uncaught SyntaxError: "[object Object]" is not valid JSON
콘솔로그 에러를 볼 수 있다.

* stringify하고 JSON.parse를 하지 않고 객체 활용을 한다면 
또다시 🟥 Property 'list' does not exist on type 'string'. 에러를 만난다.

* 결과적으로 다음과 같이 파싱 후, 변수로 바꿔치기해서 기존 결과를 유지하게 되었다.

//MenuBar.tsx import { useTranslation } from 'react-i18next';

export const MenuBar = ({ selected, setSelected }: BarProp) => { const { t } = useTranslation(); const objectParsed = JSON.parse( JSON.stringify(t('main:mainMenu', { returnObjects: true })) );

return ( <> {objectParsed.list.map((el: any, idx: number) => (

{el.title} ... (기존 코드)

))} ); };

-----
text.ts -> i18n.json 으로 변환하며 느낀 점
* 기존 문제가 모두 해결된 후에 해당 변환을 진행하는 게 편하다.
* 메뉴 타입 지정에 에러가 있었다: 필요하지 않은 메뉴(x 항목)가 메뉴에 들어가게 되었는데, 이를 삭제하면 타입 에러가 발생했다.
* json 파일로 변환 후에는 언어 개수에 따라 해당 자료를 지우거나 추가했어야 하므로, 해당 문제를 해결하기 위해 기존의 ts 파일을 남겨둔 채, 해결 후 ts 파일을 지우기로 했다.

🟥 콘솔에러 : i18next::translator: missingKey en-US basic cycle cycle
```
//발생 코드
const cycleMenu = JSON.parse(
    JSON.stringify(t('basic:cycle', { returnObjects: true }))
  );
```
* en-US 모드일 때 basic.json에서 해당 key (basic)을 찾을 수 없다고 나오는 에러
* 파일 이름을 item.json으로 변경한 것이 원인이었다: translation할 파일 이름이 없거나, 그에 맞는 key 값이 없으면 같은 에러를 발생시킨다.

* 코드를 다음과 같이 수정하니까 잘 되었다.
//발생 코드
const cycleMenu = JSON.parse(
    JSON.stringify(t('item:cycle', { returnObjects: true }))
  );
```

32. 타입에러 해결하기 : does not exist on type {}...

Fri, 24 Mar 2023 11:08:55 GMT

TS2339: Property 'list1' does not exist on type '{ title: string; href: string; list1: { item1: string; }[]; list2: { item2: string; }[]; } | { title: string; href: string; }'.
Property 'list1' does not exist on type '{ title: string; href: string; }'.
  68 |               setSelected({
  69 |                 menu: el.title,
> 70 |                 list1: el.list1,
     |                           ^^^^^
  71 |                 // list2: el.list2,
  72 |                 idx1: idx,
  73 |               });

31. 스크롤 이벤트 (window.scrollTo)

Thu, 23 Mar 2023 09:59:19 GMT

스크롤 이벤트 : window.scroll

sticky 버튼을 클릭하면 화면의 최상단 / 최하단으로 스크롤
각각의 Icon에 다음의 클릭 이벤트를 넣었다.

window.scroll을 사용해서 구현했다.

//Layouts.tsx

       {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }}
      />
       {
           window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
        }}
      />

```

끝까지 스크롤 : scrollHeight

컨텐츠 끝까지 스크롤하기 위해서는 scrollHeight 속성을 이용했다. 해당 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함한다.

window 객체 속성 정리

화면 사이즈

window size
- screen : 모니터 사이즈
  - window.screen.width , window.screen.height
- outer : 브라우저 사이즈
  - window.outerWidth, window. outerHeight
- inner : 브라우저 사이즈 (화면 부분만 + 스크롤바 포함)
  - window.innerWidth, window. innerHeight
document size
- documentElement : 브라우저 사이즈 (화면 부분만 + 스크롤바 제외)
  - document.documentElement.clientWidth, document.documentElement.clientHeight

좌표

clientX, clienY : (브라우저창 기준) xy 좌표
pageX, pageY : (웹 문서 기준) xy 좌표
screenX, screenY : (화면 모니터 기준) xy 좌표

scroll

window.scrollTo() : 해당 좌표로 이동
window.scrollBy() : 해당 좌표만큼 document 창을 이동
element.scrollIntoView() : 해당 기능을 호출한 element가 있는 좌표로 이동

30. 화면 고정 버튼 만들기 (position : fixed, absolute)

Sat, 18 Mar 2023 13:25:16 GMT

화면에 항상 고정해있는 버튼을 만든다.
메인 버튼 : 클릭시 help 기능
서브 버튼 : 클릭시 Home / End 스크롤

-> 설계 단계에서는 없었던 거라 이미지를 새로 그리기 애매해서 기존에 있던 이미지를 활용 -> 메인 버튼을 기준으로 서브 버튼의 위치를 고정시킬 예정

//Layouts.tsx
type BackType = {
  top?: string;
  left?: string;
  background?: string;
  width?: string;
  height?: string;
};


const TitleIcon = styled.div`
  background: url(${iconPath});
  position: absolute;
  top: -17px;
  left: 5px;
  width: ${(props) => props.width};
  height: ${(props) => props.height};
`;

//메인 버튼
export const StickyIcon = styled(TitleIcon)`
  position: fixed;     (1)
  top: 85%;
  left: 85%;
  z-index: 1000;
  width: 58px;
  height: 59px;
  cursor: pointer;
  background-position: 195px 59px;
  margin: 0 0 70px 0;
  @media screen and (max-height: 584px) {
    top: 83%;
  }
`;

//서브 버튼 
export const UpIcon = styled(StickyIcon)`
  position: absolute;     (2)
  top: 9px;
  left: 65px;
  width: 15px;
  height: 15px;
  background-position: 80px 36px;
  transform: rotate(0.5turn);
  @media screen and (max-width: 584px) {
    top: 13px;
    left: -20px;
  }
`;

export const DownIcon = styled(UpIcon)`
  top: 35px;
  transform: rotate(0turn);
`;

(1) position :fixed로 고정시킨다.
(2) 부모 StickyIcon를 기준으로(position : absolute) px 단위로 고정 위치를 줬다.
```
//Layouts.tsx
```

//변경 전 export const BasicLayout = ({ windowSize }: any) => { return ( <> ...

); };

//변경 후 export const BasicLayout = ({ windowSize }: any) => { return ( <> ... (3)

); };

* (1) StickyIcon을 부모로 하는 자식 UpIcon, DownIcon 컴포넌트는 position:absolute를 이용해 부모 기준으로 위치를 고정했다.

29. setstate 함수 + manifest 에러

Thu, 09 Mar 2023 14:18:59 GMT

1. setstate 함수

메뉴를 클릭하면 그에 맞는 카테고리 버튼이 나온 채 유지되어야 하는데, 메뉴를 클릭하면 활성화되었던 카테고리가 해제되었다.

//MenuBar.tsx
 {
  setSelected({idx3: idx });
  }}
  key={idx}
>
{el.item1}

따로 지정했던 setSelected에 ...selected를 지정하니까 해당 문제가 해결되었다.
```
 {
setSelected({ ...selected, idx3: idx });
}}
key={idx}
>
```

2. manifest: line: 1, column:1, syntax error

//index.html

를

로 변경하니까 해당 에러가 사라졌다.

28. Cannot find file: '.tsx' does not match the corresponding name on disk: '...경로'

Tue, 07 Mar 2023 07:38:04 GMT

🟥 Cannot find file: '.tsx' does not match the corresponding name on disk: '...경로'

-> branch를 합치고나서 pull 을 땡겨왔는데 VSCode 자동완성 때문에 오류가 발생했다. -> 경로 철자가 틀린 곳이 없는지 확인하기 -> Menubar.tsx로 작성되어있던 파일의 이름을 MenuBar.tsx로 변경했다.

27. type 입력 리팩토링

Tue, 28 Feb 2023 08:28:13 GMT

외부 prop을 받는 경우 그에 대한 type을 지정해야 하는데, 그동안은 아래와 같이 지정하던 것을 그 다음 방식으로 변경했다.
코드 길이가 줄었고, 덜 헷갈리게 되었다.

//Layouts.tsx
interface LayoutProps {
  children?: React.ReactNode;
  item?: any;
}

export const ContentsLayout: React.FC = ({ item }) => {
  return (
    <>
      ...
      {item.name}
      ...
    
  );
};

//Layouts.tsx
interface LayoutProps {
  children?: React.ReactNode;
  item?: any;
}

export const ContentsLayout = ({ item }: LayoutProps) => {
  return (
    <>
      ...
      {item.name}
      ...
    
  );
};

🟥 Parameter 'X' implicitly has an 'any' type in TypeScript.

//MenuBar.tsx
{itemList.map((el, idx)=>(
메뉴))}

=> 
{itemList.map((el:any, idx:any)=>(
메뉴
))}

26. Contents page- submenu Layout 추가

Wed, 22 Feb 2023 07:57:11 GMT

밖에서 컴포넌트만 다르고 전체 구조는 같은 Layout을 추가했다.
Outlet을 사용하지 않고 props.children을 사용했다.

//layouts.tsx
interface LayoutProps {
children: React.ReactNode;                  (1) 
}

export const SubMenuLayout: React.FC = 
(props: LayoutProps) => {                    (2)
  return (
    <>
      
        {props.children}  (3)
      
    
  );
};

(1),(2) : 외부에서 prop이 들어오는데, children이 들어오고, 컴포넌트가 들어오니까 React.ReactNode로 지정한다.
(3) : 컴포넌트가 들어오는 부분

컴포넌트는 다음과 같이 받아준다.

//ContentsPage.tsx
const ContentsPage = () => {
return (
  <>
    {subMenuList.map((el, idx) => (  (4)
      {el}
    ))} (5)
    
    
  
);
};

export default ContentsPage;

* (4), (5) submenu에 들어가는 메뉴항목의 컴포넌트 array를 상수로 만들어 map을 활용해 나열했다.

* 완성
![](https://velog.velcdn.com/images/random-olive/post/6e146e69-0c88-4643-bec9-fbefaeb77b42/image.png)

+ JS Deep Dive: 40. 이벤트 & debounce

Mon, 20 Feb 2023 07:20:36 GMT

1. 이벤트 드리븐 프로그래밍

event-driven programming : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식
사용자와의 상호작용에 따라 (버틀 클릭, 키보드 입력, 마우스 이동 등) 함수를 호출하여 어떤 처리를 하고 싶을 때, 보통 사용자가 행동을 "언제" 할지 몰라서 함수를 "언제" 호출해야되는지 알 수 없다.
하지만 다행히도 브라우저는 이런 특정 사건을 감지하여 이벤트 event를 발생시킬 수 있기에 해당하는 타입의 이벤트가 발생했을 때 호출될 함수(이벤트 핸들러)를 브라우저에게 *알려 *호출을 위임(이벤트 핸들러 등록)한다.

2. 이벤트 핸들러 등록 방법

1) 이벤트 핸들러 attribute

* on이벤트타입 = 함수 호출문 (사실 함수 몸체 자체를 의미함)

-> 이벤트 핸들러에 인수를 전달하기 위해 함수 참조문이 아닌 함수 호출문을 전달하게 된다.

결국 DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환되므로 결과적으로 이벤트 핸들러 프로퍼티 방식과 동일하다고 볼 수 있다.
관심사 분리 측면에서 더이상 사용하지 않는 것이 좋지만 CBD(Component Based Development) 방식의 Angular/React/Svelte/Vue.js 같은 프레임워크/라이브러리에서는 이 방식으로 처리한다. CBD에서는 HTML, CSS, JS를 관심사가 다른 개별적인 요소로 보지 않고, 뷰를 구성하기 위한 구성요소로 보기 때문에 관심사가 다르다고 생각하지 않는다.

2) 이벤트 핸들러 property

Window, Document, HTMLElement 타입의 DOM 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. 프로퍼티의 키는 'on+이벤트 타입'으로 이루어져 있으며, 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
attribute 방식과 달리 함수 참조를 할당한다.
관심사 분리 측면에서는 좋지만 하나의 프로퍼티에 하나의 이벤트 핸들러만 바인딩 가능하다. ```
이벤트타깃. on이벤트타입 = 이벤트 핸들러 (함수)

```

3) 이벤트 핸들러 addEventListener

앞의 두 방식(DOM level 0)과 달리 DOM level 2에서 도입된 이 방식은 마지막 매개변수에는 이벤트를 캐치할 이벤트 전파 단계(capturing/bubbling)를 지정한다.
마지막 매개변수가 true일 경우 캡쳐링 단계에서 이벤트를 캡쳐하고, 그 외에는 버블링 단계에서 이벤트를 캐치한다.
하나 이상의 핸들러를 등록 가능하며, 호출시 등록된 순서대로 호출된다.
등록한 이벤트 핸들러는 removeEventListener로 삭제 가능하며, 모든 매개변수가 같아야 제대로 삭제된다.
무명의 이벤트 핸들러는 삭제할 수 없으니, 등록시에 기명 핸들러로 등록하도록 한다.
기명 함수를 이벤트 핸들러로 등록할 수 없다면, 함수 자신을 가리키는 arguments.callee를 사용할 수도 있으나, 이는 코드 최적화를 방해하므로 가급적 사용하지 말고 핸들러들의 참조를 꼭 저장해두도록 하자.

* 이벤트타깃.addEventListener(이벤트타입, 이벤트핸들러[, capture 사용여부])

3. 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 및 예시

마우스, 키보드, 포커스, 폼, 값 변경, DOM 뮤테이션, 뷰, 리소스 이벤트
예시 : click, dbclick, mousedown, mouseup, mousemove, mouseenter, mouseleave, keydown, keyup, focus, blur, submit, reset, input, change, readystatechange, DOMContentLoaded, resize, scroll, load, unload, abort, error 외

4. 이벤트 객체

이벤트가 발생하면 이벤트에 관련한 정보를 담고 있는 이벤트 객체가 동적으로 생성되고, 핸들러의 첫밴째 인수로 전달된다. 이벤트 객체는 다음과 같은 상속 구조를 가지며, Event를 포함한 그 이하는 모두 생성자 함수이다.

공통 프로퍼티 : type, target, currentTarget, eventPhase, bubbles, cancelable, defaultPrevented, isTrusted, timeStamp
다양한 타입의 객체 프로퍼티 : screenX, clientX, pageX, offesetX, altKey, metakey, key ...

5. 이벤트 전파 propagation

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파되며, 다음과 같이 3 단계로 전파된다.

캡쳐링 단계 capturing phase : 이벤트가 상위 → 하위 요소 방향으로 전파
타겟 단계 : 이벤트가 이벤트 타깃에 도달
버블링 단계 : 이벤트가 하위 → 상위 요소 방향으로 전파


  이벤트 
  


* (1) : 이 경우 이벤트 객체의 currentTarget 프로퍼티는 $fruit 요소를 가리키지만 이벤트 객체의 target 프로퍼티는 실제로 이벤트를 발생시킨 DOM 요소를 가리킬 수 있다.








### 7. DOM 요소의 기본 동작 조작
#### 1) DOM 요소의 기본 동작 중단 : preventDefault
#### 2) 이벤트 전파 방지 : stopPropagation
* 예시: 상위 DOM에 위임시키고 하위 요소 이벤트 발생시 해당 요소에게 **바인딩된 이벤트 핸들러만** 실행시키고 싶을 때 (다른 요소에서 캐치되어서 실행되지 못하게)
e.preventDefault();
e.stopPropagation();
```






8. 이벤트 핸들러 내부의 this, 이벤트 핸들러에 인수 전달
9. 커스텀 이벤트
10. debounce & throttle

DOM 이벤트를 제어하는 방법

사용 이유 : 사용자가 스크롤과 같은 수많은 이벤트를 발생시켰을 때 이에 대한 무수한 callback이 발생하고, 이는 큰 리소스 소모로 이어짐. 이러한 과도한 실행횟수를 줄여 성능 문제를 해결하기 위함

사용 사례

사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resize
사용자가 키보드 입력을 중지할 때까지 stop
페이지의 스크롤 위치를 측정하고 일정 간격으로만 응답


Debounce : 연이어 호출되는 함수들을 그룹화해 하나의 이벤트만 발생시킴

활용 사례 : resize, keyboard


Throttle : 이벤트를 일정 주기마다 발생하도록 함

사례 : scroll (infinite scroll)
무한 스크롤 : 사용자가 footer까지 스크롤하면 추가 컨텐츠를 요청하는 원리. 디바운싱을 적용하면 footer까지 다 가서야 컨텐츠를 요청하기 때문에 그 전에 요청하기 위해 스로틀을 사용한다.



25. 화면 사이즈 바뀔 때마다 화면 새로고침
Fri, 17 Feb 2023 09:15:38 GMT

media query를 사용해서 데스크톱 사이즈와 모바일 사이즈로 반응형 웹사이트를 만들었는데, 뼈대는 지정한 픽셀에 따라 바뀌었으나 메뉴는 props를 초반에 받아서 그리다보니까 새로고침을 해야 제대로 변경되었다.
이에 화면 사이즈가 변경되면 이를 감지하고, 자동으로 화면을 새로고침하는 로직을 넣으려고 한다. App component에서 window.outerWidth + useState를 사용해 상태로 만들고 useEffect를 활용하면 더 쉽고 간편하게 구현할 수도 있으나 
많은 컴포넌트들에 모두 props로 내려줘야 할 것이기 때문에 상태관리 라이브러리를 설치 후에 그런 방법을 적용하려고 한다.
우선은 간단하게 window.addEventListner, window.removeEventListner를 사용해서 해당 기능을 구현했다.

1. width를 상태로 설정 + window.eventListener
//App.tsx
function App() {
  const [windowSize, setWindowSize] = useState(window.outerWidth); (1)
  const handleResize = () => {setWindowSize(window.outerWidth);
  }; (2)

  useEffect(() => {
    window.addEventListener('resize', handleResize); (3)
    return () => {
      window.removeEventListener('resize',handleResize) (4)
    }
  }, []); (5)

  return (
    <>
      {windowSize}
        }>
          
            }>
              } />
              {/* } /> */}
            
          
        
      
    
  );
}

export default App;

(1) : width에 따라 화면 변경을 감지 : window.outerWidth를 초기 state로 지정하고, 해당 값은 number type으로 설정해준다.
(2) : handleResize 함수는 현재의 window.outerWidth를 받아서 windowSize 상태를 변경시키는 함수이다.
(3), (4) : resize에 대한 이벤트는 window 객체에서 가능하다. 각각 'resize'에 대한 이벤트 리스너를 add/remove하고 이벤트가 발생했을 때 호출될 함수는 handleResize로 한다.
(5) : 빈 배열을 종속성 배열로 넣으면 컴포넌트가 마운트/언마운트 될때만 렌더링한다. 이를 이용해 컴포넌트가 마운트될 때 리스너를 add하고 언마운트될 때 remove하게 한다.

2. debounce

scroll, resize 등 이벤트 발생요청이 무수히 많아지면 성능 저하가 날 수 있다. 이를 방지하기 위해 debounce나 throttle 방법을 사용하는데 많은 이벤트를 그룹화했다가 동작이 끝나면 마지막 이벤트를 감지하는 debounce 기법을 사용해 성능 저하를 줄이려고 한다. 우선은 lodash 라이브러리를 이용해 구현한 후, 리팩토링시 clearTimeout, setTimeout을 이용하려고 한다.

//lodash(순수 JS로 작성된 유틸리티를 제공하는 라이브러리) 설치
npm i --save @types/lodash
//App.tsx
const handleResize = () => {
  setWindowSize(window.outerWidth);
};

-> 많은 요청이 발생하는 부분을 debounce 콜백으로 처리하고, 시간은 1000ms로 지정한다.

const handleResize = debounce(() => {
  setWindowSize(window.outerWidth);
}, 1000);


24. 메뉴 드롭다운 구현 + useState + onClick
Wed, 15 Feb 2023 09:37:21 GMT

width: 768px 이상일 때는 hover하면 나타나는 메뉴를 나오게 하고


그 이하 (mobile size)일 때는 로고를 클릭하면 드롭다운 메뉴가 나오게 하려고 한다.




1. styled-component로 간단히 드롭다운 구현

원하는 위치에서 dropdown되게 하려면 position:absolute를 사용해야 하는데, absolute는 부모의 position을 기준으로 위치를 선정하는 prop으로, 부모의 position이 relative면 그걸 토대로 위치를 선정한다. 부모의 position이 설정되어 있지 않으면 화면 왼쪽 상단을 기준으로 위치를 잡기 시작한다.

         (1) 드롭다운 메뉴의 기준점: relative
          (2) 메뉴 리스트를 한 번에 담음 : absolute
               (3) 메뉴 리스트
        1
        2
      
  
const DropDown = styled.button`
  position: relative;          (1)
  width: 100px;
`;

const MenuBar = styled.div`
  position: absolute;          (2)
  display:none;                (4)
  ${DropDown}:active & {       (5)
    display: block;
  }
  ${DropDown}:focus & {        (5)
    display: block;
  }
`;

DropDown은 button으로 만들어 클릭에 따라 active한지 체크하게 한다.
(4) : 메뉴 리스트는 처음에 display:none으로 보이지 않다가,
(5) : DropDown 컴포넌트가 활성화되면 display:block으로 보여주기 시작한다. ${컴포넌트} : {} 문법은 아주 간편했다. // 하지만 styled-component로 작성된 형태는 가능하지만
const DropDown = styled.div`
...
`
//다음과 같은 형태는 불가능했다.


const DropDown = () => {
return (
...)
}

### 2. useState를 활용한 드롭다운
* 복잡한 컴포넌트를 드롭다운으로 활용하기 위해서 다음과 같이 코드를 작성했다.
//Layouts.tsx
export const BasicLayout = () => {
  return (
    <>
      
      {window.outerWidth < 768 ? '' : }
      
      

    
  );
};
* 768px 이상이면 horizontal 메뉴바를 띄운다.
* 드롭다운 메뉴바인 DropdownHeader 컴포넌트는 그 위에 항상 띄운다.
//LogoAndSearch.tsx
export const DropdownHeader = () => {
  return (
    
      
        
        {window.outerWidth < 768 ?  : ''}
      
      
    
  );
};
* 드롭다운 메뉴바는 LogoContainer로 이루어져 있는데, 이 안에는 HomeLogo와 DropdownBar로 이루어져 있다.
* HomeLogo의 위치를 relative로 한다.
//MenuBar.tsx
export const DropdownBar: React.FC = ({ display }) => {
  return (
    
      
        {mainMenu[0].list.map((el, idx) => (
          
{el.title}
        ))}
      
    
  );
};
* DropdownBar 내부의 MenuContainer 컴포넌트의 위치를 absolute로 한다. Main 컴포넌트는 메뉴블럭 하나하나를 뜻하는데 만약 Main의 위치를 absolute로 한다면 모든 메뉴가 한 곳에 겹쳐 나오기 때문에 Main들을 묶어서 absolute prop을 가져줄 MenuContainer 컴포넌트가 필요한 것이다.

* 이제 클릭할 때마다 useState로 상태에 따라 display의 prop을 block / none으로 결정하면 드롭다운 메뉴가 활성화된다.

### 3. useState + onClick type
//LogoAndSearch.tsx
import {useState} from 'react';
interface ClickProp {
  onClick?: () => void; (1)
}
export const DropdownHeader: React.FC = () => { (1)
  const [menuActive, setMenuActive] = useState(false);  (2)
  const toggle = () => {setMenuActive(!menuActive)}; (3)
  return (
    
       (4)
        
        {window.outerWidth < 768 ? (
           
        ) : (
          ''
        )} (5)
      
      
    
  );
};
* (1) : onClick prop을 사용하기 위해서 interface나 type을 설정한다.
만약 설정하지 않는다면 🟥"type {onClick:()=>void} is not assignable" 과 같은 에러가 발생한다. TS에서는 함수 실행 후 별도의 return이 없으면 undefined 대신 void라는 데이터 타입을 반환한다. 그렇기 때문에 void를 type으로 설정해준다.
* (2) : menuActive 자체는 false / true로 boolean이므로 타입을 제네릭으로 지정해준다.
* (3), (4) : LogoContainer 컴포넌트를 클릭하면 set함수가 menuActive를 토글시킨다. 
* (5) : 드롭다운 바 자체는 menuActive가 되어있으면 'block'을 prop으로 받아 화면에 나타내고, 아닐 경우는 'none'을 prop으로 받아 화면에서 사라진다.


23. 반응형 화면 media query + 조건의 상수화
Sun, 12 Feb 2023 13:46:22 GMT
1. 반응형 화면 구현하기 : media query 사용

media query를 활용해서 디바이스 사이즈에 따라 화면이 다르게 보이게 설정한다.


기준은 최소 반응형 레이아웃으로, break point를 각각 다음과 같이 했다.



2. 코드 예시
//media query를 작성
/* 데스크탑 */

@media screen and (max-width:1023px) {
/* 타블렛 */
}

@media screen and (max-width:767px) {
/* 모바일 */
}





3. media query의 좋은 점 😀

media query 없이 구현할 때는 이렇게 외부에서 props 조건으로 반응형 화면을 구현했다. 파일 수정시마다 두 파일 다 계속 코드를 수정해야해서 디버깅하는데 시간이 오래 걸렸다. 하지만 그냥 media query를 사용하면 더 적은 파일만 수정하면 됐다.

🟥 props만으로 구현
//LogoAndSearch.tsx
export const SmallHeader = () => {
  return (
    
        (1)
        
      
      
    
  );
};

(1) 모바일 사이즈일 경우만 hover color를 '#c5f4c8'로 준다.//ChangingStyle.tsx
import styled from 'styled-components';


type StyleProps = { (2)
  hoverBack: string;
};
export const LogoSlideStyle = styled.div` (3)
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: white;
  border: 5px solid ${(props) => props.hoverBack}; (4)
  &:hover {
    background: ${(props) => props.hoverBack || 'none'};
  } (5)
`;
* (2),(3) : props를 사용하기 위해 type(generic) 지정
* (4) : 모바일 사이즈일 경우만 border 생성
* (5) : 모바일 사이즈일 경우만 hover 색상 변경

✅ media query를 사용
//LogoAndSearch.tsx
export const SmallHeader = () => {
  return (
    
       (1) 
        
      
      
    
  );
};
* (1) props를 주지 않는다.
//ChangingStyle.tsx
import styled from 'styled-components';
import { RESPONSIVE } from 'constants/style';
export const LogoSlideStyle = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: white;
  @media screen and (max-width: ${RESPONSIVE.SMALL_PX}) { (2)
    width: 97vw;
    border: 5px solid #c5f4c8; (3)
    &:hover { (4)
      background: #c5f4c8;
    }
  }
`;
* (2) media query를 이용
* (3), (4) : 앞서 구현한 border, hover 내용을 한번에 관리

### 4. 조건의 상수화
* 화면 사이즈에 따라 코드가 반복되는 부분이 있어 조건을 상수화 해서 사용했는데, 잘 되었다. 사실 잘 안되는 부분도 있었는데 그런 경우, 코드가 문제기보다는 Error에는 잡히지 않지만 syntax적으로 맞지 않거나, 해당 조건이 해당되지 않아 변화 반영이 안된거였고, 혹은 새로고침을 하지 않아 변화가 반영되지 않은 경우였다.
//Section.tsx
 
//styleConstants.ts
export const CONDITION = {
  SMALL: 'window.outerWidth < 768 ? ',
};
//LogoAndSearch.tsx
export const SmallHeader = () => {
  return (
    
      
         (2)
      
      
    
  );
};
* (1): 태그에 props에 넘기는 경우 정상 작동함
* (2): 다만 컴포넌트에 props로 넘기는 경우 제대로 되지 않았다..



22. 인라인 스타일
Fri, 10 Feb 2023 09:55:35 GMT

광고란에 이미지 사이즈가 틀어지지 않았는지 확인하기 위해 일시적으로 인라인 스타일을 적용해보았다.

//Section.tsx
import { ReactNode } from 'react';
.
.
.

interface Props {
  img?: string;
  body?: ReactNode;
}

export const AdvSection: React.FC = ({ img }) => {
  return (
    <>
      
        
      
    
  );
};

인라인 스타일

태그 props에 자바스크립트 객체 형식으로 직접 넣는 스타일 방식



* CSS, styled-components는 세미콜론(;)으로 항목들을 구분함에 반해
인라인스타일은 컴마(,)로 구분하고, 양쪽에 따옴표('')를 넣어줘야 한다 + 중괄호로 묶어서 넣는다.
1) CSS, Styled-components
display: flex;
border: 1px solid blue;
2) Inline style




스타일을 바로 넣지 않고 상수를 사용해서 넣을 수도 있다.


const makeBlue = {
display:'flex', 
border: '1px solid blue'
}





21. TS에서 컴포넌트 props 사용하기
Fri, 10 Feb 2023 09:49:29 GMT

랜딩페이지에서 섹션 사이에 이미지가 들어가는 파트를 고정하고, 외부 props로부터 쉽게 교체하고 싶었다.

//LandingPage.tsx

import {HotSection, AdvSection, MoreSection} from 'components/moleculres/Section';
import advPath from '../assets/icons.png';

const LandingPage = () => {
  return (
    <>
      
      
      
    
  );
};

평소 React만 쓸 때처럼 타입을 지정하지 않으면 다음과 같은 에러가 발생한다.

🟥 Binding element 'img' implicitly has an 'any' type.


컴포넌트에 타입을 지정해주면 된다.
//Section.tsx
import {ReactNode} from 'react';
.
.
.


interface Props {
  img?: string;
  body?: ReactNode; (1)
}
export const AdvSection: React.FC = ({ img }) => { (2)
  return (
    <>
      {img}
    
  );
};
export const MoreSection = ({body}) => {
  return (
    <>
      
        
        {body}
      
    
  );
};
* (1) props에 컴포넌트를 넣고 싶을 때 type에 ReactNode를 지정한다.
* (2) 제네릭 형태로 타입을 넣는다.


20. Layout, Dynamic loading (lazy, suspense)
Fri, 10 Feb 2023 07:02:09 GMT
아이콘과 전체적인 페이지 색감 등 테스트를 마쳤으니 바로 페이지를 완성하고싶지만,
경험상 Layout 구조를 만든 후 페이지를 구현하는 것이 재사용과 관리 측면에서 좋았어서
다음의 순서로 개발을 진행한다.

Layout 완성
dynamic import + 로딩바 구현
컴포넌트 + 랜딩페이지 제작 + 서브메뉴바
컴포넌트 + 컨텐츠 페이지 제작

1. Layout & Template

현재 나의 프로젝트 디렉토리 구성은 다음과 같은 Atomic Design Pattern을 따르고 있다.
템플릿 폴더에 Layout(페이지의 뼈대)을 지정해놓고, 필요할 때 쓰려고 한다.atoms: 단일 컴포넌트 (ex: 검색바, 검색 버튼)
molecules: atom의 묶음 (검색바 + 검색버튼)
organisms: molecule의 묶음 -> 구역 (검색창 구역)
templates: 컨텐츠가 채워지지 않은 skeleton
pages: 컨텐츠로 채워진 templates

2. Layout & Routes

하려는 것 : 우선 Basic Layout을 생성하려고 한다. Basic Layout은 랜딩페이지 및 다른 페이지에 쓰이는 기본 뼈대로, 헤더, 메뉴바, (가변 요소), 푸터 구조를 고정시켜둔다. 페이지마다 해당 레이아웃을 불러오고, 가변 요소만 다르게 하면 매번 페이지 제작시에 같은 컴포넌트를 불러와서 뼈대를 제작할 필요가 없어 재사용성을 높이고 코드 중복을 줄일 수 있다. 

Layout을 제작 후, 가변 요소는 react-router-dom 패키지의 "Outlet"이라는 요소로 넣을 수 있다.

웹페이지 경로에 따른 보이는 화면 구현은 react-router-dom 패키지의 'BrowserRouter, Routes, Route'로 구현할 수 있다.

우선, react-router-dom을 설치한다.
npm i react-router-dom
Header + 메뉴바 + Footer를 Basic Layout으로 하고, 내부를 조금씩 변화시켜줄 것이다. 이럴 경우 Outlet을 사용하여 다음과 같이 짤 수 있다.
//Layouts.tsx
import {Outlet} from 'react-router-dom;


import Header from 'components/molecules/Header';
import Menu from 'components/molecules/Menu';
import Footer from 'components/molecules/Footer';
export const Basic = () => {
    return (
        <>
        

        
             (1)
        
        
    )
  );
};
* (1) Outlet부분이 변화되는 부분이고, 나머지가 고정되는 컴포넌트 모음이다.
* Outlet은 Routes, Route와 함께 활용할 것이고, 이를 에러없이 구현하기 위해서는 BrowserRouter로 App 컴포넌트 전체를 감쌀 필요가 있다.
//root폴더의 index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeProvider } from 'styled-components';
import { myTheme } from 'styles/theme/DefaultTheme';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  
    
       (1)
        
      
    
  
);
* (1) BrowserRouter 태그로 App 컴포넌트를 감쌌다.
* 만든 Outlet과 Routes, Route는 다음과 같이 활용한다.
//App.tsx
import {Basic} from 'components/templates/Layouts';
import PATH from 'constants/routePath';
import LandingPage from 'pages/LandingPage';
function App() {
  return (
    <>
      

           (1)
            }>  (2)
              } /> (3)
            
          
      
    
  );
}
export default App;
* (1) Route는 Routes로 묶어야 문제 없이 구현된다. 
Layout을 사용하기 위해서 Route를 이중구조로 한다.
* (2) 부모 쪽 Route에 element로 들어가는 부분이 고정되는 컴포넌트다. Basic 컴포넌트에서 헤더-메뉴-Outlet-푸터 구조를 만들었으니 Basic 컴포넌트를 넣어준다.
* (3) 자식 쪽 Route에 element로 들어가는 부분이 Outlet에 들어가는 부분이다. 경로 '/'와 랜딩페이지에 대한 element 설정을 해준다.

### 3. Dynamic import (lazy, suspense)
* (static import)
import Component from './Component';
가장 상위에서 import 구문을 사용해서 불러오는 방식.
앱의 빌드 타임에 '사용하지 않는 컴포넌트까지' 한꺼번에 로딩해 초기 렌더링 지연시간이 길어질 수 있다.

* (dynamic import) 
React.lazy(), Suspense를 사용해서 불러오는 방식. 
런타임에 '사용하는 모듈만'을 로딩해 초기 렌더링 지연시간을 줄인다.
다만, 페이지를 이동하는 과정마다 로딩 화면이 보여질 수 있어 서비스에 따라서 적용여부를 결정하는 것이 좋다.
//App.tsx
import {Suspense, lazy} from 'react';
import { Routes, Route } from 'react-router-dom';
import { Basic } from 'components/templates/Layouts';
import PATH from 'constants/routePath';
import { LoadingBunny } from 'components/atoms/Loading';
import LandingPage from 'pages/LandingPage';를 다음과 같이 수정
const LandingPage = lazy(() => import('pages/LandingPage')); (2)
function App() {
  return (
    <>
      

        }> (1)
          
            }>
              } /> (2)
            
          
        
      
    
  );
}
export default App;
* (1) Suspense의 fallback prop은 컴포넌트가 로드될 때까지 로딩화면으로 보여줄 React 엘리먼트를 받아들인다.
* (2) React.lazy()로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense의 컴포넌트 하위에서 렌더링해야 한다.





19. Footer 하단 고정 + TS & Styled-Components props 변수 사용 & div 겹치기
Thu, 09 Feb 2023 04:12:06 GMT
1. Footer를 body 컨텐츠 크기에 상관없이 하단에 고정
position:fixed;
bottom:0;
left: 0;
right: 0;
2. TS + Styled-Components props 변수 사용

컴포넌트의 기본 margin값을 상수로부터 불러오고,
일부 수정할 필요가 있을 때 밖에서 props로 변경하기를 원할 경우 다음과 같이 작성한다.//Bindings.ts
type BindingType = {
margin?: string; (1) 
};


export const Horizontal = styled.div(2) 
.
.
.
margin : ${(props)=> props.margin || DEFAULT.MARGIN} (3)
* (1) type을 명시하고, ?를 넣어 값을 넣지 않아도 에러가 발생하지 않게 한다.
* (2) type을 제네릭으로 적용한다.
* (3) 밖에서 margin 값을 입력하지 않으면 DEFAULT.MARGIN값을 적용한다.
//Menubar.tsx
export const Menubar = () => {
.
.
return (
    <>
         ...  (4)
    
  )
} 
* (4) DEFAULT.MARGIN값이 아닌 다른 margin 값을 주고싶을 때 props로 적용해주면 된다.


### 3. div 겹쳐서 표현하기
* ![](https://velog.velcdn.com/images/random-olive/post/e6afb45c-ee61-4fd6-8e2c-1dbddefa5850/image.png)

그림과 같이 section frame에 HOT 아이콘을 겹쳐서 컴포넌트로 만들고 싶었다.
겹치기 위해서는 position: absolute를 사용해야 하는데, 부모 컴포넌트를 지정하는 것이 중요해서 다음과 구조로 컴포넌트 구조를 만들었다. 
(부모 컴포넌트를 position:relative로 지정하지 않으면, body 전체를 기준으로 position:absolute된 자식이 움직여서 뷰사이즈가 달라질 때마다 자식의 위치가 변경된다.)
//Section.tsx
export const HotSection = () => {
    return (
      <>
           --> (1)
                --> (2)
      
      
    )}
```

(1) 밑에 깔리는 section frame : 부모 컴포넌트
(2) 위에 올라가는 HOT 아이콘 : 자식 컴포넌트




18. 서브메뉴 hover effect
Wed, 08 Feb 2023 08:43:57 GMT
1. 서브메뉴 생성

메뉴에 마우스를 호버하면 서브메뉴가 나오고, 밑줄이 가운데에서 밖으로 나가는 애니메이션을 추가했다.

서브메뉴는 앞의 두 개의 메인메뉴에서만 적용될 예정이어서, 해당 서브메뉴의 이름들을 constants/data.ts 의 menuData에 list 형태로 저장한 후, map을 사용해서 구현했다.

Type '{title: string; href: string;}' is not assignable to type 'ReactNode' :
🟥 서브메뉴에서 el.title을 불러와야 하는데 el만을 불러왔을 때, 나왔던 에러.


2. 서브메뉴 로직 리팩터링

앞의 두 서브메뉴만 hover했을 때 나타나게 해야했다 : 단순하게 아래와 같이 우선 작성한 다음, //Menubar.tsx


{idx === 0 && subMenu[0].list.map((el, i) => 
{el.title})}
{idx === 1 && subMenu[1].list.map((el, i) => {el.title}
)} 
* subMenu를 data.ts 파일에 입력하면, Menubar 컴포넌트에서 subMenuIdx가 담긴 배열을 받아서 다음과 같이 반복 없이 구현하도록 하였다.
//Menubar.tsx
const subMenuIdx = Array.from(Array(subMenu.length),(_,i)=>i);
return (
    <>
        .
        .
        .
        {subMenuIdx.map((i) => idx === i && subMenu[i].list
        .map((menu, key) => 
        (
{menu.title})
        ))}
    
)



17. 이미지 제작 및 스프라이트 기법 적용 
Wed, 01 Feb 2023 02:43:30 GMT
1. 아이콘 이미지 제작

Photoshop으로 웹페이지 내에 쓰일 아이콘과 로고 등을 제작했다.
(로딩 img는 웹페이지 기능이 어느정도 완료된 후 추가작업할 예정 (gif))



2. 이미지 스프라이트 기법 (+ Styled-Components)

이미지 스프라이트 기법 : 브라우저 이미지 최적화할 때 사용하는 기법. 
페이지 로딩시 이미지를 개별적으로 로딩하면 서버 요청 수가 많아져서 로딩시간이 늘어난다.
이를 개선하기 위해 하나의 이미지 파일을 제작 후 background, background-position, width, height 
속성을 사용해 필요한 부분에 필요 아이콘만 보이게 한다. 
사용자경험 개선 뿐만 아니라 수많은 이미지를 하나로 관리해 관리적 측면에서도 유용하다.//App.tsx
import styled from 'styled-components';
import iconPath from './assets/icons.png';


function App() {
    return (
        <>
            

            .
            .
            .
                 <-테스트할 이미지
            
        
       );
}
const Test = styled.divbackground: url(${iconPath});
width: 150px;
height: 80px;
background-position: -10px 20px;
-> "img"태그에서 적용하면 태두리가 가는 선으로 같이 나타나서, 
"div" 태그에 일단 테스트해보았다.

### 3. 레이아웃 및 Template 제작
* App.tsx에 이미지 파일, 컴포넌트 등을 모두 넣고, 전체적인 디자인을 테스트해봤는데
전체적인 색감이나 컴포넌트 크기 등 더이상 크게 수정하거나 픽스할 것이 없다고 판단해
페이지를 정리한 후 레이아웃을 생성했다.

필요한 페이지
랜딩페이지
메뉴 페이지
컨텐츠 페이지
회원가입, 로그인
검색결과 페이지
관리자 페이지

4.Lazy, Suspense 적용

Lazy, Suspense 등을 적용해 로딩바 미리 도입




16. Firebase cloud 클라이언트 액세스 만료 문제
Wed, 01 Feb 2023 01:37:50 GMT

금일 오전 메일이 와 있었다.

[Firebase] Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 3일 후에 만료됩니다
테스트 모드에서 개발을 시작하도록 선택했기 때문에 Cloud Firestore 데이터베이스가 인터넷에 완전히 공개됩니다. 공격자에게 취약한 앱이므로 첫 30일이 지나면 요청 허용을 중지하도록 Firestore 보안 규칙이 구성되었습니다.
3일 후에 Firestore 데이터베이스에 대한 모든 클라이언트 요청이 거부됩니다. 그전까지 데이터를 적절히 보호하면서 앱이 작동할 수 있는 강력한 보안 규칙을 작성하세요. 분석은 매일 실행됩니다. 지난 24시간 이내에 규칙을 수정했다면 변경사항이 반영되지 않을 수 있습니다.

해결

'규칙 수정' 클릭
rules_version = '2';
service cloud.firestore {

match /databases/{database}/documents {
  match /{document=**} {
    allow read, write: if
      request.time < timestamp.date(2023, 2, 4);
  }
}  
}
request.time < timestamp.date(2023, 2, 4)> 에서
2023 -> 2024로 변경시켜 준 수 '게시' 버튼을 눌러 변경사항을 적용한다.