한 개발자의 노트패드

weaklion (weaklion) / 작성글 - velog weaklion (weaklion) / 작성글 - velog velog.io 감사합니다

react와 konva를 이용해서 그림판을 만들었습니다.konva는 js를 이용해서 canvas를 2d로 제어할 수 있는 라이브러리입니다. 원래는 HTML의 자체 canvas API를 쓸까 했는데 그러면 하나의 기능을 만드는데 너무 긴 시간이 소비될 것 같아서 안 했습니다.하지만 그냥 canvas API를 쓸 걸 그랬습니다. 이번엔 ai와 적극적으로 소통해서 만들었습니다. ai를 이용해서 고작 이 딴 거나 만들었냐? 고 하면 딱히 할 말은 없는데, 이번 프로젝트에서 중요한 건 ai에 의존하는 게 아니라, ai를 통한 코드 퀄리티를 높이는 거라, 우선 코드를 입력한 뒤그 코드를 리팩터링 할 때 ai를 쓰는 방향으로 진행했습니다.그러니까 좀 봐주세요. ai로 코드 찍는 건 양심에 가책이 있어서 안 했습니다...

개발 블로그나 유튜브를 보다보면 영어로 된 레퍼런스가 많습니다. 예전에야 이걸 구글 번역기로 하나하나 돌려서 해결을 했지만, 세상이 좋아져서 요즘엔 간단한 방법으로 알 수 있게 됐습니다.어떻게 하느냐? 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도 애기 수준이라 코드 작성법은 오히려 다른 분의 블로그가 더 잘 되있을거에요.그래서 지금부턴 제가 짠 코드를 보여드리고, 왜 이런식으로 짰는지에 대해서만 설명을 드리도록 하겠..