협업 프로젝트를 진행하다 보면 팀원마다 커밋 메시지나 브랜치 네이밍이 제각각인 경우가 많다.특히 프로젝트 기간이 길어지거나, 여러 프로젝트를 병행하는 경우 컨벤션을 헷갈리는 경우가 잦게 되는데! 아차차 하며 팀원들에게 양해를 구하기 전에 미리 통일화를 하는게 무척이나 효율적일 것이다. 이번에 다루다 프로젝트에서 Husky를 활용하여, 커밋 메시지 규칙을 자동화하는 작업을 진행했고, 그 과정을 정리했다. 기존의 문제다루다 프로젝트를 진행하기 전, 코딩 컨벤션을 정하면서 branch 네이밍과, commit 작성에 대한 규칙을 정했고 내용은 아래와 같다. 브랜치 네이밍  :  작업타입/#이슈번호/상세내용 Feat/#123/community   커밋 컨벤션 : 커밋타입/#이슈번호: 커밋내용Feat/#123: c..

https://www.acmicpc.net/problem/2156   시간 제한 메모리 제한  제출  정답  맞힌 사람 정답 비율2 초 128 MB  159507  54918 39815 32.854% 접근 방향 설명3잔을 연속으로 먹을 수 없다는 조건 -> 그리디가 아닌 DP를 선택하게 되었다.따라서, dp 내부 구조는 현재 잔을 기준으로 ['안마심', '마심' , '연속 2번 마심'] 으로 메모이제이션했다.  1. `이번 잔을 안 마실거라면` : 이전 잔들에 대해서 최대값을 넣어준다  - 단 주의할 점은 연속 2회가 아닌 경우, 무조건 바로 다음잔을 마시는 것이 중요하지는 않음  - 이전에 잔을 안 마셨다고 바로 다음 잔을 마시는 것이 최대합이 아닐 수 있기 때문 (마셔봤자 다음, 그다음 잔을 먹는 기..

접근 방향 설명파티에서 최대한 많이 거짓말 할 수 있도록 문제를 해결하면 되는 문제였다. 문제에서 가장 중요한 점은, 파티가 배열 순서대로 진행되지 않는다는 점이다. 그래서 사람간의 그래프를 그리는 것이 중요했다고 생각했다. 문제풀이 설명 1️⃣ 파티의 순서가 보장되어 있지 않기 때문에 함께 파티에 참여하는 사람간의 간선 정보를 양방향으로 저장해야 했다. 2️⃣ 이후, 탐색을 돌면서 진실을 알고 있는 사람과 함께 파티에 간 사람을 know_Arr에 넣어주었다.(know_Arr == 진실을 아는 사람들의 집합)탐색은 스택을 이용했기에 DFS 로 돌렸다. 여기에선 탐색 순서가 중요하지 않기에 BFS도 크게 상관없을 것이다.   3️⃣ 다시 배열을 돌면서 진실을 아는 사람이 없는 파티라면, ans++를 해주었..

다루다 프로젝트에서,  데모데이 기간동안 만들어둔 코드를 리팩토링하게 되었는데이때 난 툴 목록 페이지의 랜더링 속도 개선을 위해 tanstack query를 적용하여, 데이터 패칭 상태를 관리해주는 테스크를 담당하게 되었다.   기존에는 여러 상태 관리를 통해서, loading과 error 유무를 랜더링해주었기에 코드가 다소 복잡했었고, 데이터 캐싱없이 카테고리 / 무료툴 여부를 누를때마다, 새롭게 값을 받아오는 방식이었기 때문에 이부분에 대해서 tanstack query로 해당 페이지의 로직을 변경하게 되었다.  Infinite Sroll 에서 페이지의 하단을 만났을때 새로운 데이터를 불러오는 동안의 로딩 처리는 Lottie를 이용해 spinner를 랜더링하는 형식이었다. 그동안 useQuery를 통해..

클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 의미한다!  하지만, 클로저는 for (var i = 0; i   만약 다음과 같이 반복문 안에서, 1초 간격으로 i를 출력하려 했을때 결과는 어떻게 될까?  0부터 시작해 반복문을 돌게 되면서, 1초 간격으로 console 출력값으로 0, 1, 2, 3, 4 를 차례대로 출력하는 것을 예상하겠지만, 결과적으로는 그렇지 않는다.    다음과 같이, 1초마다 숫자 5가 찍혀서 총 다섯번의 5가 출력되는 것을 알 수 있다.  반복문의 흐름을 생각해본다면 아래와 같이 그 과정을 나눠볼 수 있는데, 0setTimeout(() => console.log(i), 0 * 1000); → 즉시 실행1setTimeout(() => console.log(i), 1 * 1..

🔹 단방향성과 JSX리액트의 장점에 대해 묻는다면, 가상돔과 `batching`을 통한 효율적인 상태 관리를 들 수 있겠는데그외에도 react 딥다이브를 읽다가 생소했던 부분, 그리고 알고 있지만 면접에서 `그래서 react가 왜 좋아서 쓰는데요?` 라는 물음에 대답하면 좋을 내용이 있어서 기록하고자 한다. 그동안, `react`의 장점을 언급하기 위해, `vanilla js`와 이를 비교하는 식으로 다뤄왔는데 `Angular`와s 붙여 생각해보고자 한다. 📍 단방향 바인딩을 하는 `React`단방향 바인딩은 말그대로 `데이터의 흐름이 방향`으로 흐른다는 말이다.특히, 리액트의 경우, 상태변화가 `단방향`으로 `명시적`으로 이뤄지기 때문에 부모 -> 자식으로 데이터가 흐르는 경향이 있다. 이때는 `p..

접근 방향알고리즘 자체는 그리 어렵지 않게 떠올릴 수 있었던 문제였다. [그래프 +  bfs ] 1️⃣ `a`는 `b`를 신뢰하기 때문에, `b`의 바이러스 여부는 `a`를 감염시킨다. 그렇기 때문에, 그래프로서 입력값을 정리해준다. `graph[b].push(a)` 와 같이 정리하는 식으로 말이다.2️⃣ 그다음 `bfs` 나 `dfs`로 탐색을 해주면 된다. 3️⃣ 나의 경우는, 시간 초과를 면하기 위해, `shift` 연산을 사용하는 대신 `idx`를 움직이는 식으로 `bfs` 탐색을 돌았다. 4️⃣ `bfs` 함수의 `return`으로 감염시킨 컴퓨터 수를 던져주었으며, 이를 토대로 최대값을 구해서 `result` 배열에 넣어 출력하는 식으로 답을 구했다. https://www.acmicpc.net..

🔹 Link 목록 페이지에서 카드 컴포넌트를 눌렀을때 세부 페이지로 이동 시키는 경우, nav 바에서 로그인이나 회원가입 등 특정 페이지로 이동 시키는 경우 등 .. 그동안 한 페이지에서 -> 다음 페이지로 이동시킬때 `Link` 태그를 이용해왔다. 하지만 내부 동작 및 속성에 대해 자세히 알고 쓰지 못했기에 더 공부해보고자 한다. 📍 `Link` 태그에 대해서`react-router-dom` 에서 제공하는 태그로, 웹 내에서 페이지간에 네비게이션을 처리하는 컴포넌트이다. 기본적으로 `` 태그와 유사한 역할을 한다. 정확히는 `` 태그의 성질을 확장한 구조인데 이는 후술하도록 하겠다. (HTMLAnchorElement 와 관련하여) 그럼 `` 를 쓰지 왜 `Link`를 따로 만들었나?`` 는 전체 페..