한 개발자의 노트패드

Feature-Sliced Design(FSD)는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론입니다. FSD는 이름 그대로 기능 단위로 분할하는 것에 초점이 맞춰져 있으며 현재 많은 주목을 받는 아키텍처 중에 하나 이기도 합니다. FSD는 대부분의 프로젝트에 적합하다고 공식에선 이야기합니다. 프론트엔드를 개발하고 있는 모든 환경에 적합하며 라이브러리가 아닌 애플리케이션을 만들고 있다면 FSD는 좋은 선택이 될 수 있습니다. 특징명시적인 비즈니스 로직도메인 스코프 덕분에 찾고자 하는 로직을 쉽게 발견할 수 있습니다. 유연성아키텍쳐 구성 요소를 새로운 요구사항에 맞춰 유연하게 교체하고 추가할 수 있습니다. 기술 부채 및 리팩토링각 모듈을 부작용 없이 독립적으로 수정, 재작성할 수 있습니다. 명시적..

오늘은 gemini 연결하는 방법과 나머지에 대해서 알아보도록 하겠습니다.  캐릭터는 gemini에게 프롬프트를 통해서 물어본 뒤, 그 답을 가져와서 뿌리게 되는데 그러기 위해선 gemini의 api 키가 필요합니다. api key는 google ai studio에서 가져올 수 있습니다.https://ai.google.dev Gemini Developer API | Gemma open models  |  Google AI for DevelopersBuild with Gemini 2.0 Flash, 2.0 Pro, and Gemma using the Gemini API and Google AI Studio.ai.google.dev  위 버튼을 누르고 하라는대로만 하면 api key를 쉽게 얻을 수 있습니다..

오늘은 app 폴더 내부에 대해 알아보도록 합시다.여담인데 최근 rust 언어를 공부하고 있습니다.개발을 점점 하다보니 로우 랭귀지를 배울 필요성을 느껴서 공부를 시작했는데 배워보니까 꽤나 어렵고 흥미로운 언어더군요.시간이 난다면 rust에 대해서도 포스트를 남겨보도록 하겠습니다. 다시 돌아와서. 우선 저번에도 말했다 시피 간단한 프로젝트라 페이지를 많이 만들지 않았습니다.main으로 쓸 main 페이지 폴더, 그리고 결과가 나올 list. 더 구체적인 결과를 나타낼 detail 페이지. 총 3가지입니다. next는 client와 server를 나눌 것을 권장하고 있는데, 저는 client에서 사용될 코드를 client.tsx로 정의했고, route의 시작지점이 될페이지이자 서버 컴포넌트는 page.ts..

저번까지는 Intro였고요. 오늘부터는 본격적으로 코딩을 해봅시다. 다만 코드의 구조가 간단하고, 얼마 없는지라 꽤나 싱겁게 끝날 수도 있어요. 이전에 말했다시피 저는 app router를 사용했습니다. app router를 쓰게 되면 기본적으로 위와 같이 폴더가 만들어질겁니다. 처음 프로젝트가 만들어지면 기본으로 next.js 템플릿 스타일과 페이지가 있을텐데, 지웁시다. 그리고 메인화면을 원하는대로 수정합시다. 여기서부터 코드를 어떻게 짜야하는지 하나하나 가르쳐 드리진 않겠습니다. 저도 아직 next.js를 모르고, react도 애기 수준이라 코드 작성법은 오히려 다른 분의 블로그가 더 잘 되있을거에요.그래서 지금부턴 제가 짠 코드를 보여드리고, 왜 이런식으로 짰는지에 대해서만 설명을 드리도록 하겠..

오늘은 작성한 폴더에 코드를 작성해봅시다.그 전에, 우리는 지난 번 선택했던 app router가 어떤 건지에 대해서 알아야 합니다. next.js엔 현재 두가지의 방식이 있습니다. page router와 app router 인데요. page Router는 next가 13이 되기 전까지 사용했던 router로 우리가 흔히 알고 있는 알고 있는 라우터입니다./pages /index.ts -> www.tistory.com /list /index.ts -> www.tistory.com/list /login /index.ts -> www.tistory.com/login page router는 보이기에 직관적으로 보여서 편하지만, 앱의 규모가 커지면 유지보수가 힘들어지는 단점을 가지고 ..

오늘은 next 14와 gemini를 이용해서 간단한 페이지를 만들어보도록 하겠습니다.저도 공부하면서 하는지라 아직 게시글이 부족합니다. 하지만 알고 있는 지식으로 최대한 만들어보겠습니다. 우선 프로젝트를 만들어야겠죠. 우리는 next.js를 사용할껀데, vercel에서 사용방법을 아주 잘 설명해놨습니다.개발할 루트 폴더에서 아래 명령어를 실행해주세요.npx create-next-app@latest 여담으로 위 처럼 새로운 프로젝트나 모듈을 시작할 때 초기 구조를 자동으로 설정하는 과정이나 도구를 스캐폴딩 (Scaffolding)이라고 합니다. 가장 대표적인 건 현재는 지원이 종료된 create-react-app이 있겠네요.   혹시나 면접 과정에서 위 질문을 묻는다면 이제 스캐폴딩이라고 답할 수 있겠습..

글 쓰는 게 좀 늦었습니다.일이 좀 바쁜 것도 있었고, 최근엔 react와 next.js를 공부한다고 마땅한 글거리를 못 찾아서 그런 것도 있는데요.이대로 있다간 공부에 별 성취도 없을 것 같고, 재미도 없을 것 같아서 간단한 사이드 프로젝트나 만들자 생각했습니다.하지만 일엔 지장이 가지 않아야 하고, 또 너무 어려우면 안 할 거 같아서 적당한 난이도의 프로젝트를 고심했습니다. 그렇게 해서 생각한 게 바로 한국인 캐릭터 생성기.특별한 건 아니고 성별과 갯수를 넣으면, 그 성별에 맞는 캐릭터를 개수만큼 생성해 주는 사이트입니다.대충 메인사이트에 성별과 개수를 누르고 생성을 누르면.이런 결과가 나오구요. carousel로 넘길 수 있게 구성했습니다. 간단하죠? 이런 걸 누가 쓰냐 싶겠지만, 일단 저는 쓰고요..

vercel로 배포를 하다보면, 예기치 못하게 이전 커밋으로 롤백 시켜야할 때가 있습니다.여기서 instant rollback과 redeploy을 통해 롤백을 할 수 있는데 둘의 차이점은 뭐가 있을까요? instant rollback이전 배포 버전으로 빠르게 되돌릴 수 있습니다hobby버전은 직전의 커밋만 가능하고, pro부터는 전부 가능합니다서버 설정이나 코드 변경 없이 곧바로 돌아갑니다. redeploy이전 배포 버전을 다시 빌드하고 배포합니다.전체 빌드 및 배포 과정을 새로 거칩니다.보통 코드나 설정을 수정한 후에 사용합니다. ex) env 변경hobby, pro 상관없이 모두 가능합니다빌드를 다시 하기 때문에 시간이 걸립니다개인적으로 instant rollback에 대한 정보가 부족해 redepl..

Galileo AI (usegalileo.ai) Galileo AI www.usegalileo.aiCreatie | An AI empowered design tool for creatives Creatie | An AI empowered design tool for creativesProduct design made delightful with AI magic. Ideate, design, collaborate, prototype, handoff - all in one tool, all made easier and more joyful with AI.creatie.ai 대충 구상한 디자인을 적으면 ui로 만들어줌v0 by Vercel v0 by VercelGenerate UI with simple tex..

오랜만입니다. 최근 글을 쓸 시간이 없어서, 글을 잘 못썼습니다. 각설하고, 오늘은 최근 css에서 자주 사용되고 있는 가상 선택자인 where, has, not이라는 3가지의 선택자에 대해 알아보겠습니다. where()where()은 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있게 합니다.예를 들자면.:where(a1, a2, a3) { color : black;}위와 같은 where()을  풀어 해치면a1,a2,a3{ color:black;}이런식으로 우리가 보았던 익숙한 css를 볼 수가 있죠.겉으로 보기엔 힘들게 이런 걸 사용하나 쉽지만, 생각보다 이점이 많습니다. See the Pen Untitled by 이규한 (@chmqedde) on CodePen.    반복문 처럼 사용 ..