전체 글 (142) 썸네일형 리스트형 AI 초안 관리 서비스 Draftory 개발 후기 개요앞선 글에서 AI 초안 저장 도구 Draftory를 소개했다. 이번 글은 간단한 개발 후기 기록이다. 시작은 Gemini랑 ChatGPT에서 템플릿을 기반으로 블로그 글의 초안을 생성하고, 답변을 복사하고, 다른 곳에 붙여넣기 하는 과정이 귀찮아진 날이었다. Gemini와 ChatGPT의 탭을 이동하면서 복붙하는 과정이 반복적으로 느껴졌고, 각 AI 도구에서 생성된 응답을 좀 더 쉽게 한 곳에서 관리할 수 있으면 좋겠다는 생각을 했다. Claude Code도 활용해 볼 겸 서비스 하나 만들어 보기로 했다. 초기 기획우선 간단하게 CRUD를 할 수 있는 대시보드를 하나 만들었다. 그리고 OpenAI의 API를 통해서 주제를 던져주면 글을 자동으로 생성해서 저장하는 흐름을 생각했는데, API를 활용하게.. AI 초안을 원클릭으로 저장하고 통합 관리하는 서비스, Draftory 개요사이드 프로젝트로 만든 “모든 AI의 초안을 원클릭 저장하고 통합 관리하는 서비스, Draftory”를 소개하고자 한다. 요즘 블로그 포스팅이나 콘텐츠를 제작할 때 AI의 도움을 받지 않는 경우는 거의 없을 것이다. 나도 Gemini, ChatGPT, Claude를 넘나들며 초안을 작성하고 있다. 하지만 각 AI 사이트에서 생성된 응답을드래그해서 복사하고, 블로그나 노션에 붙여 넣는 과정.과거에 좋은 답변이 있었는데 어떤 AI가 해 준 거였지? 하며 채팅창을 뒤적이는 과정.이러한 복붙 노가다와 파편화된 관리가 불편해서 직접 만든 서비스다. Draftory는 무엇인가요?Draftory는 여러 AI 서비스에서 생성한 글 초안을 클릭 한 번으로 수집하고, 한 곳에서 편리하게 저장·편집·관리할 수 있는 .. [FE 테스트] 유틸 함수 단위 테스트 작성 시 고민들 (Vitest 기반) 개요사내에서 사용 중인 프론트엔드 utils 패키지에, 테스트 코드를 작성하면서 들었던 고민들을 정리한 내용이다. 참고로 테스트 라이브러리는 Vitest를 활용했다. Jest와 고민하다가, 속도 측면과 개발 환경(Vite기반, Typescript 중심) 측면에서 Vitest가 더 적합하다고 판단했기 때문이다. 1. 타입스크립트를 쓰는데 타입 테스트가 필요할까?1-1. 함수에 타입 방어 로직 작성하기배열을 받아서 주어진 길이만큼 나누는 chunk 함수가 있다.const chunk = (arr: Array, size: number) => { const result: Array> = [] for (let i = 0; i 여기서 arr과 size에 유효하지 않은 타입(각각 배열과 숫자가 아닌 값)이 들어.. [React] React 18 + Vite에 React 컴파일러 적용하기 개요2025년 10월 7일, 공식적으로 등장한 React 컴파일러 1.0을 현재 진행 중인 프로젝트에 도입해 보기로 했다. 마침 두 달전쯤? 팀 내에서 useMemo와 useCallback을 언제 쓸 것인가에 대한 논의를 했었는데, React 컴파일러가 이런 고민을 덜어줄 것이라고 기대했기 때문이다. React 컴파일러란?React 컴파일러는 애플리케이션을 최적화하기 위해 코드를 자동으로 메모이제이션한다.컴파일러는 Javascript와 React의 규칙에 대한 지식을 활용하여 자동으로 컴포넌트와 Hook 내부의 값 또는 값 그룹을 메모이제이션한다. (규칙을 위반한 컴포넌트와 Hook은 패스)(참고) 규칙 위반은 eslint-plugin-react-hooks, eslint-plugin-react-compi.. [WEB] 로그인 인증 방식 (Session & JWT) 개요웹 사이트를 만들면서 로그인은 빼놓을 수 없는 기능이다. 그런데 내가 이 로그인 방식을 잘 모른다는 생각이 들었다. 구글이나 네이버, 카카오 등 다양한 소셜 로그인은 프론트엔드만으로도 뚝딱 구현할 수 있지만, 그 내부 동작은 사실 잘 모르고 사용했다. 이번 기회에 로그인에 대한 모든 것을 알아보기로 했다. 백엔드와 인증 정보를 어떻게 주고받는지, 브라우저에서 그 인증 정보를 어디에 담아야 할지 전체적인 흐름을 기반으로 알아보자! 로그인 흐름기본적인 로그인의 흐름은 다음과 같다.사용자가 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭(클라이언트) 로그인 API를 서버에 요청(서버) 인증 정보를 응답으로 전송(클라이언트) 받은 인증 정보를 저장(클라이언트) 이후 API 요청 시 인증 정보를 함께 전송(서.. [Next.js] URL에 상태 저장하기 (useSearchParams, URLSearchParams) 개요“URL 링크를 공유했을 때 같은 화면을 볼 수 있도록 해주세요.”검색 폼이 있고 결과가 출력되는 화면에서 위와 같은 요구사항을 받았다. 처음에는 그냥 직접 검색하면 되는 거 아닌가..? 싶었는데 검색 조건이 매우 X2 많은 기획서를 보고 꼭 필요한 기능이라는 것을 깨달았다. 10개가 넘는 필터링 조건들을 보고 바로 납득했다. 😮 요구사항을 다시 보면,URL 링크를 공유했을 때 같은 화면을 볼 수 있어야 한다.= URL에 검색 조건(상태 정보)을 저장해야 한다.= URL의 쿼리 스트링을 조작할 수 있어야 한다.→ URL 쿼리스트링에 상태 정보를 넣고 뺄 수 있어야 한다는 결론이 나온다. 어찌 보면 당연한 기능인데, 왜인지 이전까지 생각해보지 못한 기능이었다. 아마도 리액트에 너무 익숙해져 있기 때문.. [연간 회고] 2023년 회고 3월에 하는 작년 회고..ㅎㅎ 뒤늦게나마 끄적여 본다. 인턴 퇴사 2023년 상반기에 일어난 가장 큰 변화는 인턴 퇴사. 반년 간의 인턴 생활이 끝났고 2월 말 퇴사를 했다. 처음으로 많은 사람들과 하나의 큰 프로젝트를 진행하면서 협업은 이렇게 하는구나를 배울 수 있었고, 기술적으로도 다양한 경험을 하며 성장할 수 있었다. 당시에는 잘 몰랐지만 KEP에서의 경험들은 프런트엔드 개발자로서 커리어를 시작하는데 아주 든든한 발판이 되었다. 물론 아쉬운 점도 많다. 6개월이라는 시간 동안 주어진 일에만 몰두한 것이 약간의 아쉬움으로 남는다. 그 순간에는 당장 눈앞의 일을 처리하기에도 급급했기 때문이라는 핑계를 대 보지만.. 조금 더 넓은 시야를 가지고 상황을 파악하고 개선점을 찾아서 주도적으로 일을 했다면 좋았.. [도서] UX/UI의 10가지 심리학 법칙 2 https://www.yes24.com/Product/Goods/92426632?pid=123487&cosemkid=go16268543581269579&gad_source=1&gclid=CjwKCAiA8YyuBhBSEiwA5R3-EwSUMqd0_vWn1bFFl058OZ-u_-SkS4ru4Hh3EkYB5kG0avESvvZcNBoCuRYQAvD_BwE UX/UI의 10가지 심리학 법칙 - 예스24 심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특 www.yes24.com 6. 피크엔드 법칙 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 .. 이전 1 2 3 4 ··· 18 다음
