맥파이의 일상

사용자 인증을 하기 위해서는 서버와 클라이언트간의 세션 유지가 필요하다.이걸 다 만들수는 없으니.. 패키지를 설치 하여 처리 하겠다. https://lucia-auth.com/ LuciaAn open source resource on implementing authentication with JavaScriptlucia-auth.com npm install lucia @lucia-auth/adapter-sqlite 위 명령어는 lucia 패키지를 설치하고, lucia가 배포한 패키지 중에서 sqlite를 사용하라는 의미이다. import { Lucia } from 'lucia';import { BetterSqlite3Adapter } from '@lucia-auth/adapter-sqlite';impo..

NextJS를 공부하다 보면 이해가 안가는 부분이 몇군데 생긴다. 일단은 이런게 있구나 하고 넘어갔고, 이제는 중간정도의 이해가 필요한 상황이다.곧 NextJS는 마무리를 하고 다음 학습인 CSS를 진행해야 하기 때문이다. 어찌되었던.. 정리를 해보자 서버액션을 통해서 작업을 하기 위해서는 actions/ 폴더를 생성하고, actions.js파일을 만드는것으로 시작한다.'use server';export async function signup(formData) { const email = formData.get('email'); const password = formData.get('password'); let errors = {}; if (!email.includes('@')) {..

오늘은 나쁘지 않은 주말 낮이다.어제는 엄마네 집을 다녀왔다. 오랫만에 가서 청소도 좀 듣고, 고민도 좀 듣고욕도 좀 듣고... 그러다가 동대문을 다녀왔다.DDP가 동대푼인가 싶었는데, 동대문 디자인 플라자라는 사실을 어제 알았다.알고 보니 동대문 디자인 플라자를 최근에 없애자는 의견이 돈다고 하더라. 아주 오래전에 갔던 기억이 있어서, 아기자기한 것들을 좀 구경도하고 그럴려고 갔었는데, 그런게 거의 없는거 같아서 아쉬웠다.두타도 옛 생각에 잠깐 들려봤었는데, 어릴쩍에는 굉장히 컸던 느낌인데..지금 가보니 조그만 상가같다는 기분이 들었다. 다시 본론으로..어제 오늘은 공부를 했었는데.. 캐시에 대한 부분을 학습했었다. 캐싱부분이 생각보다 많아서 나중에 한번 더 학습 후 정리가 필요해 보여서...정리가 좀..

오늘도 공부를 한다.애드센스는 내 글을 복붙이라고 생각한다. 또는 가치 없는 글이라고 생각하는거 같은데... 꾸준히 써나갈 계획읻다.작지만 광고 수익을 얻어보고 싶은데 말이다. 오늘은 낙관적인 업데이트에 대해 공부하려고 한다.서버 응답이 오던말던 UI에 먼저 반영하는 방식이다.UI먼저 성공처럼 반영하고 이후에 성공이던 아니던 처리하는 방식이다.전체 코드를 먼저 보자.'use client';import { formatDate } from '@/lib/format';import LikeButton from './like-icon';import { togglePostLikeStatus } from '@/actions/post';import { useOptimistic } from 'react';function..

오늘도 회사는 평화롭지 않았다.아직 많이 남았지만... 하루종일 터진일을 매꾸다가 돌아왔다.이게 맞나 싶은데... 준비를 더 하는게 맞는거 같다. 어찌되었건...오늘은 폼 전송에 대해 학습중이다.'use client'를 사용하여 폼을 전송하면 쉽게 개발이 이루어진다.하지만 서버에서 실행되어야 하는 로직들이 존재한다.이를 처리하는 부분에 대해 학습한다. 'use client';import { useFormState } from "react-dom";import FormSubmit from "@/components/form-submit";export default function PostForm({action}) { const [state, formAction] = useFormState(action..

오늘도 회사 생활은 쉽지 않았다.이것저것 뒤치닥거리를 하다보니 하루가 끝났다. 이제는 연차가 차서 그런가. 화를 내는 사람들의 마음도 이해가 간다.하지만 내 길은 관리자는 아닌거 같다는 생각은 여전하다. 오늘은 라우팅을 정리하려고 한다. 파일 시스템 컴포넌트 파일 (page.js) - UI를 렌더링 레이아웃(layout.js) - UI를 정의하며 여러 페이지 같에 공유한다.중첩 라우팅 - 폴더 안에 폴더를 만드는 방식 app/blog/context/page.js blog/context 경로 동적 라우팅 경로 구조: app/blog/[slug]/page.js 매칭 url: /blog/abc, /blog/qqq 등 동적 라우팅의 3가지 유형기본 [id] 단일 세그먼트 /1{ id: '1' }포괄적(Ca..

월요일 첫 출근인데, 오늘은 너무 출근이 힘들었다.비도 추적추적 오는데다, 요즘 많은일이 벌어져서 정서적으로 많이 힘들었다. 오늘은 집중을 할 수 있는 시간이 너무 적었다... 동적 라우트 안에 중첩된 라우트를 사용 하는 법은 아래와 같다. Link href={`/news/${newsItem.slug}/image`}> .... 중략 Link> 위와 같은 방식으로 사용할수 있다. 동적 라우트 내에 중첩하여 사용하는 방식이라...여러 페이지들을 하나라 표현할 수 있는 방식이긴 한데아직 어떻게 써야 할지 감이 잘 오진 않는다. 인터셉팅 라우팅 동일한 라우팅이름을 쓰되 앞에 (.)를 붙이면 인터셉팅 라우팅을 할수 있..

주말이 끝나간다. 내일 출근이 너무 너무 싫다.출근이 싫지만 공부는 해야 한다. 너무 하기 싫을때는 반드시 해라. 퇴사한 녀석의 핸드폰에서 본 글귀를 잊지 못하겠다.너무 하기 싫으니까 학습을 해야 할것 같다. 어려운 개념이 나오기 시작한다.Catch-all 라우팅 구성이라...총 두개의 구문이 있는것 같다.[...folder], [[...folder]] 내가 이해한 바로는 모든 경로는 폴더를 만들어 주어야 한다.하지만 동적 경로를 사용할수 있게 해주는것이 [slug] 동적 세그먼트이다.동적 세그먼트가 있고, catch-all segment가 있고, optional catch-all segment가 존재하는 것으로 보인다. . Catch-all Segments ([...folder])대괄호 안에 점 세 개..

더이상 관리자로써의 길이 맞지는 않는것 같다.개발자로 다시 시작하려면 이 조직을 나가야지만 가능 할 것 같다. 새벽에 일어나서 글을 써놓은게 다 날라갔다. 한숨 자고 글을 다시 작성하기 전에 큰 주제만 적어놓고 자려고 한다... metadata- 메타데이터 설정은 app/layout.js에서 설정을 한다.export const metadata = { title: '모든 음식', description: '맛난 음식 보기',}; 단, 특정 페이지에 메타데이터를 넣기 위해서는 각 메뉴별 page.js에서 설정할수 있다.방식은 동일하다. 캐시- NextJS는 캐시를 사용한다.npm run build 위 명령어를 사용하여 빌드하면, .next 폴더가 생성되고 해당 폴더내에 배포용 소스가 생성된다.따라서 실시간..

오늘은 토요일.차가 고장나서 차 수리를 다녀왔다.클럭 스프링이 고장이 났네.- 클럭 스프링은 핸들 안에 들어있는 전기 배선으로 에어백 경고등이 들어와서 수리함왜 클럭 스프링이냐면, 옛날 시계에 들어있던 태엽과 같은 모습이라 시계 태엽이라는 명칭이였다고 한다. 쓸데없는 소리를 좀 해야 글 분량이 나오기도 해서 잡소리를 했다. ----------------------------------이제 본론으로 돌아와서 폼 제출시 상태를 가져올수 있다.어떻게 가져오는가? useFormStatus를 통해서 가져올수 있다.해당 라이브러리는 react-dom에 들어있다. MealsFormSubmit 버튼을 아래와 같이 만들어주고,'use client'import { useFormStatus } from "react-dom"..