❓조건문 지옥조건문 지옥은 코드 로직이 if / else if / else 혹은 중첩된 조건문이 지나치게 복잡해져서 코드의 가독성, 유지보수성, 확장성이 저하되는 경우를 뜻하는데 공식적인 용어는 아니고 콜백지옥처럼 비공식적인 용어라고 합니다. 🚨문제 상황프로젝트를 진행하면서 신청자가 참여 요청의 상태(대기, 승인, 취소, 거절 등)에 따라 서로 다른 UI를 보여줘야 하는 로직을 구현했는데, 이 구조를 모두 조건문으로 처리하여 구현했습니다. 그로 인해서 몇 가지 문제점들이 발생했습니다.코드의 가독성이 현저히 낮아짐.또 다른 분기 처리 로직을 추가하기 위해 많은 시간이 필요함.예를 들어 '승인취소' 상태일 때 UI에선 '승인 대기' 로 보일 때 디버깅이 매우 복잡함.비지니스 로직과 UI 관련 로직이..

🚨발생한 문제점Next.js 프로젝트 진행 중 서버 컴포넌트의 이점을 살리고자 모임 목록 데이터를 불러오는 페이지와 댓글을 불러오는 상세페이지를 SSR로 구현했습니다. SSR로 구현을 하다 보니 자연스럽게 등록, 수정, 삭제 기능을 Server Action으로 구현하게 되었습니다. 여기까지는 좋은 시도였지만, 이후에 향상된 UX를 위해 무한 스크롤 도입을 하게 되었습니다.무한 스크롤을 도입하면서 SSR 컴포넌트의 데이터와 무한스크롤을 도입할 CSR 컴포넌트의 데이터가 충돌이 일어났습니다. 서버 컴포넌트는 서버에서 데이터를 다루기 때문에 클라이언트 컴포넌트의 TanStack Query의 캐시를 초기화할 수 없었고, 반대로 클라이언트 컴포넌트의 TanStack Query의 함수는 서버 컴포넌트의 캐시를 초..

📢 문제 설명한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다.한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하..

Axios란 무엇일까?Axios는 공식문서에서 'Promise 기반의 HTTP 클라이언트 라이브러리이며 브라우저와 node.js 환경에서 사용이 가능하다.' 라고 소개하고 있다. Axios와 비슷한 기능을 하는 fetch api보다 더 직관적인 API를 제공하며, 다양한 기능을 갖추고 있다. (하지만 프론트엔드에서만 사용하기엔 너무나 많은 기능을 가지고 있기에 불필요하게 용량이 크다는 단점이 있다고 한다.)    Axios 인스턴스란? 📌 axios의 기본적인 요청import axios from 'axios';const fetchUser = async (id) => { try { const response = await axios.get('/user', { params: { ..

📢 문제 설명프로그래머스 사이트를 운영하는 그렙에서는 재택근무와 함께 출근 희망 시각을 자유롭게 정하는 유연근무제를 시행하고 있습니다. 제도 정착을 위해 오늘부터 일주일 동안 각자 설정한 출근 희망 시각에 늦지 않고 출근한 직원들에게 상품을 주는 이벤트를 진행하려고 합니다. 직원들은 일주일 동안 자신이 설정한 출근 희망 시각 + 10분까지 어플로 출근해야 합니다. 예를 들어 출근 희망 시각이 9시 58분인 직원은 10시 8분까지 출근해야 합니다. 단, 토요일, 일요일의 출근 시각은 이벤트에 영향을 끼치지 않습니다. 직원들은 매일 한 번씩만 어플로 출근하고, 모든 시각은 시에 100을 곱하고 분을 더한 정수로 표현됩니다. 예를 들어 10시 13분은 1013이 되고 9시 58분은 958이 됩니다. 당신은 ..

Keep: 현재 만족하며 계속 이어나갔으면 하는 부분Problem: 아쉽고 개선이 필요하다고 생각하는 부분Try: Problem의 대한 해결책과 향후 개선 시도  저희 팀은 '제주 한달살이'를 주제로 React를 사용한 프로젝트를 진행했으며 전공자 2명, 비전공자 4명으로 이루어져 있었습니다.   KeepAPI 엔드포인트 구성환경 변수(import.meta.env.API_URL)를 활용하여 서버 URL을 중앙 집중식으로 관리하고, API 엔드포인트들을 Object.freeze를 사용해 불변 객체로 정의한 점은 매우 좋다고 생각했습니다.이런 방법으로 인해서 팀원들이 공통 API에 따라서 작업할 수 있게 되었으며, 엔드포인트 변경시 한 곳만 수정하면 되기 때문에 유지보수에서도 강력한 이점으로 작용했습니다.A..

비동기 업데이트와 배치 업데이트(batch update)비동기 업데이트React는 성능 최적화를 위해 상태 업데이트를 바로 반영하지 않고, 비동기적으로 처리합니다. 이는 내부 스케쥴러와 배치 업데이트(Batch Update) 매커니즘을 사용하기 때문입니다. ※스케쥴러란?React 내부에 구현된 메커니즘으로, 컴포넌트의 상태 업데이트와 렌더링 작업을 효율적으로 관리하고 스케줄링하는 시스템을 의미합니다.  배치 업데이트(batch update)컴포넌트가 여러 번 업데이트되더라도, 실제 DOM 요소에 변경사항을 적용하는 것을 최소화하여 애플리케이션의 성능을 최적화하는 기능입니다. 컴포넌트가 업데이트가 되면 아래와 같은 과정을 거치게 됩니다.컴포넌트의 render() 함수가 호출되어 Virtual DOM을 반환..

이번에 팀 프로젝트를 하다가 팔로우 팔로잉 기능을 구현하게 되었습니다. 데브코스에서 지원해주는 api가 제약이 많아 유저의 팔로잉, 팔로워의 id를 받아서 다시 유저의 정보를 조회해줘야하는 상황이였는데 이때 한번에 많은 비동기 작업을 처리해야하는 일이 발생했습니다.     Promise.all이란?여러 비동기 작업을 동시에 처리합니다. 각 작업이 독립적으로 실행되기 때문에 전체 완료 시간은 가장 오래 걸리는 작업의 실행 시간과 근접하게 됩니다.    문제의 코드const { data: followingData } = useQuery({ queryKey: ['followings', userData?.following], queryFn: async () => { if (!userData?.follo..

합병 정렬은 아주 유명한 알고리즘입니다. 1948년에 컴퓨터 과학자이자 수학자인 '자나단 벤 노이반'이 만들었다고는 합니다... 이것이 중요한 게 아니라 합병 정렬은 앞서 올린 버블정렬, 선택정렬, 삽입정렬과는 비교도 안 되는 뛰어난 성능을 가지고 있습니다. 버블정렬, 선택정렬, 삽입정렬은 평균 시간 복잡도 O(n^2)으로 비교적 작은 데이터에서만 사용할 수 있었습니다. 하지만 합병 정렬은 평균 시간 복잡도가 O(n log n)이기 때문에 데이터의 수가 커도 비교적 빠르게 값을 도출해 낼 수 있습니다.(하지만 어렵습니다) 아래에서 자세히 알아보겠습니다.     합병 정렬 개념합병 정렬은 분할, 정렬, 합병 세가지 조합으로 볼 수 있습니다.요소가 0개나 1개만 있는 배열은 이미 정렬되어 있다는 점을 활용합..

버블 정렬버블 정렬은 인접한 두 요소를 비교하며 정렬하는 방식을 의미합니다. 각 라운드에서 가장 큰 값 또는 가장 작은 값이 배열의 끝으로 이동하며, 물방울이 떠오르듯이..? 정렬된다 하여 버블정렬이라고 부릅니다. 구현function bubbleSort(arr) { for (let i = arr.length; i > 0; i--) { let swap = false; // 교환 여부를 체크 for (let j = 0; j arr[j + 1]) { console.log(`[배열: ${arr}], ${arr[j]}, ${arr[j + 1]}`); [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // 앞 뒤 값을 교환 swap ..