DYO 공부하는 블로그

나는 이제 갓 5개월 된 신입 개발자다. 어려운 시기에 취직한 게 다행이라고 해야 할지, 공백기가 조금 있었음에도 운이 좋게 어느 정도 규모가 있는 회사에 들어갈 수 있었다. 지금은 일하는 모든 것이 새롭고, 지금까지는 일하는 것이 즐겁다. 일하면서 다른 팀 사람들과 상호작용하는 것과, 나에게는 뜬구름같았던 '현업 코드'가 무엇인지, 요구에 따라 만들어진 스파게티 코드를 읽으면서 분석하는 것도 재미있다. 그중에서도 내가 일하면서 가장 좋아하는 지점은 다른 개발자들이 어떻게 일하는지 보고 배울 수 있다는 점이다. 어떻게 요구를 관리하고, 기획서를 어떻게 해석하며, 기능 적용에 대해서 어떻게 구현할지를 생각하는 선배 개발자들을 보면서 배우고 있다. 그중에서 최근 가장 인상깊었던 경험이라고 하면 우리 파트의 ..

어떻게 시작하게 되었나4년제 컴공과를 졸업하고, 취직이 어려워 비개발 직무로 일을 하고 있었는데요. (자전거 스포츠웨어 매장 점장) 일을 하던 초반에는 매장관리, 판매업이 재미있었어서 개발이 내 업이 아닌가 고민하고 있었어요. 임금에도 나름 만족하고 있었구요. 그런데 일하면서도 취미 생활로 간단하게 프로젝트하고, 일하는 중에 코테공부, 언어공부 만지작거리고 있는 자신을 발견하고 개발자로 재시작을 해보자. 싶어서 부트캠프를 찾아보다가 데브코스에 들어가게 되었습니다. 입과와 수료과정은 5월 중순에 들어가서 10월 중순에 끝났습니다. 수료하고 직후에 바로 후기를 쓰지 않은 건 그 사이에 아주 바빴거든요. 이력서 쓰고, 포트폴리오 웹사이트-PPT 작성하고, 면접 스터디 진행하고, 짬내서 프로젝트 팀에 합류하고...

왜 Tanstack Query는 staleTime과 gcTime을 분리해 관리할까?Tanstack Query는 데이터 재요청 시간인 staleTime의 기본값은 0분이고, gcTime의 기본값은 5분이다. 왜 이 둘을 분리해 관리할까? Tanstack Query와 유사한 기능을 하는 라이브러리인 SWR은 라이브러리 이름이 정답을 그대로 서술하고 있다. SWR의 풀네임은 Stale-While-Revalidate이다. 이 말인 즉, 검증하기 전에 메모리에 남아 있는 캐싱된 데이터를 보여 주고, 재검증이 완료된 데이터를 새로 보여준다는 의미이다. 어떻게 동작하는지staleTime이 지났을 경우 Tanstack Query는 서버에 재요청하고 캐시를 갱신한다. 이때, gcTime이 남아있다면 메모리에 남아 있는 ..

면접준비를 하면서 가장 불편하다고 느낀 지점은, 정량적으로 내 수준을 평가해주면 어디가 부족한지 이해 할 수 있을 것 같은데, 면접은 그게 쉽지 않다. 비슷한 결을 가지고는 있지만 질문 개수도 정말 다양하고, 자기 자신을 평가하기가 애매한 지점이 있다. 그래서 GPT를 이용해 기술 면접 준비를 하고 있었는데, 평가는 좋지만 가장 불편한 지점은 내가 어느 정도 했는지 통계를 내거나, 어떤 질문이 잘못되었는지 잘 알기 어렵다는 점이다. ( 세션이 길어지면 오류 확률이 올라가니까. ) 프로젝트를 시작할 때는 자신의 불편한 점부터 해소하는 것으로 시작하라는 이야기를 들은 적이 있다. 그래서 CS평가 면접 봇 웹페이지 프로젝트를 시작하기로 결심했다. 기획서📝 FroBot [가제]프론트엔드 면접 질문을 AI에게 ..

Masonry란? Masonry는 사전적으로는 벽돌 쌓기입니다. 아이템들을 높이가 다른 벽돌을 쌓는 것처럼 쌓아주는 레이아웃을 의미합니다. flex, grid레이아웃은 줄 단위로 정렬하기 때문에 높낮이가 다른 아이템을 정렬할 때, 아래 공간이 남는 문제가 발생하게 됩니다. 이러한 문제를 해결하기 위해 Masonry 레이아웃이 등장했습니다. 비율을 계산해 이미지를 잘리지 않도록 고정 width에 고정하는 것은 어렵지 않지만, 결국 문제는 "배치를 어떻게 할 것인가." 입니다.// ... const aspectRatio = imageWidth / imageHeight; const height = width / aspectRatio; return ( )// ...구현 아이디어와 ..

예전부터 개인 포트폴리오 사이트를 웹페이지로 만들고 싶은 욕심이 있었다. 그래서 세달 전에 레포 파고, 배포 하고, 도메인까지 연결해뒀었던 것이 있어 그걸 개선해 사용해보려고 한다. 세 달 전에 처음 레포를 파고, 배포할 때는 두근거리면서 시작했지만 프로젝트 너무 일정이 바빴고, 포트폴리오 결과물이 마음에 안 들었다. 때문에 추후에 시간이 남을 때 리뉴얼을 해보기로 계획했고, 지금에서야 리뉴얼 작업을 하기로 결정했다. 당시에 결과로 만들었던 것은 아래와 같다. 새로 개선해야겠다고 느꼈던 부분1. 히어로 섹션의 높이가 애매하다. 반응형으로 100vh로 화면을 꽉 채우는 설계로 변경2. About 섹션에 내 소개가 부족한 것 같아 좌우명이나 개발철학과 같은 것들 짧게 써보기3. 인터렉티브한 요소가 너무 적어..

0. 왜 Tanstack을 많이 쓰나요?Tanstack Query 기능의 강력한 점을 정리하면staleTime과 gcTime을 이용한 캐싱, 최신화 관리refetchOnWindowFocus와 같은 브라우저 레벨의 유저 동작에서의 제어 옵션select 등을 이용한 return 데이터 가공isLoading, isPending, isError 등과 같은 다양한 상황에서 제공되는 상태defaultSetting으로 전역적인 쿼리 클라이언트 동작 제어onMutate, isError Callback 등으로 이벤트 발생 타이밍마다 작동하는 콜백 제어로 낙관적 업데이트 가능queryClient 직접 제어를 통한 쿼리 무효화, refetching 등 직접 제어 가능무한 스크롤 제어에 특히 강력한 InfinityQuery과..

1. 프로젝트 개요🌌 Re:Life"만약 그때 다른 선택을 했다면?"AI가 시뮬레이션하는 평행우주적 인생 시나리오 서비스📖 프로젝트 소개Re:Life는 사용자의 과거 인생 선택을 기반으로, AI가 "만약 그때 다른 선택을 했다면?"이라는 평행우주적 인생 시나리오를 시뮬레이션하여 제공하는 웹 서비스입니다.단순한 재미를 넘어, 실제 사회 통계와 개인 성향 데이터를 반영하여 현실적이고 구체적인 대안적 삶을 탐색할 수 있도록 설계되었습니다.깃허브 레포지토리 GitHub - prgrms-web-devcourse-final-project/WEB5_6_OneTop_FE: 프로그래머스 웹개발 프론트엔드 6기 8회차 1팀 최프로그래머스 웹개발 프론트엔드 6기 8회차 1팀 최종 프로젝트 프론트엔드 레포지토리입니다. C..