반응형 분류 전체보기223 Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기 📒 Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기NestJS로 개발할 때 주로 prisma와 postgresql을 사용하는 추세입니다.왜 어떠한 특장점이 있는지, 그리고 초기 설치 방법에 대해 설명하겠습니다. 📌 prisma와 PostgreSQL의 장점🔎 prismaPrisma는 TypeScript와 JavaScript 애플리케이션에서 ORM(Object-Relational Mapping) 역할을 수행하는 도구로, 데이터베이스와의 상호작용을 간편하고 효율적으로 만들어 줍니다.Prisma는 데이터베이스 모델링, 쿼리 작성, 마이그레이션 관리 등 다양한 기능을 제공하며, 특히 TypeScript와의 강력한 호환성을 바탕으로 코드 자동 완성, 타입 검사 등을 통해 생.. 2024. 10. 31. NestJS 프로젝트 시작과 구조의 이해 📒 NestJS 프로젝트 시작과 구조의 이해지금은 프론트엔드 개발자이지만 항상 백엔드 개발도 함께 해야겠다는 생각을 지니고 살았습니다.나중에 좋은 아이디어가 있으면 혼자서 오롯이 설계하고 구현할 수 있어야 오래 살아남을 수 있겠다고 느꼈기 때문입니다. 아무래도 자바와 스프링이 여러모로 유리한 면이 많지만, 거의 업계 표준이 된 리액트와 함께 JS, TS를 사용하는 NestJS 라면 시너지 효과로 인해 개발 속도를 정말 빠르게 향상시킬 수 있음을 느꼈습니다.또한 NestJS가 스프링의 구조와 거의 유사한데, 이는 전에 스프링 학습을 해 둔 덕에 빠른 적응을 할 수 있어서 NestJS를 배워봐야겠다는 주요한 계기가 되었습니다. 그럼 앞으로 NestJS 학습을 시작하며 그 시작인 프로젝트 생성부터 기록하도록.. 2024. 10. 28. 프론트엔드 개발자 포트폴리오 📒 프론트엔드 개발자 포트폴리오포트폴리오 용도로 개발한 웹사이트입니다.링크 장성우 포트폴리오 - 프론트엔드프론트엔드 개발자 장성우 포트폴리오lasbe.kr📌 기술 스택Nextjs firebase docker github-action최대한 가볍게 만드려고 최소한의 의존성으로 개발애니메이션은 기존에 제가 만들었던 라이브러리로 구현firebase는 우선 조회수 집계용으로만 사용📌 배포github hosted runner에서 앱 및 docker 빌드 후 pushssh로 자취방 노트북에 이미지 받아오고 컨테이너 올리는 명령어 전송배포2024.10.18 - [Server] - github-action에서 Docker와 SSH로 Nextjs 원격 배포하기 github-action에서 Docker와 SSH로 Ne.. 2024. 10. 18. github-action에서 Docker와 SSH로 Nextjs 원격 배포하기 📒 github-action에서 Docker와 SSH로 Nextjs 원격 배포하기이전 개인 프로젝트를 배포했던 자취방 고물 노트북서버입니다. 보안도 허술하게 설정해놓고 하염없이 방치하다 보니 어느 순간 우분투가 먹통이 되어 이번에 포맷하고 새로 설치했습니다. 이번엔 포트폴리오 용도로 만든 Nextjs 웹사이트를 배포하려 하는데,전에 github self hosted runner를 서버에 직접 설치해 사용하던 방식이 너무 불편했던 것을 떠올렸습니다. 생각해보니 깃허브에서 무료로 github hosted runner를 제공하고 있고,이걸 다음과 같이 이용해 보자는 생각을 했습니다. github hosted runner에서 앱 빌드 -> docker 빌드 -> docker hub에 이미지 push-> ssh.. 2024. 10. 18. 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. 반응형 이전 1 2 3 4 5 6 7 ··· 25 다음
오픈 채팅
