말랑말랑 개발기

Google Identity Services로의 마이그레이션  2023년 3월 이후, Google Sign-in platform library는 deprecated 되었으며, Google Identity Services library로 대체되었습니다. 기존에 사용하던 react-google-login 라이브러리를 삭제하고 새로운 라이브러리로 마이그레이션을 진행하였습니다. 이 글에서는 Google Identity Services를 활용한 Google 로그인 구현 방법을 설명합니다. 1. 사전 준비GCP에서 Client ID 발급Google Cloud Platform에서 Client ID를 발급받아야 합니다. 이 과정은 생략하였으며, 관련 자료는 구글링을 통해 쉽게 찾을 수 있습니다. 2. Google Lo..

Spring Boot를 사용하면서 자연스럽게 접하게 되는 HikariCP는 커넥션 풀(Connection Pool)로, 그 원리를 깊게 이해하지 못한 채 사용하곤 했습니다. 최근 웹서핑 중 HikariCP에서 발생할 수 있는 데드락 문제에 대한 글을 읽고, 이를 정리해보았습니다.1. DB Connection Pool이란?DB Connection Pool은 WAS(Web Application Server)와 DB(Database) 사이의 연결을 미리 생성하여 Pool에 보관하고, 이를 재사용하여 데이터를 교환하는 방식입니다. 이는 연결을 매번 새로 생성하는 대신, 미리 생성된 연결을 재사용함으로써 성능을 향상시킵니다. 2. Connection Pool의 필요성WAS와 DB의 연결은 비용이 많이 드는 작업입..

더보기목차들어가며이전 게시글 링크스터디 결과목표 달성 여부주요 성과배운 점원티드 X 네이버클라우드 프롬프트 톤 참여참여 계기프로젝트 설명결선작 당선 경험결론스터디의 전체적인 소감앞으로의 계획들어가며잇츠 스터디 크루(IT's Study Crew) 1기의 '실전! 생성형 AI를 활용하여 나만의 IT 팀 구축하고 서비스 만들기' 라는 스터디를 시작하며 GPT와 LLM에 관심을 가지게 되었고, 그 결과와 이어진 대회 경험에 대해 이야기하고자 합니다.참여 계기와 관련된 내용은 이전 중간 회고 글로 대신하겠습니다.스터디 결과목표 달성 여부GPT와 가까워지기GPT에 관심을 가지게 되었고 유료 버전을 결제해 GPTs 등을 활용, playground 환경을 통해 다양한 실험을 진행하였습니다.claude, gemini, ..

참여 기간 : 4월 20일~6월21일 (2개월)스터디 주제 : '가상 면접 사례로 배우는 대규모 시스템 설계 기초' 책을 매주 스터디스터디를 신청한 이유 : 대규모 시스템에서는 어떻게 인프라를 구축할지, 고려해야할 사항은 뭔지 궁금하였는데 이 책이 좋다는 소문을 들어서 스터디에 참여하게 되었습니다.스터디를 참여 시작할 때 세웠던 목표1. 책 완독2. 손으로 짜보기진행 과정한 주에 1~2장을 읽고 내용을 정리한다.정해진 발표자가 해당 날에 스터디를 진행한다. 들어가며지난 2개월 동안 '가상 면접 사례로 배우는 대규모 시스템 설계 기초' 책으로 스터디를 진행했습니다. 이 글에서는 제 스터디 경험을 공유하고자 합니다.대규모 시스템의 인프라 구축 방법과 고려사항에 대한 궁금증이 있었고, 이 책이 좋다는 평판을 ..

참여 기간 : 3월 16일~6월15일 (3개월)스터디 주제 : '모던 리액트 Deep Dive' 라는 책을 매주 스터디스터디를 신청한 이유 : 리액트를 더 자세히 알고 싶었고, 해당 책의 분량이 커서 혼자서 다 읽을 엄두가 나지 않았다. 그래서 스터디를 통해 강제성을 부여해 완독을 하는 것을 목표로 삼았다.스터디를 참여 시작할 때 세웠던 목표1. 책 완독2. 리액트를 코드 레벨에서 분석하여 이해하기진행 과정한 주에 1~2장을 읽고 내용을 정리한다.스터디날 발표자를 랜덤으로 선정하여 해당 회차 스터디를 진행한다. 3월 16일 OT를 시작으로 6월 15일 뒷풀이 회식까지 참여하며 스터디의 막을 내렸다.장장 3개월 간의 긴 여정이었다! 스터디 진행 방식은 매주 화요일 마다 온라인 화상 채팅에서 한 주동안 읽고..

5월부터 잇츠 스터디 크루(IT's Study Crew) 1기의 '실전! 생성형 AI를 활용하여 나만의 IT 팀 구축하고 서비스 만들기' 라는 스터디에 참여하게 되었다. 꼭 참여하고 싶어서 자기소개서를 열심히 썼는데 합격했다. 함께할 수 있어서 너무 기쁘다🌟스터디 리더님과 스터디원 분들 모두 다양한 직군의 다양한 연차를 가진 여성분들로 구성되었다. 개발자 여성분들이 모여 개발 이야기를 나눌 수 있는 공간이 있다는 것부터 너무 좋다! 스터디가 끝나면 내가 얼마나 성장해 있을지도 기대되고 스터디원 분들이 보여주실 멋진 프로젝트 결과물들도 기대된다. (다들 실력이 뛰어나셔서 나도 열심히 따라가야겠다.😇 나만 잘하면 된다...) 💡참여한 목표스터디를 통해 얻어가고 싶었던 점은 GPT와 가까워지는 것, 그리..

리액트에서 화면 캡쳐하기제가 받은 요구 사항은 아래와 같습니다. 1. 화면에 랜더링된 부분을 캡쳐하여 이미지로 저장2. 해당 화면에 접속하지 않아도 이미지 저장하는 기능 위 개발을 진행하면서 화면 캡쳐 시 발생할 수 있는 오류 상황과 해결방안을 알아보겠습니다. 1. html2canvas랜더링 된 화면을 캡쳐하고자 할 때 가장 간단하게 사용할 수 있습니다.import { saveAs } from 'file-saver';import html2canvas from 'html2canvas';const downloadImage = async () => { const modalElement = document.getElementById('your-element-id'); if (modalElement) ..

작업을 열심히 하고 merge했는데 ci 에서 아래와 같은 오류가 발생했다.npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR! npm ERR! While resolving: @tanstack/react-query@5.8.7npm ERR! Found: react@17.0.2npm ERR! node_modules/reactnpm ERR! react@"^17.0.2" from the root projectnpm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" from @react-aria/ssr@3.9.0npm ERR! node_modules/@react-aria/ssrnpm ERR! ..

어제 AWSKRUG Women In Cloud 소모임에 참석했고 정말 좋은 경험이었습니다.😃 참석자분들 모두 퇴근하고 힘들었을텐데도 열정을 가지고 참여해주셨습니다! Women In Cloud 소모임은 발표와 네트워킹 두가지의 세션으로 진행되었습니다. 먼저, 발표 세션의 주제는 개발 커뮤니티에 대한 내용이었습니다. 최근에 저는 비슷한 고민을 가진 동료 개발자들을 만나고 싶었는데, 발표자님께서 다양한 커뮤니티에서의 경험을 토대로 어떤 커뮤니티가 제게 맞는지 알 수 있게 도와주셨습니다. 그리고 커뮤니티를 어떻게 활용하고 기여할 수 있는지에 대한 조언이 정말 도움이 돼서 목표를 가지고 참여하고 싶게 만들어 주셨습니다. 특히 진솔한 경험 공유가 참 공감이 되어서 저도 모르게 확 빠져버린 멋진 발표였습니다👍 네트워..

1. vite-plugin-svgr 다운pnpm add -D vite-plugin-svgr 2. 설정 추가vite.config.tsplugins에 svgr() 추가import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import svgr from 'vite-plugin-svgr' // https://vitejs.dev/config/export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { // svgr options }, }), ], })  2-1. vite-plugin-svgr ^4.0.0vite-en..