본문 바로가기

분류 전체보기211

Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 📒 Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 이번에 사이드 프로젝트를 Vercel에 배포하고 방문자 수를 확인하고 싶어 찾아보니Velcel에서 자체적으로 제공하는 좋은 툴이 있어서 소개드립니다. 📌 Vercel Web AnalyticsVercel Web Analytics을 이용하기 위한 방법은 정말 간단합니다.🔎 패키지 설치$ npm i @vercel/analytics🔎 컴포넌트 추가하기import { Analytics } from '@vercel/analytics/react'; export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( .. 2024. 10. 10.

Nextjs 토이프로젝트, 안성재 요리 평가 GPT 📒 Nextjs 토이프로젝트, 안성재 요리 평가 GPT 안성재 GPT안성재의 요리평가 GPTansungjae-gpt.vercel.app항상 방문자가 많은 개인 프로젝트를 만들고 싶은 야망을 마음속에 품고 살았습니다. 그러다 최근 흑백 요리사의 안성재 쉐프님의 어록이 밈이 되는 현상을 보고,숟가락 하나 올리면 괜찮겠다 싶어 잽싸게 만들어봤습니다.📌 개발 기간2024.10.08 ~ 2024.10.098일 오후부터 9일 아침까지 12시간 안쪽으로 1차 완성했습니다. 하필이면 이 아이디어 떠오른게 흑백요리사 마지막화 나온 날이라관심도가 떨어지기 전에 완성을 시켜야 한다는 압박을 느꼈습니다. 이 밈이 화제가 된 게 지난 주 였는데 그 때 만들었으면 더 좋았지 않았을까 생각합니다.역시 인생은 타이밍입니다. 📌.. 2024. 10. 10.

React 카드 인터랙션 애니메이션 라이브러리 📒 React 카드 인터랙션 애니메이션 라이브러리">NPMGithub카드 뷰에 인터랙션 애니메이션을 적용하는 라이브러리를 하나 만들어 봤습니다.https://www.youtube.com/watch?v=YDCCauu4lIk예전에 본 코딩 애플님의 영상을 기억에 담아뒀다 심심했던 차에 리액트 패키지로 재구성했습니다.📌 라이브러리 정보🔎 install$ npm i @lasbe/react-card-animation🔎 exampleimport { CardAnimation } from '@lasbe/react-card-animation';export default function App() { return ( ... ... .. 2024. 9. 21.

[Nextjs] react-query를 이용한 서버 데이터 Prefetch 방법 📒 react-query를 이용한 서버 데이터 Prefetch 방법Nextjs는 서버사이드 렌더링을 통해 사용자에게 완성된 HTML 페이지를 건네줄 수 있습니다.그와 더불어 데이터 fetching을 클라이언트가 아닌 서버에서 미리 한 뒤, 그 결과물을 HTML에 포함시킬 수도 있습니다.이렇게 prefetching이 이루어질 경우 거치는 네트워크 단계가 적어져 더 빠르고, 서버 안에서 호출-응답이 이루어지기 때문에 더 안전하다는 이점을 누릴 수 있습니다.그럼 Nextjs에서 react-query를 이용한 prefetch 방법을 소개하겠습니다.📌 QueryProvider 세팅react query를 사용하기 위해 QueryClientProvider를 위한 클라이언트 사이드 컴포넌트를 만들어준 뒤, layo.. 2024. 9. 12.

[Nextjs] searchParams로 URL 쿼리 스트링 파싱하기 📒 searchParam으로 쿼리스트링 파싱하기모든 값들을 굳이 상태로 관리할 필요가 없습니다. 간단한 값을 저장하거나, 값을 유지시키며 URL을 공유할 때 주로 쿼리스트링을 사용하는데,이를 사용하기 위해선 다음과 같이 URL 마지막에 “?”를 추가한 후 데이터를 key=value 형태로 나열하면 됩니다.https://abcd.com?키=값&키2=값2그럼 nextjs에서 어떻게 쿼리스트링을 파싱할 수 있는지 소개합니다. 📌 Server Componenttype SearchParamProps = { searchParams: { page: number; title: string; };};export default function ServerSearchParam(props: SearchPar.. 2024. 9. 9.

우분투 노트북 덮개 닫아도 작동되도록 세팅하기 📒 우분투 노트북 덮개 닫아도 작동되도록 세팅하기노트북을 서버로 이용하기 위해서는 하루종일 켜져 있어야 제 역할을 할 수 있습니다.하지만 노트북 특성상 덮개를 닫아버리면 대기모드에 진입하게 됩니다.간단한 설정으로 덮개를 닫아도 대기모드 진입을 방지하는 설정을 소개드립니다. 📌 에디터로 logind.conf 파일 열기$ sudo nano /etc/systemd/logind.conf어느 에디터를 사용해도 상관없습니다.📌 HandleLidSwitch하단에 위치한 HandleLidSwitch의 주석을 풀어준 뒤, suspend -> ignore로 변경해주면 됩니다. 변경을 완료했다면 저장하고 나가줍니다. 📌 systemd-logind 재시작$ sudo systemctl restart systemd-log.. 2024. 8. 27.

[Nextjs] Dynamic Route, 동적 라우팅 📒 Dynamic Route, 동적 라우팅URL 경로의 특정 부분을 변수로 설정해, 다양한 값에 따라 페이지를 동적으로 생성하는 기능인 동적 라우팅에 대한 3가지 방법을 소개합니다. 📌 기본 규칙폴더 구조로 경로를 표현하는 Nextjs는 대괄호를 통해 동적 라우팅이 가능합니다.예를 들면 다음과 같습니다.ex 1구조 : app/post/[pageNum]/page.tsxURL : /post/1params : { pageNum: 1 }ex 2구조 : app/post/[title]/page.tsxURL : /post/제목1params : { title : 제목1 } 📌 단일 세그먼트단일 세그먼트로 동적 라우팅을 하려면 위의 예시와 동일한 방법을 사용합니다.🔎 규칙[params_이름] → params : .. 2024. 8. 3.

첫 회사 퇴사 후기 📒 첫 회사 퇴사 후기📌 퇴사24년 6월까지 회사를 다니고 퇴사했다.여기에는 말 못 할 여러 가지 이유가 있겠지만, 가장 큰 이유는 매너리즘이다.외적인 요인으로 힘든 일은 없었는데, 한번 매너리즘에 빠지기 시작하니 마음이 붕 뜨게 되고 마법 같이 모든 의욕이 사라졌다.익숙해진 일과 상황이 반복되니 여기서 다음 단계로 스탭업하려면 환경을 옮기는 게 맞다고 확신했다.아쉽지만 좋은 사람들을 만나 너무 재미있게 일 하면서 많이 배워간다.📌 계획퇴사 전 빠르게 재취업을 하려 느슨한 계획들을 세워놨었다.하지만 인생은 계획대로 되지 않는 법.오퍼 온 스타트업 회사는 내가 간절하지 않았던 건지 준비를 너무 안 해서 탈락하고, 프리 형태로 제안 온 프로젝트는 계속 펜딩 되는 바람에 마음을 접었다.기대도 안했지만 왠.. 2024. 7. 22.

[React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드 📒 ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드잘 만든 Errorboundary백개의 try-catch 안 부럽다.프론트 개발을 계속하다 보니 다양한 상황을 마주치게 되었고, 그에 따른 적절한 화면 표현의 중요성을 점차 느껴갔습니다.대표적으로 서버 데이터에 대한 로딩과 에러 처리가 있죠.끊임없이 사용해 보고 개선해 보니 1년이 지난 지금에서야 어느 정도 감이 잡히는 거 같아 그 방법을 공유해보려 합니다.이 글은 실제 서비스에서의 적용 방법에 대해 설명하는 글이기 때문에 ErrorBoundary와 Suspense에 대한 개념은 아래 글을 참조해 주세요.ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법Suspense을 사용해 선.. 2024. 6. 4.

이전 1 2 3 4 5 6 ··· 24 다음

티스토리툴바