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을 사용했어이유는 없어 그냥 셋다 사용하는건 비슷해..

Hook의 종류에는 여러가지가 있는데 React편의 블로그에 좀 기술해 놨으니 참고하고 간단하게 종류만 보자1. useRef → DOM 요소를 직접 참조 하거나 값이 변경되어도 리렌더링을 발생시키지 않는 변수를 관리할 때 사용하는 Hook (주로 focus 이동, 스크롤 조작 등에 사용되며 리렌더링이 없기 때문에 api 요청 횟수나 이전 값 비교등에 사용)2. useEffect → React Component가 렌더링 될 때마다 특정 작업을 실행한다. (컴포넌트의 생에 주기 관)사용법 : useEffect(function,인자)ex) useEffect( ()=> { console.log(count); console.log('count가 바뀔 때 마다 실행된다.'); } ,[ count ]); return..

위와 같은 이미지의 방식이 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..

자 이제 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..

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

오늘은 Prisma 이어서 설명 해볼게어제 마지막으로 뭐라고 했냐면Model을 구성하는 방법은 2가지가 있는데1. Prisma Introspect를 이용하여 기존 Database에서 Model을 가져오기2. Prisma migration을 이용하여 Prisma Schema로 직접 작성하기이 방식이 있다고 했지■ 첫번째 방식첫번째는 뭐냐면 내가 진행한 방식인데Database에 미리 값을 넣어놔이런식으로 이 넣어논값을 ORM이랑 Mapping 하는작업이 첫번째 방법이야실습을 하기 전 Prisma 설치부터 해보자 prisma 설치 명령어npm install prisma -Dprisma 초기화npx prisma init * 이때 특정 DB를 선택하고 싶다면 npx prisma init --datasourcce-..

기다리고 기다리던 Prisma의 시간~ 궁금했는데 한번 사용해보자고~ 일단 TIDB에 DB랑 더미 다 세팅해놨거든?근데 조금 바뀐게 있어만들다보니까 COMMON 테이블이 셀프조인관계를 통해서 그룹화 시켜놓으면 사용하기 좀 더 편할 것 같아서 그렇게 만들었어 그래서 ERD랑 CREATE문이 좀 바꼇어ERDCOMMON을 보면 self 조인 된거보이지? 쨋든 이렇게 일단 관리할거고 테이블에 더미값을 Insert 해논상태야물론 게시판과 파일은 Editor 적용한다음 등록 로직을 완성한 후에 진행할거고 나머지 요소에는 미리 값을 넣어놨어이 값을 통해서 Prisma를 한번 실습해보기전에 Prisma를 알아봐야겠지? Prisma를 알아보자 Prisma 라이브러리는 우선 ORM이다* ORM은 뭐야?ORM(Object-..

안녕...현재시간 12시 23분 새벽.. 졸리다 이것만 쓰고 자야겠다우선 Intro에서 설명 했듯이 CloudDB를 선택한 이유는 내컴퓨터 계속 켜놓기 싫어서 이고그중 TIDB를 선택한 이유는 그저 용량을 많이 주기 때문이야다른 성능상의 비교나 이런건 사실 필요없어 간단한 게시판이 될 것이기 때문에 별로 의미가 읎다용량이 많은게 장땡이여~ 난 공짜로 쓰고싶거덩그래도 기왕 사용하는김에 조금 알아보고가자 TIDB란?TIDB : PingCAP이란 회사에서 개발한 오픈소스 분산형 SQL 데이터베이스→ MySQL과 호환성을 제공하면서, 수평적 확장성과 고 가용성을 갖추고 있어 대규모 데이터 처리가 필요한 환경에 적합한 데이터 베이스이다.* 수평적 확장성 : 시스템의 용량이나 성능을 높이기 위해 더 많은 서버 or..