시작하며...분명 Automatically delete head branches 옵션을 선택하여 PR 을 올려 merge 가 되었을 때, 해당 브랜치가 삭제되도록 설정하였다.그러나 merge 가 되었음에도 불구하고 브랜치가 삭제되지 않는 현상을 발견하였다. 문제 해결하기해당 문제에 대해 의문이 있었는데 다행히 이 문제를 해결할 수 있었다! 결론은 내 문제 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ  바로 Branch Protection Rules 때문이었다! Branch Protection Rules 설정PR 을 올릴 때 2명 이상한테 Approve 를 받아야 merge 될 수 있도록 규칙을 설정하였다. 여기서 문제였다! 특정 브랜치에 merge 될 때 그 특정 브랜치의 패턴을 입력해야 한다. 그래서 처음엔 모든 브랜치에 적..

시작하며...이전 프로젝트에서 Menu 와 DropDown 컴포넌트를 구현하였다. 그러나 공통 컴포넌트라는 성격과 거리가 멀었다. 그래서 이번 프로젝트에서 DropDown 공통 컴포넌트를 범용성이 좋게 만들기 위해 컴파운드(Compound) 패턴으로 만들게 되었다!  컴파운드(Compound) 패턴컴파운드 패턴이란?컴파운드 패턴이란 무엇일까? 컴파운드 패턴React에서 복잡한 컴포넌트를 효율적으로 관리하고 재사용성을 높이기 위한 디자인 패턴DropDown 이나 Select 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

1. K번째 수https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이slice 를 사용하여 item[0] 번째부터 item[1] 까지 자른 후, sort 를 사용하여 오름차순 정렬을 하고 item[2] 번째에 있는 수를 반환하였다.function solution(array, commands) { return commands.map((item)=>{ return array.slice(item[0]-1,item[1]).sor..

1. 같은 숫자는 싫어https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이이미 푼 문제인데 나는 filter 를 사용하여, 앞에 있는 숫자와 같을 경우 해당 숫자를 필터링하여 연속으로 중복된 수를 제거하였다.function solution(arr) { return arr.filter((item,idx) => item !==arr[idx-1]);}1-2. 다른 사람 풀이나와 같은 방식으로 해결하였다.function solution(a..

1. 폰켓몬https://school.programmers.co.kr/learn/courses/30/lessons/1845 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 이전 내 풀이이미 풀었던 문제였는데 Set 을 사용하여 중복을 없애고 길이를 구한 다음 nums 의 절반과 중복을 제거한 길이 중에 작은 수를 반환했다.function solution(nums) { const newSet = new Set(nums); const result = [...newSet].length; const count = nums.length / 2 ..

(짧은 회고... 프로젝트 회고 위주로 봐주세요)시작하며...벌써 코드잇 스프린트 6기를 시작한 지 벌써 절반이나 지났고 마지막 파트만 남아있다. 정말 시간이 빠르고 지난 기간 동안 많이 성장하고 좋은 동료들을 만날 수 있어 좋은 경험이었다. 1. 프로젝트파트2때 기초 프로젝트를 진행했고, 이번 파트 3에서는 중급 프로젝트를 진행하였다.  너무 좋은 팀원들을 만나 즐겁게 개발할 수 있었고 팀원들의 코드를 리뷰하면서 나도 새로운 내용과 인사이트를 얻을 수 있었다.  자세한 내용은 해당 링크에서 확인할 수 있다. https://jjang-j.tistory.com/140 [Wiked] 코드잇 스프린트 중급 프로젝트 회고시작하며...코드잇 스프린트 6기 파트3에서 6월 21일부터 7월 9일까지 약 2주간 중급 ..

시작하며...Next.js 에서 React Quill 에디터 라이브러리를 사용하여 이미지를 모달로 받고 업로드하는 것을 구현하였는데 이에 대해 자세히 글을 작성해보려고 한다. 이미지 핸들러1. 이미지 핸들러 등록에디터에 있는 이미지 아이콘을 클릭하여 이미지를 업로드하는 대신, 직접 이미지 업로드 과정을 구현하기 위해서는 이미지 핸들러를 추가해야 한다.  Quill 에디터에 있는 이미지를 클릭하였을 때 사용자 정의 동작을 할 수 있도록 image 를 클릭했을 때 handleClickImage 함수가 호출되도록 핸들러로 지정해 준다.  2. 이미지 등록 모달 열기이미지 핸들러인handleClickImage 에 모달을 open 하는 함수를 넣는다.  이미지 모달 구현이미지를 입력받음 → 유효성 검사 → 이미지..

시작하며...코드잇 스프린트 6기 파트3에서 6월 21일부터 7월 9일까지 약 2주간 중급 프로젝트를 진행하였다. 프로젝트를 진행하면서 내가 어떤 것을 구현하고 고민했는지를 상기하고 다시 한번 돌아보기 위해 글을 작성하게 되었다.https://github.com/wiki-viki/wiki-viki GitHub - wiki-viki/wiki-viki: 코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다.코드잇 스프린트 6기 파트3 16팀 중급 프로젝트 레포지토리입니다. Contribute to wiki-viki/wiki-viki development by creating an account on GitHub.github.com 프로젝트 선정 목적프로젝트 선정 이유지난 초급 프로젝트와 동일하게..

시작하며...이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다. Zustand 스토어 작성일단 다음과 같은 플로우를 생각해 보았다.로그인 → 토큰 쿠키에 저장 → 로그인 여부 O쿠키에 토큰 있음 → 로그인 여부 O쿠키에 토큰 없음 → 로그인 여부 X로그아웃 → 쿠키에 토큰 만료 useAuthStore.tsx일단 상태와 메서드 5개를 만들었다.user - 로그인하면서 저장할 유저 정보 상태saveUser - 유저 정보 저장하는 메서드isLogin - 로그인 여부 나타내는 boolean 상태checkLogin - 로그인 여부 확인하는 메서드logout - 로그아웃 처리하는 메서드 saveUser 로 유저 정보와 로..