Intersection Observer API

Sat, 08 Oct 2022 10:42:13 GMT

🤔 Intersection Observer API

루트 요소와 타겟 요소의 교차점을 관찰하는 API입니다.

루트 요소를 뷰포트로 하고 타겟 요소를 애니메이션을 실행할 태그로 지정한다면 스크롤에 의해서 뷰포트와 태그가 교차하는 경우에 원하는 애니메이션을 실행할 수 있습니다.

😮 Intersection Observer API 사용법

옵션값들
1. root: 루트 요소를 지정하는 속성 ( 생략 시 뷰포트 )
2. rootMargin: 루트 요소의 범위를 확장하는 속성 ( 단위 지정 )
3. threshold: 교차점의 범위를 지정하는 속성 0.0~1.0 ( 배열도 가능 )
콜백의 매개변수
1. boundingClientRect: 타겟 요소의 경계 사각형 정보
2. intersectionRatio: 루트 요소와 타겟 요소의 교차 비율 ( 0.0~1.0 )
3. intersectionRect: ?
4. rootBounds: 루트 요소의 경계 사각형 정보
5. target: 타겟 요소
6. time: 교차 시간
7. isIntersecting: 타겟 요소와 루트 요소의 threshold만큼의 교차 여부

🧐 React에서 Intersection Observer API 예시

예시

const IO = new IntersectionObserver(callback, options);

IO.observe(element);


+ 사용 예시
```tsx
const onScroll = useCallback((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
  // 특정 태그가 뷰포트의 "threshold"값만큼 보여지면 현재 콜백함수 실행
}, [])

useEffect(() => {
  if(!elementRef.current) return;

  // 콜백함수와 옵션값 지정
  let observer = new IntersectionObserver(onScroll, { threshold: 0.1 });
  // 특정 요소 감시 시작
  observer.observe(elementRef.current);

  // 감시 종료
  return () => observer?.disconnect();
}, [elementRef]);

실제 사용 예시 ( 참고 포스트 )

import { useRef, useEffect, useCallback } from "react";

type Direction = "up" | "down" | "left" | "right";

type Props = { direction?: Direction; duration?: number; delay?: number; }; type ReturnType = { ref: React.MutableRefObject; style: { opacity: number; transform: string | undefined; }; };

const useScrollFadeIn = ({ direction = "up", duration = 1, delay = 0, }: Props): ReturnType => { // 2022/06/14 - 애니메이션을 실행할 태그Ref - by 1-blue const elementRef = useRef(null);

// 2022/06/14 - 지정한 방향에 따른 트랜지션 반환 - by 1-blue const handleDirection = useCallback((dir: Direction) => { switch (dir) { case "up": return "translate3d(0, 50%, 0)"; case "down": return "translate3d(0, -50%, 0)"; case "left": return "translate3d(50%, 0, 0)"; case "right": return "translate3d(-50%, 0, 0)"; default: return ""; } }, []);

// 2022/06/14 - IntersectionObserver에 등록할 콜백함수 - by 1-blue const onScroll = useCallback( ([{ isIntersecting }]: IntersectionObserverEntry[]) => { const { current } = elementRef; if (!current) return;

  // 지정한 엘리먼트가 "threshold"만큼을 제외하고 뷰포트에 들어왔다면 실행
  if (isIntersecting) {
    current.style.transitionProperty = "all";
    current.style.transitionDuration = `${duration}s`;
    current.style.transitionTimingFunction = "cubic-bezier(0, 0, 0.2, 1)";
    current.style.transitionDelay = `${delay}s`;
    current.style.opacity = "1";
    current.style.transform = "translate3d(0, 0, 0)";
  }
  // 지정한 엘리먼트가 "threshold"만큼을 제외하고 뷰포트 밖에 존재한다면 실행
  // 아래 부분을 넣어주면 교차범위 이하일 경우 애니메이션이 반대로 실행됨
  else {
    current.style.transitionProperty = "all";
    current.style.transitionDuration = `${duration}s`;
    current.style.transitionTimingFunction = "cubic-bezier(0, 0, 0.2, 1)";
    current.style.transitionDelay = `${delay}s`;
    current.style.opacity = "0";
    current.style.transform = handleDirection(direction);
  }
},
[delay, duration, handleDirection, direction]

);

// 2022/06/14 - IntersectionObserver 등록 - by 1-blue useEffect(() => { if (!elementRef.current) return;

// 좌우로 움직이는 방식을 선택했을 경우 주의해야 할 점이 전체 크기의 50%를 이동해서 뷰포트 밖으로 많이 나가버리면
// 애니메이션 실행이 안 될 수 있다.
// 왜냐하면 이미 뷰포트 밖으로 지정한 교차범위 이상을 나가버렸기 때문에 스크롤과 관계없이 실행되지 않음
// 그럴 경우 "threshold" 값을 줄이거나, "rootMargin"을 늘리면 된다.
let observer = new IntersectionObserver(onScroll, { threshold: 0.1, rootMargin: "20px" });
observer.observe(elementRef.current);

return () => observer?.disconnect();

}, [onScroll]);

return { ref: elementRef, style: { opacity: 0, transform: handleDirection(direction) }, }; };

export default useScrollFadeIn;

같은 형식으로 사용 ```

움직이는 배경화면 구현

Tue, 04 Oct 2022 13:20:50 GMT

!codepen[1-blue/embed/ZEoRmjV?default-tab=html%2Cresult]

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

해당 포스트는 https://gurtn.tistory.com/164 여기의 게시글을 참고로 만들었습니다.

구현 원리

svg에 대해서는 여기를 참고해주세요

가로/세로중에서 더 큰 값을 구함
이전에 구했던 값의 1.5배의 사이즈로 background의 크기를 늘려줌
의 내부에 랜덤한 크기의 랜덤한 위치에 랜덤한 개수의 을 그려줌
animation rotate를 이용해서 background를 회전시킴

// 참고 사이트 ( https://gurtn.tistory.com/164 )
// 백그라운드 세팅 ( "

image carousel 구현

Tue, 04 Oct 2022 12:30:08 GMT

!codepen[1-blue/embed/zYjamKE?default-tab=html%2Cresult]

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

구현 목적

이전에 image carousel를 사용할 때는 react-slick같은 라이브러리를 이용해서 쉽게 구현했습니다. 어차피 앞으로 사용할 때는 라이브러리에서 제공해주는 기능을 쓸거니까 한번쯤은 직접 구현해보면서 동작 원리를 고민하고 이해해보는게 좋지 않을까 생각해서 구현하게 되었습니다.

세팅

구현 방법을 설명하기 앞서 사용하는 용어를 먼저 정리하겠습니다.

.img-window: 이미지를 보여줄 엘리먼트
.img-container: 이미지들을 갖는 부모 엘리먼트
.img: 이미지를 백그라운드로 갖는 엘리먼트

html

```

css

.img-window {
position: relative;
width: 100%;
min-width: 300px;
max-width: 550px;
padding-top: 100%;
margin: 0 auto 0.6em;

border-radius: 0.1em;

overflow: hidden;
}
.img-window .img-container {
position: absolute;
inset: 0;
margin: auto;

display: flex;

background-color: #000;
}
.img-window .img-container .img {
width: 100%;
height: 100%;

display: inline-block;

background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

구현 방법

.img-container의 내부 이미지 개수 * 100%를 width로 .img-container의 크기를 등록 ( 이미지들을 한줄로 배치 )
insertBefore()를 이용해서 첫번째 이미지를 두번째 위치로 이동
translateX를 이용해서 -100% 이동해서 두번째 위치부터 보여주도록 설정
좌/우측 이동 버튼을 클릭하면 방향에 따라서 translateX를 100%, -100%로 이동
이동하고 나면 ( transitionend 이벤트 사용 ) 이동 방향에 따라서 이전 이미지를 마지막으로 / 마지막 이미지를 처음으로 이동 ( 좌/우측으로 무한으로 이동하기 위함 )

자세한 TS코드는 codepen를 참고해주세요.

후기

처음에는 어떤 방식으로 구현해야할지 막막했습니다. 구글링으로 찾아본 다음에는 원리는 알겠는데 이걸 어떻게 코드로 표현하지? 라는 생각을 하면서 일단 적으면서 생각해보자는 마음으로 시작했습니다. 이미지 배치/이동/순서 변경 등 모든게 처음에는 원하는 대로 안됐지만 계속 시도하면서 완성했습니다.

이전에는 동작 원리는 전혀 모른채 그냥 라이브러리에서 제공하는 방법만 사용해서 동작시켰는데 원리를 생각하면서 직접 만들어 보는게 좋은 경험이었습니다.

Accordion menu 구현

Tue, 04 Oct 2022 11:16:53 GMT

!codepen[1-blue/embed/LYmrXGK?default-tab=html%2Cresult]

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

기본적으로는 닫아놨다가 누르면 아래로 열리고 추가 정보를 볼 수 있는 기능을 가진 Accodian menu를 만들어봤습니다. 예전에 HTML5를 공부하다가 보기만 하고 지나갔던

와

가 생각나서 관련해서 구글링해보면서 방법을 찾고 적용해봤습니다.

애니메이션 적용 전

아래 gif는

에 스타일링만 적용한 결과물입니다. ... 애니메이션 없는 gif 추가 transition을 적용한 것처럼 서서히 열리고 서서히 닫히는 기능을 원했지만 원하는대로 동작하지 않아서 애니메이션이 적용되는 방법을 찾아봤습니다.

🤔 ResizeObserver 사용

다른 방법을 찾다가 ResizeObserver의 존재를 알게 되었습니다. ResizeObserver는 특정 엘리먼트의 크기 변화를 감지합니다. 해당 기능과

를 클릭하면 height가 늘어나는 것을 이용해서 transition을 적용한 것처럼 효과를 줄 수 있습니다.

ResizeObserver 사용법

const RO = new ResizeObserver(callback)
RO.observe(element)

"callback"의 인자는 "ResizeObserverEntry[]"값이 들어옵니다.
관찰하는 모든 엘리먼트의 특정 정보를 담은 "ResizeObserverEntry"의 배열입니다. */

ResizeObserverEntry의 속성들 ( 자세한 정보는 mdn )
1. target: 관찰 대상입니다.
2. contentRect: 관찰 대상의 사각형 정보입니다.
3. 나머지는 사용 안해봐서 생략...

🧐 실제 적용 예시

아래의 예시를 보면서 어떻게 적용했는지 설명하겠습니다. ( 참고한 포스트 )

export const setDetailsHeight = (wrapper: HTMLElement) => {
  // 특정 의 닫힘과 열림의 "height"값을 미리 기록함 ( "--expanded"와 "--collapsed"에 기록 )
  // "width"를 "dataset"에 넣어두는 이유는 처음 실행인지 아닌지 즉, 닫힘과 열림의 크기를 미리 기록하는 것인지 판단을 위해서
  const setHeight = (detail: HTMLDetailsElement, open = false) => {
    detail.open = open;
    const { width, height } = detail.getBoundingClientRect();
    detail.dataset.width = width + "";
    detail.style.setProperty(
      open ? `--expanded` : `--collapsed`,
      `${height}px`
    );
  };

  // ResizeObserver 객체 생성
  const RO = new ResizeObserver((entries) =>
    entries.forEach((entry) => {
      const detail = entry.target as HTMLDetailsElement;
      const width = detail.dataset.width ? +detail.dataset.width : -1;

      // 처음 실행이라면 즉, 클릭에 의한 실행이 아니라면 실행
      // 단, 여기서 주의해야 할 점이 "entry.contentRect.width"값에는 padding이나 border를 포함하지 않은 값임
      // 따라서 항상 width값이 맞지 않아 if문 코드를 실행해서 가 안열릴 수 있음
      // 그러므로 details에 직접적으로 padding이나 border를 안주는 것이 좋고 만약 값이 준다면 수치를 계산해서 직접 더해줘야 정상적으로 작동함
      if (width !== entry.contentRect.width) {
        detail.removeAttribute("style");
        // 닫힘 크기 기록
        setHeight(detail);
        // 열림 크기 기록
        setHeight(detail, true);
        // 원래 상태로 되돌림
        detail.open = false;
      }
    })
  );

  // wrapper 내부의 모든 을 찾아서 관찰 대상으로 지정
  const details = wrapper.querySelectorAll("details");
  details.forEach((detail) => RO.observe(detail));
};

// setDetailsHeight()에 들을 포함하는 가장 상위 태그를 인자로 넣어주면 됨
// 물론 document를 바로 넣어줘도 되지만 전체 탐색보다는 를 사용하는 제일 상위태그를 넣어주는 게 더 효율적이라고 생각함

css 적용하기

details {
/* 닫힌 "height" 값을 적용 */
height: var(--collapsed);
overflow: hidden;
/* 닫힌 값과 열린 값이 다르기 때문에 "transition"이 적용됩니다. */
transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
details[open] {
/* 열린 "height" 값을 적용 */
height: var(--expanded);
}

😮 ResizeObserver 적용 결과물

... 결과 gif 넣기

Scroll Animation 구현

Tue, 04 Oct 2022 11:04:37 GMT

!codepen[1-blue/embed/ZEoRmXq?default-tab=html%2Cresult]

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

코드 예시

직접 스크롤에 의한 애니메이션을 적용하기 위해서는 생각보다 많은 처리가 필요합니다. 아래 코드는 많긴 하지만 최소한으로 작성한 코드입니다.

코드의 실행 흐름
1. 스크롤 이벤트를 실행할 영역의 높이를 정한다.
2. 이벤트를 발생할 엘리먼트/시작지점/끝지점, 시작/끝 값을 정한다.
3. 스크롤 이벤트로 영역에서 스크롤된 비율을 구해서 시작지점/끝지점에 해당하는지 판단하고 그에 맞는 시작/끝 값을 inline-style로 넣는다.

index.ts

/**
* 현재 애니메이션이 실행될 비율 구하기
* @range 애니메이션 실행 스크롤의 범위 ( 0 ~ 1 )
* @value 애니메이션 실행 값의 범위
* @currentSceneScrollHeight 현재 "scene"에서 스크롤한 크기
* @currentSceneHeight 현재 "scene"의 전체 높이
* @returns 현재 애니메이션 실행 값
*/
const getTimelineValue = ({
range,
value,
currentSceneScrollHeight,
currentSceneHeight,
}: TimelineValueProps) => {
// 애니메이션 시작지점/끝지점/지속영역
const animationStartHeight = currentSceneHeight * range.start;
const animationEndHeight = currentSceneHeight * range.end;
const animationHeight = animationEndHeight - animationStartHeight;

// 애니메이션 실행 영역에 들어온 경우
if (
  animationStartHeight <= currentSceneScrollHeight &&
  animationEndHeight >= currentSceneScrollHeight
) {
  // "((currentSceneScrollHeight - animationStartHeight) / animationHeight)" => 현재 "scene"에서 스크롤된 비율
  // "* (value.end - value.start) + value.start"는 지정된 범위로 변환시켜주는 연산 ( 0~1사이의 값(v)이 10~100(value.start, value.end) 사이로 변해야 한다면 "v * ( start - end ) + end"를 해주면 됨 )
  return (
    ((currentSceneScrollHeight - animationStartHeight) / animationHeight) *
      (value.end - value.start) +
    value.start
  );
}
// 애니메이션 실행 영역 이전인 경우
else if (animationStartHeight > currentSceneScrollHeight) {
  return value.start;
}
// 애니메이션 실행 영역 이후인 경우
else {
  return value.end;
}
};

(() => { // 모든 "scene"을 찾고 타입 확정 const scenes = [...document.querySelectorAll("#scene")].filter( (scene): scene is HTMLElement => scene instanceof HTMLElement ); // "scene0"의 "message"들 ( 스크롤에 의한 애니메이션을 지정할 "element"들 ) const messagesOfScene0 = [ ...document.querySelectorAll(".scene-a .message"), ].filter((message): message is HTMLElement => message instanceof HTMLElement);

// 각 "scene"에 대한 정보 const sceneInfos = [ // 첫 번째 "scene"의 정보 { // "레이아웃에 영향을 미치지 않는 배치"를 의미 type: "fixed", // "뷰포트 높이의 3배를 가짐"을 의미 heightNumber: 3, }, // 두 번째 "scene"의 정보 { // "레이아웃에 영향을 미치는 자연스러운 배치"를 의미 type: "nomal", heightNumber: 1, },

// ...

] as const;

// 각 "scene"의 "animation"에 대한 정보 const animationInfos = [ // 첫 번째 "scene"에서 실행할 애니메이션 { // 애니메이션을 실행할 타겟 messageA: { // "opacity" opacityIn: { // 시작/끝 위치 ( 해당 "scene"의 스크롤 0.1 ~ 0.3 사이에 실행한다는 의미 ) range: { start: 0.1, end: 0.3 }, // 시작/끝 값 ( 값이 0 ~ 1사이로 변한다는 의미 ) value: { start: 0, end: 1 }, }, // 위 값의 예시로 설명하자면 "scene"의 "height"가 1000px이라고 가정했을 때 100px에 위치할땐 0, 200px일땐 0.5, 300px일땐 1의 값을 얻는다는 의미, 그 값은 "getTimelineValue()"을 이용해서 얻음 opacityOut: { range: { start: 0.7, end: 1 }, value: { start: 1, end: 0 }, }, // "translateY" translateYIn: { range: { start: 0.1, end: 0.3 }, value: { start: 60, end: 0 }, }, translateYOut: { range: { start: 0.7, end: 1 }, value: { start: 0, end: -60 }, }, }, // ... 같은 "scene"의 다른 요소들의 애니메이션 설정값 } as const, // ... 다른 "scene"의 특정 요소들 애니메이션 설정값 ] as const;

// 현재 위치한 "scene" / 이전 "scene"들의 "height"의 합 let currentScene = 0; let prevSceneHeight = 0;

// 초기 세팅 const init = () => { // 각 "scene"의 높이 설정하기 sceneInfos.forEach((sceneInfo, i) => { if (sceneInfo.type === "nomal") return;

  // 각 "scene"의 높이를 "현재 브라우저의 높이 * heightNumber"로 지정
  scenes[i].style.height = innerHeight * sceneInfo.heightNumber + "px";
});

};

// 현재 어느 "scene"인지 구하는 이벤트 함수 ( + "prevSceneHeight"도 구함 ) const onScrollEvent = () => { prevSceneHeight = 0; // 이전 "scene"의 높이의 합 for (let i = 0; i < currentScene; i++) { prevSceneHeight += scenes[i].clientHeight; }

// 다음 "scene"으로 넘어가면 실행 ( 바뀌는 시점에 마지막 애니메이션이 적용 안되기 때문에 바뀌기전 마지막에 애니메이션 적용 )
if (scrollY > prevSceneHeight + scenes[currentScene].clientHeight) {
  currentScene++;
  playAnimation();
}
if (scrollY < prevSceneHeight) {
  currentScene--;
  playAnimation();
}

};

// 애니메이션 실행 const playAnimation = () => { // 현재 "scene"의 정보들 const scene = scenes[currentScene];

// 애니메이션의 값을 계산할 때 필요한 현재 "scene"의 정보 ( 현재 "scene"에서 스크롤된 높이 크기 / 현재 "scene"의 전체 높이 / 현재 "scene"에서 스크롤된 높이의 비율 )
// 현재 "scene"에서 스크롤된 높이 크기 ( 전체 스크롤된 높이 - 이전 "scene"들의 높이 )
const currentSceneScrollHeight = scrollY - prevSceneHeight;
// 현재 "scene"의 전체 높이
// "innerHeight"즉 브라우저 높이를 빼준 이유는 "scrollY"가 0일 때도 "innerHeight"만큼 영역을 차지하기 때문... 글로 설명하기 너무 애매해서 "innerHeight"를 빼준 값과 안빼준 값을 비교해서 실행해보면 이해할 수 있음
const currentSceneHeight = scene.clientHeight - innerHeight;
// 현재 "scene"에서 스크롤된 비율 ( 현재 "scene"에서 스크롤한 높이 / 현재 "scene"의 전체 높이 )
const ratio = currentSceneScrollHeight / currentSceneHeight;

// 값을 넣을 변수
let opacity = 0;

// 첫 번째 "scene"
if (currentScene === 0) {
  const animationInfo = animationInfos[currentScene];

  // "messageA"의 "opacity" 애니메이션
  if (animationInfo.messageA.opacityIn.range.end > ratio) {
    opacity = getTimelineValue({
      ...animationInfo.messageA.opacityIn,
      currentSceneScrollHeight,
      currentSceneHeight,
    });
  } else {
    opacity = getTimelineValue({
      ...animationInfo.messageA.opacityOut,
      currentSceneScrollHeight,
      currentSceneHeight,
    });
  }
  messagesOfScene0[0].style.opacity = `${opacity}`;

  // ... 다른 애니메이션 설정들
}

};

window.addEventListener("DOMContentLoaded", () => { init(); }); window.addEventListener("scroll", () => { onScrollEvent(); playAnimation(); }); })()

```

후기

평소에 다른분들의 포트폴리오 웹사이트를 구경해보면 대부분 스크롤의 비율에 의해서 애니메이션이 실행되는 구조로 많이 구현한걸 봤었습니다. 저도 다음에 포트폴리오 웹사이트를 만들때는 저런 방식으로 구현해야겠다고 항상 생각했어서 이번에 직접 구현하게 되었습니다.

기존에 스크롤 이벤트를 사용한적은 있지만 이렇게 특정 지점에서 스크롤의 비율에 의해서 애니메이션의 실행의 비율이 결정되는 것을 해본적은 없습니다. 만약 해봤어도 특정 라이브러리를 이용해서 쉽게 구현했을텐데 JavaScript만을 이용해서 바닥부터 구현하려니 헷갈리고 어려운 부분이 정말 많았습니다.

이렇게 시간이 많이 소모되고 읽기도 힘든 코드를 작성해보는게 도움이 될지는 정확하게 알 수는 없지만 그래도 직접 원리를 이해하고 구현해봤다는 점이 언젠간은 도움이 되지 않을까 생각합니다.

참고한 강의 - 인프런 1분 코딩

Tue, 20 Sep 2022 11:58:28 GMT

해당 포스트는 인프런 - 1분코딩 SVG 마스터강의를 들으면서 정리한 포스트입니다.

해당 포스트에서 작성한 속성은 대부분 css에서 적용할 수 있습니다.

SVG

확장 가능한 벡터 그래픽

벡터 그래픽: 점과 점 사이의 계산을 이용한 그림

이미지와의 차이점은 픽셀을 사용하는 것이 아닌 계산을 이용해서 그리는 것이므로 크기에 따라서 화질이 변하지 않습니다.

이미지의 경우 화질이 높을수록 픽셀의 수가 많아집니다. 따라서 용량이 고화질일수록 커지게 됩니다. 하지만 SVG는 크기에 상관없이 현재 크기에 맞게 계산을 통해서 그리는 것이므로 크기에 영향을 받지 않고 항상 좋은 화질을 유지합니다. 하지만 계산이 필요하기 때문에 복잡할수록 용량이 커지게 되기 때문에 간단한 아이콘에 주로 사용합니다.

계산을 통해 그려지기 때문에 html 속성을 변경시키면 그것에 맞게 색상이나 모양을 쉽게 바꿀 수 있습니다.

SVG 사용 방법

css bakcground-image: url("...경로")
inline

SVG 속성

viewBox: 실제 크기와 관계없이 내부에서 보여줄 크기를 지정

아래 예시처럼 선언되어 있다면 실제 의 크기는 가로/세로가 400px입니다. 하지만 내부에서 그려지는 크기는 가로/세로가 200px이라고 생각하고 그려지기 때문에 는 50px의 크기로 그려지게 됩니다.

실제 크기는 400px, 의 내부에서 그려지는 크기는 200px 400px의 도화지에 100px짜리 사각형을 그리라고 했으나, 실제로는 200px의 도화지이기 때문에 50px로 축소해서 그립니다.

css, js 적용하기

: 나중에 사용할 그래픽 객체, css, js들을 작성하는 공간

내부에서의 작성 방식은 html에서 inline으로 작성하던 방식대로 작성하면 됩니다. (

그리기

속성을 inline-style로 사용하지 않고 css(Hello, SVG Hello, Next.js Hello, Velog
4. 텍스트 부분 스타일링 ( )
5. 선 위에 글자 입히기 ( )
마무리

svg는 대부분 툴을 이용해서 만들어진 상태로 사용하기 때문에 직접적으로 코드를 작성하거나 수정할 경우는 거의 없다고 생각합니다.

저도 heoricon, fontawesome 같은 사이트에서 사용할 아이콘을 찾아서 복사 붙여넣기를 이용해서 사용했지만 사용했습니다.

하지만 이게 어떤 코드인지 모르고 사용했기 때문에 불안했기도 했고, 아이콘에서 색상, 크기, 애니메이션 같은 작은 부분을 수정하는데도 검색을 통해서 찾고 테스트하는 과정을 계속하면서 그때만 대충 이해하고 넘어갔던 부분을 하나하나 공부하면서 원리를 이해할 수 있어서 도움이 많이 됐습니다.

물론 위의 코드들을 모두 외우거나 실제로 작성하는 일은 없겠지만 최소한 어떤 코드에 어떤 동작을 하는지 얕게 이해하고 있으니 다음 문제가 생겼을 때 시간 낭비를 줄이고 금방 해결할 수 있을 것 같습니다.

bleshop v 1.0.0 마무리

Fri, 16 Sep 2022 11:08:55 GMT

bleshop 배포 링크

BleShop

해당 프로젝트를 시작한 목적은 세 가지였습니다. 첫 번째는 모바일 형태의 레이아웃을 데스크탑에서도 적용되도록 구현하는 것 두 번째는 조금이라도 실제 결제 기능을 사용해보는 것 세 번째는 가독성 좋은 코드와 적절한 타입 선언과 경고/에러가 전혀 없는 코드를 작성하는 것

결과물을 제가 보고 판단하긴 했지만 어느 정도 원하던 결과물이 나왔다고 생각합니다. 모바일 ~ 데스크탑까지 모든 사이즈에 반응하는 앱 같은 레이아웃을 적용했고, 테스트 결제긴 하지만 결제가 되고 결제 기록을 등록할 수 있는 로직을 작성했고, 타입을 구분하고 유틸리티 타입을 사용해서 나름 적절하게 타입을 사용했다고 생각합니다.

사용한 라이브러리

1. Next.js

React.js의 프레임워크인 만큼 많은 기능들을 쉽게 사용할 수 있도록 지원해주고, 사용자에 의도에 따라서 적절하게 SSG, SSR, CSR을 적용할 수 있도록 도와주기 때문에 선택했습니다.

대부분 SSG or SSR을 적용했고, 적용의 근거는 SEO나 렌더링에 사용하는 데이터가 자주 변하는지 여부입니다. 예를 들어서 로그인/회원가입 페이지 같은 경우에는 데이터의 변화가 없고 SEO가 필요하지 않아서 SSG를 적용했습니다. 메인/특정 게시글 페이지같은 경우에는 렌더링 데이터가 자주 바뀌고, SEO가 필요하므로 SSR을 적용했습니다.

추가로 내 정보 페이지 같이 데이터가 자주 변하지만 SEO가 필요 없는 페이지들은 CSR이나 SSR 중에 선택이라고 생각하는데 현재는 SSR로 구현했습니다. 하지만 SSR은 서버에 부담을 주기 때문에 다음에 CSR로 바꾸려고 합니다.

2. Recoil

상태 관리 라이브러리로 사용하기 위해서 선택했습니다. 리액트의 훅과 사용법이 거의 비슷하기 때문에 러닝커브가 매우 낮고, Redux처럼 어디든 호환하지 않고 React.js 전용이기 때문에 세팅하기도 매우 간단하기 때문에 빠르게 공부하고 사용할 수 있다고 판단해서 선택했습니다.

다만 사용하면서 얻은 이점보다는 불편함이 더 많다고 느꼈습니다. Redux처럼 정보가 많지 않고, Next.js와 사용하면 SSR에서 키 중복 경고가 발생하는 것, SSR에서 사용 시 쿠키 문제 등의 문제가 있어서 불편했습니다. 물론 사용이 미숙해서 그렇겠지만 그것을 극복할 만큼의 많은 정보가 없다고 느꼈습니다.

결과적으로는 비동기 selector를 모두 없애고 컴포넌트간의 데이터 공유를 위해서만 사용했습니다.

3. next-auth

next-auth 적용 방법 포스트

로그인을 처리하기 위한 인증 로직을 위해 선택했습니다. 여러 가지 로그인 방식을 지원해주고 그중에서 Credentials 방식을 선택했습니다. ( email, password를 이용한 인증 방식 ) 기존에 이용해봤던 passport보다는 더 쉽다고 느껴졌고, 프론트/서버에서 상황에 맞게 로그인한 유저의 정보를 가져올 수 있어서 좋았습니다.

4. prisma

데이터베이스를 관리하기 위해서 선택했습니다. sequelize보다 더 쉽고, typescript에서 사용 시 작성한 모델에 맞는 타입을 자동으로 생성해주기 때문에 정말 좋습니다.

데이터의 CRUD를 처리할 수 있는 메서드들을 모두 지원해주고, _count, skip, orderBy 등의 유틸 기능들까지 지원해줘서 편합니다. 또한 TypeScript를 이용하면 타입이 적용되어 자동 완성을 지원해주고, 모델 타입 + TypeScript utility를 활용하여 원하는 타입을 쉽게 만들고, 타입 변화에 맞게 자동으로 업데이트되어서 사용하기 정말 편합니다.

5. tailwindcss

css를 쉽게 적용하기 위해서 사용했습니다. 아직 styled-components밖에 사용해보지 않았지만 다른 css 전처리기, 프레임워크, css-in-js들 중에서 가장 편하지 않을까 생각합니다. 처음에 적응하기가 조금 불편할 수 있지만 css를 어느 정도 안다면 예측 가능한 이름이고, 검색하면 충분히 결과를 얻을 수 있습니다. 또한 플러그인을 설치하면 자동 완성을 지원해주고, 커스터마이징하고 쉽고, styled-components처럼 새로운 컴포넌트를 만들 필요가 없어 코드가 적고, 이름이 이미 정해져 있어서 네이밍을 생각하지 않아도 되는 이점이 있습니다.

아무튼 만족도가 매우 높은 css 프레임워크입니다.

6. AWS-S3

AWS-S3의 presigned Url

정적 파일인 이미지를 저장하기 위해 선택했습니다.

이미지는 파일의 변화는 없지만, 서버에 저장하게 되면 용량을 크게 차지하게 됩니다. 유저는 개인이지만 서버는 하나를 사용하기 때문에 하나의 서버에 모든 유저의 이미지를 저장하면 그만큼 서버의 메모리를 사용하기 때문에 프리티어 AWS-EC2를 사용하는 입장에서는 서버의 메모리가 충분하기 않기 때문에 다른 저장 공간을 찾다가 알게 되어서 선택했습니다.

프리티어 기간동안 정해진 용량은 무료로 사용할 수 있고, presigned Url 기능을 지원해주기 때문에 실제로 사용하는 서버에는 이미지를 전달하는 큰 작업을 하지 않아도 되기 때문에 서버의 부담을 줄일 수 있어서 유용하다고 생각합니다.

이미지 처리 흐름
1. 브라우저에서 이미지 업로드 시 presigned Url을 얻어서 S3의 temporary 폴더에 이미지 저장
2. 저장된 이미지 url을 이용해서 브라우저에 이미지 프리뷰 생성
3. 이미지 사용 확정 시 이미지를 temporary 폴더에서 사용 폴더로 이동 ( user, product, benner, review 등 )
4. 이동된 이미지 url을 DB에 저장
5. 이미지 제거 시 remove 폴더로 이동

7. iamport

iamport 웹 결제 기능 iamport 모바일 결제 기능

결제 기능을 처리하기 위해 선택했습니다. 문서가 한글로 사용법에 따라서 정리가 잘되어 있어서 쉽게 사용할 수 있습니다.

실제 결제는 아니고 테스트 결제 기능까지만 구현했습니다. 돈이 나가지는 않지만 실제 결제처럼 결제 기록은 생기고, 결제 기록을 DB에 저장하도록 구현했습니다. 데스크탑과 모바일의 동작 방식이 약간 다르기 때문에 배포 후에 모바일로 테스트하다가 문제를 발견해서 해결했습니다.

8. 나머지 라이브러리들

react-hook-form: form관련 코드를 편하게 사용하기 위해서 선택
axios: 비동기 처리를 편하게 사용하기 위해서 선택
react-slick: carousel 구현을 위해서 선택
react-toastify: toast-message를 위해서 선택

구현한 기능들

유저 CRUD
상품 CRD
리뷰 CRD
장바구니 CRD
찜하기 CRD
결제 기능 CRD
결제 기록 CRD
상품 검색
카테고리, 필터링

🚀 배포

배포 방법 빌드 최적화 적용 방법

배포 방법은 위 링크에 정리한 대로 실행했습니다.

무료로 사용할 수 있는 AWS-EC2를 사용했으며, 배포하면서 두 가지 문제가 발생했습니다.

첫 번째는 메모리 부족으로 빌드가 안 되는 문제입니다. 빌드하면 서버가 자꾸 멈추거나 렉이 걸려서 강제 중지하고 다시 실행해야해서 일단 빌드 최적화를 적용했습니다. 하지만 빌드 최적화를 적용해도 호전되긴 했지만 빌드가 안 되는 문제는 그대로여서 결국 빌드 결과물을 GitHub에 올려서 받아 쓰는 방법을 사용했습니다.

두 번째 문제는 정상 작동하다가 서버가 갑자기 멈추는 문제입니다. 에러 로그 조차 남기지 않아서 뭐가 문제인지 알아내기 힘들었지만 이것 저것 적용해본 결과 프리티어를 사용하기 때문에 AWS-EC2의 RAM이 부족해서 생기는 문제인 것으로 결론지었습니다. AWS-EC2 메모리 스왑을 보고 그대로 적용해본 결과 문제없이 동작했습니다.

💵 모바일 웹 결제 기능 ( by iamport )

Wed, 14 Sep 2022 12:22:31 GMT

iamport - 모바일 웹 결제를 참고했습니다.

구현 동기

개발 모드일 때는 모바일로 테스트하기 힘들어서 데스크탑 웹브라우저만을 이용해서 테스트하고 넘어갔습니다. 하지만 AWS-EC2에 배포하고 모바일로 들어가서 결제 기능을 사용해보니 이상하게도 결제 로직은 정상적으로 작동하는데 결제 정보가 DB에 기록되지 않는 문제가 발생했습니다. 이 문제를 해결하기 위해서 iamport 공식 문서를 찾아보면서 모바일 웹 결제 기능을 개발하게 되었습니다.

문제 원인

카카오페이 결제를 기준으로 모바일 웹과 데스크탑 웹은 결제 방식이 조금 다릅니다. 데스크탑 웹의 경우에는 QR코드나 휴대폰 번호/생년월일을 이용해서 카카오톡으로 결제하게 해줍니다. 이렇게 결제하게 되면 웹브라우저는 가만히 있고 다른 곳에서 결제를 처리하고 결과만 받게 됩니다. 그 결제 결과를 IMP.request_pay(data, callback)에서 callback의 첫 번째 인자로 받아서 결제 기록을 DB에 남기도록 구현했습니다. ( 예시에서 rsp가 결제 결과 데이터 )

예시

const onPayment = useCallback(
(pg: "kakaopay" | "tosspay") => () => {
  if (!process.env.NEXT_PUBLIC_IAMPORT_CODE)
    return toast.error("iamport의 가맹점 식별코드가 없습니다.");
  if (!paymentData) {
    toast.error(
      "결제할 상품의 정보가 존재하지 않습니다. 메인 화면으로 이동됩니다."
    );
    return router.push("/");
  }

  // iamport를 사용하기 위해 가맹점 식별코드 등록
  window.IMP.init(process.env.NEXT_PUBLIC_IAMPORT_CODE);

  const callback = async (rsp) => {
    if (
      !rsp.buyer_name ||
      !rsp.buyer_addr ||
      !rsp.paid_amount ||
      !rsp.buyer_email ||
      !rsp.buyer_tel ||
      !rsp.pg_provider
    )
      return toast.warning("결제에 필요한 데이터가 부족합니다.");

    if (rsp.success) {
      try {
        // >>> 결제 완료 DB 저장
        await apiService.orderService.apiCreateOrder({
          singleData: rsp.custom_data.singleData,
          orderData: {
            name: rsp.buyer_name,
            address: rsp.buyer_addr,
            residence: rsp.custom_data.residence,
            message: rsp.custom_data.message,
            amount: rsp.paid_amount,
            email: rsp.buyer_email,
            phone: rsp.buyer_tel,
            provider: rsp.pg_provider,
          },
        });

        toast.success(
          "결제가 완료되었습니다. 2초뒤에 결제내역 페이지로 이동합니다.",
          { autoClose: 2000 }
        );

        setTimeout(() => router.push("/information/order"), 2000);
      } catch (error) {
        console.error("error >> ", error);

        if (error instanceof AxiosError) {
          toast.error(error.response?.data.message);
        } else {
          toast.error("알 수 없는 문제로 인해 결제에 실패했습니다.");
        }
      }
    } else {
      toast.error("결제에 실패했습니다. " + rsp.error_msg, {
        autoClose: 2000,
      });
    }
  };

  window.IMP.request_pay({ ...paymentData, pg, pay_method: "card" }, callback);
},
[router, paymentData]
);

하지만 모바일 웹으로 접근해서 결제하는 경우에는 휴대폰에 카카오톡이 설치되어 있으므로 어떤 카카오톡 유저가 결제를 원하는지를 판단할 필요 없이 카카오톡으로 바로 들어가서 로그인한 유저에게 결제 요청을 보내게 됩니다. 그렇게 되면 브라우저에서 카카오톡으로 화면 전환이 발생하게 되며 결제를 성공적으로 마치면 결제할 때 입력했던 m_redirect_url을 이용해서 해당 url 리다이렉션 됩니다.

따라서 위 데스크탑 웹에서 결제를 진행했을 때와 다르게 callback이 실행되지 않아 DB에 결제 정보가 등록되지 않는 문제가 발생했던 것입니다. ( 다른 결제 방식을 선택해서 다른 웹사이트나 어플리케이션으로 리다이렉션 되어서 결제를 진행합니다. )

해결 방법

위의 경우를 대비해서 iamport에서 특정 결제에 대한 결과를 얻는 방법을 제공해줍니다.

기본적인 흐름은 아래와 같습니다.

m_redirect_url에서 결제 결과를 저장할 url를 지정
iamport에서 m_redirect_url로 리다이렉션 할 때 imp_uid와 merchant_uid 값을 query string으로 첨부
해당 url에서 REST API KEY와 REST API SECRET KEY를 이용해서 access_token을 얻음
access_token과 imp_uid을 이용해서 특정 결제에 대한 정보를 얻음
얻은 정보를 이용해서 DB에 결제 정보를 기록함
결제 정보 페이지로 리다이렉션 함

공식 페이지에 위와 같은 방식으로 설명이 매우 잘되어 있어서 굳이 코드 예시를 작성하지는 않겠습니다.

다만 토큰과 결제정보를 주고받는 타입과 api 요청 함수들을 첨부하겠습니다.

또한 사용하면서 주의해야 할 점으로 custom_data를 사용하는 경우에는 string 타입이므로 JSON.parse()를 이용해서 파싱하고 사용해야 합니다.

토큰과 결제 정보를 얻는 함수
```
import axios from "axios";
```

// type import type { // IamportGetTokenBody, IamportGetTokenResponse, IamportGetPaymentDataBody, IamportGetPaymentDataResponse, } from "@src/types";

const iamportInstance = axios.create({ baseURL: "https://api.iamport.kr", timeout: 10000, });

/**

2022/09/14 - iamport 엑세스 토큰 발급 받기 - by 1-blue
@returns 엑세스 토큰

/ const apiGetToken = () => iamportInstance.post( /users/getToken, {

imp_key: process.env.IAMPORT_REST_API_KEY,
imp_secret: process.env.IAMPORT_REST_API_SECRET,

}, {

headers: {
  "Content-Type": "application/json",
},

} );

/**

2022/09/14 - iamport 엑세스 토큰을 이용해 결제 정보 조회 - by 1-blue
@returns 결제 정보
/ const apiGetPaymentData = ({ imp_uid, access_token, }: IamportGetPaymentDataBody) => iamportInstance.get(/payments/${imp_uid}, { headers: { Authorization: access_token }, });

/**

2022/09/14 - iamport 관련 api 요청 객체 - by 1-blue
/ const iamportService = { apiGetToken, apiGetPaymentData, };

export default iamportService;


+ type ( 위에서 import한 타입 )
```ts
type RequestPaymentData = {
  amount: number;
  apply_num: string;
  bank_code: string | null;
  bank_name: string | null;
  buyer_addr: string;
  buyer_email: string;
  buyer_name: string;
  buyer_postcode: string;
  buyer_tel: string;
  cancel_amount: number;
  cancel_history: [];
  cancel_reason: string | null;
  cancel_receipt_urls: [];
  cancelled_at: number;
  card_code: string | null;
  card_name: string | null;
  card_number: string | null;
  card_quota: number;
  card_type: string | null;
  cash_receipt_issued: false;
  channel: string;
  currency: string;
  custom_data: string;
  customer_uid: string | null;
  customer_uid_usage: string | null;
  emb_pg_provider: string | null;
  escrow: false;
  fail_reason: string | null;
  failed_at: number;
  imp_uid: string;
  merchant_uid: string;
  name: string;
  paid_at: number;
  pay_method: string;
  pg_id: string;
  pg_provider: string;
  pg_tid: string;
  receipt_url: string;
  started_at: number;
  status: string;
  user_agent: string;
  vbank_code: string | null;
  vbank_date: number;
  vbank_holder: string | null;
  vbank_issued_at: number;
  vbank_name: string | null;
  vbank_num: string | null;
};

/**
 * 2022/09/14 - iamport 엑세스 토큰 요청 송신 타입 - by 1-blue
 */
export type IamportGetTokenBody = {};
/**
 * 2022/09/14 - iamport 엑세스 토큰 요청 수신 타입 - by 1-blue
 */
export type IamportGetTokenResponse = { response: { access_token: string } };
/**
 * 2022/09/14 - iamport 결제 정보 요청 송신 타입 - by 1-blue
 */
export type IamportGetPaymentDataBody = {
  imp_uid: string;
  access_token: string;
};
/**
 * 2022/09/14 - iamport 결제 정보 요청 수신 타입 - by 1-blue
 */
export type IamportGetPaymentDataResponse = { response: RequestPaymentData };

next.js 빌드 최적화

Tue, 13 Sep 2022 07:05:39 GMT

next.js를 사용하는 프로젝트입니다.

빌드 최적화 적용 이유

프로젝트는 배포해서 사용할 때는 npm run build 명령어를 이용합니다. 위 명령어를 이용해서 빌드를 하고 나면 빌드에 대한 결과를 아래 이미지처럼 나타내줍니다. 위 이미지는 최적화하기 전의 빌드 결과인데 First Load JS를 보면 모두 빨간색으로 표시됩니다. 처음 로드되는 자바스크립트의 용량을 의미하는 것인데 요즘 웹브라우저 or 모바일로 접근 시 적정한 크기가 정해져있습니다. 빨간색으로 표시되는 것은 크기가 너무 크다(로딩 시간이 길다)는 의미이고 최적화를 해서 줄여주는 것이 좋다는 의미입니다.

빌드 최적화 방법

아래의 두 가지 방법을 적용했고 아래 이미지는 적용한 빌드 결과입니다.

1. Tree Shaking

Tree shaking은 사용되지 않는 코드를 제거하기 위해 JavaScript 컨텍스트에서 일반적으로 사용되는 용어입니다. ( webpack - Tree Shaking )

구글링을 통해서 방법을 찾은 방법으로 사용되지 않는 코드를 제거하는 방법입니다. 실제로 사용하지 않는 코드는 import하지 않고 정확하게 필요한 컴포넌트/함수들만 사용한다고 생각했는데 Tree Shaking를 적용하는 것으로만으로도 대부분의 컴포넌트의 First Load JS가 적절한 용량으로 바꿔졌습니다.

package.json

{
// ... 나머지 생략

// 아래 구문만 추가해주면 빌드 시 웹팩에서 자동적으로 "Tree shaking"을 적용해줍니다.
"sideEffects": false
}

2. Next.js의 Dynamic Import

Dynamic Import란 외부 라이브러리를 지연 로딩하는 방법을 말합니다. ( next.js - dynamic import )

지연 로딩이란 해당 라이브러리가 필요한 상황에 로딩하는 방법을 말합니다.

예를 들면 어떤 버튼을 클릭했을 경우 모달이 보여지는 기능을 구현할 때를 생각해보면 버튼을 클릭하기 이전에는 모달을 굳이 가져올 필요가 없습니다. 만약 미리 가져온 경우에 사용자가 버튼을 클릭하지 않으면 쓸데없이 용량을 차지하는 모달을 가져오는 낭비가 발생하게 됩니다.

이런 경우에 사용하기 위해서 next.js에서 제공해주는 Dynamic Import 기능을 통해서 즉시 필요한 컴포넌트/라이브러리가 아니면 지연 로딩을 통해서 해당 컴포넌트/라이브러리가 필요한 경우에 가져와서 사용하는 방법입니다.

이 방법을 사용하면 초기에 모든 컴포넌트/라이브러리를 가져올 필요가 없으니 First Load JS이 확연하게 줄어들게 됩니다.

예시

import { useState } from "react";
import dynamic from "next/dynamic";

// 사용법에 대한 자세한 방법은 공식페이지에서 확인하고 사용하면 됩니다. const Modal = dynamic(() => import("@src/components/common/Modal"), { suspense: true, });

const TestComponent = () => { const [isShowModal, setIsShowModal] = useState(false);

return ( <>

  // 버튼을 클릭하면 모달이 렌더링되는 구조이므로, 버튼이 클릭될 때 "Modal"컴포넌트를 가져옴
  {isShowModal && (
    
      대충 모달 내용
    
  )}

); };

export default TestComponent; ```

💵 웹 결제 기능 ( by iamport )

Sun, 11 Sep 2022 10:14:59 GMT

next.js에서 recoil과 iamport를 이용한 테스트 결제 기능 구현입니다.

iamport에 대한 내용은 공식 페이지에 들어가면 한국어로 각 상황에 맞는 메뉴얼이 있으니 참고하시면 됩니다.

iamport의 타입에 대한 코드는 여기(velog 포스트)를 참고했습니다.

동작 방식

로그인한 유저가 상품 구매 버튼 클릭
해당 유저가 등록한 배송지중에 하나 선택
recoil에 구매에 필요한 정보들 등록 ( pg, amount, buyer_tel 등 단, 여러 상품을 한번에 결제할 수 있으니 공통 정보(orderData)와 개별 정보(singleData)를 분리해서 저장함 )
결제 페이지로 이동 ( 결제 방법 선택... 현재는 kakaopay or toss )
결제에 필요한 정보와 함께 iamport에 결제 요청
선택한 결제 방법대로 결제 ( 실제 결제가 아닌 테스트용 결제 )
결제가 성공하면 결괏값으로 DB 컬럼 추가
결제 결과 테이블을 이용해서 구매 목록 페이지 구성

코드

결제 관련 타입

import type { ApiCreateOrderBody } from "@src/types";

interface RequestPayAdditionalParams { digital?: boolean; vbank_due?: string; m_redirect_url?: string; app_scheme?: string; biz_num?: string; }

interface Display { card_quota?: number[]; }

interface CustomData { residence: string; message: string; // 결제에 필요한 각자 정보의 배열 ( 동시에 여러 상품을 결제할 수 있으니, 각자 상품들에 대하 결제 정보 ) singleData: ApiCreateOrderBody["singleData"]; }

export interface RequestPayParams extends RequestPayAdditionalParams { pg: "kakaopay" | "tosspay"; pay_method: "kakaopay" | "tosspay" | string; escrow?: boolean; merchant_uid: string; name?: string; amount: number; // 필요 시 추가하는 커스텀 데이터 custom_data: CustomData; tax_free?: number; currency?: string; language?: string; buyer_name?: string; buyer_tel: string; buyer_email?: string; buyer_addr?: string; buyer_postcode?: string; notice_url?: string | string[]; display?: Display; }

interface RequestPayAdditionalResponse { apply_num?: string; vbank_num?: string; vbank_name?: string; vbank_holder?: string | null; vbank_date?: number; }

interface RequestPayResponse extends RequestPayAdditionalResponse { success: boolean; error_code: string; error_msg: string; imp_uid: string | null; merchant_uid: string; pay_method?: string; paid_amount?: number; status?: string; name?: string; pg_provider?: string; pg_tid?: string; buyer_name?: string; buyer_email?: string; buyer_tel?: string; buyer_addr?: string; buyer_postcode?: string; custom_data: CustomData; paid_at?: number; receipt_url?: string; }

type RequestPayResponseCallback = (response: RequestPayResponse) => void;

export interface Iamport { init: (accountID: string) => void; request_pay: ( params: RequestPayParams, callback?: RequestPayResponseCallback ) => void; }


+ [결제 페이지](https://github.com/1-blue/bleshop/src/pages/payment/index.tsx)
```tsx
import { useCallback, useEffect } from "react";
import { useRouter } from "next/router";
import { useRecoilValue } from "recoil";
import { toast } from "react-toastify";

// api
import apiService from "@src/api";

// state
import stateService from "@src/states";

// component
import HeadInfo from "@src/components/common/HeadInfo";
import Nav from "@src/components/common/Nav";
import Support from "@src/components/common/Support";
import Tool from "@src/components/common/Tool";

// type
import type { Iamport } from "@src/types";
import { AxiosError } from "axios";

declare global {
  interface Window {
    IMP: Iamport;
  }
}

const Payment = () => {
  const router = useRouter();

  // 2022/09/04 - iamport 사용을 위한 cdn - by 1-blue
  useEffect(() => {
    toast.info("테스트용 결제이며, 실제로 결제가 되지 않습니다.");

    const jquery = document.createElement("script");
    jquery.src = "https://code.jquery.com/jquery-1.12.4.min.js";

    const iamport = document.createElement("script");
    iamport.src = "https://cdn.iamport.kr/js/iamport.payment-1.1.8.js";

    document.head.appendChild(jquery);
    document.head.appendChild(iamport);

    return () => {
      document.head.removeChild(jquery);
      document.head.removeChild(iamport);
    };
  }, []);

  // 2022/09/04 - 결제를 위한 데이터 - by 1-blue
  const paymentData = useRecoilValue(stateService.paymentService.productToPayment);

  // 2022/09/04 - iamport를 이용한 결제 - by 1-blue
  const onPayment = useCallback(
    (pg: "kakaopay" | "tosspay") => () => {
      if (!process.env.NEXT_PUBLIC_IAMPORT_CODE)
        return toast.error("iamport의 가맹점 식별코드가 없습니다.");
      if (!paymentData) {
        toast.error(
          "결제할 상품의 정보가 존재하지 않습니다. 메인 화면으로 이동됩니다."
        );
        return router.push("/");
      }

      // iamport를 사용하기 위해 가맹점 식별코드 등록
      window.IMP.init(process.env.NEXT_PUBLIC_IAMPORT_CODE);

      window.IMP.request_pay(
        { ...paymentData, pg, pay_method: "card" },
        async (rsp) => {
          if (
            !rsp.buyer_name ||
            !rsp.buyer_addr ||
            !rsp.paid_amount ||
            !rsp.buyer_email ||
            !rsp.buyer_tel ||
            !rsp.pg_provider
          )
            return toast.warning("결제에 필요한 데이터가 부족합니다.");

          if (rsp.success) {
            try {
              // >>> 결제 완료 DB 저장 ( 실제 결제라면 유효성 검사를 실시하고 DB에 저장해야함 )
              await apiService.orderService.apiCreateOrder({
                // 각 상품의 개별 결제 데이터
                singleData: rsp.custom_data.singleData,
                // 해당 결제의 공통 결제 데이터
                orderData: {
                  name: rsp.buyer_name,
                  address: rsp.buyer_addr,
                  residence: rsp.custom_data.residence,
                  message: rsp.custom_data.message,
                  amount: rsp.paid_amount,
                  email: rsp.buyer_email,
                  phone: rsp.buyer_tel,
                  provider: rsp.pg_provider,
                },
              });

              toast.success(
                "결제가 완료되었습니다. 2초뒤에 결제내역 페이지로 이동합니다.",
                { autoClose: 2000 }
              );

              setTimeout(() => router.push("/information/order"), 2000);
            } catch (error) {
              console.error("error >> ", error);

              if (error instanceof AxiosError) {
                toast.error(error.response?.data.message);
              } else {
                toast.error("알 수 없는 문제로 인해 결제에 실패했습니다.");
              }
            }
          } else {
            toast.error("결제에 실패했습니다. " + rsp.error_msg, {
              autoClose: 2000,
            });
          }
        }
      );
    },
    [router, paymentData]
  );

  return (
    <>
      

      
        

        
          

          
            
              
              
            
            
              
              
            
          
        
      
    
  );
};

export default Payment;

🧺 최근 본 상품 기능

Sun, 11 Sep 2022 09:31:10 GMT

next.js와 localStorage를 이용했습니다.

기능 구현에 대한 구상

처음에 이 기능을 구현해야겠다고 생각했을 때는 로그인한 유저가 특정 상품의 페이지에 들어갔을 경우마다 DB에 기록 및 업데이트해서 최근에 접근한 상품이 무엇인지 알아내는 방법으로 구현하면 될 것으로 생각했습니다. 그래서 추가할 코드가 많고 시간이 좀 걸릴거라고 생각해서 다른 기능을 모두 구현하고 마지막에 구현하려고 미뤄놨던 기능입니다.

하지만 막상 구현하려고 찾아보니 생각보다 간단하게 구현이 가능했습니다. 바로 localStorage를 이용하는 방법입니다. 굳이 DB에 저장할 만큼의 정보도 아니고, 노출되어도 크게 상관없고, 삭제되어도 상관없는 정보면서, 큰 용량을 차지하지 않기 때문에 localStorage or sessionStorage를 사용하는 게 좋은 방법이라고 느꼈습니다.

기능 구현

일단 localStorage에 넣을 값은 식별자, 대표 이미지 경로, 이름 3가지로 정했고, 이름은 watched입니다. 그리고 기존에 봤던 상품이라면 순서만 바꾸고, 새로 본 상품이라면 추가하는 방법으로 구현했습니다.

localStorage에 배열이나 객체를 넣을 경우에는 강제로 String으로 변경시켜서 넣기 때문에 JSON.stringify()를 사용해주지 않으면 [Object]같은 형식으로 데이터가 들어가게 됩니다. 따라서 넣고 가져올 때는 JSON.stringify()와 JSON.parse()를 사용하고 있습니다.

export type RecentProduct = {
  idx: number;
  photo: string;
  name: string;
};

useEffect(() => {
  if (!product) return;

  const previousWatched: RecentProduct[] = JSON.parse(
    localStorage.getItem("watched") || "[]"
  );
  if (!Array.isArray(previousWatched)) return;

  let currentWatched: RecentProduct[] = [];
  const targetIndex = previousWatched.findIndex(
    (watched) => watched.idx === product.idx
  );

  // 처음 보는 상품이라면
  if (targetIndex === -1) {
    const { idx, photo, name, ...rest } = product;
    currentWatched = [{ idx, photo, name }, ...previousWatched];
  }
  // 최근에 본적이 있는 상품이라면
  else {
    const target = previousWatched.splice(targetIndex, 1);
    currentWatched = [...target, ...previousWatched];
  }

  // 목록이 10개가 넘으면 자르기
  if (currentWatched.length > 10) currentWatched.pop();

  localStorage.setItem("watched", JSON.stringify(currentWatched));
}, [product]);

getServerSideProps의 쿠키 문제 해결 방법

Sat, 03 Sep 2022 11:21:45 GMT

next-auth, axios, next.js를 사용한 프로젝트입니다.

next-auth 세팅 방법

😕 사전 지식

next.js의 next-auth와 getServerSideProps()를 사용하면서 발생한 문제입니다.

next-auth의 Credentials방식 ( id와 password를 이용한 인증 방식 )을 사용해서 구현했고, 서버측에서는 아래와 같이 getSession()을 사용해서 로그인한 유저의 데이터를 받아올 수 있습니다.

/api/user/me.ts

// 임시로 만든 api ( 나의 상세 정보를 요청한다고 가정 )
import { getSession } from "next-auth/react";

// type import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse) { const { method } = req; // "getSession({ req })"와 같은 형태로 요청하면 본인이 지정한 데이터를 받아올 수 있습니다. // 여기서 만약 "next-auth.session-token"의 이름을 가진 쿠키가 존재하지 않는다면 서버에서 비로그인 상태로 인식하게 됩니다. const session = await getSession({ req });

if (!session || !session.user) return res.status(403).json({ message: "접근 권한이 없습니다." });

const userIdx = session.user.idx;

try { // ... 로그인한 유저의 상세 데이터를 찾는 코드 작성 } catch (error) { console.error(error);

return res.status(500).json({ message: "서버측 에러입니다. 잠시후에 다시 시도해주세요!" });

} }


`getSession()`이 로그인한 유저의 데이터를 가져오는 방법은 브라우저에서 보내주는 세션 쿠키를 이용해서 유저를 식별합니다.
하지만 세션 쿠키가 없다면 로그인하지 않은 유저라고 인식하게 됩니다.
이 부분을 먼저 이해하고 넘어가야 문제의 원인을 파악할 수 있습니다.

## 🤔 문제 원인
프론트에서 `axios`를 이용해서 백엔드로 특정 요청을 할때 쿠키를 같이 넘겨주는 방법은 `withCredentials`을 `true`로 세팅하면 됩니다.
그렇게 하면 프론트에서 자동으로 쿠키를 첨부에서 서버로 요청을 보내게 됩니다.

```ts
// "axios"의 인스턴스를 만들어서 공통 세팅을 하고 모든 요청을 인스턴스를 통해서 처리하도록 만들었습니다.
export const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_FRONT_URL + "/api",
  withCredentials: true,
  timeout: 10000,
});

하지만 next.js의 SSR을 위한 getServerSideProps()를 사용하는 경우에는 실행되는 위치가 프론트측(브라우저)이 아닌 서버측에서 실행되고 실행 결과를 이용한 완성된 페이지를 프론트로 넘겨주게 됩니다.

CSR 방식 실행 순서
- 브라우저 axios 요청 --> 쿠키 첨부 --> 서버에 전달 --> 결과 반환 --> 받은 결괏값으로 브라우저 레이아웃 완성 --> 렌더링
SSR 방식 실행 순서
- 서버에서 getServerSideProps() 실행 --> 결과로 페이지 완성 --> 완성된 페이지 반환 --> 브라우저에서 완성된 페이지 렌더링

getServerSideProps()는 서버에서 실행되기 때문에 브라우저에 저장되어 있는 쿠키를 알지 못합니다. 따라서 요청할 때도 쿠키를 같이 보내지 못하게 되기 때문에 서버측에서는 항상 비로그인상태로 인식하게 되는 문제를 찾았습니다.

🙂 해결 방법

자동적으로 쿠키를 첨부해주지 않으니 아래와 같이 직접 쿠키를 동봉해서 서버에 요청하는 방식으로 해결했습니다.

// type
import type { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next";
// "Basket", "ApiGetBasketProductsResponse"은 그냥 특정 타입 ( 중요한 부분이 아니라 생략 )

type Props = {
  baskets: Basket[];
};

const BasketComponent: NextPage = ({ baskets }) => {
  return (
    <>
      // ... 생략
      // "baskets" 데이터를 이용한 화면 구성
    
  )
}

export default BasketComponent;

export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {
  /**
   * SSR 요청일 경우에는 서버에서 페이지를 완성한 후에 반환하는 방식임
   * 하지만 서버에서는 클라이언트(브라우저)에 대한 정보를 알 수 없으니 "cookie"(세션 쿠키)를 이용해서 유저를 식별함
   * 컴포넌트에 내부에서 하는 요청들은 "axios"의 "withCredentials" 옵션을 통해서 자동으로 쿠키를 넣어서 전달하지만
   * "getServerSideProps()"에서 전달하는 요청은 서버에서 서버로 보내는 요청이므로 쿠키의 존재를 몰라서 첨부하지 않고 요청을 보냄
   *
   * 따라서 직접적으로 쿠키를 넣어주는 행동을 하지 않으면 요청에 쿠키가 들어가지 않아서 서버가 어떤 유저인지 식별할 수 없기에 직접적으로 쿠키를 넣어주는 구문임
   */
  let { cookie } = context.req.headers;
  cookie = cookie ? cookie : "";
  axiosInstance.defaults.headers.Cookie = cookie;

  let baskets: Basket[] = [];

  try {
    // "axios"를 이용한 api 요청
    const { data } = await axiosInstance.get(`/products/basket`);
    baskets = data.baskets;
  } catch (error) {
    console.error("getServerSideProps basket/wish >> ", error);
  } finally {
    /**
     * "axios"에 등록한 특정 유저의 쿠키 제거
     * ( 브라우저에서의 요청이 아니라 서버에서의 요청이므로 다른 유저도 같은 서버를 사용하기에 쿠키가 공유되는 문제가 생김 )
     */
    axiosInstance.defaults.headers.Cookie = "";
  }

  return {
    props: {
      baskets,
    },
  };
};

만약 typescript를 사용한다면 axiosInstance.defaults.headers.Cookie에서 타입 에러가 발생하기 때문에 아래와 같은 파일을 생성하면 해결됩니다.

@types/axios.d.ts

/**
* "getServerSideProps"에서 로그인한 유저에 관한 요청을 하는 경우에 "cookie"를 넣어줘야 어떤 유저의 요청인지 알 수 있기 때문에 재정의
*/
import "axios";

declare module "axios" { export interface HeadersDefaults { Cookie?: string; } }

Recoil과 IntersectionObserver를 이용한 무한 스크롤링

Mon, 22 Aug 2022 09:10:11 GMT

next.js, prisma, axios를 사용하는 프로젝트입니다.

Intersection Observer API의 사용법에 대한 포스트

🤝 무한 스크롤링 구현을 위해 선택한 것

기존에 무한 스크롤링을 구현할 때는 항상 스크롤 이벤트를 사용해서 구현했습니다. 하지만에 최근에 공부를 하면서 Intersection Observer API의 존재에 대해 알게 되었고, 응용하면 무한 스크롤링을 구현할 수 있겠다고 생각해서 선택했습니다. ( 아직 어떤 원리로 동작하는지, 어떤 상황에 어떤 방법을 선택해야하는지에 대한 이해도는 없습니다. )

상태 관리 라이브러리로는 recoil을 선택했기에 사용했습니다. 하지만 현재 구현한 방식에는 굳이 recoil을 사용하지 않아도 구현할 수 있기에 아직 사용하는 이유나 사용의 편의성은 못느꼈습니다. 그래도 익숙해지기 위해서 사용했습니다.

😕 처음 시도

처음 생각에는 상품 데이터를 15개씩 받아오는 비동기 selector ( 이하 productsState )와 마지막 상품의 식별자를 갖는 selector ( 이하 productLastIdxState )를 만들어서 사용하면 된다고 생각했습니다.

productsState에서 상품들을 화면에 렌더링하고 IntersectionObserver를 이용해서 마지막 상품을 감시해서 뷰포트 내부에 들어온다면 productLastIdxState값을 이용해서 다음 상품들을 요청하도록 구조를 잡았습니다.

하지만 이렇게 했을 경우 발생하는 문제가 새로운 데이터를 받아오고 나서 기존 데이터를 유지할 수 없다는 문제가 생겼습니다. 상품들을 추가로 10개를 받아왔을 경우에 기존의 15개에 대한 데이터는 버리고 10개만 유지하게 되는 문제가 발생해서 다른 방법을 생각해봤습니다.

이후에 많은 삽질을 했지만 그 내용은 생략하겠습니다.

🙂 실제 구현 방법

atom( 이하 productsState )을 이용해서 상품들의 데이터를 갖고 컴포넌트에서 상품들의 데이터를 요청하면 누적해서 productsState에 추가해주는 방법으로 구현했습니다.

state

export const productsState = atom({
key: "productsState - " + v1(),![](https://velog.velcdn.com/images/1-blue/post/796ccff3-d79a-4731-a73c-891aef05db97/image.gif)

default: [],
});
/**
* 2022/08/22 - 최근 상품들의 마지막 상품의 식별자 - by 1-blue
*/
export const productLastIdxState = selector({
key: "productLastIdxState",
get: ({ get }) => {
  const products = get(productsState);

  if (products.length === 0) return -1;

  return products[products.length - 1].idx;
},
set: ({ set }) => {
  set(productsState, []);
},
});

사용 컴포넌트

// 상품 요청 개수
const limit: LIMIT = 15;

// 2022/08/22 - 화면에 랜더링할 상품들 - by 1-blue const [products, setProducts] = useRecoilState(productsState); // 2022/08/22 - 가장 최근에 요청한 상품의 마지막 식별자 ( 해당 식별자를 기준으로 다음 상품들의 데이터를 요청 ) - by 1-blue const [productLastIdx, setProductLastIdx] = useRecoilState(productLastIdxState); // 2022/08/22 - 마지막 상품의 ref - by 1-blue // 원래 ref는 주로 "useRef()"를 이용하지만, 현재 상황에서는 상품을 다시 요청할 때마다 ref가 변경되고 그에 맞게 리렌더링을 해야 하기 때문에 "useState()"를 사용했습니다. const [lastProductRef, setLastProductRef] = useState(null);

// 2022/08/22 - 처음 한번 상품들의 데이터 요청 - by 1-blue useEffect(() => { (async () => { // 이전에 상품 데이터들을 받아왔을 경우를 대비해서 미리 초기화 setProductLastIdx(-1);

// axios로 상품들을 요청하는 메서드
const { data: { products } } = await apiService.productService.apiGetProducts({ limit, lastIdx: -1 });

// 받아온 상품들을 atom에 넣음
setProducts(products);

})(); }, [setProducts, setProductLastIdx]);

// 2022/08/22 - observer로 인해 실행할 이벤트 함수 ( 제일 마지막 상품이 뷰포트에 들어오면 실행할 이벤트 함수 ) - by 1-blue const onScroll = useCallback( async ([{ isIntersecting }]: IntersectionObserverEntry[]) => { if (!lastProductRef) return;

// 지정한 엘리먼트가 "threshold"만큼을 제외하고 뷰포트에 들어왔다면 실행
if (isIntersecting) {
  const { data: { products } } = await apiService.productService.apiGetProducts({ limit, lastIdx: productLastIdx });

  // 기존 데이터 + 새로운 데이터
  setProducts((prev) => [...prev, ...products]);
}

}, [lastProductRef, productLastIdx, setProducts] );

// 2022/08/22 - observer 등록 ( 제일 마지막 상품이 뷰포트에 들어오면 실행할 이벤트 함수를 등록 ) - by 1-blue useEffect(() => { if (!lastProductRef) return; if (products.length % limit !== 0) return;

let observer = new IntersectionObserver(onScroll, { threshold: 0.1, rootMargin: "20px", }); observer.observe(lastProductRef);

return () => observer?.disconnect(); }, [lastProductRef, onScroll, products]);

// 나머지 레이아웃과 주제에 맞지 않는 구현부분은 제외함

인증 로직 구현 ( next-auth )

Sat, 13 Aug 2022 05:03:42 GMT

본 게시글은 next.js, next-auth, prisma, tailwindcss를 사용하는 것을 기반으로 작성됩니다.

회원가입

회원가입은 브라우저에서 id, password, email, name, phone, photo를 입력받아서 prisma를 이용해서 DB에 추가하는 비교적 단순한 부분이기 때문에 설명 대신 깃헙 링크로 대체하겠습니다.

프론트 엔드 부분: /src/pages/signup.tsx
백엔드 부분: /src/pages/api/signup.tsx

로그인 로직을 구현하기 위해서 next-auth를 사용했습니다. next-auth는 보다 쉽게 인증 로직을 구현하기 위한 Next.js 전용 라이브러리입니다. google, kakao 등이 OAuth도 쉽게 구현할 수 있지만, id와 password를 이용한 로그인을 구현하는 것이 목표이기 때문에 Credentials 방식을 선택했습니다.

1. 세팅 코드 예시

src/pages/api/auth/[...nextauth].ts

import prisma from "@src/prisma";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcrypt";

export default NextAuth({ providers: [ // 인증 방식 선택 ( 현재는 "id" + "password" ) CredentialsProvider({ // 여기서 입력한 이름을 "signIn(이름)" 형태로 사용 name: "Credentials", // 여기서 작성한 타입 그대로 아래 "authorize()"의 "credentials"의 타입 적용 // 또한 "next-auth"에서 생성해주는 로그인창에서 사용 ( http://localhost:3000/api/auth/signin ) credentials: { id: { label: "아이디", type: "text", placeholder: "아이디를 입력하세요.", }, password: { label: "비밀번호", type: "password", placeholder: "비밀번호를 입력하세요.", }, },

  // 로그인 유효성 검사
  // 로그인 요청인 "signIn("credentials", { id, password })"에서 넣어준 "id", "password"값이 그대로 들어옴
  async authorize(credentials, req) {
    if (!credentials)
      throw new Error("잘못된 입력값으로 인한 오류가 발생했습니다.");

    const { id, password } = credentials;

    const exUser = await prisma.user.findUnique({
      where: { id },
      include: { photo: true },
    });
    if (!exUser) throw new Error("존재하지 않는 아이디입니다.");

    const result = await bcrypt.compare(password, exUser.password);
    if (!result) throw new Error("비밀번호가 불일치합니다.");

    // 반환하는 값중에 name, email, image만 살려서 "session.user"로 들어감
    return exUser;
  },
}),

], callbacks: { async jwt({ token }) { return token; }, // 세션에 로그인한 유저 데이터 입력 async session({ session }) { const exUser = await prisma.user.findUnique({ where: { name: session.user?.name }, select: { idx: true, id: true, name: true, email: true, phone: true, address: true, photo: { select: { path: true, }, }, }, });

  // 로그인한 유저 데이터 재정의
  // 단, 기존에 "user"의 형태가 정해져있기 때문에 변경하기 위해서는 타입 재정의가 필요함
  session.user = exUser;

  // 여기서 반환한 session값이 "useSession()"의 "data"값이 됨
  return session;
},

}, secret: process.env.SECRET, });


+ [`/src/pages/login.tsx`](https://github.com/1-blue/bleshop/tree/master/src/pages/login.tsx)
```tsx
// 다른 부분은 전부 생략하고 로그인 요청 부분만 살림

// 2022/08/12 - 로그인 요청 - by 1-blue
const onSubmit = useCallback(
  async (body: ApiLogInBody) => {
    try {
      // body에 로그인을 위해 입력한 id와 password가 들어있음
      const result = await signIn("credentials", {
        // 로그인 실패 시 새로고침 여부
        redirect: false,
        id: body.id,
        password: body.password,
        // ...body
      });

      // "authorize()"에서 날린 "throw new Error("")"가 "result.error"로 들어옴
      if (result?.error) return toast.error(result.error);

      // 만약 에러가 없다면 로그인 성공
      // 세션 쿠키가 생성됨
      toast.success("로그인 성공. 메인 페이지로 이동합니다.");
      router.push("/");
    } catch (error) {
      console.error("error >> ", error);

      toast.error(
        "알 수 없는 에러로 로그인에 실패했습니다. 잠시후에 다시 시도해주세요!"
      );
    }
  },
  [router]
);

2. 프론트 사용 예시

import type { NextPage } from "next";
import { useSession } from "next-auth/react";

const Home: NextPage = () => {
  const { data, status } = useSession();

  // status는 "authenticated" | "loading" | "unauthenticated"를 가짐 ( 로그인 여부 판단에 사용 )
  // data는 "expires"와 "user"( "callbacks"의 "session()"에서 반환한 값 )를 가짐

  return (
    <>
      Home!!!
    
  );
};

export default Home;

3. user 타입 재정의

@types/next-auth.d.ts
```
import NextAuth from "next-auth";
```

// type import type { UserWithPhoto } from "@src/types";

// 여기서 재정의한 타입이 "session.user"의 타입으로 정의됨 declare module "next-auth" { interface Session { user: { idx: number; id: string; name: string; // ... } } }


### 4. 접근 제한 ( middleware )
> 로그인과 회원가입 페이지에 접근할 때만 이미 로그인했는지 여부를 판단하고 접근을 제한하는 코드입니다.

+ [`/src/middleware.ts`](https://github.com/1-blue/bleshop/tree/master/src/middleware.ts)
```ts
import type { NextRequest, NextFetchEvent } from "next/server";
import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

const secret = process.env.SECRET;

export async function middleware(req: NextRequest, event: NextFetchEvent) {
  // 로그인 했을 경우에만 존재함 ( "next-auth.session-token" 쿠키가 존재할 때 )
  const session = await getToken({ req, secret, raw: true });
  const { pathname } = req.nextUrl;

  // 2022/08/13 - 로그인/회원가입 접근 제한 - by 1-blue
  if (pathname.startsWith("/login") || pathname.startsWith("/signup")) {
    if (session) {
      return NextResponse.redirect(new URL("/", req.url));
    }
  }
}

export const config = {
  matcher: ["/login", "/signup"],
};

(추가) OAuth 로그인 ( kakao, google )

처음에는 OAuth를 고려하지 않았기 때문에 유저 모델의 재정의가 필요합니다. Credentials 방식의 경우에는 반드시 id, password 등이 필요하지만 OAuth의 경우에는 다른 페이지에서 인증을 대신 처리해주기 때문에 필요치 않습니다. 따라서 아래와 같이 유저 모델을 변경했습니다.

enum Provider {
  Credentials
  KAKAO
  GOOGLE
}

// 유저
model User {
  idx      Int       @id @default(autoincrement())
  name     String
  email    String    @unique
  id       String?   @unique
  password String?
  phone    String?   @unique
  photo    String?
  role     Role?     @default(USER)
  provider Provider? @default(Credentials)

  // ... 나머지 생략
}

로그인해서 받는 필수 정보인 name, email만 필수로 만들고 나머지는 옵셔널로 변경했습니다. 또한 어떤 방식의 로그인인지 구분하기 위해서 provider 컬럼을 추가했습니다. 그리고 아래와 같이 사용할 로그인 방식을 추가하고 callbacks에서 유저를 등록하도록 코드를 작성합니다.

export default NextAuth({
  providers: [
    // ... Credentials 생략

    // 카카오 로그인
    KakaoProvider({
      clientId: process.env.KAKAO_ID,
      clientSecret: process.env.KAKAO_SECRET,
    }),

    // 구글 로그인
    googleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      // "account.provider"는 로그인을 요청할 때만 값이 존재하기 때문에
      // 로그인 요청을 하는 경우에 체크해서 첫 로그인이라면 등록합니다.

      // 카카오 로그인일 경우
      if (account?.provider === "kakao") {
        const exUser = await prisma.user.findFirst({
          where: { provider: "KAKAO", name: token.name!, email: token.email! },
        });

        // 등록된 유저가 아니라면 회원가입
        if (!exUser) {
          await prisma.user.create({
            data: {
              name: token.name!,
              email: token.email!,
              photo: token.picture,
              provider: "KAKAO",
            },
          });
        }
      }
      // 구글 로그인일 경우
      if (account?.provider === "google") {
        const exUser = await prisma.user.findFirst({
          where: { provider: "GOOGLE", name: token.name!, email: token.email! },
        });

        // 등록된 유저가 아니라면 회원가입
        if (!exUser) {
          await prisma.user.create({
            data: {
              name: token.name!,
              email: token.email!,
              photo: token.picture,
              provider: "GOOGLE",
            },
          });
        }
      }

      return token;
    },
    // 세션에 로그인한 유저 데이터 입력
    async session({ session }) {
      const exUser = await prisma.user.findFirst({
        where: { email: session.user.email },
        select: {
          idx: true,
          id: true,
          name: true,
          email: true,
          phone: true,
          role: true,
          photo: true,
          provider: true,
        },
      });

      session.user = exUser!;

      return session;
    },
  },

  // ... 나머지 생략
});

위 로직을 작성하고 로그인 페이지에서 버튼을 만들고 클릭 시 signIn("kakao")와 같은 형태로 호출하기만 하면 완성입니다.

AWS - S3의 preSignedUrl 사용

Fri, 12 Aug 2022 04:21:38 GMT

next.js, prisma, tailwindcss를 사용하는 프로젝트입니다.

😥 이미지 처리 로직의 한계

이전에 AWS-S3를 이용해서 이미지를 저장하는 경우에는 다음과 같은 순서로 처리했습니다.

브라우저에서 서버로 이미지 전송
서버에서 받은 이미지와 key 들을 이용해서 S3에 이미지 업로드 요청
S3에서 이미지 업로드 후 결과 반환
서버에서 받은 결과를 브라우저에 전달
브라우저에서 받은 결과로 업로드된 이미지를 화면에 렌더링

위와 같은 순서로 처리할 때 항상 존재한 문제들은 두 가지 있습니다.

next.js의 api는 1MB 이상의 이미지를 처리하지 못함
전송하는데 많은 리소스가 낭비되는 이미지를 두 번 연속으로 처리하므로 많은 낭비가 발생

브라우저에서 바로 S3로 이미지를 전송하면 문제가 해결되지 않냐고 생각할 수 있지만 S3에 접근하기 위해서는 몇 가지 key가 필요합니다. 그것을 브라우저에 저장하면 key가 누구에게나 노출되는 문제가 발생하기 때문에 가능하지만 사용하지 않았습니다.

😮 preSignedUrl

위의 한계를 극복할 방법을 찾다가 알게 된 방법이 preSignedUrl입니다. 미리 서명된 URL으로 처리 로직은 아래와 같습니다.

브라우저에서 이미지 업로드 요청을 서버에게 보냄 ( 이미지는 보내지 않고 요청만 보냄 )
서버에서 S3에 요청해서 일시적으로 이미지 업로드가 가능한 URL을 받음 ( 해당 URL을 preSignedUrl라고 부릅니다. )
서버에서 브라우저로 preSignedUrl을 전송함
브라우저에서 받은 preSignedUrl에 이미지를 첨부해서 보냄
문제없이 결과가 오면 이미지 업로드 완료이므로 이미지를 화면에 렌더링

preSignedUrl로 얻은 이점은 이전 방식의 두 가지 문제점을 모두 해결해줍니다.

🧐 preSingedUrl 사용 방법

S3의 버킷 생성과 권한 부여 등은 생략하겠습니다.

설치
```
npm i aws-sdk
```

.env ( 환경변수 )

# 백엔드에서만 사용하기 때문에 "NEXT_PUBLIC" 붙일 필요 없음

BLESHOP_AWS_REGION=ap-northeast-2 ( 본인이 설정한 지역으로 입력 ) BLESHOP_AWS_ACCESS_KEY=<직접 입력> BLESHOP_AWS_SECRET_KEY=<직접 입력>


+ [`src/libs/s3.ts`](https://github.com/1-blue/bleshop/src/libs/s3.ts)
```ts
import AWS from "aws-sdk";

AWS.config.update({
  region: process.env.BLESHOP_AWS_REGION,
  accessKeyId: process.env.BLESHOP_AWS_ACCESS_KEY,
  secretAccessKey: process.env.BLESHOP_AWS_SECRET_KEY,
});

// 버킷 정책에서 생성된 버전 날짜 그대로 가져와서 사용함
const S3 = new AWS.S3({ apiVersion: "2012-10-17", signatureVersion: "v4" });

/**
 * "이미지.확장자"를 받아서 "경로/이미지_시간.확장자"으로 변경해주는 함수
 * @param name "이미지.확장자" 형태로 전송
 * @returns "경로/이미지_시간.확장자" 형태로 반환
 */
const getPhotoPath = (name: string) => {
  const [filename, ext] = name.split(".");

  return `photos/${process.env.NODE_ENV}/${filename}_${Date.now()}.${ext}`;
};

/**
 * "preSignedURL"을 생성하는 함수
 * @param name "이미지.확장자" 형태로 전송
 * @returns "preSignedURL"와 "photoURL"을 반환 ( "photoURL"은 정상적으로 완료 시 이미지 url )
 */
export const getSignedURL = (name: string) => {
  const photoURL = getPhotoPath(name);

  const preSignedURL = S3.getSignedUrl("putObject", {
    // 생성한 버킷이름 작성
    Bucket: "bleshop",
    // 생성할 위치 및 파일명 작성 ( 현재는 "photos/development/파일명_시간.확장자" 형태임 )
    Key: photoURL,
    // URL 유효기간 ( 20초 )
    Expires: 20,
  });

  // preSignedURL과 미래에 생성될 이미지의 URL 반환
  return { preSignedURL, photoURL };
};

사용 예시 ( 코드를 모두 분리해서 필요한 부분만 합쳐서 새로 만들었습니다. )

import { useCallback, useState } from "react";
import axios, { AxiosError } from "axios";
import Image from "next/image";

// type import type { ChangeEvent } from "react";

type ApiGetUrlRespinse = { preSignedURL: string; photoURL: string };

/**

현재 웹페이지의 이미지의 경로를 얻는 헬퍼 함수 ( aws-s3 )
@param path 후반부 이미지 경로
@returns 전체 이미지 경로
/ declare function combinePhotoUrl(path: string): string;

const TestComponent = () => { const [photoUrl, setPhotoUrl] = useState(null);

const onUploadPhoto = useCallback( async (e: ChangeEvent) => { try { if (e.target.files?.length) { const photo = e.target.files[0];

      // 해당 api에서는 이전에 "preSignedURL()"를 이용해서 값을 얻고 반환
      const {
        data: { preSignedURL, photoURL },
      } = await axios.get(
        `/api/photo?name=${photo.name}`
      );

      // S3로 이미지 생성 요청
      await axios.put(preSignedURL, photo, {
        headers: { "Content-Type": photo.type },
      });

      // catch구문으로 넘어가지 않았으니 정상 작동
      setPhotoUrl(photoURL);
    }
  } catch (error) {
    console.error(error);

    if (error instanceof AxiosError) {
      // 예측 가능한 에러 ex) 이미지 용량 초과, 전송 시간 초과 등
    }
  }
},
[setPhotoUrl]

);

return ( <>

  // Next.js의 ""를 사용하기 위해서는 도메인을 등록이 필수
  {photoUrl && (
    
      
    
  )}

); };

export default TestComponent;


## AWS-S3 파일 이동 함수
현재 이미지 저장 방식은 다음과 같습니다.
1. 기본 이미지 저장 형태: `photos/모드/사용방식/이미지명.확장자`
2. 이미지 확정 전 방식: `/temporary`
3. 이미지 확정 후 방식: 이미지를 사용하는 형태에 따라 다름 ( `/user`, `/product` 등 )

예를 들어 회원가입하는 경우 회원가입 버튼을 누르기 전에는 `/temporary`에 이미지를 저장하고 회원가입 버튼을 누르고 유효성 검사 후 유저 생성이 확정되면 `/user`로 이미지를 옮깁니다.

이렇게 하면 임시 저장 이미지와 실제 사용하는 이미지를 구분할 수 있고, 임시 저장 이미지도 보관할 수 있습니다.
아래 코드는 위 로직을 쉽게 적용할 수 있도록 이미지 이동을 도와주는 헬퍼 함수입니다.

```ts
/**
 * 2022/08/14 - S3 이미지 제거 - by 1-blue
 * @param photo 이미지 파일 이름
 * @returns
 */
export const deletePhoto = (photo: string) =>
  S3.deleteObject(
    {
      Bucket: "bleshop",
      Key: photo,
    },
    (error, data) => {
      if (error) console.error("S3 이미지 제거 error >> ", error);
    }
  ).promise();

/**
 * 2022/08/14 - S3 이미지 복사 - by 1-blue
 * @param originalSource: 이미지 파일 이름, location: 이미지 복사 위치
 * @returns
 */
export const copyPhoto = (originalSource: string, location: PhotoKinds) => {
  // 이미지 저장 형태 : photos/모드/사용방식/이미지명.확장자
  // 모드: production or development
  // 사용 방식: temporary or remove or product or review 등
  // 따라서 두 번째 "/"를 찾아서 다음 "/"까지 내용을 바꾸면 됨 ( temporary -> product )

  let Key: unknown = null;
  const firstSlashIndex = originalSource.indexOf("/");
  const secondSlashIndex = originalSource.indexOf("/", firstSlashIndex + 1);

  switch (location) {
    // 이미지 제거
    case "remove":
      Key =
        originalSource.slice(0, secondSlashIndex) +
        "/" +
        location +
        originalSource.slice(secondSlashIndex);
      break;

    // 이미지 사용 확정으로 인한 이미지 이동
    default:
      Key = originalSource.replace("/temporary", "");
      break;
  }

  if (typeof Key !== "string")
    return console.error("이미지 저장 위치가 올바르지 않습니다.");

  return S3.copyObject(
    {
      Bucket: "bleshop",
      CopySource: "bleshop/" + originalSource,
      Key,
    },
    (error, data) => {
      /**
       * >>> 여기가 가끔씩 두 번 실행됨, 요청은 한 번으로 확인했고, callback이 두 번 실행되면서 에러가 발생함
       * 하지만 첫 번째 실행에 정상작동해서 이미지 복사는 정상적으로 실행되므로 상관은 없지만 에러 로그가 남는 문제가 발생
       */

      if (error) console.error("S3 이미지 이동 error >> ", error);
    }
  ).promise();
};

/**
 * 2022/08/14 - S3 이미지 이동 ( 복사 후 제거 ) - by 1-blue
 * @param photo: 이미지 파일 이름, location: 이미지 복사 위치
 * @returns
 */
export const movePhoto = async (photo: string, location: PhotoKinds) => {
  // OAuth의 이미지를 사용하는 경우
  if (photo.includes("http")) return;

  try {
    await copyPhoto(photo, location);
    await deletePhoto(photo);
  } catch (error) {
    console.error("movePhoto >> ", error);
  }
};

😩 겪은 문제

preSignedURL로 PUT 요청을 할 때는 File 객체 자체를 그대로 넘겨줘야 하는데 처음에는 FormData를 이용해서 넘겨줬었습니다. FormData를 이용하면 아무 문제 없이 정상 작동을 하지만 이미지가 깨지는 건지는 모르겠는데 이미지가 불러오는 부분에서 문제가 발생합니다. 처음에 이 부분을 몰라서 문제를 찾느라 4시간 정도 삽질하면서 결국 해결했습니다.

🧭 네비게이션 바 구현

Tue, 09 Aug 2022 13:51:01 GMT

Next.js와 tailwindcss를 이용한 프로젝트입니다.

📑 구조 설계

네비게이션 바는 최하단에 붙여놓도록 만들었습니다.

스크롤을 내리는 경우에는 현재 페이지의 내용을 읽어보는 경우일 것이기 때문에 영역을 넓히기 위해서 네이게이션 바를 숨기고, 스크롤을 올리는 경우는 다른 페이지로 넘어가기 위함일 경우가 많기 때문에 네비게이션 바를 나타내도록 설계했습니다.

따라서 항상 최하단에 붙어 있다가

스크롤을 아래로 내리는 경우 숨기고
위로 올리는 경우 나타나고
스크롤을 아래로 내리더라도 페이지의 최하단이라면 나타나도록 설계했습니다.

📃 페이지 구분

크게 5가지 페이지로 구분했습니다.

카테고리
검색
홈
내 정보
장바구니

next.js의 useRouter().asPath를 이용해서 현재 URL에 맞는 페이지에 들어올 경우 구분할 수 있도록 네이게이션 바에 특정 색상을 입혔습니다.

중요하고 어려운 코드가 아니므로 자세한 코드는 생략하겠습니다.

🔒 네비게이션 바 하단 고정

position: fixed를 이용해서 하단에 고정시켰습니다. 다만 fixed는 공중에 떠있는 느낌으로 다른 요소의 레이아웃에 영향을 미치지 않으므로 실제 컨텐츠가 네비게이션 바에 묻힐 수 있기 때문에 네비게이션 바의 높이만큼 body에 margin-bottom을 부여해서 네비게이션 바가 들어갈 공간을 만들었습니다.

중요하고 어려운 코드가 아니므로 자세한 코드는 생략하겠습니다.

🤔 useScrollDirection 훅

처음 말했던 네비게이션 바를 스크롤에 의해서 숨길지 보여줄지를 결정하는 데 사용할 수 있는 훅을 만들었습니다.

자세한 설명은 주석으로 작성했기 때문에 생략하겠습니다. 다만 스크롤 이벤트 등록하기 때문에 쓰로틀링을 적용했습니다.

src/hooks/useScroll.tsx

import { useCallback, useEffect, useState } from "react";

// util import { throttleHelper } from "@src/libs";

/**

마지막 스크롤링의 방향을 알아내는 훅
@returns [스크롤 방향, 스크롤 최하단 여부, 현재 스크롤 위치] 순서로 반환 ( boolean, boolean, number )
/ const useScrollDirection = () => { // 2022/08/09 - 마지막 스크롤 방향 - by 1-blue const [isUp, setIsUp] = useState(false); // 2022/08/09 - 현재 스크롤 위치값 저장할 변수 - by 1-blue const [pageY, setPageY] = useState(0); // 2022/08/09 - 현재 스크롤이 최하단에 있는지 판단할 변수 - by 1-blue const [isBottom, setIsBottom] = useState(false);

// 2022/08/09 - 현재 스크롤 방향을 확인할 스크롤 이벤트 함수 - by 1-blue const handleScroll = useCallback(() => { /**
- scrollHeight: 총 컨텐츠 높이
- clientHeight: 현재 보이는 높이 ( 현재 화면(컨텐츠)의 높이 )
- scrollY: 현재 스크롤 높이
- 따라서 "총 컨텐츠 높이 === 현재 보이는 높이 + 현재 스크롤 높이" 라면 최하단까지 스크롤을 내린 것
- / const { scrollY, document: { documentElement: { scrollHeight, clientHeight }, }, } = window;
  
  const deltaY = scrollY - pageY; const isUp = scrollY !== 0 && deltaY >= 0; const isBottom = scrollHeight - scrollY - clientHeight === 0;
  
  setIsUp(isUp); setPageY(scrollY); setIsBottom(isBottom); }, [pageY, setIsUp, setPageY, setIsBottom]);
// 2022/08/09 - 스크롤 이벤트에 스로틀링 적용 - by 1-blue const throttleScroll = throttleHelper(handleScroll, 50);

// 2022/08/09 - 스크롤 이벤트 등록 - by 1-blue useEffect(() => { document.addEventListener("scroll", throttleScroll); return () => document.removeEventListener("scroll", throttleScroll); }, [throttleScroll]);

return [isUp, isBottom, pageY]; };

export default useScrollDirection;


+ `src/libs/utils.ts`
```ts
/**
 * 스로틀링 적용 헬퍼 함수
 * @param callback 이후에 실행할 콜백함수
 * @param waitTime 기다릴 시간
 * @returns "waitTime"만큼 스로틀링이 적용된 함수("callback") 반환
 */
export const throttleHelper = (callback: () => void, waitTime: number) => {
  let timerId: ReturnType | null = null;

  return () => {
    if (timerId) return;

    timerId = setTimeout(() => {
      callback();
      timerId = null;
    }, waitTime);
  };
};

백준 - 알고리즘 기초 1/2 ( 201 - 자료구조 1 ( 참고 ) )

Mon, 08 Aug 2022 03:42:55 GMT

백준 알고리즘 기초 강의에 명시된 문제를 풀이한 포스트입니다

1. 1918번 - 후위 표기식

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = "";

rl.on("line", (line) => {
  input = line;

  rl.close();
}).on("close", () => {
  /**
   * 중위 표기식에서 후위 표기식 변환 방법
   * 1. 피연산자는 바로 출력
   * 2. 연산자는 스택의 상태에 따라 출력
   *   2.1 스택이 비었다면 스택에 넣기
   *   2.2 연산자 우선순위가 낮은 연산자 or 닫는 괄호를 만날 때까지 "pop()" 실행 후 스택에 넣기
   *   2.3 닫는 괄호라면 여는 괄호가 나올 때까지 "pop()" 실행
   * 3. 수식의 끝까지 왔다면 스택의 연산자들을 모두 꺼냄
   */

  const stack = [];
  let answer = "";

  input.split("").forEach((v) => {
    // 연산자라면
    if (v.match(/[\(\)\+\*\-\/]/)) {
      // 2. 연산자는 스택의 상태에 따라 출력
      switch (v) {
        case "(":
          stack.push(v);
          break;
        case ")":
          // 2.3 닫는 괄호라면 여는 괄호가 나올 때까지 "pop()" 실행
          while (stack.length && stack[stack.length - 1] !== "(") {
            answer += stack.pop();
          }
          stack.pop();
          break;
        case "+":
        case "-":
          // 2.2 연산자 우선순위가 낮은 연산자를 만날 때까지 "pop()" 실행 후 스택에 넣기 ( "+", "-"는 우선순위가 제일 낮아서 비교할 필요 없이 닫는 괄호가 나오는지만 확인하면 됨 )
          while (stack.length && stack[stack.length - 1] !== "(") {
            answer += stack.pop();
          }
          stack.push(v);
          break;
        case "*":
        case "/":
          // 2.2 연산자 우선순위가 낮은 연산자를 만날 때까지 "pop()" 실행 후 스택에 넣기 ( "*", "/"만 비교하므로 닫는 괄호를 생각해 줄 필요 없음 )
          while (
            stack.length &&
            (stack[stack.length - 1] === "*" || stack[stack.length - 1] === "/")
          ) {
            answer += stack.pop();
          }
          stack.push(v);
          break;
      }
    }
    // 피연산자라면
    else {
      // 1. 피연산자는 바로 출력
      answer += v;
    }
  });

  // 3. 수식의 끝까지 왔다면 스택의 연산자들을 모두 꺼냄
  while (stack.length) answer += stack.pop();

  console.log(answer);

  process.exit();
});

2. 1935번 - 후위 표기식2

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];

rl.on("line", (line) => {
  input.push(line);

  if (+input[0] + 2 === input.length) rl.close();
}).on("close", () => {
  /**
   * 후위 표현식 계산법
   * 1. 피연산자는 스택에 넣는다.
   * 2. 연산자가 나올 경우 스택에서 피연산자 2개를 꺼낸 후 계산한 뒤 다시 넣는다. ( 단, 연산 순서는 "나중" "연산자" "먼저" )
   * 3. 모든 연산이 끝난 후 스택에 담겨있는 피연산자가 연산의 결과다.
   */

  const [, expression, ...temp] = input;
  const values = temp.map((v) => +v);
  const stack = [];
  let firstValue = null;
  let lastValue = null;

  expression.split("").forEach((v) => {
    // 연산자일 경우
    if (v.match(/[\+\-\*\/]/)) {
      lastValue = stack.pop();
      firstValue = stack.pop();

      switch (v) {
        case "+":
          stack.push(firstValue + lastValue);
          break;
        case "-":
          stack.push(firstValue - lastValue);
          break;
        case "*":
          stack.push(firstValue * lastValue);
          break;
        case "/":
          stack.push(firstValue / lastValue);
          break;
      }
    }
    // 피연산자일 경우
    else {
      stack.push(values[v.charCodeAt() - 65]);
    }
  });

  console.log(stack[0].toFixed(2));

  process.exit();
});

3. 10808번 - 알파벳 개수

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = null;

rl.on("line", (line) => {
  input = line;

  rl.close();
}).on("close", () => {
  const alphabet = Array(26).fill(0);
  const word = input;

  word.split("").forEach((v) => (alphabet[v.charCodeAt() - 97] += 1));

  console.log(alphabet.join(" "));

  process.exit();
});

4. 10809번 - 알파벳 찾기

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = null;

rl.on("line", (line) => {
  input = line;

  rl.close();
}).on("close", () => {
  const alphabet = Array(26).fill(-1);
  const word = input;

  word.split("").forEach((v, i) => {
    if (alphabet[v.charCodeAt() - 97] !== -1) return;

    alphabet[v.charCodeAt() - 97] = i;
  });

  console.log(alphabet.join(" "));

  process.exit();
});

5. 10820번 - 문자열 분석

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];
let temp = null;
let answer = "";
const table = {
  upper: 0,
  lower: 0,
  number: 0,
  space: 0,
};

rl.on("line", (line) => {
  input.push(line);

  // rl.close();
}).on("close", () => {
  // 전체 탐색
  input.forEach((str, i) => {
    // 문장 단위로 탐색
    str.split("").forEach((v) => {
      temp = v.charCodeAt();

      if (temp >= 97 && temp <= 122) table.upper++;
      if (temp >= 65 && temp <= 90) table.lower++;
      if (temp >= 48 && temp <= 57) table.number++;
      if (temp === 32) table.space++;
    });

    // 문장 탐색 후 정답 작성
    answer += Object.values(table).join(" ");

    // 마지막 아니면 줄바꿈
    if (i !== input.length - 1) answer += "\n";

    // 초기화
    Object.keys(table).forEach((key) => (table[key] = 0));
  });

  console.log(answer);

  process.exit();
});

6. 2743번 - 단어 길이 재기

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  rl.close();
}).on("close", () => {
  const [word] = input;

  console.log(word.length);

  process.exit();
});

백준 - 알고리즘 기초 1/2 ( 303 - 수학 ( 참고 ) )

Sun, 07 Aug 2022 02:12:54 GMT

백준 알고리즘 기초 강의에 명시된 문제를 풀이한 포스트입니다

1. 11005번 - 진법 변환 2

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  rl.close();
}).on("close", () => {
  const [N, B] = input[0].split(" ").map((v) => +v);

  console.log(N.toString(B).toUpperCase());

  process.exit();
});

2. 2745번 - 진법 변환

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  rl.close();
}).on("close", () => {
  const [N, B] = input[0].split(" ");

  console.log(parseInt(N, +B).toString(10));

  process.exit();
});

3. 11576번 - Base Conversion

문제 이해 못함

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  if (+input[0] === input.length - 1) rl.close();
}).on("close", () => {
  /**
   * [입력]
   * A진법, B진법
   * M: 입력 숫자의 자리수의 개수
   * A진법 숫자 M개 ( 공백 구분 )
   *
   * [출력]
   * A진법 숫자들 ---> B진법 숫자들
   *
   * 결론: A진법 숫자들 --> 10진법 숫자들 --> B진법 숫자들
   */

  process.exit();
});

4. 11653번 - 소인수분해

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  rl.close();
}).on("close", () => {
  let number = +input[0];
  let divideNumber = 2;
  const answer = [];

  while (number !== 1) {
    if (number % divideNumber === 0) {
      answer.push(divideNumber);
      number = number / divideNumber;
    } else {
      divideNumber++;
    }
  }

  console.log(answer.join("\n"));

  process.exit();
});

백준 - 알고리즘 기초 1/2 ( 301 - 수학 1 (연습) )

Fri, 05 Aug 2022 03:06:07 GMT

백준 알고리즘 기초 강의에 명시된 문제를 풀이한 포스트입니다

1. 9613번 - GCD 합

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  if (+input[0] === input.length - 1) rl.close();
}).on("close", () => {
  // 유클리드 알고리즘
  const getGCD = (x, y) => {
    const bigger = Math.max(x, y);
    const smaller = Math.min(x, y);

    const remainder = bigger % smaller;

    if (remainder === 0) return smaller;
    else return getGCD(smaller, remainder);
  };

  // 전체 입력 개수 분리
  const [count, ...list] = input;
  // 입력 개수만큼 배열 생성
  const answer = Array(+count).fill(0);

  list.forEach((value, index) => {
    // 세부 입력 개수 분리 및 숫자로 변환 후 배열화
    const [, ...numbers] = value.split(" ").map((n) => +n);

    // 모든 경우를 포함해서 최대공약수(GCD) 계산 후 합치기
    numbers.forEach((v, i, arr) => {
      for (let j = i + 1; j < arr.length; j++) {
        answer[index] += getGCD(v, arr[j]);
      }
    });
  });

  console.log(answer.join("\n"));

  process.exit();
});

2. 17087번 - 숨바꼭질 6

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  if (2 === input.length) rl.close();
}).on("close", () => {
  /**
   * 핵심은 한번에 "D만큼만 이동이 가능"이다.
   * 몇번이든 상관없이 D만큼 이동해서 동생과 같은 위치에 도달할 수 있으면 된다.
   * 즉, "|수빈위치 - 동생위치|"인 값들을 D로 나눠서 나누어 떨어지는 최댓값인 최대공약수를 구하는 문제이다.
   */

  // 유클리드 알고리즘
  const getGCD = (x, y) => {
    const bigger = Math.max(x, y);
    const smaller = Math.min(x, y);

    const remainder = bigger % smaller;

    if (remainder === 0) return smaller;
    else return getGCD(smaller, remainder);
  };

  // 수빈 위치 구하기
  const [, subinLocation] = input[0].split(" ").map((v) => +v);
  // 수빈과 동생들의 거리 계산
  const locations = input[1]
    .split(" ")
    .map((v) => Math.abs(+v - subinLocation));

  // 수빈과 동생들의 거리의 최대공약수 구하기
  const distance = locations.reduce((p, c) => getGCD(p, c));

  console.log(distance);

  process.exit();
});

3. 1373번 - 2진수 8진수

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = "";

rl.on("line", (line) => {
  input = line;

  rl.close();
}).on("close", () => {
  /**
   * 2진수 -> 10진수 -> 8진수 => 시간초과
   * 2진수를 뒤에서부터 3개씩 끊어서 8진수로 변환 후 붙이면 됨
   */

  const binary = input.split("");
  const answer = [];

  // 문자열을 뒤에서부터 3개씩 끊어서 2진수로 만들고 8진수로 변환하는 과정을 계속 반복
  while (binary.length >= 3) {
    answer.push(
      parseInt(binary.splice(binary.length - 3).join(""), 2).toString(8)
    );
  }

  if (binary.length) answer.push(parseInt(binary.join(""), 2).toString(8));

  console.log(answer.reverse().join(""));

  process.exit();
});

4. 1212번 - 8진수 2진수

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = "";

rl.on("line", (line) => {
  input = line;

  rl.close();
}).on("close", () => {
  /**
   * 8진수를 한자리씩 끊어서 2진수로 변환 후 합쳐줌
   * 단, 마지막을 제외하고 3자리가 아닐경우 빈칸에 0을 채워줌
   */
  const numbers = input.split("").map((v) => +v);

  const answer = numbers.map((v, i) => {
    let binary = v.toString(2);

    if (i !== 0) binary = "0".repeat(3 - binary.length) + binary;

    return binary;
  });

  console.log(answer.join(""));

  process.exit();
});

5. 2089번 - -2진수

문제 풀이 실패

6. 17103번 - 골드바흐 파티션

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const input = [];

rl.on("line", (line) => {
  input.push(line);

  if (+input[0] === input.length - 1) rl.close();
}).on("close", () => {
  // 에라토스테네스의 체로 범위 내 소수 구하기
  const getPrimeNumbers = (range) => {
    const candidates = Array(range + 1).fill(true);
    let loopIndex = 1;

    candidates.forEach((v, index, arr) => {
      // 0은 제외, 1은 예외
      if (index === 1 || index === 0) {
        arr[index] = false;
        return;
      }

      loopIndex = 1;
      for (let i = index; i < arr.length; i = loopIndex++ * index) {
        // 본인은 소수에서 제외
        if (i === index) continue;
        // 이미 소수인 것도 제외
        if (arr[i] === false) continue;

        arr[i] = false;
      }
    });

    return candidates;
  };

  // 홀수 제외 숫자 배열로 변환
  const [, ...numbers] = input.map((v) => +v);

  // 특정 범위 소수 구하기
  const primeNumbers = getPrimeNumbers(Math.max(...numbers));

  const answers = numbers.map((v) => {
    let count = 0;

    for (let i = 2; i <= v / 2; i++) {
      if (primeNumbers[i] && primeNumbers[v - i]) {
        count++;
      }
    }

    return count;
  });

  console.log(answers.join("\n"));

  process.exit();
});

1-blue.log

TOC ( Table Of Contents ) 구현

구현 순서

Intersection Observer API

🤔 Intersection Observer API

😮 Intersection Observer API 사용법

🧐 React에서 Intersection Observer API 예시

움직이는 배경화면 구현

구현 원리

image carousel 구현

구현 목적

세팅

구현 방법

후기

Accordion menu 구현

애니메이션 적용 전

🤔 ResizeObserver 사용

🧐 실제 적용 예시

😮 ResizeObserver 적용 결과물

Scroll Animation 구현

코드 예시

후기

사용

SVG

SVG 사용 방법

SVG 속성

css, js 적용하기

그리기

4. 텍스트 부분 스타일링 ( )

5. 선 위에 글자 입히기 ( )

마무리

bleshop v 1.0.0 마무리

BleShop

사용한 라이브러리

1. Next.js

2. Recoil

3. next-auth

4. prisma

5. tailwindcss

6. AWS-S3

7. iamport

8. 나머지 라이브러리들

구현한 기능들

🚀 배포

💵 모바일 웹 결제 기능 ( by iamport )

구현 동기

문제 원인

해결 방법

next.js 빌드 최적화

빌드 최적화 적용 이유

빌드 최적화 방법

1. Tree Shaking

2. Next.js의 Dynamic Import

대충 모달 내용

💵 웹 결제 기능 ( by iamport )

동작 방식

코드

🧺 최근 본 상품 기능

기능 구현에 대한 구상

기능 구현

getServerSideProps의 쿠키 문제 해결 방법

😕 사전 지식

🙂 해결 방법

Recoil과 IntersectionObserver를 이용한 무한 스크롤링

🤝 무한 스크롤링 구현을 위해 선택한 것

😕 처음 시도

🙂 실제 구현 방법

인증 로직 구현 ( next-auth )

회원가입

로그인

1. 세팅 코드 예시

2. 프론트 사용 예시

Home!!!

3. user 타입 재정의

(추가) OAuth 로그인 ( kakao, google )

AWS - S3의 preSignedUrl 사용

😥 이미지 처리 로직의 한계

😮 preSignedUrl

🧐 preSingedUrl 사용 방법

😩 겪은 문제