next.js

Next.js기반 교회 웹사이트 제작 [15] - 전역상태Zudstand 적용

하... 뭔.. Recoil ... 내 잘못이다. 더 찾아봤어야되는데 대안품 Zustand 이름도 주스같고 다시보니 맘에 드네   let's go자 원래 목적이 뭐였어?위의 짤처럼 단방향으로 던져지는 props와 state의 변화에 의한 리렌더링이 너무 많은곳에서 일어나니까 그걸 방지하기 위해 전역상태관리를 통해서 내가 쓰고싶은 곳만 쓰자는게 우리의 목표였지?그전에 zustand를 한번 보고가자문법은 굉장히 쉬운편뭐 다 같겠지만 Store를 하나 만들어야댐자 zustand의 공식홈페이지에 나온 사용법이야 간단하지?그냥 간단하게 설명할게 create로 store를 만들고 변수와 setter를 작성하여 사용하면돼그리고 바인딩할때는 그자리에서 사용하는거면 그냥 바로 사용하고export 된것은 import해서 ..

카테고리 없음 2025. 3. 20. 19:48

Next.js기반 교회 웹사이트 제작 [11] - prisma(CRUD 문법 공부)

자 제목에 나와 있는대로 우선 CRUD 사용을 위해 먼저 문법을 알아보자공식문서를 기반으로 가져올게1. Create- 단일 등록        - 다중 등록다중등록에서는 skipDuplicates를 통해서 중복항목을 건너 띌 수 있나봄 2. Read- 단일 조회- 모든 조회- 첫번째 1행 결과만 조회조회에서 filtering에 대하여 다양한 연산자를 소개시켜줄게1. 필터링 (where) 다양한 연산자를 사용하여 조건을 조합하고, 복잡한 필터를 만들 수 있습니다. 기본 연산자: equals: 값이 정확히 일치not: 값이 일치하지 않음in: 값 목록 중 하나와 일치notIn: 값 목록 중 어느 것과도 일치하지 않음lt: 보다 작음 (less than)lte: 보다 작거나 같음 (less than or equ..

기술공부/Next.js 2025. 3. 16. 23:40

Next.js기반 교회 웹사이트 제작 [10] - prisma(Prisma client 기능 및 설치)

자 이제 prisma로 DB를 조작해 봐야겠지? DB를 조작하기 위해선 Prisma Client가 있어야해 여기서 prisma Client란 뭘까?Prisma Client : 데이터베이스 스키마에 맞게 자동 생성된 데이터베이스 클라이언트Prisma Client를 생성하고 인스턴스화 하려면 이 부분이 정의되어 있어야하고npm install @prisma/client 명령어를 통해서 npm 패키지를 설치해야해근데 npx prisma generate라는 명령어가 있거든? 이 명령어는 Prisma Client를 생성하고 업데이트 하는데 사용하는 핵심 명령어야Prisma Client는 schema.prisma파일에 정의된 데이터 모델을 기반으로 생성되는, 타입 안전한 데이터베이스 쿼리빌더이고역할은 3가지가 있어1..

기술공부/Next.js 2025. 3. 16. 20:48

Next.js기반 교회 웹사이트 제작 [9] - (간단한 문법 설명)

Project 중 Prisma의 실습이 필요해서 우선 DB에 값이 들어간 User 테이블가지고 테스트를 해볼까해그런데 문제는 아직 cloud storage를 안만들어놔서 프로필 사진까지는 연동이 힘들다 이말이야그리고 또 한가지는 내가 시간이 없어서 퍼블리싱을 일일히 하기가 어려워서AI의 도움을 받다보니 state같은 관리를 AI가 만들어줘 버렸어...나중에는 한번 만들어볼게 이번엔 간단하게 원리만 집고가보자이번에 해야할 것은 우리교회 드랍박스에 있는 섬기는 사람들 목록조회야구조는 Tab별로 전체 ~ 직분별로 나누어 교회 있는 사람들을 조회할 수 있는 페이지를 만드는것이고현재 이것으로 진행한 이유는 DB에 값이 USER 밖에  없어서 그래자 실습을 해보자component에 우선 profile을 만들었고, ..

기술공부/Next.js 2025. 3. 16. 03:18

Next.js기반 교회 웹사이트 제작 [6] - Cloud DB (create table)

진짜 마지막으로 쓰고 잘게...우선 교회 웹사이트를 만들기위해 DB설계를 진행했고 여기서 내가 중점으로 생각했던 부분은 용량을 최대한 적게 사용하고 오랫동안 무료티어로 사용하고 싶다는거야그래서 최대한 테이블은 적게 합쳤어 우선 ERD를 보자내가 생각했을때 필요한 테이블은 이 5개였어1. 회원 : 회원을 관리하기위해서는 필요했다    - 관리자와 일반유저 권한을 분리하여 공지사항 및 영상업로드는 관리자만 할 수 있도록 하기위하여 권한을 만듦2. 게시판 : 교회소식, 선교자 소식, 자유게시판, 기타 등등... 전부 이테이블로 한번에 합쳐서 사용할 것이며 게시판 릴레이션 중에서 CONTENTS 컬럼은 toast ui editor를 사용하여 마크업 데이터로 들어갈거야3. 파일 : editor에서 저장버튼을 누를..

카테고리 없음 2025. 3. 7. 00:58

Next.js기반 교회 웹사이트 제작 [4] - Main페이지 작업 (Footer)

우선 다른 서비스들을 보면 대다수 Footer가 존재하잖아 왜 있을까? 한번 생각을 해봤는데 여기에 개인정보처리방침이나 이런것들을 놨더라고 그래서 개인정보 처리방침이 뭐냐?응... 우리가 회원가입을 할때 개인정보를 가져오잖아 그때 개인정보 적법하게 처리하고 안전하게 관리하고 있다는 방침을 명시해줘야되나바 어... 이거 개인정보보호법 30조여서 안하면 과태료임뭐 이런것들 작성하라고 Footer 만들어 놓나바 음..근데 지금은 솔직히 시간이 아까워 가이드랑 이런거 보고 하기엔 나중에 제대로 하고 지금은 틀만 잡을게우선 구성은 어떻게 할거냐면 1. HOME : 언제든 메인으로 갈 수 있게 HOME 만들기2. 개인정보처리방침 : 개인정보처리방침 보는 페이지로 넘기기3. 교회 정보, copyright 정보등등~4..

기술공부/Next.js 2025. 3. 6. 18:14

Next.js기반 교회 웹사이트 제작 [3] - Main페이지 작업, 환경변수 사용법

이전 글을 이어서 해보자 오늘은 MainWorship과 MainDirection을 한번 해보자고MainWorship → Youtube로 올린 말씀영상중 최신3개를 뽑아와서 Main에 표출하는 작업MainDirection → Naver map api를 통해서 오시는길을 표시 및 교회의 정보를 표출하는 작업 MainWorship우선 Youtube api는 내 영상이 없으니까 뽑아오기 뭐해서 현재는 형식만 맞춰놓고 차후 api를 통하여 진행할 예정개인적인 생각으로 SSG나 SSR을 통해서 진행해보려 했는데 외부 API 스크립트를 로드하고 그 API를 호출해서 동적으로 요소를 생성해야하기 떄문에 CSR에서 처리해야된다고 하네?그건 나중에 한번 해보자MainDirection여기는 naver map api는 일정부..

기술공부/Next.js 2025. 3. 6. 17:10

Next.js기반 교회 웹사이트 제작 [2] - Main페이지 작업

자 저번까지는 Main section 까지 만들었고 이제는 교회 소개를 만들어보자아무래도 교회소개부분은 설명할게 별로없어 그냥 css고 tailwindcss를 적용했다? 정도 빼고는 말할게 없을 것 같아 그래서 간단했냐?? 아니 진짜 너무 어렵더라 구조잡고 그 구조를 컨트롤하는게생각보다 많이어려워...백문이불여일견 일단 어떻게 했는지 결과부터봐이게 일단 대충 만들어논 Main화면 교회 소개 파트이고앞으로 저 Card요소에는 db에서 값을 불러와서 최신글 5개정도만 보여지도록 구성하려고현재는 저 영역의 코드가 전부 하나로 되어있는데 만들고 나서 보니까 영역을 component로 구분해야 겠더라이유는!현재 클라이언트에서 이벤트가 없는 화면은 전부 SSR로 처리하고 있는데 나중에 Prisma를 통해서 값을 A..

기술공부/Next.js 2025. 3. 6. 15:41

페이징

1 2

티스토리툴바