본문 바로가기

전체 글

[React] 페이지네이션(Pagenation) 구현하기 🙌구현 목표 : 페이지네이션 구현하기 다음과 같은 페이지 네이션을 구현하여야 한다. 즉, 1~10까지 페이지 가 보여지고 페이지 단위는 10씩 넘겨진다. ◀ 클릭 시 이전 페이지 => 현재 페이지가 11~20일 경우 => 1페이지로 이동 ▶ 클릭 시 다음 페이지로 넘어간다. => 현재 페이지가 11~20일 경우 => 21페이지로 이동 First는 첫 페이지로 Last는 마지막 페이지로 이동한다. 1. Pagenation 컴포넌트에 maxPage(최대 페이지), currentPage(현재 페이지), setCurrentPage, visiblePageCount(페이지 단위)를 넘겨준다. export const HomePage = () => { const [pagenation, setPagenation] = u.. 더보기
[TypeScript] props으로 받은 함수의 타입 지정하기 ✨props으로 받은 함수의 타입 지정하기 타입스크립트를 아무것도 모른 상태로 처음 사용하면서, 타입을 지정하는데에 어려움이 있었다. 예를들어 다음과 같이 일반적으로 타입을 명확하게 지정하기 쉬운 string, number, boolean 등은 타입을 지정할 때 크게 고민이 필요하지 않았지만, interface ICheckBoxProps { label?: string; placeholder: string; type?: 'email' | 'password' | 'text' | 'number'; autoComplete?: string; setValue: React.Dispatch; required?: boolean; maxLength?: number; inputRegexCheck?: ? } props으로 함.. 더보기
[TypeScript] React.KeyboardEventHandler<HTMLInputElement> 에서 event.target.value 에러 ❗타입스크립트 React.KeyboardEventHandler 에서 event.target.vale 사용시 에러 이슈 1. 타입스크립트를 처음 사용하면서, onKeyup 이벤트를 전달 시 발생한 에러 이슈이다. 이렇게 Input에서 onKeyUp 이벤트를 발생시켜 이벤트를 전달하면 2. 타입스크립트에서 타입을 명시해 주어야 한다. 마우스 hover 시 참고되어있는 이벤트 타입인 React.KeyboardEventHandler으로 지정해 주었더니 event.target.value에서 에러가 발생했다. 이유는 타입스크립트에서 KeyboardEvent에 target 속성은 정의 되어있지 않기 때문인 것 같다. index.d.ts에서 확인해 보면 target속성이 정의되어있지 않다. interface Keybo.. 더보기
[React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet 협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa.. 더보기
[Git & GitHub] 깃허브로 협업하기 - (3) git graph, fetch, pull, branch, switch, checkout, merge 명령어 사용하기 지난 번에 협업 repo에서 새 프로젝트를 clone한 것에 이어서, git-flow에 대한 브랜치 규칙과 commit 규칙까지 설정하였다. [Git & GitHub] 깃허브로 협업하기 - (1) Organization, clone 이번에 참여하게된 향수 프로젝트에서 새로운 FE 주니어 개발자 분이 합류하게 되면서 깃을 사용한 협업이 반드시 필요한 상황이 되었다. 지금까지는 혼자 프로젝트에 add - commit - push 하는 과정 junvelee.tistory.com 이번에는 git fetch로 현재까지 작업내용을 불러와 git graph를 확인하고, 해당 브랜치의 변경사항을 pull 한 후, 이어서 기능별 브랜치를 생성해 작업한 후 해당 기능별 브랜치에 add - commit - push 하는 과.. 더보기
[Git & GitHub] 깃허브로 협업하기 - (2) Git-flow(branch, commit Convention) FE 개발자 분과 함께 앞으로의 협업을 위한 Git-flow를 설계하였다. FE 팀은 2명이기 때문에 git-flow 전략이라고 하기엔 비교적 간단하지만 Branch 설정과 Commit Convention을 함께 설정하였다. 규모가 큰 프로젝트일 경우 아래 우아한 형제들의 Git-flow 전략을 참고하면 효율적으로 프로젝트를 관리할 수 있을 것이다. 우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그 {{item.name}} 안녕하세요. 우아한형제들 배민프론트개발팀에서 안드로이드 앱 개발을 하고 있는 나동호입니다. 오늘은 저희 안드로이드 파트에서 사용하고 있는 Git 브랜치 전략을 소개하려고 합 techblog.woowahan.com 1. Branch 규칙 1. branch 설정 main,.. 더보기
[Git & GitHub] 깃허브로 협업하기 - (1) Organization, clone 이번에 참여하게된 향수 프로젝트에서 새로운 FE 주니어 개발자 분이 합류하게 되면서 깃을 사용한 협업이 반드시 필요한 상황이 되었다. 지금까지는 혼자 프로젝트에 add - commit - push 하는 과정으로 진행하였기 때문에 별다른 문제 상황이 없었지만 이제는 다른 개발자분과 협업하게 된 이상 깃 사용범위를 확장시켜야 하기 때문에 여러가지 깃 명령어를 공부하면서 협업에 꼭 필요한 깃 사용법을 숙지하려고 한다. 1. Github에서 협업용 단체(Organization)를 생성 우선 Github에서 협업용 단체(Organization)를 생성한다. 현업에서는 주로 Organization을 이용하여 협업을 진행한다고 한다. 내 프로필을 클릭하여 > your organizations 에서 확인할 수 있다. .. 더보기
[React] 웹팩(Webpack)에 대한 이해 ✨웹팩(Webpack)이란 무엇인가? 웹팩(Webpack)이란 "JavaScript를 위한 정적 모듈 번들러" 이다. 그렇다면 모듈은 무엇이고, 번들러는 또 무엇일까? 이 둘의 개념부터 알아보자. 모듈(module)이란 ? 자바스크립트에서 모듈은, 어떤 특정 기능과 관련된 JavaScript 코드들(함수)로 이루어진 있는 하나의 파일을 말한다. 자바스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 파일을 여러개로 분리하여 모듈화 하는 등의 다양한 시도를 하게 되었고, 대표적으로 AMD, CommonJs(Node.js에서 사용 - requre(), module.. 더보기
728x90
반응형

티스토리툴바