한 개발자의 노트패드

오늘은 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로 넘길 수 있게 구성했습니다. 간단하죠? 이런 걸 누가 쓰냐 싶겠지만, 일단 저는 쓰고요..