- 우당탕탕 🧨 럭키 드로우 이벤트 페이지 만들기 럭키 드로우 이벤트 페이지 만들면서 도전적인 과정들을 기록하는 공간1. 소켓 통신을 통한 랭킹 리스트 렌더링const silentRefreshRankList = useCallback(async () => { try { const totalPages = Math.ceil(leaders.length / 10) || 1; const allItems: LeaderItem[] = []; for (let p = 1; p ({ rank: (p - 1) * 10 + idx + 1, username: d.name ?? d.email ?? '', points: Number(d.total_point) || 0, .. 2026.03.04
- [Next.js] Link 와 button onClick 의 차이 Next.js에서 페이지 이동을 처리할 때 컴포넌트를 사용하는 것과 button 태그에 onClick 이벤트(router.push)를 사용하는 것은 겉보기엔 똑같이 페이지가 이동하는 것 같지만 성능(Performance), SEO(검색 엔진 최적화), 사용자 경험(UX) 측면에서 매우 큰 차이가 있다.단순 페이지 이동이라면 를 사용하는 편이 좋다.1. 성능 (Prefetching): 뷰포트(화면)에 링크가 나타나는 순간, Next.js가 해당 페이지에 필요한 데이터(JS, CSS 등)를 미리 백그라운드에서 다운로드(Prefetching) -> 사용자가 클릭했을 때 즉시 페이지가 뜬다.onClick: 사용자가 클릭을 한 그 순간에 데이터를 요청하고 페이지 이동을 시작 -> 보다 상대적으로 반응 속도가 .. 2026.01.14
- IOS 사파리 window.open 동작하게 하기 📍 문제 상황사파리에서는 window.open 이 되지 않는다. -> 정책 상 사파리는 해당 내장함수에 걸린 시간이 1000ms, 크롬은 5000ms 이기 때문.비동기 함수의 리턴값을 받아서 팝업을 바로 여는 건 시간이 오래 걸리므로 팝업 반응이 없다. ✨ 해결 방법처음엔 window 객체 선언해서 blank 팝업을 띄우고 해당 팝업의 url 을 변경하고자 하는 값으로 대체한다.buttonAction: async () => { try { const popup = window.open('about:blank', '_blank'); if (!popup) { alert('팝업이 차단되었습니다. 팝업 차단을 해제해주세요.'); .. 2025.07.06
- Npm Private Package 첫 회사에서 가장 뿌듯했던 일을 고르라 하면 Component 재사용을 위해 Npm private package 를 구성했던 것이었다.공부도 많이 하고 시행착오도 여러가지 겪었으나 기록해두지 못했던 게 아쉬웠었다.시간이 흐르고 또 흘러 Monorepo 에 대한 개념이 희미해져가고 동시에 재사용성에 대한 고민을 다시 하게 되는 시점에서새롭게 마주하고 구성하게 된 모노레포에 대한 기록을 이번엔 남겨두고자 한다. 🛠️ 작업 환경Next(React 18)TypescriptTailwind CSSWeb3 목표기존 메인 프로젝트의 카피 프로젝트가 하나 더 생김에 따라 동일한 컴포넌트를 각각 관리해야 하는 번거로움 해소메인 프로젝트에 공통 디자인 시스템이 발생하면서 과부하 방지추후 프로젝트가 더 추가될 가능성을 고려.. 2024.11.28
- [React + Next] String data 를 HTML 로 사용하기 1. 기존 코드detail 변수 안에 request 해서 받은 데이터를 담아서 그중 content라는 key 값을 사용하고자 함string으로 떨어지는 해당 값은 안에 '\n' 또는 '\r'을 포함하고 있어서, 그 문자열을 활용해야 했는데,처음에는 아래와 같은 방법을 적용했다.{detail.content && detail.content.split("\n").map((line, index) => { return ( {line} )})} 2. 요구 사항위의 코드는 데이터로 떨어진 string 을 화면에 보여주되, '\n' 일 때 문자열을 잘라서 줄바꿈을 (어찌보면) 강제로 적용시킨 코드였다.따라서, 추후 와 같은 HTML 형식의 string 값을 받았을 때 tag 별 .. 2024.08.28
반응형