토스 slash 24를 시작으로 타임라인을 따라 slash 21까지 보게 되며인상 깊었던 세션이 있었습니다. 진유림 님이 발표하신 토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code에서응집도와 결합도, 단일 책임 원칙을 기준으로 클린 코드를 작성하는 방법이었는데요. 세션에서 언급한 내용을 기반으로 실무에 작성했던 저의 코드들을 돌아보며난잡하기 짝이 없다는 것을 깨닫게 되었습니다.실무에서 언제든지 적용할 수 있을 때까지 저의 기록을 보며 공부하기 위해 포스팅하게 되었습니다.응집도는 뭐고 결합도는 뭐야?📒  응집도 (Cohesion)응집도는 특정 모듈(예: 함수나 클래스)이 얼마나 잘 관련된 기능을 가지고 있는지를 나타내는 척도입니다.쉽게 말해, 하나의 모듈이 특정한 작업이나 ..

공통 모달인데.. 이제 재활용이 안 되는..새로운 프로젝트를 진행하며 공통 모달 제작이 필요했습니다.MVP 단계이기도 했고, 그에 따라 수시로 내용이 변경되어모달에 사용되는 데이터를 인자로 전달받게만 처리하면1차적인 공용 컴포넌트를 완성할 수 있을 것으로 전망했지만, 이는 착각이었습니다. 수시로 변경되는 것은 내용뿐이 아닌 디자인도 포함되었으니까요.1차로 작성한 모달 컴포넌트만약 공용 모달 컴포넌트를 사용하는 모든 곳에서 디자인과 기능이 동일하다면prop을 전달받아 관리하는 공용 컴포넌트로 사용해도 문제가 없습니다. 하지만 특정 페이지들에서만 색상을 다르게 한다던지,모바일 환경에서의 레이아웃 변경 등이 필요하다면다시 컴포넌트를 만들어야 하므로, 상당히 불편함을 야기합니다. 즉, 추상화가 되어있지 않다고 ..

왜 react-markdown 적용이 안되는 걸까사내에서 신규 프로젝트 진행 중, reset.css로 인해HTML 요소의 기본 스타일이 제거되어 react-markdown을 통한 마크다운이일반 텍스트처럼 보이는 문제가 있었습니다.문제 해결markdown 컴포넌트의 상위 요소에 개별 스타일을 설정해 주는 것으로 해결 가능합니다.1. markdown 상위 요소를 생성한다. const Markdown = () => { ... return ( ... ) : ( {children} ); }, }} ..

오늘은 조금 특별한 포스팅을 해볼까 합니다. 2년차 개발자로서 경험한 경력직 인터뷰의 매 순간들을 정리해보고 싶었거든요.이직 성공 관련 포스팅이 아니지만.. 이직을 고민하는 과정에서 느꼈던감정들과 준비 과정을 돌아보며 정리해보았습니다. 인터뷰 질문 유형기술 인터뷰기술인터뷰에서는 주로 ‘경력 설명’, ‘사용한 기술’, ‘해결했던 문제와 그 과정’에 대한질문을 많이 받았는데요,  주로 문제 해결 과정에서 사용된 기술 개념과 cs 질문 비중이 높았습니다. 예시로 state로 관리하던 Form을 react-hook-form으로 변경해 관리한 것을 시작으로렌더링과 관련된 개념과 리액트를 사용하는 이유와 cs 질문까지.심화 질문이 들어왔던 것이 생각나네요. 이외에도 면접관과의 대화에서 제가 원하는 방향으로이야기를 ..

이슈 발생경로와 원인사내에서 새로운 서비스를 개발하던 도중, 파스칼 케이스로 생성한 폴더명을스네이크 케이스로 변경하자는 동료분 의견이 있어 스네이크 케이스로 폴더명을 변경 후깃허브에 push 했지만 여전히 파스칼 케이스가 적용되어 있었는데요. 알고보니 git은 파일명 또는 폴더명의 대소문자를 구분하지 못하는 문제가 있었습니다.해결 방안git config core.ignorecase falsegit rm -r --cached .git add . git config core.ignorecase false을 터미널에 입력해주면 이후엔  대소문자를 인식하게 됩니다. 추가로 git 저장소에 캐싱된파일이 남아 있다면 터미널에 캐싱 관련 메시지가 보여지게 되는데캐시 관련 명령어로 캐시를 삭제해주면 해결됩니다.

유저가 갑자기 대거 이탈하는 경우가 발생했다면서비스의 어떤 부분이 문제였을까?라는 생각에서 GA 도입을 처음 떠올렸습니다. 프로젝트를 개발하며 유저가 어떤 페이지를 가장 많이 사용하고어느 기능에서 불편함을 느껴 문제를 제기하는지 파악하고 싶었거든요.기획자님과 같은 팀원에게 GA를 적용해 개발 방향을 정하자는의견을 제시한 후 적용하기로 결정했습니다._document.tsx를 사용한 GTM 설정(사내 프로젝트에서는 Next.js 12v를 사용 중이었습니다.)공식 문서를 참고했을 때 @next/third-parties라는 라이브러리를 통해쉽게 GTM 태그 작업을 프로젝트에 적용하려고 시도했습니다.pages router에서도 @next/third-parties 를 사용할 수 있는 것처럼설명이 작성되어 빠르게 적..

Multipart Upload를 적용한 이유현재 제공 중인 서비스에서 채팅으로 파일과 메시지를 전송 시,20MB 제한을 걸어둬 20MB를 초과하는 파일의 경우에는업로드 제한을 알리는 모달을 활성화시키는 것으로 처리했는데요. 몇몇 유저가 대용량 파일도 채팅으로 보낼 수 있게 해 달라는 요청을 하며기획 변경으로 Multipart Upload feature를 구현해야 되었습니다.AI 관련 파일의 특성상 500mb 이상의 무거운 JSON 파일들과문서의 사이즈가 크기 때문에 대용량 파일 업로드에 대한 처리는언젠가 필요하겠다 싶었는데 그 시점이 지금이었네요.먼저 멀티 파트 업로드에 대해 알아보자AWS에서 S3 멀티파트 업로드를 구현하는 방법으로  SDK, REST API, CLI 총 3가지를 제공합니다.저는 그중 ..

24년 추석, 용산으로 돌아오기 위해기차 티켓 예매를 계-속 시도했는데요.(실패하고 버스를 타고 왔습니다.. 티켓팅 힘들더라고요) 기차 티켓 예매를 위한 대기열은 어떻게 구성이 되었을지와대기열과 비슷한 구조를 자바스크립트로 구현하면 어떨까라는생각이 문득 들어 포스팅하게 되었습니다.먼저 진입한 사람이 티켓 화면에 빨리 진입할 수 있다. (FIFO)대기열을 분석해 보면 대기열 화면의 로딩이나, 순위가 빠른 사람이먼저 예매 화면으로 접근할 수 있는 것은 모두 알고 계실 거예요.자료 구조로 비교하자면 Queue가 사용되었겠다 싶었습니다. Queue는 FIFO(First In, First Out) 방식으로 동작하며먼저 들어온 요청이 먼저 처리된다는 의미를 지니고 있으니까요. 대기열에 먼저 진입하는 것을 Enque..