ALL

블로그를 이전했습니다. 더 좋은 글로 찾아뵙겠습니다. https://medium.com/@diongkim

프론트엔드 개발을 할 때 우리는 많은 라이브러리를 사용하게 됩니다. 저 같은 경우는 요즘 Axios와 React-Query는 거의 항상 사용하는 것 같아요. React는 기본..! 그러다 최근 이런 생각이 들었습니다. "이런 라이브러리들의 새 버전을 프로젝트에 적용하게 되면 어떻게 될까?" 특수한 경우에는 해당 라이브러리에 의존하는 많은 부분의 코드를 변경해야 할 수도 있지 않을까요? 물론, 외부 요소에 하나도 의존을 하지 않고 애플리케이션을 만들 수는 없습니다. 예를 들어 브라우저에서 제공하는 기능을 이용해야 한다는 사실은 무시할 수 없으니까요. 하지만 외부 요소에 직접적으로 의존하는 코드를 최소화하고, 전체적인 제어권을 우리의 애플리케이션 안으로 가져올 수는 있습니다. Axios, React-Quer..

오랜만에 글을 쓰네요. 요근래 취업 준비, 기존 프로젝트 리팩토링 등을 수행하며 글 쓰기를 자꾸 미뤘던 것 같아요. 이번 글에서는 가장 최근에 작성한 프로젝트 회고 글에서 언급했던, 현재 운영 중인 웹 사이트의 느린 서버 사이드 렌더링 속도 문제를 개선한 경험에 대해 공유해보려 합니다. 체감되는 느린 서버 사이드 렌더링 제가 만들었음에도 너무 느려 보였습니다. 특히 맨 처음 웹 사이트에 접속하게 되면, 서버리스 애플리케이션 특성 상 발생하게 되는 콜드 스타트(Cold Start) 문제로 인하여 더욱 느려 좋지 않은 사용자 경험을 유발합니다. 콜드 스타트가 뭐냐구요? 아래 ChatGPT 답변을 참고해주세요 😅 이러한 콜드 스타트에 느린 서버 사이드 렌더링 속도(분석 결과 약 1.33초)까지 더해진 상태가 ..

'세 줄 독후감' 서비스를 시작했다. (https://www.sejulbook.com) 1명의 개발자(본인), 1명의 데이터 분석가가 함께 만들어가는 프로젝트로, 실제 서비스를 운영해보며 지속적으로 사용자 유입을 늘리는 것이 목표다. 그리고 실제로 4월 2일 서비스 시작 후 5월 3일 현재, 27명의 누적 가입자를 확보했다 🥳 실제 서비스를 운영하며 발생하는 문제와 피드백을 통해 기능 및 성능을 개선하는 등의 코드 리팩토링 활동은 스스로의 성장에 큰 도움이 되고있다. 따라서 지속적으로 서비스 관련 문제를 해결하거나, 더 나은 사용자 경험을 위해 기능과 성능을 개선하고, 개선 여지가 있는 코드를 변경/수정할 것이다. 하길 잘했다! 왜 시작했나? '네이버 커넥트재단 부스트캠프 웹·모바일 7기'에서 그룹 프로..

'세 줄 독후감' 웹사이트를 운영하며, 최근 사용자들에게 한 오류를 제보 받았습니다. 아래 독후감 평점 입력 기능이 동작하지 않는다는 것이었습니다. 근본적인 원인을 찾아보자 먼저 데스크톱 환경에서 평점 기능을 사용해보자 별 이상 없이 동작했습니다. "왜 안된다는 거지..?" 당황했지만.. 무려 2명의 사용자가 동일한 오류를 제보해주셨기에, 틀림없이 문제가 존재한다고 판단했습니다. 하지만 계속해서 여러 방식으로 평점 기능을 요리조리 사용해보아도 별 문제가 없었습니다..😨 그러다! 모바일 환경에서 테스트를 해보자 곧바로 오류를 발견할 수 있었습니다. 오류의 한 예시는 다음과 같습니다. 1. 3으로 초기화된 평점 5을 터치 2. 별점 다섯 칸 활성화 3. 평점 제외 다른 영역 터치 4. 별점 세 칸 활성화 원..

최근 개발 프로젝트 하나를 마쳤습니다. (https://www.sejulbook.com 많이 방문해주세요 😁) 해당 프로젝트에서 처음으로 아토믹 디자인 시스템을 도입해봤습니다. 디자인 시스템을 컴포넌트로 파편화하여 쉽게 재사용하고 확장하고 싶었기 때문입니다. 하지만 아토믹 디자인 시스템은 제가 느끼기에 꽤 모호했어요. 그리고 NextJS에서 아토믹 디자인을 사용하면서 하나의 문제가 발생하기도 했구요. 그래서 아토믹 디자인 시스템을 잘써보기 위해 제가 이행했던 것들을 공유해보겠습니다. 아토믹 디자인? 아토믹 디자인(Atomic Design)은 화학적 관점에서 영감을 얻은 디자인 시스템입니다. 모든 것은 원자(Atom)으로 이루어져 있으며, 원자들이 결합하여 분자(Molecule)이 되고, 분자가 더 복잡한..

최근 프로젝트를 하며 사용자가 업로드한 이미지를 저장하기 위해 AWS S3 클라우드 스토리지를 사용했습니다. 프리티어를 이용했기에 제한된 용량을 효율적으로 사용하고 싶었고, 이에 따라 스토리지 내 불필요한 이미지는 저장되지 않도록 노력했습니다. 이번 글에서는 가비지 컬렉션 Hook 구현으로 AWS S3 사용 용량을 감축한 오버엔지니어링 경험을 공유합니다. 문제 아래 이미지는 현재 제가 개발한 독후감 작성 페이지입니다. '[선택] 추가 내용 작성' 부문에 사용자는 독후감 관련 내용을 작성할 수 있고 로컬 이미지를 업로드할 수 있습니다. 마치 블로그 글 작성과 같이 말이죠. 사용자가 로컬 이미지를 업로드하면, 즉시 AWS S3에 업로드하고 해당 URL을 반환받아 img 태그의 src 속성에 삽입합니다. 이때..

2022년의 새해를 맞은지가 엊그제 같은데 벌써 2023년의 새해를 맞았다. 2022년은 유독 시간이 빨랐던 것 같다. 대부분의 시간을 카페에서 코딩하는데 몰입해서 그런지. 오랜 시간 학습에 몰입한만큼, 스스로가 개발자로서의 성장을 크게 이루었음을 느꼈고 건강한 학습 태도에 대해 많은 고민을 한 해였다. 1. 대학교 마지막 학기 경북대학교 컴퓨터학부 재학생으로서 마지막 학기를 보냈다. 남은 학점 채우기 마지막 학기인 만큼 남은 학점은 단 8이었고, 그로 인해 세 강의만을 수강했다. 병행해야 했던 부스트캠프에 좀 더 집중하고 싶었기에 세 교양 원격 강의를 수강했다. 너무 부스트캠프에만 몰두했는지 성적은 처참하다.. (내가 게을렀던 탓이지 뭐) 원격 강의 만을 수강하다보니 2022년 하반기 학교에 간 횟수는..

2022년 7월 18일 부스트캠프 웹·모바일 7기 캠퍼가 되어 챌린지, 멤버십 과정을 거치고 수료를 했다. 올해의 반을 부스트캠퍼로서 활동하며 스스로가 크게 성장했음에 확신한다. 그만큼 이번 회고에서 하고 싶은 말이 너무나 많지만, 멤버십 과정의 그룹 프로젝트에 대해 중점으로 회고하겠다. 함께 하기 그룹 프로젝트 시작이 다가왔을무렵 팀 모집이 시작되었다. 팀을 모집하지 않으면 랜덤으로 팀 구성이 이루어지는데, 수동적으로 마냥 기다리기는 싫었다. 조금이라도 나의 팀 플레이 가치관과 부합하는 사람들과 6주라는 시간을 함께 하고 싶었다. 그러나 팀원을 모집하기에 내세울 특별한 아이디어가 없었다. 그래서 '나'라는 사람이 왜 개발자를 꿈꾸는지 어떤 개발을 하고 싶은지를 내세웠다. 고맙게도 세 캠퍼분들이 연락을 ..

최근 웹 개발 프로젝트 하나를 마쳤습니다 🙌 (Fitory GitHub 바로가기) 짧은 시간 동안 최선을 다한 만큼 완결성 높은 결과물이 나온 것 같아 만족스럽습니다. 해당 프로젝트에서 본인은 프론트엔드 개발을 담당하여 수행했으며, 그 과정에서 프론트엔드 성능을 개선한 경험을 공유해보려 합니다. 성능 개선 경험들 중 이번 글에서는 번들 최적화에 대해서 다루겠습니다. 문제 발생 모바일 기기 환경의 Lighthouse를 찍어봤습니다. 성능 측정 항목 대부분의 시간이 오래 걸리는 것이 보이네요.. 해당 결과를 확인 후, 사용자가 빠르게 콘텐츠를 인식할 수 있도록 성능 개선의 필요성을 느끼게 되었습니다. 또 이러한 지표를 보고 성격 상 절대 그냥 지나칠 수 없습니다..😅 그래서 우선적으로 한 것은 바로 Bund..