맥파이의 일상

server-only 이론적으로 좀 정리가 필요한것들이 있어 정리해본다.'use server'를 쓰면 반드시 server에서만 돌아가는가??!!아니다...그렇지 않다가 답이다.이럴 경우에는 'server-only'를 사용해야 한다. server-only는 서버 전용 로직이나 민감한 데이터가 사이드로 유출되는것을 방지 하기 위한 도구npm install server-only사용방법 import ‘server-only’참고로 client-only도 있음 searchParams이 값은 언제 받는건가에 대한 궁금증이 생겼다.서버 사이드의 값과 클라이언트 사이드에 따라 이름이 달라진다. 서버 사이드에서는 다음과 같다.서버 컴포넌트(page)는 브라우저에서 보낸 이 값들을 인자로 직접 받을 수 있다 Page({ s..

맥북을 사놓고 안쓰다가 꺼냈더니 시간이 꽤 흘러버렸다.2020년 맥북이라 그런가.. 듀얼 모니터에 연결하면 느려져 버린다... ㅠㅠ새로 맥북을 사기에는 아까우니.. 노트북으로 그냥 개발을 해보려 한다.나중에 실전으로 하게 되면 그때 사야지.. 오늘의 학습 내용은 random함수보통 랜덤을 쓸때 random할수를 써서 %원하는 갯수로 나누어 주고 사용하지만swift에서는 더 편한게 존재한다. let myArray = [1, 2, 3, 4, 5, 6]myArray[Int.random(in: 0...5)]위와 같은 방식으로 랜덤을 뽑아 낼수가 있다.또는 myArray.randomElement() 를 사용하여 요소를 랜덤하게 뽑을 수도 있다. 오토레이아웃은 글로 설명하기에는 까다롭기에 일단 설명은 하지 않는다..

오늘은 토요일이다.어떻게 한주가 흘러갔는지 모를만큼 정신이 없고 바빴다.멘탈이 터질것 같을때마다 더 열심히 공부를 하고 있다.오늘은 라면을 먹으러 편의점을 다녀왔다.해수욕장을 한번 들려서 주변을 한바퀴 걸어보고 돌아왔다.너무 피곤해서 한숨 자고 일어났더니 다시 잘시간이다... 아이폰 개발을 하지 않은지 2년정도 흘러갔다.오랫만에 툴을 켰더니, 익숙하지만 어색한 느낌이다.한달정도 빠르게 학습하고, 다음 스탭으로 넘어갈 예정이다. 오늘은 iOS 학습 첫날이니, 심플하게 글을 작성 예정이다.앱 개발을 하면 색상 톤을 어떻게 잡아야 할지 고민을 하게 된다.웹도 마찬가지 이지..회사라면 디자인팀이 해주겠지만. 이제 나는 홀로서기 준비중이니까 혼자 다 해야 한다. 앱의 컨셉 컬러를 만들때 참고할 사이트https:/..

오늘도 정말 하루를 잘 버티고 돌아왔다.이제 저녁도 안먹고 야근하는게 아무렇지도 않아지고 있다.이렇게 살려고 일하는건 아니자나... 어제는 오랫만에 산책을 했다.아무 생각없이 커피나 하나 사기 위해 좀 멀리 떨어진 고오급 커피집스타벅스를 걸어갔다왔다. 그때 문득 이런 생각이 들었다. 그래.. 이렇게 여유롭게 사는게 내 꿈이 아니였던가?! 어찌 되었던 오늘도 학습을 시작한다.NextJS를 대충 학습했다. 이제 CSS를 익혀야 한다.CSS는 일주일정도 과정으로 빠르게 익히고 다음 단계로 넘어가야 한다.시간이 없다... CSS를 적용하는 방법은 3가지가 있다.html에 적용하는 기준으로..inline으로 넣거나, 안쪽에 선언하여 쓰거나, css 파일로 만들어서 사용하는 방법 section { backgr..

사용자 인증을 하기 위해서는 서버와 클라이언트간의 세션 유지가 필요하다.이걸 다 만들수는 없으니.. 패키지를 설치 하여 처리 하겠다. 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..