말랑말랑 개발기

참여 기간 : 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..

이번에는 React로 개발한 프론트 페이지를 AWS S3, CloudFront, Route53를 이용하여 정적 호스팅해보겠습니다! 가장 먼저 해야할 일은 S3를 통하여 홈페이지를 배포하는 것입니다.AWS console에 접속하여 S3를 찾은 후 Create bucket을 합니다.bucket list에서 생성한 bucket을 찾아 클릭. 그러면 아래와 같은 페이지를 볼 수 있습니다.Object 탭에 빌드한 파일을 업로드합니다. (예시: pnpm build한 결과인 dist 폴더 내 파일 전부)이 페이지에서 바로 업로드 할 수도 있고 aws cli를 이용할 수도 있습니다! 이렇게 index.html이 포함된 빌드 파일을 올려주세요!   1. S3 에서 static hosting2. CloudFront (선택..

React 에서 쿠키를 사용할때 react-cookie 라이브러리를 사용합니다. 물론 필요한 곳에서 라이브러리를 불러다 사용할 수도 있지만, 유지보수를 쉽게 하기 위해서 하나의 파일에서 관리하는 편이 좋습니다. 이렇게 하나의 파일에서 관리하면, 쿠키 키를 한눈에 볼 수 있고 관련 코드를 찾기도 쉬워 응집도를 높힐 수 있습니다. import { Cookies } from 'react-cookie';const cookies = new Cookies();export const COOKIE_KEY = 'customKey';export const setCookie = (name: string, value: string, options?: any) => { return cookies.set(name, value,..

재택 중에 동료와 페어 프로그래밍을 해보기로 했습니다.동료분께서 진행 중인 웹 프로젝트에 참여하게 되어 간단한 버그 수정과 기능 추가를 하기로 했고 태스크 볼륨은 크지 않았지만 일단 제가 전체적인 코드를 잘 모르기 때문에 그때그때 옆에서 물어보면서 빠르게 적응할 수 있었습니다. 프로젝트 구조를 설명하자 다음과 같습니다. Project(root)⌞ server⌞ client 최상위 폴더 밑에 서버(Node)와 클라이언트(React)가 있었고 각각을 로컬에서 실행하여, 페어 프로그래밍으로 수정한 코드의 실행 화면을 서로의 컴퓨터에서 볼 수 있게 하고 싶었습니다.VsCode의 Live Share라는 익스텐션을 사용했고 여러 가지 세팅 과정에서 시행착오가 있었기에 팁을 작성해 봅니다. 제 생각엔 메인으로 진행하..

Girls In Tech X AWS 멘토링 프로그램에 참여하게 되었습니다! 네트워킹을 하고 싶다고 느낀 이후 처음 참여하는 활동이라 모든 것이 어색하기도 하고 두근거리기도 합니다. 프로그램을 통해 다양한 사람들의 이야기를 듣고 새로운 경험을 나눌 수 있기를 기대합니다. 홍성숙 멘토님의 팀의 멘티로 참여하게 되어 월요일에 1회차 모임을 진행했습니다. 처음에는 어떤 방식으로 진행해야 할지 혼란스러웠지만 멘토님께서는 먼저 저희와 이야기를 나누셨고 이후에 관심 있을 법한 분야로 세션도 잡아주시고 길을 잡아주셔서 알찬 시간을 보낼 수 있었습니다.👍 좋은 멘토,멘티 분들과 함께한 시간이 정말 즐거웠습니다. 이날은 멘토님의 강의를 듣고, 사무실 투어까지 마치고 나니 10시였어요😂 늦은 시간까지 챙겨주신 멘토님께 무한..