겨리의 개발일기

아니 벌써 2025년이라니...? 😮지난 2024년은 한 해가 어떻게 흘러갔는지 모를 정도로 정신 없이 보냈다.바쁘다는 걸 핑계로 반년 이상 방치해둔 블로그를 보니 사알짝 부끄럽고 후회스럽기도 하다.부끄럽지만 반성하는 마음을 담아 2024년을 돌아보는 회고를 작성해본다!   지난 2024년은 다양한 변화가 있었다. 큰 변화를 중심으로 정리해보자면...   👩‍💻 프론트엔드 개발자로 커리어를 다시 시작하다.정말 감사하게도 작년 2~3월쯤 두 회사로부터 최종 오퍼를 받았다.각 회사와 처우 협의를 진행했고, 깊은 고민 끝에 현 회사에 입사하기로 결정했다.퇴사 후 다시 취업 준비를 하면서 많이 불안하고 힘들었는데,처우 협의까지 마치고 두 회사를 고민하는 스스로를 보며 왠지 모를 다양한 감정이 들었다. 대견..

회고 2025. 1. 13. 00:33

벌써 3월이라니...😵 지난 한 달은 하루하루 바쁘게 보내느라 시간 가는 줄 몰랐다. ☕ H님과의 커피챗 취준 컴퍼니를 통해 프론트엔드 개발자 H님과 커피챗을 진행했다. 이력서와 포트폴리오에 대한 피드백을 받았고, 앞으로 어떤 부분을 보완하면 좋을지에 대해 많은 조언을 해주셨다. 사실 이때까지만 해도 면접을 바쁘게 보러 다니는 상황은 아니어서 서류에 대한 고민이 많았다. H님은 서류 합격도 중요하지만 면접까지 잘 끌고 갈 수 있도록 수정 및 보완을 해야 한다고 말씀하셨고, 평소 놓치고 있던 부분을 딱 집어주셔서 다시 한번 방향성을 잡을 수 있었다! 이번 커피챗을 통해 내가 미처 알지 못한 면접관의 입장에 대한 이야기를 들을 수 있어서 좋았다. 나는 여태껏 지원자로서의 경험만 쌓아왔기 때문에 알 수 없었던..

회고 2024. 3. 4. 02:47

회고 작성을 추천하는 이유 글을 시작하기 전에 간략하게 내 소개를 하자면... 나는 3년 차 개발자로 비전공자+국비학원 출신이다. 중소 SI기업에서 첫 커리어를 시작하였고 퇴사 후 휴식 및 재정비를 마치고 다시 취준생이 되었다. 이력서와 포트폴리오를 작성하면서 그동안 작성해 왔던 회고의 덕을 정말 많이 보았고 많은 사람들에게(특히 신입, 주니어 개발자) 회고 작성을 추천하기 위해 이 글을 쓰게 되었다. 나에 대해 조금 더 설명해 보자면(TMI 주의) 나는 예전부터 단기 계획에 강했다. 여기서 단기 계획이란 벼락치기가 아닌 단기간 동안 어느 정도 계획을 세워 준비하는 것을 뜻한다. (짧으면 한 달, 길면 사개월 정도의 계획) 성격 자체가 과몰입을 잘하는 편이라 그런지 옛날부터 단기 계획을 세웠을 때 승률이..

회고 2024. 2. 19. 03:13

어느덧 2024년 첫 달이 지났다. 2024년을 앞두고 연간 계획을 짠 게 엊그제 같은데 벌써 1월이 끝났다니...😮 지나간 1월을 한 줄로 요약하면 감정적으로 변화가 컸던 시기라고 표현할 수 있을 것 같다. ⚙️ 프로젝트 개선 도전 반복되는 서탈에 이대론 안 되겠다 싶어 아는 프론트엔드 개발자 D님께 커피챗을 요청했다. 커피챗 중 개인 프로젝트 개선에 대한 조언을 들었고 곧바로 실행에 옮겼다. 내가 참여중인 개발 오픈 카톡방 몇 곳에 피드백을 요청했고, 그 피드백을 가지고 개선을 시도했다. 지금 와서 생각해 보면 너무 잘한 선택이었다. 단순한 테스트 사이트인데도 개선을 진행하며 정말 많은 걸 배울 수 있었기 때문이다. 배운 내용들은 시간이 오래 걸리더라도 블로그에 세세하게 기록했고, 이 과정을 통해 확..

회고 2024. 2. 8. 16:20

최근 면접스터디를 준비하면서 리액트의 Portal에 대해 공부한 적이 있었다. 백문이불여일타라고...🧐 설명을 여러번 보는 것보단 직접 구현해 보는 것이 도움이 될 것 같아 직접 시도해 봤다! 이에 대한 과정을 정리해보고자 한다. 보통 모달을 생각하면 화면 중앙에 예쁘게 뜨는 창 하나를 떠올릴 수 있을 것이다. 먼저 그런 일반적인 모달을 구현해봤다. 모달 컴포넌트 구현하기 // Modal.tsx ... const ModalContainer = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; `; const Style..

Programming/React 2024. 2. 2. 19:19

오늘은 커피챗 때 피드백 받았던 CLS 개선에 대한 내용을 정리하고자 한다. CLS가 뭔지 알아보기 전 비교부터 해보자! 첫 번째 이미지를 보면 새로고침 클릭 시 이미지 로딩 전후로 레이아웃이 변경되는 것을 확인할 수 있다. 반면 두번째 이미지는 새로고침을 클릭해도 레이아웃의 변경이 일어나지 않는다. CLS(Cumulative Layout Shift)란? 레이아웃 변경 횟수로, 화면에서 이동하는 컨텐츠의 양과 정도를 계산한 값이다. 이 지표는 사용자 중심의 성능 지표로서 컨텐츠가 화면에서 이리저리 움직이는 것이 불편을 초래할 수 있기 때문에 제공한다. ✔️ TIP 우수한 사용자 환경을 제공하기 위해선 사이트에서 페이지 방문의 75% 이상에서 CLS가 0.1 이하여야 한다. 솔직히 CLS에 대한 설명을 처..

Programming/기타 2024. 1. 29. 18:25

작년 하반기에 개인프로젝트로 진행했던 테스트 사이트의 개선 과정을 기록하고자 한다. 사실 처음에는 리액트를 공부할 겸 만들어본 간단한 프로젝트라 지인들에게만 살짝 보여주고 덮어뒀었다. 하지만 최근 진행한 커피챗에서 이왕 배포까지 한 거 사용자한테 피드백을 받아서 개선해 보라는 조언을 들었고 곰곰이 생각해 보니 어차피 내가 만든 건데 부끄러워할 필요가 뭐가 있으며, 부족한 만큼 피드백을 받아 개선해 나가면 오히려 좋은 거 아닌가?라는 생각이 들었다. 또 평소 서비스 운영 경험에 대한 열망(?)이 있는데 내가 만든 프로젝트를 배포해서 사람들이 사용하고, 그들로부터 피드백을 받아 개선해 나가는 것도 어떻게 보면 비슷한 경험이 아닐까 하는 생각이 들었다. (실제로 비즈니스적인 가치를 창출하는 서비스들과 비교할 ..

Programming/기타 2024. 1. 25. 00:37

프로젝트를 리팩토링 하던 중 메타태그를 수정할 일이 있었다. 잘 수정되었는지 확인 하기위해 매번 배포를 진행하는 건 리스크가 있다고 생각하여 로컬에서 테스트 할 수 있는 방법을 찾아보았다. 찾아보니 ngrok이라는 서비스를 사용하면 로컬 환경에서도 테스트할 수 있다고 한다! 이번 기회에 ngrok이 뭔지 어떻게 사용하면 되는지 정리해보고자 한다. 😎 ngrok이란? Webhook을 이용하여 로컬에 떠있는 서버를 방화벽을 넘어 ngrok.com 쪽에 바인딩해주는 서비스 일반적으로 로컬 환경에서 작업을 할 때 웹서버를 로컬호스트에서 실행 후 개발을 진행하는데, 이렇게되면 외부에서 접근이 불가능하다. 이 때 ngrok을 사용하면 로컬개발환경에서 실행중인 웹서버를 외부에 공개적으로 접근이 가능한 URL로 노출시..

Programming/기타 2024. 1. 24. 16:33