본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클165

레이어 서비스는 퍼널을 어떻게 관리했을까요? 목차· 배경· 한 목표를 향하는 퍼널의 문제점· 퍼널을 풀어내기 위한 시도배경회고라는 주제를 다루고 있는 레이어라는 서비스에서 한 화면에서의 여러 페이즈를 통해 화면 흐름을 제어하고, 결국 여러 페이즈를 통해 공통된 목표를 달성하는 퍼널을 만들어야하는 경우가 있었어요. 화면 별로 따로따로 구성을 하기에는 사용자에게 화면의 자연스러움을 제공하고 싶었고, 이에 따라 자연스러운 흐름을 위해 한 화면에서 여러 페이즈(단계)를 관리하고 최종적인 목표를 달성하는 방향으로 퍼널을 관리하고자 했습니다.한 목표를 향하는 퍼널의 문제점서비스에서는 여러 핵심 기능이 존재하지만, 그 중 회고 작성 화면에서 하나의 뷰를 담당하는 .tsx 파일에서 여러 과정을 거쳐 최종 목적지인 회고 완료 페이지까지의 여정을 진행해야합니다. 페.. 2024. 9. 1.
협업 시에 이슈 관리자와 리뷰어를 일일이 설정하기 불편한가요? 목차· 배경· 깃 액션으로 자동화해보기배경요즘따라 다양한 프로젝트에서 다양한 개발자들과 많은 협업을 진행하고 있다. 그러다보니 풀리퀘스트 관련 내용들에 대해 코드 리뷰를 진행하고, 풀리퀘스트 템플릿을 통해 다양한 이슈에 대한 머지 과정을 통해 코드에 병합하는 과정을 진행하고 있다. 모든게 괜찮지만 풀리퀘스트 템플릿을 작성하면서 이슈 생성자와 리뷰어를 생성하는 것이 정말 정말 불편하게 다가왔다. 팀원들이 많은게 아니라면 일일이 설정을 할 수 있겠지만 4~5명만 있어도 매 머지 과정에서 다 넣어줘야하는 과정이 생각보다 고역이다 🫨 작년에 `깃 액션을 통해 채용 정보들을 자동으로 긁어오는 과정을 경험을 했으니, 이번에도 이런 과정들을 자동화할 수 없을까?` 라는 생각을 했다. 이런 사소한 과정 속에서 효율을.. 2024. 8. 12.
git stash 했던 내용이 사라졌을 때 당황하지 마세요 잠깐 정리를 먼저 해보겠습니다 🫨· 작업한 내용이 사라졌다면 git stash list를 통해 데이터를 확인하고 복구해보세요 작업을 하다가, git stash로 잠깐 저장해두었던 내용이 사라졌던 적 있으신가요? 코드 리뷰를 해야하는 상황이 왔는데 잠깐 작업 내용을 git stash를 통해 저장하고 여러 브랜치들을 옮겨다니던 중 관련 작업 내용들이 사라져버려서 기억하고자 포스팅을 진행합니다..git stash를 수행하고, 가장 최근 저장된 stash 내용을 적용하려면 git stash apply 명령어를 사용합니다. 하지만, git stash를 한번 더 입력을 한 경우 최근 stash의 내용이 덮어쓰여져버리는데, 이 경우에는 어떻게 할 수 있을까요?git stashgit stash apply보통의 경우,.. 2024. 7. 9.
Reduce로 코드 클린하게 만들기 잠깐 정리를 먼저 해보겠습니다 🫨· reduce 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고 하나의 결과 값을 반환합니다. 코드리뷰를 받으면서 생각보다 고려해서 작성했던 코드가 reduce를 만나 엄청 간결해지는 과정을 보고, 평소에는 reduce를 사용하는 빈도가 많이 없어서 이번 기회에 한번 복습하고자 이렇게 포스팅을 하게 되었습니다. 이번 포스팅에서는 reduce에 대해 가볍게 알아보고, 어떤 방식으로 코드가 간결해졌는데 리뷰를 해보려고 합니다.arr.reduce(callback [, initialValue]);reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음과 같은 인수를 받습니다. · accumulato.. 2024. 7. 2.
분리된 파일의 tanstack mutate 메소드를 컴포넌트 안에서 사용하기 잠깐 정리를 먼저 해보겠습니다 🫨· tanstack-query를 별도 파일로 설정하여 패칭 결과에 따라 로직을 만들 수 있지만, 복잡한 상태 관리를 처리할 때는 컴포넌트 내부에서도 처리를 할 수 있어요 개발을 진행하면서 서버와 통신에 대한 데이터 패칭 파일은 컴포넌트와 분리하여 진행하고 있습니다. 데이터 패칭 성공 및 실패 후에 대한 링크 이동 · 토큰 저장 등 간단한 로직의 경우는 데이터 패칭 파일에서 onSuccess · onError 으로 처리를 할 수 있는데, 컴포넌트에서 반응형 을 관장하는 값을 직접 건드려야할 경우에는 컴포넌트 단에서 패칭 결과에 따른 로직을 작성해야합니다. 분리되어 관리되고 있는 데이터 패칭 코드는 아래와 같습니다. 코드의 가독성을 위해 임포트와 타입 정의에 대한 부분은 제.. 2024. 6. 28.
getComputedStyle과 parseFloat, parseInt의 조합 목차· 기존 방식의 문제점· 효율적이고 더 나은 방식잠깐 정리를 먼저 해보겠습니다 🫨· getComputedStyle로 도출된 크기 값을 split을 통해 가공하지마세요기존 방식의 문제점getComputedStyle에서 출력되는 값들의 경우 px 단위를 붙여 나오거나, pt 단위 등 다양한 단위들과 함께 출력되는 것을 확인할 수 있습니다. 문자열 형태로 제공되기 때문에 split을 통해 단위에 대한 분기 처리로 가공을 한다면, 매우 비효율적인 로직을 제공할 수 있기 때문에 평소 split 형태로 임시 방편의 로직을 작성했던 부분에 있어 해답을 얻고자 포스팅을 진행하였습니다. 평소 비효율적이라고 생각되었던 코드는 아래와 같습니다.const element = document.body.querySelecto.. 2024. 6. 26.
반응형

티스토리툴바