릴리코더의 골방 릴리코더의 골방

프레임워크

• [ORM] Prisma Schema 작성하여 DB 세팅하기 (with. NextJS)

  프레임워크/NodeJs 2024. 8. 7. 23:42

  ORMObject Relational Mapping 객체 관계 매핑은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다.  객체 관계 매핑 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 객체 관계 매핑(Object-relational mapping; ORM)은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 지향ko.wikipedia.org  해당 글은 개인 프로젝트를 만들면서 공부하고 적용한 내용을 작성한 글입니다. 그러므로 Prisma의 Schema 모든 기능이 작성되어 있지 않습니다. 모든 기능에 대한 내용은 아래 공식문서 링크에서 확인해 주세요.https://www.pri..

  Read More
• [React] React 특정 Element영역 내의 마우스 위치 값 구하기

  프레임워크/React(NextJs) 2024. 8. 7. 10:22

  프로젝트 내에서 Custom Context Menu 를 사용할 일이 있었는데,특정 Element에서만 동작해야 했다. 아래 코드는 마우스 이벤트 객체와 Ref Element 객체로 좌표를 구하는 함수이다.export const getAbsoluteAnchorPoint = ( e: React.MouseEvent, ref: React.RefObject,) => { const refRect = ref.current?.getBoundingClientRect(); const wrapperScrollY = ref.current?.scrollTop ?? 0; const rectTop = refRect?.top ?? 0; const wrapperScrollX = ref.current?.scrollLeft ?..

  Read More
• HTML form 태그 안에 submit 버튼을 여러 개 사용하여 동작을 다르게 하기 (with. React Hook Form)

  프레임워크/React(NextJs) 2024. 7. 24. 17:55

  여러 화면에서 값을 입력하고, 한 번에 서버로 데이터를 요청해야 하는 상황이 발생했다.그래서 이전 버튼을 클릭했을 때와 저장 버튼을 클릭했을 때,  입력한 값을 가지고 페이지 이동 또는 서버 요청이 필요했다. 그래서 나는 페이지 이동 시마다 Form Data를 가져와 전역 상태에 넣어 관리해 주는 방식을 생각했고,이 때 프로젝트에서 사용하고 있는 React Hook Form의 onSubmit을 통해 데이터를 가져오는 방식이 베스트 였다. 그러나 이렇게 되면 하나의 form태그에 submit 버튼 두개가 되어 이를 구분해서 처리하는 방법이 필요했다.이후, submit도 이벤트라는 것에 초점을 맞추어 찾아보니, 해답을 찾을 수 있었다. 그 해답은,form태그에서 Submit 이벤트가 발생했을 때 submit..

  Read More
• [NodeJs] localhost가 실행되었는데 127.0.0.1 에 접속되지 않는 경우

  프레임워크/NodeJs 2022. 11. 5. 22:28

  해결 방법 (결론) 결론부터 말하자면 NodeJs 버전 17 이상부터 서버 실행시 ipv6 프로토콜을 우선적으로 사용하기 때문에 ipv4 프로토콜의 루프백 주소인 127.0.0.1 은 연결이 되지 않는 것이다. 그래서 아래와 같은 설정을 추가해주면 된다. import dns from "node:dns"; dns.setDefaultResultOrder("ipv4first"); 2022.11.10 vite로 생성한 프로젝트에서 위와 같은 방법으로 완전히 해결되지 않는 경우가 발생했다. 또 다른 환경에서 프로젝트를 빌드하고, preview 모드로 실행한 경우였는데, 아래와 같은 방법으로 수정했다. vite.config.ts export default defineConfig({ //... server: { ho..

  Read More
• [NextJs] Vercel로 SSG 프로젝트 배포하기

  프레임워크/React(NextJs) 2022. 10. 14. 21:33

  Vercel로 프로젝트 배포하기 일정 조건 이내에서 무료로 프로젝트를 배포할 수 있는 Vercel로 이번에 만든 SSG 블로그 프로젝트를 배포해보기로 했다. Vercle 배포 사이트 Develop. Preview. Ship. For the best frontend teams – Vercel Deploy web projects with the best frontend developer experience and highest end-user performance. vercel.com 우선은 vercel을 사용하기 위해 github 계정을 연결해서 회원가입을 했다. Project 만들기 1. Add New에서 Project를 선택 2. GitHub 프로젝트를 연결해서 가져오기 3. 프로젝트의 이름을 변경하고..

  Read More
• [NextJs] Markdown 포스팅을 정적 페이지(SSG)로 배포하기

  프레임워크/React(NextJs) 2022. 10. 8. 20:36

  원티드 프리온보딩 챌린지 10월 2일차 과제 이번 과제는 마크다운으로 작성한 파일을 Nextjs를 통해 정적 페이지로 배포하는 것이다. 과제 주요 내용 ✏️ 사용자는 root 경로의 `/__posts` 폴더에 작성된 마크다운 파일(.md)를 작성할 수 있어야 한다. ✏️ 해당 파일은 마크다운 본문과 게시물에 대한 meta data를 담을 수 있어야 한다. ✏️ 블로그에 작성된 게시물을 렌더링하는 `목록 페이지`와 개별 게시물을 렌더링하는 `상세 페이지`로 나누어 작성한다. : `/` - 목록 페이지 : `/[id]` - 상세 페이지 진행 과정 이번에는 과제를 하는 과정을 적어보려고 한다. 해결해 나가는 과정의 프로세스가 중요하다고 하심 우선 과제를 받았을 때 가장 먼저 떠올랐던 것은 root 경로에 있는..

  Read More
• CSR/SSR (with Next.js)

  프레임워크/React(NextJs) 2022. 10. 8. 01:54

  원티드 프리온보딩 챌린지 10월 과제 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3.Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. - https://nextjs.org/docs/getting-started (Next.js 세팅 가이드) - https://github.com/vercel/next.js/ (Next.js Github 레포지토리)..

  Read More
• [NodeJs] Exit status 3221225477 발생. 및 해결

  프레임워크/NodeJs 2022. 10. 8. 01:32

  next js 프로젝트를 오랜만에 새로 만들어서 빌드하는 과정에서 에러가 발생했다. 프로젝트를 새로 만든 명령어는 $ npx create-next-app@latest --typescript 공식홈페이지에 적혀있는 명령어다. 이걸 설치하는 과정에서도 중간중간 에러가 발생했으나, 몇 번 재시도 하면서 정상적으로 설치가 되었다. 그러나 결국 build하는 과정에서 에러가 발생하고, 아무리 시도해도 되지 않았는데. 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\\Program Files (x86)\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files (x86)\\nodejs\\node_modu..

  Read More