helpilsang 님의 블로그

놀고와서 밤에 부랴부랴 해볼려고 하니까 졸리고 힘드네오늘은 Header와 Sidebar를 어떻게 동기화 해서 사용할지 좀 정하고 적용해보는 시간 가져보자 조건을 명세해볼까?1. Header의 Menu 항목과 Sidebar의 Title 요소가 같아야한다.2. SubMemu와 Sidebar의 section 요소가 같아야한다.우선 layout.js에서 Header와 Sidebar를 동시에 상태관리 해줄 수는 없어 왜냐면 layout.js 자체가 초기 한번만 렌더링 될 뿐만 아니라 ssr이거든 그래서 생각해볼 수 있는건 전역상태관리를 하는거지 전역상태관리 1. Recoil2. Zudstand3. useContext이 3개를 일단 선정했고 나는 이중에 Recoil을 사용했어이유는 없어 그냥 셋다 사용하는건 비슷해..

위와 같은 이미지의 방식이 Props Drilling이라고 하는데막상 해당 컴포넌트를 변경하고 싶은건 I 하나뿐인데 props를 거쳐가기 때문에C, G 까지 리랜더링 되어야하는 문제가 생김 → 성능저하의 원인해결방법 컴포넌트 내부에 있어야할 state를 밖으로 빼어 필요한 컴포넌트에게만 연결하여 사용함(* 밖으로 뺀것을 store라고 부름 → global state)전역상태 관리 라이브러리Redux, Recoil, context API, Mobx 1. Recoil1-1. AtomRecoil은 Atom (store)이라는 상태저장소를 가지고 있음( 이해하기 쉽게 usestate와 같지만 전역 저장소라고 알면 될 듯.. 여러개를 가질 수 있음)  1-2. selectorSelector는 Atom 값을 가공해..

자 우선 목표를 말해볼게이 서브메뉴를 클릭 시우선 간단하게 이렇게 화면이 나오게 할거야 저번에 분리해논 구조를 먼저 보자 1. src/app/leadership/page.js    - 서브메뉴를 클릭하면 이동하는 page2. component/Profile.js    - leadership/page.js 에서 tab별 profile 정보를 보여주는 component 요소 여기에 추가적으로 서브메뉴를 클릭했을 때 어떤 화면이 클릭되었는지 좀 더 명확하게 보여줄 수 있게 sidebar를 만듬우선 결과 페이지 부터 보여줄게 결과왼쪽 sidebar랑 아직 header는 연결이 안됏어 profile만 작업된거니까 이부분 코드만 먼저 설명할게1. src/app/leadership/page.jsimport Profi..

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

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

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

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

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