한 개발자의 노트패드

개발 블로그나 유튜브를 보다보면 영어로 된 레퍼런스가 많습니다. 예전에야 이걸 구글 번역기로 하나하나 돌려서 해결을 했지만, 세상이 좋아져서 요즘엔 간단한 방법으로 알 수 있게 됐습니다.어떻게 하느냐? 1. 우선 번역해야 할 사이트를 찾는다.일단 번역이 필요할 레퍼런스가 필요하겠죠. 지금은 예시로 아래 사이트를 이용하겠습니다.Behind the eraser 대충 사이트 내용은 line을 erase 할 수 있는 알고리즘입니다.지금 만들고 있는 토이 프로젝트에 필요해서 가져와봤습니다. 2. Google NoteBookLMNotebookLMGoogle NoteBookLM은 구글에서 만든 인공지능 노트 애플리케이션입니다. 사용자가 직접 입력한 컨텐츠를 인공지능이 요약하여 인사이트를 추출해줍니다.우리는 여기에 ..

https://chatgpt.com/ko-KR/atlas/ai랑 접목해서 브라우저의 정의를 바꾼 것 같습니다.개인적으로 프론트엔드 개발자로 새로운 지평을 연 듯한 느낌이 드네요.

최근 리액트를 이용해 간단한 사이드 프로젝트를 진행하고 있습니다. 프론트엔드 개발자로써 사실 리액트보다 vue를 쓰는 기간이 더 많아서, 아직 react에 적응하는 기간인데사용하면서 가장 곤란했던 부분이 있습니다. 바로 vue는 양방향의 데이터바인딩을 지원하지만, react는 오직 단방향만 지원한다는 점입니다. 오늘은 이 부분을 단적으로 보여주는 react의 useImperativeHandle에 대해서 적어보도록 하겠습니다. useImperativeHandleuseImperativeHandle은 ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자 커스텀할 수 있는 기능입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트에 원하는 인스턴스를 호출할 수있습니다. 주로 fowardRef와 같이 사용합니..

vue의 가장 큰 특징 중 하나인 양방향 데이터 바인딩에서 주로 사용되는 기능 중 하나가 v-model 입니다. (아주)지난 포스팅에서 v-model의 대략적인 사용법에 대해 글을 적은 적이 있습니다. 개인적으로 vue의 가장 강력한 장점 중 하나라 생각하는데 최근에 나온 vue 3.4에서 이걸 더욱 편리하게 해주는 defineModel이 등장했습니다. 뭔 차이야...? 생각 할 수 있는데 좀 더 봅시다. InputField.vue App.vue 입력된 값: {{ text }} 코드를 작성하다 보면 공통 컴포넌트를 만들고 부모가 상태값을 제어하는 경우가 많습니다. vue에선 v-model을 통해 양방향 데이터 바인딩으로 값을 구현하죠. 부모에서 컴포넌트에 v-model에 ..

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이 있겠네요.   혹시나 면접 과정에서 위 질문을 묻는다면 이제 스캐폴딩이라고 답할 수 있겠습..