전체 글218 PR 요청 후 Rebase and merge버튼으로 합치기 과정중 발생한 회사에서 처음으로 PR 요청을 하고나서 리뷰 폭탄(....)을 열심히 고친 후 dev 브랜치에 합치게 되었다. 팀원분이 rebase 후에 merge를 하면 된다고 하신다. 근데 PR 버튼에 보니까 Rebase and Merge라는 메뉴가 보인다. 이걸 쓰라는건가....? 라는 생각이 들었지만 일단 조사해보기로 했다. 취업 전 그룹 프로젝트를 할 때는 PR 후 바로 merge를 진행했었는데, rebase는 들어만 봤지 정확히 어떻게 하는지 까지는 알 지 못하는 상태였다. 이왕 이렇게 된거 merge와 rebase에 대해 간략하게 정리하고 내가 처한 오류에 대해 알아보고자 한다. Merge and Rebase 개념 작업한 branch를 dev나 main branch에 합칠 때 자주 사용되는 두가지 개념이다... 2023. 12. 11. Javascript Class로 배열 만들어보기 객체와 배열 자바스크립트의 배열은 객체를 기반으로 만들어져 있고, typeof로 타입을 출력해보면 object라고 나온다. 배열의 형식을 보면 key가 0과 양의 정수로 이루어져 있는 객체라고도 할 수 있다. 배열이 객체와 다른점 중 꽤 중요한 부분이 '순회가 가능하다.', 즉 이터러블이라는 것이다. 그렇다면 key가 0과 양의 정수로 이루어져 있고, 이터러블 프로토콜을 만족하도록 Class를 작성하면 배열 비슷하게 사용할수 있지 않을까 라는 생각이 들어서 만들어 보기로 했다! 이터러블이란? 이터러블은 ES6에서 도입된 개념으로 '순회가능한' 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터러블 프로토콜을 만족하는 객체를 이터러블이라고 한다. 이터러블 프로토콜 - S.. 2023. 10. 13. 프로젝트 컴포넌트 with 캐러셀 UI 프로젝트 컴포넌트 구현 프로젝트 부분은 틀을 하나 만들어서 컨텐츠만 넣으면 재사용 할 수 있게 만들고 싶었다. 데이터 부분은 다음과 같은 형식으로 작성했다. ProjectBox라는 컴포넌트를 만들어서 위 형식의 데이터를 넣으면 각각의 프로젝트가 렌더링 되도록 코드를 작성했다. ProjectBox 컴포넌트는 크게 세 부분으로 나뉘는데, 상단의 이미지 캐러셀 박스, 하단 왼쪽의 프로젝트 info, 하단 오른쪽의 프로젝트 description 이다. 이미지 캐러셀 구현 이전 프로젝트에서 캐러셀을 한 번 만들어본 적이 있어서 그걸 기반으로 코드를 작성했다. 캐러셀 페이지는 상태로 관리하는데, 좌우 버튼을 누르면 상태를 변경한다. ** 무한 캐러셀 효과를 위해 페이지가 1번이거나 마지막인 경우 transition.. 2023. 10. 7. 아코디언, 탭박스 UI 구현 아코디언 UI 아코디언은 드랍다운 UI와 비슷한데 다른 박스를 열면 원래 열려있던 박스가 자동으로 닫히는 UI이다. 생긴게 악기 아코디언과 비슷해서 이러한 명칭을 붙였다고 한다. 구현은 하나의 상태로 만들어 관리를 하기위해 boolean 배열로 만들었다. 기존에는 false에서 해당 박스를 누르면 true로 바뀌도록 할 것이다. 위에서 dropDownContents는 아코디언에 넣을 contents 배열이다. ** 처음에 드롭다운 UI로 만들었다가 아코디언으로 바꾸었는데 이름은 그대로 dropDown이 붙어있다.. 이벤트 핸들러는 다음과 같다. index를 props로 받고, index와 같은 idx를 가진 상태는 true로 변경시키고(혹은 전부 false로), 나머지는 false로 변경시킨다. 해당 이.. 2023. 10. 2. 헤더 스크롤 이벤트 및 스로틀링 헤더 버튼 클릭시 해당 요소로 이동 포트폴리오에서 헤더를 만들었는데, 헤더의 특정 버튼을 누르면 해당 요소로 자연스럽게 스크롤을 이동하는 효과를 주고 싶었다. 처음 생각한 방법은 해당 컴포넌트에 ref를 지정해서 해당 컴포넌트의 y축을 계산하고, 계산된 y축 좌표로 스크롤을 이동시키는 것이었다. 여기서 문제가 된것이 컴포넌트에 ref를 지정하려고 했는데, 1. 컴포넌트 자체에 ref를 지정할수 없다. 2. props로 하위 컴포넌트로 ref를 넘길 수 없다. 라는 문제를 만나게 되었다... 두번째 문제를 구글링 해 보니 forwardRef를 사용하면 컴포넌트의 두번째 인자로 ref를 넘길 수 있다고 한다. 그래서 열심히 forwardRef를 사용하여 ref를 넘기고, 스크롤 이벤트를 구현하려고 구글링을 .. 2023. 9. 27. 포트폴리오 만들기 - 라이트/다크 모드 적용 다들 포트폴리오 웹사이트 하나정도는 가지고 있는거 같아서(?) 나도 만들어 보기로 했다. 사실 이 블로그를 쓰는 시점에서 대략 완료를 한 상태이다. 포트폴리오를 만들면서 새로 접한 개념이나 처음 구현해본 기능들의 기록을 남겨두려고 한다. 라이트모드/ 다크모드 찾아보니 다크모드 구현을 할 때 보통은 Context API의 ThemeProvider를 사용한다고 한다. 몇 가지 블로그를 둘러보다가 조금 더 간단하게 다크모드를 구현하는 블로그를 발견하여 이 방식대로 다크모드를 구현해보기로 했다. https://kyounghwan01.github.io/blog/etc/CSS/dark-mode/ react로 다크 모드(dark mode) 만드는 법, styled-components, css, scss, theme .. 2023. 9. 24. 이전 1 2 3 4 ··· 37 다음
