따꿍의 프로젝트

[스프린트] 사용한 기술

공장 주인 따꿍 — Fri, 15 May 2026 10:25:57 +0900

scrollToTop

https://velog.io/@dubabbi/React-ScrollToTop%EC%9C%BC%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%ED%99%94%EB%A9%B4-%EC%83%81%EB%8B%A8%EC%9D%B4-%EB%82%98%ED%83%80%EB%82%98%EA%B2%8C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[React] ScrollToTop으로 페이지 이동 시 화면 상단이 나타나게 구현하기

프로젝트를 진행하던 도중… 스크롤을 아래 쪽까지 내린 다음에 페이지를 이동하면 이동한 페이지의 아래쪽이 나타나서 사용자 경험에 문제가 될 것으로 생각했습니다. 실제로 배포를 진행하

velog.io

[에디터] 모바일 환경에서 게시글 작성시 AttachmentBar이 가상 키보드만큼 올라가도록 하기

공장 주인 따꿍 — Mon, 4 May 2026 15:16:36 +0900

문제

QA 테스트중 에디터로 게시글 작성하면 AttachmentBar이 가상키보드만큼 위로 올라와서

AttachmentBar에 있는 에디터 버블메뉴를 좀 더 쉽게 접근할 수 있게 해달라는 요청이 있었다.

이 기능은 CommentInput에도 있어서 (코멘트 입력란은 가상키보드만큼 잘 올라감) 참고하면서 작업하려고 했다.

https://www.notion.so/snorose/AttachmentBar-3537ef0aa3bf80449b2fc244cd78dc5f?source=copy_link

https://github.com/snorose/snorose-front/issues/1622

[MODIFY] AttachmentBar이 키보드 생성시 같이 올라가도록 수정 · Issue #1622 · snorose/snorose-front

기능 변경 개요 대상 기능: AttachmentBar와 에디터 변경 이유: 모바일 환경에서도 에디터 활용이 용이하도록 AttachmentBar이 키보드 생성 시 같이 올라가도록 수정할 예정입니다 변경 전후 비

github.com

기초 조사

CommentInput.module.css의 스타일과 AttachmentBar.module.css의 스타일을 확인했을시 별다른 차이가 없었다.

둘다 컴포넌트를 아래에 위치시키는 방식이

position: fixed하고

bottom: 0을 하고 있었다.

그러면 왜 CommentInput 컴포넌트는 자동으로 가상키보드 따라 올라가고

AttachmentBar은 따라가지 않은것인가?

그건 바로 브라우저 focus 정책에 있다.

브라우저는 포커스된 입력 요소를 자동으로 보이게 만든다.

CommentInput은 글 작성시 해당 컴포넌트 자체를 focus하니까 문제가 없고,

내가 작업할 AttachmentBar은 focus되는 글 작성 컴포넌트와 해당 컴포넌트와 서로 다르니 문제가 생기는 것이다.

근데 그렇다고 글작성 컴포넌트가 focus될시 AttachmentBar을 focus하면

사용자 입장에서는 당황스러우니

내가 직접 올려주는 방법밖에 없는 것 같다.

일단 focus가 문제인지 확인해보도록 하겠다.

입증을 위한 테스트

테스트를 위해 바꾼 내용만 기재했다

- AttachmentBar 안의 input중에 ref 걸기 쉽게 children 넘겨주기

- EditorContainer에 onFocus prop을 추가해서 에디터에 focus할시 어떤 작업을 해야할지 넘겨주기

(사실상 AttachmentBar 안의 input에 focus를 넘기는 작업)

AttachmentBar안의 input의 ref에다가 .current.focus()를 해주기

export default function WritePostPage() {
    const attachmentBarRef = useRef();
    return (
        /*...*/
        <EditorContainer
            /*...*/
            onFocus={(e) => {
                attachmentBarRef.current.focus()
            }}
        />
        <AttachmentBar
          attachmentsInfo={attachmentsInfo}
          setAttachmentsInfo={setAttachmentsInfo}
          editor={editor}
        >
          <input ref={attachmentBarRef} style={{ opacity: 0 }} />
        </AttachmentBar>
    )
}

export default function EditorContainer({/*...*/, onFocus}) {
    return (
        <>
            <div onFocus={onFocus}>
                <EditorContent/>
            </div>
        </>
    )
}

export default function AttachmentBar({/*...*/, children}){
    return (
        <div>
            {children}
        </div>
    )
}

초기상태 / 테스트전의 작동모습 (화면이동X, attachmentbar 가려짐) / 테스트후의 작동모습 (attachmentbar 위치로 화면이동)

이로서 focus의 유무차이가 두 컴포넌트의 차이임을 증명했다.

허나 CommentInput처럼 작성하기에는 문제가 여러가지 있다.

1. Focus는 사실상 editor 컴포넌트에 부여해야한다.

2. 이렇게 AttachmentBar의 위치로 이동하는게 아니라, 화면은 안 움직이고 (그대로 editor이 보이는 상태로)
AttachmentBar이 위로 올라와야한다.

따라서, 그냥 새로운 로직을 짜야한다는 것을 깨달았다.

새로운 로직 짜기

스택오버플로우 여기저기 찾아보니까 VisualViewport API를 사용하는 방법을 추천했다

이는 resize이벤트를 듣게해주는 API로,

이름 안의 visualViewport는 on-screen keyboard / pinch-zoom 구역 밖의 구역들 / 등과 같은

페이지의 크기와 같이 scale되지 않는 요소들을 뺀

순수 사용 화면 크기 부위를 뜻한다.

https://stackoverflow.com/questions/41684804/how-to-get-keyboard-height-on-a-web-app

How to get keyboard height on a web app

This is for a web app, targeting any mobile browser but mainly Chrome and Safari for iOS10. The browser opens the built-in keyboard when the user clicks on any input, which is fine, but I am trying...

stackoverflow.com

AttachmentBar을 사용하면 바로 위치 조정 로직을 발동하게

useAttachmentUpload 훅에다가 useEffect를 생성하였다.

import { useEffect, useRef } from 'react';
export function useAttachmentUpload({/*...*/}){
    const attachmentBarRef = useRef();
    
    useEffect(() => {
    const vv = window.visualViewport;
    const handler = () => {
      requestAnimationFrame(() => {
        const keyboardHeight = window.innerHeight - vv.height;
        const offsetTop = vv.offsetTop;

        attachmentBarRef.current.style.transform =
          keyboardHeight > 0
            ? `translateY(-${keyboardHeight - offsetTop}px)`
            : `translateY(0px)`;
      });
    };
    vv.addEventListener('resize', handler);
    vv.addEventListener('scroll', handler);
    return () => {
      vv.removeEventListener('resize', handler);
      vv.removeEventListener('scroll', handler);
    };
  }, [attachmentBarRef]);
  
    const changeImageUpload = (e) => {}
    const changeVideoUpload = (e) => {}
    
    return {attachmentBarRef, changeImageUpload, changeVideoUpload}
}

이렇게 hook 내부에 ref를 생성해서, 리턴을 한 후

hook을 사용하는 컴포넌트에서 꺼내내서 연결하는것이 좋다

export default function AttachmentBar({/*...*/}){
    const { attachmentBarRef, changeImageUpload, changeVideoUpload } =
        useAttachmentUpload({
          attachmentsInfo,
          setAttachmentsInfo,
        });
    /*...*/
    return (
        <div ref={attachmentBarRef}></div>
    )
}

문제점: visualViewport resize시 키보드 높이 계산해서 translate로 직접 올려주는 방식은

스크롤할때마다 재계산해서 컴포넌트가 키보드에 의해 끌려가는 느낌을 준다.

대신 태블릿에서 확인해보니 정말 부드럽게 잘 따라가는것을 확인했다

아무래도 연산력 차이인것 같다.

다른 사이트 참고 및 결론

블라인드 웹

우리 원래 방식대로 되어 있었다.

스크롤하면 attachmentbar이 사라지는 방식이다.

결론

그래서 팀원들에게 상황을 공유하고,

그냥 스크롤하면 사라지는 그대로 둘것인지 아니면

좀 렉걸리고 키보드를 따라다니는것 같아도 내가 작성한 방식대로 할것인지 물어보니

내가 작업한게 괜찮다고 한다.

그래서 이대로 PR을 올릴려고 한다.

[개인] status bar 투명하게 만들 수 있는가: meta theme-color

공장 주인 따꿍 — Fri, 1 May 2026 22:19:00 +0900

발단

디자인팀에서 status bar을 투명하게 만들 수 있냐고 여쭤봤었는데

담당하던 팀원이 나가서 담당하게 되었다

Status Bar 색깔 도입하는 방법

보통은 meta태그의 theme-color로 처리한다.

우리 스노로즈 역시 이 속성으로 white로 지정했다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/theme_color

theme_color - Web app manifest | MDN

developer.mozilla.org

공식문서를 찾아보면 브라우저마다 opacity는 적용될수도 안될수도 있는데

웬만해서는 적용 안된다고 한다.

실제 테스트

보면 버튼과 theme-color 모두 같은 opacity로 지정했지만

버튼만 거의 보이지 않고 theme-color는 뒤의 opacity는 무시하고 색만 받은게 보인다

결론

안되고 권장되지 않는다!

추가문제

iOS에서 status bar이 페이지마다 색깔이 다르다고 한다

나는 안드로이드라서 알길이 없지만 무슨 연유로 페이지마다 색이 다르다는 팀원들의 제보가 들어왔다.

아이폰(미성, 희원, 선진)
- 하얀색: 시험후기, 알림, 게시판
- 회색: 홈, 게시판 홈, 마이페이지
- 파란색: 게시글 상세
갤럭시(민주)
- 모든 페이지에서 하얀색

리액트는 SPA이기 때문에 theme-color를 지정하면 모든 페이지에 공통으로 설정됨
페이지 별 커스텀이 어려움
아이폰에서 다르게 보이는 이유는 OS 차이인 걸로 추정

MongoDB 연결 중 ECONNREFUSED 에러

공장 주인 따꿍 — Thu, 30 Apr 2026 22:28:10 +0900

문제

서버를 MongoDB랑 연결하려니까 문제가 생겼다.

db pw랑 연결 링크도 제대로 넣었는데 계속 이 문제가 떴다.

AI는 예상했지만 이런 문제에는 도움이 안되서 오랜만에 구글 서치 들어갔다.

발생 이유와 해결방법

https://www.reddit.com/r/mongodb/comments/1qojt61/querysrv_econnrefused_when_connecting_mongodb/?show=original

Reddit의 mongodb 커뮤니티

mongodb 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요

www.reddit.com

Reddit 포스트를 보니까 Windows Node v24가 Mongodb와 문제가 생기나보다.

https://github.com/nodejs/node/pull/61453

dns: fix Windows SRV ECONNREFUSED regression by correcting c-ares fallback detection by NotVivek12 · Pull Request #61453 · nod

dns: fix Windows SRV ECONNREFUSED regression by correcting c-ares fallback detection Summary This PR fixes a regression introduced in Node.js v24.13.0 on Windows where DNS SRV lookups (commonly use...

github.com

app.js 상단에 아래 코드를 추가하면 작동한다고 한다.

import { setServers } from "node:dns/promises";

setServers(["1.1.1.1", "8.8.8.8"]);

[프론트] 브라우저가 작동하는 방식을 서술하시오

공장 주인 따꿍 — Fri, 24 Apr 2026 17:27:29 +0900

전반적인 구조

위는 Critical Rendering Path (CRP)로

브라우저가 HTML -> 화면 픽셀로 바꾸는 과정 중

처음 화면을 그리기까지 필요한 핵심 단계를 의미한다. (최소 렌더링 과정)

DOM (Document Object Model): HTML과 다르게 JS로 조작 가능한 객체 형태이다.

이 CRP가 느리면

- First Paint 늦어짐

- UX 나빠짐

- SEO에도 영향이 감

=> Blocking(다 받아야 다음단계로 넘어감)한 CSS

[프론트] Event 버블링과 캡쳐링을 서술하고 이를 방지하기 위한 방법을 서술하세요

공장 주인 따꿍 — Fri, 24 Apr 2026 16:58:04 +0900

한줄 정리

이벤트 버블링은 이벤트가 발생한 요소에서부터 부모로 전파되며 상위요소의 이벤트 핸들러가 실행되는 현상을 뜻합니다.
브라우저의 이벤트 흐름은 캡처링 → 타겟 → 버블링 순서로 이루어지며,
버블링 단계에서 자식에서 발생한 이벤트가 부모로 전달됩니다.

이를 방지하기 위한 방법은 바로 e.stopPropagation()입니다.

설명

안에 있는 버튼을 클릭했는데 밖의 부모의 onClick이 발동하는 경우를 보셨을겁니다.

이게 바로 Event 버블링을 고려하지 않아서 발생한 문제인데요,

브라우저가 어떤 식으로 이벤트를 인식하는지 이해하면 어렵지 않은 개념입니다.

브라우저의 이벤트 DOM 트리에서 캡처링 단계에 자식까지 내려갔다가
자식에서 다시 root인 html로 다시 돌아가는 버블링과정에서 이벤트를 인식해내는데요,

그러는 과정에서 자식에서 발동한 이벤트가 부모의 이벤트 리스너를 발동합니다.

캡처링: 이벤트가 타겟까지 내려오는 과정
버블링: 이벤트가 타겟에서 부모 방향으로 전파되는 과

이를 막기 위해서는 자식에서 e.stopPropagation를 해줘야합니다.

그러면 해당 함수를 호출한 그 시점에서 전파를 중단합니다.

[프론트] Promise의 3단계에 대해 서술하시오

공장 주인 따꿍 — Fri, 24 Apr 2026 16:39:09 +0900

한줄 정의

Promise는 비동기 작업을 완수하는데 사용하는 JS 내장 객체입니다.

JS 컴파일러 자체가 싱글 스레드라 자체적으로 비동기를 지원하지 않는데,

이를 위해 JS는 이벤트 루프, Web API, 그리고 Task Queue를 사용합니다.

이러한 흐름에서 Promise는 비동기 결과를 다루기 쉽게 하는 객체입니다.

이러한 Promise는 3가지 단계가 있는데, 바로

Pending, Fulfilled와 Rejected 단계입니다.

executor 함수 안의 resolve와 reject를 통해서 상태를 변경하며, 한번 상태가 결정되면 이후에 변하지 않습니다.

처음에는 Pending(대기 상태)이고,
작업이 성공하면 Fulfilled, 실패하면 Rejected 상태로 전이됩니다.

이러한 Promise의 상태는 Heap안에 저장된 Promise 객체 안에 기록됩니다.

추가 설명

Pending 단계는 아직 작업이 끝나지 않은, 대기 상태를 지칭합니다.

아직 resolve/reject가 호출되지 않 아직 then 안의 콜백함수가 실행되지 않고 기다립니다.

Fulfilled 단계는 비동기 작업을 성공적으로 완수한 상태를 지칭합니다.

Promise 콜백함수 안에 resolve()가 fulfill 상태를 발동하고 결과값을 전달합니다.

resolve로 전달된 값은 then을 통해 전달받을 수 있습니다.

Rejected 단계는 비동기 작업을 실패한 상태를 지칭합니다.

Promise 콜백 함수 안에 reject가 rejected 상태를 발동하고 에러를 전달합니다

전달된 에러는 catch로 받습니다.

const fetchSomething = () =>
  new Promise((res, rej) => {
    if (실패) {
      rej(error);
      return;
    }
    res(data);
  });

fetchSomething().then((data)=> {console.log(data)}
    .catch((e) => {console.error(e)})

[Sprint 5] React 적용 (path alias 설정, layout 설정, element 사이사이에만 라인 설정하기, 반응형 디자인, useMediaQuery)

공장 주인 따꿍 — Fri, 24 Apr 2026 13:36:57 +0900

스프린트 내용

https://github.com/quothraven1122/13-sprint-mission-fe/issues/32

feat: create market page · Issue #32 · quothraven1122/13-sprint-mission-fe

기능 설명 Figma 디자인 중고마켓 페이지를 작성할 계획입니다. 작업 흐름 공통 컴포넌트 생성 버튼 생성 상품 컴포넌트 생성 검색창 생성 dropdown 생성 페이지 구성 생성 Header 작성하기 Body

github.com

작업 흐름

- vite로 프로젝트 생성하기 (React + JS Compiler)

- vite starter template 지우기

- layout 만들고 header와 footer만들기

MainLayout이라는걸 만들어서 Header / Page / Footer 구조의 레이아웃 생성하고 App.jsx에 넣음

중간의 Page는 children으로 받는 형식으로 작성

전체 layout의 min-height를 100vh, display는 flex로 지정하고 page를 flex:1로 정해서 무조건 footer이 밑에 오도록 작성

(밑의 "Footer이 무조건 밑에 있는 Layout 구조" 섹션 확인해보세요)

- useEffect에 fetch를 하는 패턴이 너무 길고 생각할게 많아서 그냥 axios를 다운받아서 사용했다

- Button, Item, ProductCardList, Input, Dropdown, Pagination 공통 컴포넌트 생성

상태관리는 무조건 부모인 MarketPage에서 관리한다는 생각으로 작성해야한다.⭐

그래서 state는 무조건 page에만 존재하게 하고, 컴포넌트는 UI만 보이게 한다.

props로는 필요한 상태, 데이터, 클래스네임, 주요 이벤트 헨들러 (onChange, onKeyDown) 만 전달하면 되는 듯 하다

전달할 Props	예시	필요한 이유
데이터	placeholder, title, column	재사용성 (데이터 주어진거에 따라 조금씩 다른 컴포넌트 만들어짐)
자식	children	재사용성 (자식 주어진거에 따라 조금씩 다른 컴포넌트 만들어짐)
부모로부터 오는 state	value, data	state에 따른 UI 변경
클래스	className	커스텀 스타일링 가능하게 만들기
주요 이벤트 헨들러	onChange, onKeyDown	setState를 직접 주는 대신, 어떤 이벤트가 일어나면 이러한 행동을 했으면 좋겠다를 정의하는 여러 setState를

Button.jsx

데이터인 variant와 disabled, 자식인 children, 그리고 이벤트 헨들러인 onClick을 받는다.

export default function Button({
  variant,
  children,
  disabled = false,
  onClick,
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={`${styles.btn} ${styles[`btn-${variant}`]}`}
    >
      {children}
    </button>
  );
}

Item.jsx

보다시피 컴포넌트는 오로지 UI만 담당해야해서 data만 받는다.

export default function Item({ data }) {
  return (
    <div className={styles.container}>
      <img
        src={data.images[0] || defaultImg}
        loading="lazy"
        onError={(e) => {
          e.target.src = defaultImg;
        }}
        className={styles.img}
      />
      <div className={styles.content}>
        <h2 className={styles.title}>{data.name}</h2>
        <h3 className={styles.price}>{data.price.toLocaleString()}원</h3>
        <div className={styles.meta}>
          <img src={icHeartEmpty} />
          {data.favoriteCount}
        </div>
      </div>
    </div>
  );
}

ProductCardList.jsx

Item 그룹의 타이틀과 아이템들을 디스플레이하는 컴포넌트다.

역시 계산하는 로직은 하나도 없고 오로지 데이터인 title, column과 state인 data, 그리고 자식인 children을 받는다.

export default function ProductCardList({ title, column = 5, data, children }) {
  return (
    <div>
      <div className={styles.top}>
        <h1 className={styles.title}>{title}</h1>
        <div className={styles.toolbar}>{children}</div>
      </div>
      <div className={styles.list} style={{ "--column-count": column }}>
        {data.map((d) => (
          <Item data={d} key={d.id} />
        ))}
      </div>
    </div>
  );
}

Input.jsx

역시 계산하는 로직은 넣으면 안된다.

setState를 바로 Input에 전달하는게 아니라,

input 입력 값이 바뀌면 해야하는 모든 전반적인 작업을 onChange라는 이벤트 헨들러 함수에 넣어서 전달한다.

데이터인 placeholder, state인 value, 이벤트 헨들러인 onChnage와 onKeyDown, 그리고 클래스인 className을 전달받는다.

<Input
  placeholder="검색할 상품을 입력해주세요"
  value={input}
  onChange={(e) => {
    setInput(e.target.value);
    if (e.target.value.length === 0) {
      setPage(1);
      setKeyword(e.target.value);
    }
  }}
  onKeyDown={(e) => {
    if (e.code === "Enter") {
      setPage(1);
      setKeyword(input);
    }
  }}
  className={styles.input}
/>;

export default function Input({
  placeholder,
  value,
  onChange,
  onKeyDown,
  className,
}) {
  return (
    <div className={`${styles.container} ${className}`}>
      <img src={icSearch} />
      <input
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onKeyDown={onKeyDown}
      />
    </div>
  );
}

Dropdown.jsx

데이터, state, 그리고 이벤트 헨들러를 받는다.

export default function Dropdown({ menu, value, onChange }) {
  const [open, toggle] = useDropdown();
  return (
    <div className={styles.container}>
      <div className={styles.currentContainer} onClick={toggle}>
        <div className={styles.current}>
          <p>{value.name}</p>
          <img src={icArrowDown} className={styles.icon} />
        </div>
      </div>

      <div className={`${styles.dropdown} ${!open && styles.dropdownClose}`}>
        {menu.map((m) => (
          <div
            key={m.id}
            className={styles.menu}
            onClick={(e) => {
              onChange(m);
              toggle();
            }}
          >
            {m.name}
          </div>
        ))}
      </div>
    </div>
  );
}

Pagination.jsx

보면 계산하는 로직은 모두 utils에 따로 보관했다.

해당 컴포넌트가 받는 props는 단지 state인 currentPage와 totalCount, 그리고 이벤트 헨들러인 onChange이다.

아래 로직을 보면 버튼중에 currentPage state와 같은 값을 담고 있는 Button만 "circle-selected" 스타일을 가지게 된다.

import { getTotalPage, getRange } from "@/utils/pagination";

export default function Pagination({ currentPage, totalCount, onChange }) {
  const totalPage = getTotalPage(totalCount);
  const numbers = getRange(currentPage, totalPage);
  return (
    <div className={styles.pagination}>
      <Button
        variant="circle"
        onClick={() => {
          if (currentPage > 1) onChange((prev) => prev - 1);
        }}
      >
        <div className={styles.btnTxt}>
          <p>{"<"}</p>
        </div>
      </Button>
      {numbers.map((n, i) => (
        <Button
          variant={n === currentPage ? "circle-selected" : "circle"}
          onClick={() => {
            onChange(n);
          }}
          key={i}
        >
          <div className={styles.btnTxt}>
            <p>{n}</p>
          </div>
        </Button>
      ))}
      <Button
        variant="circle"
        onClick={() => {
          if (currentPage < totalPage) onChange((prev) => prev + 1);
        }}
      >
        <div className={styles.btnTxt}>
          <p>{">"}</p>
        </div>
      </Button>
    </div>
  );
}

- currentPage와 totalCount만으로도 현재 띄워저야하는 범위를 계산할수 있다.

- 한 페이지에 10개씩 띄우니 totalCount/10을하고 위로 올림을하면 있어야할 전체 페이지 계수 계산 가능하다

- Pagination 버튼을 한번에 5개씬 띄우긴 하지만 막빠지쪽으로 가면 5개 없을수도 있으니 마지막 버튼 값을 계산해줘야함

end와 totalPage중에 더 작은 것이 마지막 버튼 값이 된다.

- start값과 realEnd값을 바탕으로 띄워줘야하는 버튼들을 보여준다.

export const getTotalPage = (totalCount) => {
  return Math.ceil(totalCount / 10);
};
export const getRange = (currentPage, totalPage) => {
  const start = Math.floor((currentPage - 1) / 5) * 5 + 1;
  const end = start + 5 - 1;

  const realEnd = Math.min(end, totalPage);
  return Array.from({ length: realEnd - start + 1 }, (_, i) => i + start);
};

발단

프로젝트 구조를 설정해나가면서 path alias를 세팅해주는게 좋겠다고 판단했다.

vite로 빌드한 프로젝트는 이걸 설정해준게 처음이라서 검색하면서 설정했다.

Path Alias 설정하기

vite.config.js에 alias를 설정해주면 된다.

import { defineConfig } from "vite";
import react, { reactCompilerPreset } from "@vitejs/plugin-react";
import babel from "@rolldown/plugin-babel";
import path from "path";

const __dirname = path.resolve();

export default defineConfig({
  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@components": path.resolve(__dirname, "src/components"),
      "@hooks": path.resolve(__dirname, "src/hooks"),
      "@layouts": path.resolve(__dirname, "src/layouts"),
      "@pages": path.resolve(__dirname, "src/pages"),
      "@utils": path.resolve(__dirname, "src/utils"),
    },
  },
});

주요 포인트에 index.js를 세팅해준다.

export { default as Footer } from "./Footer/Footer";
export { default as Header } from "./Header/Header";

코드 구조

페이지에 여러 library랑 effect랑 state를 사용하다 보니까

코드가 어지러워 보였다.

그래서 코드 구조를 추천받아봤다.

hook -> state -> react query -> derived data (가공된 데이터) -> effect -> render

export default function MarketPage() {
  /** 1️⃣ hooks */
  const size = useResponsiveWidth();

  /** 2️⃣ state */
  const [token, setToken] = useState(null);
  const [input, setInput] = useState("");
  const [keyword, setKeyword] = useState("");
  const [selected, setSelected] = useState(constant[0]);
  const [page, setPage] = useState(1);

  /** 3️⃣ server state (react-query) */
  const { data: products = { list: [] } } = useQuery({
    queryKey: ["products", token, page, selected.type, keyword],
    queryFn: () => getProduct({ page, orderBy: selected.type, keyword }),
    keepPreviousData: true,
  });

  const { data: bestRaw = [] } = useQuery({
    queryKey: ["best", token],
    queryFn: async () => {
      const res = await getProduct({
        page,
        orderBy: "favorite",
      });
      return res?.list;
    },
  });

  /** 4️⃣ derived data (가공된 데이터) */
  const bestCountMap = {
    mobile: 1,
    tablet: 2,
    desktop: 4,
  };

  const best = bestRaw.slice(0, bestCountMap[size]);

  /** 5️⃣ effects */
  useEffect(() => {
    const signInPost = async () => {
      const user = await signIn("example@email.com", "password");
      localStorage.setItem("accessToken", user.accessToken);
      setToken(user.accessToken);
    };
    signInPost();
  }, []);

  /** 6️⃣ render */
  return (
    <div className={styles.content}>
      {/* UI */}
    </div>
  );
}

발단

Header / Main / Footer 구조를 자주 사용할 것 같아서

컴포넌트로 따로 정리해두는 것이 좋을 것 같았다.

그래서 layout 폴더를 만들고 안에 MainLayout.jsx를 생성했다.

Footer이 무조건 밑에 있는 Layout 구조

- layout을 min-height를 100vh로 해서

최소100vh, 아니면 더 커질 수 있도록 했다

그리고 display를 flex로 둬서 main이 flex:1해서 나머지 공간을 꽉 채울 수 있게했다.

import React from "react";
import { Header, Footer } from "@/components";
import styles from "./MainLayout.module.css";

export default function MainLayout({ children }) {
  return (
    <div className={styles.layout}>
      <Header />
      <main className={styles.main}>{children}</main>
      <Footer />
    </div>
  );
}

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
}

발단

dropdown의 메뉴 사이사이에 줄 넣어주려고 하니까

어떻게 가장 깔끔하게 하는지 궁금했다.

반복되는 Element 사이사이에만 border 주기

.menu + .menu {
  border-top: 1px solid var(--cool-gray-200);
}

+: Adjacent Sibling Selector
.menu 바로 뒤에 오는 .menu만 선택

아니면

.menu:not(:first-child) {
  border-top: 1px solid var(--cool-gray-200);
}

발단

ProductCard가 Item 그룹의 타이틀과 아이템들을 디스플레이하는 컴포넌트인데

부모에서 주는 column props를 가지고 한줄에 아이템 몇개 들어가는지 조절하고 싶었다.

그러면 React에서 CSS로 값을 전달해야하는데 어떻게 하는지 궁금했다.

React에서 CSS 파일로 데이터 전달하기

css variable 작성하는 방법을 알것이다.

:root { --css-variablename: value}방식이다.

그걸 동일하게 JSX 파일에 하면 된다.

<div className={styles.list} style={{ "--column-count": column }}></div>

CSS파일에서 이 변수를 사용하면 된다.

.list {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  gap: 2.4rem;
}

이러면 grid안의 element들이 한줄에 모두 같은 width로 column변수값 개수로 존재하게 된다.

화면마다 column 개수 다르게 하기

이런식으로 분기마다 column 개수를 어떻게 할지에 대한 템플릿을 객체로 넘겨주면 되는것 같다.

//사용 방식
<ProductCardList
  title="베스트 상품"
  column={{
    desktop: 4,
    tablet: 2,
    mobile: 1,
  }}
  data={best}
  isPending={isBestPending}
/>;

//해결 방식
<div
  className={styles.list}
  style={{
    "--col-desktop": column?.desktop,
    "--col-tablet": column?.tablet,
    "--col-mobile": column?.mobile,
  }}
>
  {data.map((d) =>
    isPending ? <ItemSkeleton /> : <Item data={d} key={d.id} />,
  )}
</div>;

React에서 넘겨받은 데이터는 css에서 아래의 방식으로 사용한다.

.list {
  max-width: 100vw;
  display: grid;
  grid-template-columns: repeat(var(--col-desktop), 1fr);
  gap: 2.4rem;
}
/* Tablet */
@media (max-width: 1280px) {
  .list {
    grid-template-columns: repeat(var(--col-tablet), 1fr);
  }
}

반응형 디자인

피그마에서 디자인을 보고 있으면 의문점이 하나 생긴다

1. 화면 크기에 따라서 보여주는 데이터 개수가 달라진다.

2. 화면 크기에 따라서 툴탭에 요소들 순서가 달라진다 (파란 버튼이랑 input창이랑 순서가 달라짐)

실무에서는 이런거 어떻게 처리하는지 알아내기 위해 강사님께 조문을 구하러 갔다

1. 화면 크기에 따라 데이터 개수 바꾸기

이거는 비즈니스 로직이라서 Hook을 만들만 하다.

하지만 훅을 만들면 오로지 API에 요청하는 데이터 개수 바꾸는데에 사용해야하지 -> 오로지 데이터를 위해서만 사용

스타일 바꾸는데에 사용하면 절대 안된다. (코드 어지러워짐)

1) 첫번 조언: 이벤트리스너 - resize 이벤트로 커스텀 훅 만들기

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

export default function useResponsiveWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  if (width > 1280) return "desktop";
  if (width > 720) return "tablet";
  else return "mobile";
}

나는 이거 잘 작동한다고 생각했는데, 강사님이 나중에 찾아와서 이 방법은 나중에 문제가 생긴다고 하셨다
resize 이벤트에 대해서 고민하고 실험해보라고 이런 대답을 줬는거라고 한다.

문제는 바로 1px씩 움직일때마다 이벤트가 발생한다는 것이다.

그래서 예전에는 debouncing 방식을 사용해서

"setTimeout과 clearTimeout을 사용해서 이벤트가 멈춘 뒤 N ms 후에 한번만 실행"을 했었다

useEffect(() => {
  let timer;
  const handleResize = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      setWidth(window.innerWidth);
    }, 300);
  };

  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

✔ 장점

- 이벤트 폭주 방지

❌ 단점

- 딜레이 있음 (즉각 반응 아님)

- 여전히 resize 자체는 계속 발생 중

그래서 요새는 matchMedia방식을 사용한다고 한다.

이거는 "필셀 변화가 아니라 조건 변화"만 감지하는 것이라,

특정 css 조건을 만족할때만 이벤트가 발동한다.

window.matchMedia("(max-width: 768px)")

그걸 React스럽게 감싼것이 바로 useMediaQuery다.

내부적으로 matchMedia를 사용하고 있다.

그래서 나중에 말씀하시기로는 그냥 useMediaQuery 사용하는것도 좋은 방향이라고 한다.

import { useMediaQuery } from "react-responsive";

const isTablet = useMediaQuery({ maxWidth: 768 });

결국에는 resize로 만든 훅을 useMediaQuery를 사용하도록 바꿨다.

한곳에 breakpoint를 정의할 수 있으니 꽤나 편했다.

import { useMediaQuery } from "react-responsive";

export default function useResponsiveWidth() {
  const isMobile = useMediaQuery({ maxWidth: 720 });
  const isTablet = useMediaQuery({ minWidth: 721, maxWidth: 1280 });
  const isDesktop = useMediaQuery({ minWidth: 1281 });

  if (isMobile) return "mobile";
  if (isTablet) return "tablet";
  return "desktop";
}

2. 화면 크기에 따라 컴포넌트 순서 바꾸기

위의 훅을 사용했다.

const size = useResponsiveWidth();
{
  !(size==="mobile") ? (
    <>
      <Input/>
      <Dropdown/>
      <Button>상품 등록하기</Button>
    </>
  ) : (
    <>
      <Button>상품 등록하기</Button>
      <Input/>
      <Dropdown/>
    </>
  );
}

<공부하며 참고해야할 코드>

https://github.com/rjc1704/responsive-design-example.git

grid와 반응형 query방식 - advanced 브랜치 보기

화면 깜빡거림

pagination으로 새 이미지 데이터를 가져오거나 새로고침하면
자꾸만 화면이 깜빡깜빡 거렸다

1) skeleton 작성해보기

원래 Item과 동일하게 ItemSkeleton을 만들어봤다.

export default function ItemSkeleton() {
  return (
    <div className={styles.container}>
      <Shimmer className={styles.img} />
      <div className={styles.content}>
        <div className={styles.title}></div>
        <div className={styles.price}></div>
        <div className={styles.meta}>
          <img src={icHeartEmpty} />
          <div className={styles.like}></div>
        </div>
      </div>
    </div>
  );
}

보면 안에 Shimmer이라는 컴포넌트가 있을텐데,

그건 안에 있는 children을 shimmer효과 있게 해주는 컴포넌트이다.

import styles from "./Shimmer.module.css";

export default function Shimmer({ children, className }) {
  return <div className={`${styles.skeleton} ${className}`}>{children}</div>;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--secondary-200) 25%,
    var(--secondary-100) 50%,
    var(--secondary-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

근데 문제가 일단 skeleton이 실제 item보다 더 커서 자꾸 layout이 왔다갔다 하기도 했고

나중에 강사님이 말씀하시기로는

tanstack query에 옵션을 잘 사용하면 skeleton 쓸일도 없다고 했다.

엥? tanstack query 사용했는데 무슨 옵션이 있었을까?

2) Tanstack Query의 placeholderData 옵션 사용하기

chatGPT로 조사했을때는 keepPreviousData로 나왔었는데

강사님께 여쭤보니까 최신 버젼에서는 placeholderData를 쓴다고 하셨다.

또한 useQuery에 isLoading을 썼다가 안되길래

또 chatGPT로 조사하니까 isFetching쓰라해서 썼는데 그것도 안되는 기분이었다.

또 강사님께 여쭤보니까 isPending이더라... (예전에는 isLoading)

진짜 chatGPT는 어떤 방향이 좋을지만 물어보고 사용법은 꾸역꾸역 어떻게든 공식문서를 읽어야겠다고 느꼈다.

const { data: products = { list: [] }, isPending: isProductsPending } =
  useQuery({
    queryKey: ["products", token, page, selected, keyword, size],
    queryFn: () =>
      getProduct({
        page,
        pageSize: size === "mobile" ? 4 : size === "tablet" ? 6 : 10,
        orderBy: selected.type,
        keyword,
      }),
    placeholderData: keepPreviousData,
  });

[스노로즈-에디터] 지금까지 작업 정리하기

공장 주인 따꿍 — Sun, 19 Apr 2026 01:15:30 +0900

발단

여행 갔다오고 부캠 때문에 지쳐하다보니

작업을 거의 팀원이 다했다. (미안해)

그래서 그간 쌓인 PR 리뷰를 확인했는데

조금 코드를 정리할 필요가 있어 보였다.

일단 이번주 스프린트 작업은 끝내야하니 중요한거 버그 외에는 어푸했다.

이번 스프린트를 넘겼으니,

그간 작업을 면밀히 검토하고 이해해보며 리팩토링을 진행해볼 계획이다.

작업

1. 어떤 파일에 작업했는지 확인하기

작업을 확인하려면 어디에 작업했는지 알아볼 필요가 있다.

그래서 git diff --name-only HEAD dev해서

현재 브랜치 (feature/editor)와 dev 브랜치의 차이를 보았다.

Editor로 글 작성하는 것과 관련된 코드

1. WritePostPage와 EditPostPage에서 추가된 내용

1) AttachmentBar에 editor 아이콘을 누르면 FixedMenuEditor이 나오게

editor props에 editor 추가

<AttachmentBar
    attachmentsInfo={attachmentsInfo}
    setAttachmentsInfo={setAttachmentsInfo}
    editor={editor}
/>

2) EditorContainer 추가해서 기존의 TextareaAutosize 대체

<EditorContainer
    placeholder="내용"
    onEditorReady={setEditor}
    onChangeEditor={(editor) => {
    const sanitized = preserveEmptyParagraphs(editor.getHTML());
        setText(sanitized);
    }}
/>

- preservedEmptyParagraphs (emptyFormat.js): HTML 문자열에서 비어있는 <p> 태그를 공백이 있는 <p>로 바꿔주는 처리

-> 빈 <p> 태그를 눈에 보이는 공백 줄로 바꿔주는 코드

2. AttachmentBar에 추가된 내용

- editor이 열린 상태인지 아닌지 확인하는 isEditorOpen state 추가

- 클릭으로 isEditorOpen 토글

- editor을 props로 가져옴

- isEditorOpen일 경우 FixedMenuEditor을 킨다.

const [isEditorOpen, setIsEditorOpen] = useState(false);

return (
    <div className={styles.bar}>
      {isEditorOpen && editor && (
        <FixedMenuEditor editor={editor} />
      )}
      <div className={styles.attachmentBar}>
        //Attachment 코드
      </div>
    </div>
);

3. FixedMenuEditor.jsx

에디터 메뉴를 작성한 완전히 새로운 코드이다.
과거에 작성한 코드를 수정한게 아니라, 아예 새로 만든 파일이다.

읽기 조금 힘들었다.

코드 자체의 기능은 잘 작동하는데, 책임이 한 컴포넌트에 몰려 있어서 읽기 어려운 케이스였다.

https://github.com/snorose/snorose-front/blob/feature/editor/src/feature/editor/component/FixedMenuEditor/FixedMenuEditor.jsx

snorose-front/src/feature/editor/component/FixedMenuEditor/FixedMenuEditor.jsx at feature/editor · snorose/snorose-front

숙명여자대학교 신입생, 재학생, 졸업생이 사용하는 커뮤니티 '스노로즈'. Contribute to snorose/snorose-front development by creating an account on GitHub.

github.com

1) 본문 / 소제목 선택 버튼

- 버튼을 클릭하면 headingOpen이 토글되어서 위에 본문/소제목이 뜬다

- TipTap 기본 동작이 heading에서 엔터 누르면 paragraph로 revert하는거라 이 동작은 따로 작성해줄 필요 없다.

- onClick해서 option.value가 paragraph이면 editor.chain().focus().setParagraph().run();

다른거면 (여기서는 1)이면 editor.chain() .focus().setHeading({ level: 1}).run();

에디터에 포커스 줌
현재 선택된 블록을 heading 타입으로 바꾸고 level을 1로 설정 (현재 블록을 h1으로 바꾸는 명령)

//에디터에서 선택 가능한 스타일 목록
//내부값 value vs 사용자에게 보여줄 텍스트 label
const HEADING_OPTIONS = [
    { value: 'paragraph', label: '본문' },
    { value: '1', label: '소제목' },
  ];

//커서가 heading level 1에 있으면 1, 아니면 paragraph
//커서가 어디에 있는지 상태 체크
const getCurrentHeading = () => {
    if (editor.isActive('heading', { level: 1 })) return '1';
    return 'paragraph';
};
  
<button
    className={styles.headingButton}
    onClick={() => setHeadingOpen((prev) => !prev)}
>
    //getCurrentHeading으로 현재 상태 찾고 그에 맞는 label 찾기
    {HEADING_OPTIONS.find((o) => o.value === getCurrentHeading()) ?.label ?? '본문'}
    <Icon
        id='arrow-down'
        width={12}
        height={6.75}
        className={styles.headingArrow}
    />
</button>
{
  headingOpen && (
    <div className={styles.headingDropdown}>
      {HEADING_OPTIONS.map((option) => (
        <button
          key={option.value}
          className={`${styles.headingOption} ${getCurrentHeading() === option.value ? styles.headingOptionActive : ""}`}
          onClick={() => {
            if (option.value === "paragraph") {
              editor.chain().focus().setParagraph().run();
            } else {
              editor
                .chain()
                .focus()
                .setHeading({ level: parseInt(option.value, 10) })
                .run();
            }
            setHeadingOpen(false);
          }}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}

2) 색상 선택 버튼

- 아이콘 클릭하면 showTextColor이 토글된다.

const PRESET_COLORS = [
  { label: '회색', value: 'var(--grey-4)' },
  { label: '검정', value: 'black' },
  { label: '파랑', value: 'var(--blue-4)' },
  { label: '핑크', value: 'var(--pink-3)' },
];

<div ref={textColorRef} className={styles.colorPickerWrapper}>
  {/* 폰트 색상 토글 버튼 */}
  <button
    onClick={() => setShowTextColor((prev) => !prev)}
    style={{ color: textColor || "var(--grey-4)" }}
  >
    <Icon id="font-color" width={24} height={24} />
  </button>

  <div
    className={`${styles.colorPaletteInline} ${showTextColor ? styles.open : ""}`}
  >
    {/* 색상 없음 */}
    <button
      className={styles.colorSwatchNone}
      title="색상 없음"
      onClick={() => {
        setTextColor("");
        editor.chain().focus().unsetColor().run();
      }}
    >
      <Icon id="no-color" width={28} height={28} />
    </button>

    {/* 고정 색상 */}
    {PRESET_COLORS.map((color) => (
      <button
        key={color.label}
        className={`${styles.colorSwatch} ${textColor === color.value ? styles.selected : ""}`}
        style={{ backgroundColor: color.value }}
        title={color.label}
        onClick={() => {
          setTextColor(color.value);
          editor
            .chain()
            .focus()
            .setMark("textStyle", { color: color.value })
            .run();
        }}
      />
    ))}
  </div>
</div>;

3) 하이라이트 선택 버튼

- 아이콘 클릭하면 showBgColor이 토글된다.

const PRESET_BG_COLORS = [
  { label: '핑크', value: 'var(--pink-1)' },
  { label: '노랑', value: '#FDFF6C' },
  { label: '연두', value: 'var(--green-2)' },
  { label: '파랑', value: 'var(--blue-2)' },
];
<div ref={bgColorRef} className={styles.colorPickerWrapper}>
  <button
    onClick={() => setShowBgColor((prev) => !prev)}
    style={{
      "--bg-icon-fill": bgColor || "#E6F7B1",
      "--bg-icon-stroke": bgColor || "#AAD916",
    }}
  >
    <Icon id="bg-color" width={24} height={24} />
  </button>

  <div
    className={`${styles.colorPaletteInline} ${showBgColor ? styles.open : ""}`}
  >
    <button
      className={styles.colorSwatchNone}
      title="배경색 없음"
      onClick={() => {
        setBgColor("");
        editor
          .chain()
          .focus()
          .setMark("textStyle", { backgroundColor: null })
          .run();
      }}
    >
      <Icon id="no-color" width={28} height={28} />
    </button>

    {/* 고정 색상 */}
    {PRESET_BG_COLORS.map((color) => (
      <button
        key={color.label}
        className={`${styles.colorSwatch} ${bgColor === color.value ? styles.selected : ""}`}
        style={{ backgroundColor: color.value }}
        title={color.label}
        onClick={() => {
          setBgColor(color.value);
          editor
            .chain()
            .focus()
            .setMark("textStyle", { backgroundColor: color.value })
            .run();
        }}
      />
    ))}
  </div>
</div>;

4) 링크 삽입

- Tiptap에는 보통 Link Extension이 있어서 url 형태로 입력하면 자동으로 링크로 바뀐다.

- editor.state.selection.empty는 다음 상태이다.

- else는 드래그로 텍스트를 선택한 상태이다.

⭐드래그로 텍스트 선택하고, 버튼을 누른 후에 alert에 아무거나 넣으면

드래그로 선택한 텍스트가 url 형태로 바꾼다.

<button
  type="button"
  aria-label="링크 삽입"
  onClick={() => {
    const url = window.prompt("링크 주소를 입력하세요");
    if (!url) return;
    const protocolRegex = /^(https?:\/\/)/i;
    const formattedUrl = protocolRegex.test(url) ? url : `https://${url}`;

    if (editor.state.selection.empty) {
      editor
        .chain()
        .focus()
        .insertContent({
          type: "text",
          text: formattedUrl,
          marks: [{ type: "link", attrs: { href: formattedUrl } }],
        })
        .run();
    } else {
      editor
        .chain()
        .focus()
        .extendMarkRange("link")
        .setLink({ href: formattedUrl })
        .run();
    }
  }}
>
  <FaLink />
</button>;

5) iframe

- 패턴 중에 어떤 패턴에 해당되는지 확인하고,

어떤 패턴에 부합하면 객체 안에 있는 format 함수를 가지고 표준 url 형태로 전환한 후

editor.chain().focus().insertContent({ type: "iframe", attrs: { src: formattedUrl } }).run()로 iframe을 넣어준다

- iframe이 backspace로 지워지는 것은,
Tiptap이 내부적으로 ProseMirror기반이라서 노드 단위로 선택/삭제하는 규칙이 이미 잘 정의되어 있다.

- ⭐ 패턴에 매칭 안 되는 값 (abc 같은 거)는 그대로 통과된다. => 예외처리 안됨

<button
  type="button"
  onClick={() => {
    const url = window.prompt("iframe URL 입력:");
    if (!url) return;
    let formattedUrl = url;

    const patterns = [
      {
        // YouTube 일반 + Shorts
        regex:
          /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]+)/,
        format: (match) => `https://www.youtube.com/embed/${match[1]}`,
      }, //등등 (다른 패턴은 생략)
    ];

    for (const pattern of patterns) {
      const match = url.match(pattern.regex);
      if (match) {
        formattedUrl = pattern.format(match);
        break;
      }
    }

    editor
      .chain()
      .focus()
      .insertContent({ type: "iframe", attrs: { src: formattedUrl } })
      .run();
  }}
>
  <FaYoutube />
</button>;

6) 나머지 간단한 기능

- bold / underline / crossout / quote

     <button
        aria-label='굵게'
        onClick={() => editor.chain().focus().toggleBold().run()}
        style={editorState.isBold ? { '--icon-stroke': 'var(--blue-4)' } : {}}
      >
        <Icon id='bold' width={24} height={24} />
      </button>

      <button
        aria-label='밑줄'
        onClick={() => editor.chain().focus().toggleUnderline().run()}
        style={
          editorState.isUnderline ? { '--icon-stroke': 'var(--blue-4)' } : {}
        }
      >
        <Icon id='underline' width={24} height={24} />
      </button>

      <button
        aria-label='취소선'
        onClick={() => editor.chain().focus().toggleStrike().run()}
        style={editorState.isStrike ? { '--icon-stroke': 'var(--blue-4)' } : {}}
      >
        <Icon id='strikethrough' width={24} height={24} />
      </button>

      <button
        type='button'
        aria-label='인용구'
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
      >
        <FaQuoteRight />
      </button>

4. EditorContainer.jsx

editor에 넣어줄 수 있는 여러 editor extension들을 붙여주는 코드이다.

- useEditor({extensions:[...]})은 에디터에 어떤 기능(플러그인)들을 쓸지 설정하는 곳이다

- StarterKit 안에 기본으로 들어가 있는 link와 blockquote는 비활성화하고,

Link와 Blockquote 플러그인을 따로 넣어서 커스터미이징을 진행했다

- FontSize는 Tiptap에 기본제공하지 않기 때문에 직접 extension을 만들어야한다.

const FontSize = Extension.create({
  name: 'fontSize',
  addOptions() {
    return { types: ['textStyle'] }; //어떤 대상에 적용할지
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          fontSize: {
            default: null,
            parseHTML: (element) => //서버에서 가져온 글 파싱할때 사용 (에디터로 전환)
              element.style.fontSize.replace(/['"]+/g, ''), 
            renderHTML: (attributes) => { //에디터 글 저장할대 사용 (HTML로 전환)
              if (!attributes.fontSize) return {};
              return { style: `font-size: ${attributes.fontSize}` };
            },
          },
        },
      },
    ];
  },
});

export default function EditorContainer({ placeholder, text, setText, onEditorReady }) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ 
        link: false,
        blockquote: false,
      }),
      Link.configure({ 
        openOnClick: false,
      }),
      Blockquote,
      EnterKeyHandler,
      TextAlign.configure({
        types: ['heading', 'paragraph'],
        alignments: ['left', 'center', 'right'],
      }),
      Table.configure({
        resizable: true,
      }),
      Iframe,
      TableRow,
      TableHeader,
      TableCell,
      TextStyle,
      Color,
      BackgroundColor,
      FontFamily,
      FontSize,
      Placeholder.configure({
        emptyEditorClass: 'is-editor-empty',
        placeholder,
      }),
    ],
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      if (setText) setText(editor);
    },
    onCreate: ({ editor }) => {
      if (onEditorReady) onEditorReady(editor);
    },
  });

  //EditPostPage처럼 initalText(text)가 존재할 시 세팅해줌
  useEffect(() => {
    if (editor && text && editor.isEmpty) {
      editor.commands.setContent(text);
    }
  }, [editor, text]);

  return (
    <>

      <EditorContent editor={editor} />

    </>
  );
}

Editor 작성 내용 보기

1. PostBar에서 추가된 내용

에디터를 추가하면 텍스트 내용에 html 태그가 추가가 되어서

html text가 된다.

그래서 html text에서 text만 추출하는 함수가 필요하다.

그게 바로 htmlToText이다 (htmlToText.js에 존재)

export const htmlToText = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.body.textContent || '';
};

<div className={`${styles.container} ${className}`}>
  <div className={styles.body}>
    <div>
      <Meta
        userRoleId={userRoleId}
        userDisplay={userDisplay}
        createdAt={createdAt}
        isEdited={isEdited}
      >
        {children}
      </Meta>

      <div className={styles.title}>{title}</div>
      <div className={styles.content}>{htmlToText(content)}</div>
    </div>

    {hasMediaAttachment && <Thumbnail thumbnailUrl={thumbnailUrl} />}
  </div>

  <ActionContainer
    likeCount={likeCount}
    commentCount={commentCount}
    scrapCount={scrapCount}
    isLiked={isLiked}
    isScrapped={isScrapped}
  />
</div>;

2. PostDetailView.jsx에서 추가된 내용

- dangerouslySetInnerHTML을 사용해서 editor로 인해 추가한 html 태그들을 실제로 적용해준다.

<div
  className={styles.contentText}
  dangerouslySetInnerHTML={{
    __html: sanitizeHtml(preserveEmptyParagraphs(data.content)),
  }}
/>;

추가 작업

PR [SNO-378]

링크 삽입 시 링크 첨부 방식을 선택할 수 있는 버블 메뉴 표시
버블 메뉴로 링크 및 임베드 방식 선택
게시글 작성 및 수정 페이지 배경 색상 변경
글자 크기 선택하는 드롭다운 컴포넌트에 그림자 스타일 추가
에디터 고정바 내 불필요한 기능 제거 (인용구, 링크 삽입, iframe 삽입)
에디터 코드 일부 리팩토링 (EditorContainer.jsx 내 로직 분리, style 변수 적용 등)

https://github.com/snorose/snorose-front/pull/1546

[SNO-378] 링크 삽입 시 링크 첨부 방식을 선택할 수 있는 버블 메뉴 표시 by dawncoding · Pull Request #154

What is this PR? Close #1543 변경 사항 링크 삽입 시 링크 첨부 방식을 선택할 수 있는 버블 메뉴 표시 버블 메뉴로 링크 및 임베드 방식 선택 게시글 작성 및 수정 페이지 배경 색상 변경 글자

github.com

[프론트] Lexical Scope의 개념과 특성에 대해 설명하시오

공장 주인 따꿍 — Fri, 17 Apr 2026 14:59:53 +0900

한줄 정의

Lexical Scope는 함수가 정의된 위치에서 스코프가 결정되는 특성을 의미합니다.

동적 스코프인 Bash와 Shell Script와 달리,

선언된 위치와 방식에 따라 스코프가 결정됩니다.

렉시컬 스코프 (JavaScript):
- 함수가 정의된 위치에서 스코프 결정
- 코드를 보면 알 수 있음

동적 스코프 (일부 언어):
- 함수가 호출된 위치에서 스코프 결정
- 실행해봐야 알 수 있음

이거와 관련되어서 클로저라는 기법도 있으니 알아보면 좋을 듯 하다.

https://capprojectfactory.tistory.com/115

✅ 핵심 정리

렉시컬 스코프 = 함수가 선언된 위치를 기준으로 스코프가 결정된다.
중첩된 함수는 외부 함수의 변수에 접근할 수 있다.
호출 위치는 스코프에 영향을 주지 않는다.
내부 함수는 외부 함수의 변수를 렉시컬 스코프를 통해 기억한다.