인트로 이전 '투스' 프로젝트와 현재 프로젝트 '캐치버그' 를 진행하면서 있었던 회고를 쓰고자 합니다. 이 회고를 쓰게 된 이유는 두 가지가 있습니다. 첫 번째는 두 번의 프로젝트를 진행하면서 '왜' 기술을 도입했는지, '어떤' 부분에서 지식을 얻었는지 등에 대한 피드백을 머릿속에만 넣어둔 것 같습니다. 벌써 '투스' 프로젝트에서 겪었던 고찰들에 대해 약간 희미해지는 기분이에요. 그래서 글로 정리가 필요하다는 것이 느껴졌습니다. 두 번째 이유는 개인적으로 번아웃이 온 것 같아요. 목표를 꾸준히 세워오며 작업을 했었는데 같이 작업해오시던 분이 서류 합격으로 코딩 테스트를 준비하게 되면서 최종 테스트가 밀리면서 '아... 나도 취업해야 하는데 난 뭘 하고있지?'라는 생각에 손에 잘 안 잡히는 상황이 됐습니다..

최근 새로운 프로젝트를 진행하다 보니 오랜만에 글을 작성하는 것 같은데요. 작성하게 된 이유는 완성했다고 생각했던 CI/CD 부분에서 오류를 보았기 때문입니다. 원래 쉽게 찾아 볼 만한 오류들은 굳이 포스팅하지 않았지만 해당 오류를 3일 간 해결하지 못하게 되면서 오랜만에 소위 말해서 멘탈이 나갔었습니다. Stackoverflow 에 질문 글을 등록하기도 하고 개발자 사이트와 개발자 오픈 채팅방에 반복된 질문을 여러 번 했었습니다만 좀 처럼 해결되지 않았습니다. 그러다 늦은 새벽 3시 경 답답한 마음으로 해결 방법을 찾던 와중에 오픈 채팅방에서 한 귀인이 제 Repository를 봐주신다고 하셨습니다. 덕분에 문제를 해결했음은 물론이고 오히려 문제 해결에 대한 사고를 어떻게 했는지 여쭤보았는데 굉장히 친..

이전 글로 Docker에 대해 포스팅 해 보았는데요. 먼저 이런 CI/CD에 대한 공부를 하게 된 이야기를 먼저 하고 싶습니다. 이유는 최근 투스 프로젝트를 진행하면서 제일 힘들었던 부분이 있었습니다. FE가 BE의 API를 활용해야 하기 때문에 BE에 지나치게 종속적이었던 것입니다. 물론 mocking API를 이용하여 종속관계를 '완화' 할 수는 있었지만, 제 배움이 부족했던 탓인지 완전한 해결책이 되진 못했습니다. 예를들면 방 목록에 필터 기능을 사용하여 원하는 방만을 출력해야하는 상황에 백엔드의 필터 알고리즘을 고려하여 작동되는지 확인이 어려웠던 점 등이 있습니다. 프로젝트를 시작하고 약 2-3달 간 이러한 문제로 끙끙 앓다가 나온 해결책으로 '개발 참여 집중 시간'을 만들었던 기억이 있습니다. ..

도커에 대한 학습을 위해 포스팅합니다. 도커 도커는 무엇일까요? 예시를 하나 들어보겠습니다. 누군가 웹 개발을 한다고하면 웹 서버나 데이터베이스를 깔아야 합니다. 하지만 개개인이 이것들을 설치하고 설정하다 서로 다른 OS와 환경, 서버에 의해 에러를 맞이할 수도 있습니다. 물론 한번에 잘 될 수도 있지만 아닌 경우 위 에러를 맞이하는 것 자체가 개발자에겐 굉장한 스트레스입니다. 도커는 위 과정을 개선하기 위해 리눅스 운영체제의 CONTAINER라는 앱 실행 방법을 다뤄 해결합니다. 가상화의 한 종류인 컨테이너는 프로세스를 격리시켜 각각 독립된 환경을 갖게합니다. 이 컨테이너 내에는 운영체제 전체가 설치되어 있는 것이 아니라 앱을 실행하는데 필요한 라이브러리와 실행 파일들만 내제되어 있습니다. 그리고 이 ..

Performace 기존 무한 스크롤을 구현했던 방식은 Scroll Event를 이용하여 현재 스크롤 위치와 전체 스크롤 크기 등을 이용한 로직이었습니다. 해당 로직은 문제점이 있었는데요. 스크롤을 움직이면 1초안에 굉장히 많은 Event가 발생하게 되면서 위 퍼포먼스 성능과 같이 1000ms 당 약 160ms를 스크립트가 차지하게 되는 문제였습니다. 사실 최근 개인 컴퓨터의 성능과 서버의 성능이 많이 좋아지면서 체감하기 어려울 순 있습니다. 하지만 항상 최선만을 염두에 둘 순 없습니다. 만약 성능이 안좋다면 유저에게 최악의 경험을 안겨주게 됩니다. 두 가지의 개선 방법이 있었습니다. 쓰로틀링과 인터섹션 옵저버 입니다. 제가 처음 사용을 고려했던 것은 쓰로틀링 이었는데요. 문제가 있었습니다. 이에 대해 ..

🔍 클린코드를 시작하게 된 이유 이전에 포스팅했던 LightHouse 사용 이후 코드 개선도 필요하다고 느꼈습니다. 학부시절 부터 '클린코드' 라는 말을 어깨 너머 많이 들었었는데요. 정작 주어진 과제 및 프로젝트 구현에만 급급했던 나머지 찾아보려고 노력하진 않았던 것 같습니다. 그러다 https://youtu.be/edWbHp_k_9Y [SLASH 21] 실무에서 바로쓰는 Frontend Clean Code : Toss 진유림 개발자 진유림 개발자님의 유투브 영상을 보고 애초에 클린코드 자체를 잘 못 이해하고 있었다는걸 알게 되었습니다. 클린코드란? 아마 저처럼 클린코드가 그저 짧고 두 세번 반복되지 않는 함수형 코드 정도로만 이해하고 계신 신입 분들이 많을 것 같습니다. 저 또한 당장 최근까지도 정확..