너와 나의 프로그래밍

Pagination 기능은 정말 프론트엔드 개발에 있어서 피할 수 없는 개발중에 하나라고 생각한다. 항상 개발을 할 때 마다 페이징 처리가 은근히 어렵다는걸 항상 느끼는데 구글링을 해봐도 각자 방식이 너무 다를뿐더러 너무 코드도 뒤죽박죽이라 최대한 깔끔하게 최대한 쉽게 구현을 해봤다. 개발 환경은 React.js와 Typescript를 기본적인 디자인은 Styled Component를 사용했다. 조건 🤔 다양한 페이지네이션의 조건들이 있지만 이번에 구현해본 조건은 아래와 같다. 한 페이지 안에 10개씩 보여주기 페이지의 번호는 5개씩 보여주기 페이지 번호를 눌렀을 때 해당 페이지를 보여주기 페이지 번호의 양 옆에 뒤로 건너뀌기, 뒤로 가기 / 다음 페이지로 가기, 앞으로 건너뛰기 첫 시작과 맨 끝으로 갔..

문제😳 Next.js에서 지원하는 Link를 활용하여 getServerSideProps를 실행하는 페이지로 이동을 했을 때 getServerSideProps에서 API가 정상적으로 호출되지 않는 문제가 발생했다. 분명 Next.js 공식문서에서는 getServersideProps는 next/link와 next/router로 호출한 페이지에서 정상적으로 실행된다고 나와있었다. next/router로 이동한 페이지에서는 getServerSideProps가 정상적으로 동작했고 이동한 페이지에서 새로고침을 해도 정상적으로 API를 호출했지만 next/link로 이동한 페이지에서는 이동했을 때는 최초 페이지를 호출 했을 때는 정상적으로 동작했지만 뒤로가기를 눌러 다시 페이지를 이동했을 때는 API가 제대로 호출되..

JWT 방식과 NextAuth 라이브러리를 활용한 로그인 기능을 개발하면서 Cookie를 통해 Refresh Token을 재발급해 로그인을 하는 기능을 구현하는 과정에서 Cookie가 브라우저에 제대로 박히기 않는 문제가 발생했다. 문제😳 1. Server-Side로 로그인 API 호출 -> Repsonse 값으로 Access Token 값과 Cookie에 Refresh Token을 브라우저에 삽입. 2. Response Header에 Refresh Token의 Cookie 값이 정상적으로 들어온 것을 확인. 3. 하지만 실제 브라우저에는 Cookie가 Setting되지 않는 문제가 발생. 4. 혹시 몰라 Client-Side에서 로그인 API를 호출 -> Cookie에 Refresh Token이 정상적..

요즘 프론트엔드 개발을 하면서 “display: flex” 속성을 활용해서 퍼블리싱을 하는 경우가 굉장히 많다. flex가 나오면서 정말 어려웠던 가로/세로 가운데 정렬도 쉽고 Element의 배치도 굉장히 쉬워지고 정말 많이 좋아졌지만 이놈의 “height: 100%”의 고질적인 문제를 참 해결하기 힘들었다. 개발을 하면서 부모 flex-container에서 height값을 주지 않고 자식의 height 값으로 부모의 height값을 자동으로 조절해주는 기능을 만들게 되었는데 이번에 찾아본 결과 “flex-grow: 1”이라는 속성을 찾아냈고 그 속성으로 height: 100% 문제를 해결했다. 문제 😳 child에 height: 100% 속성을 부여해줘도 전혀 움직이지 않고 높이가 제각각인 문제가 발..

Dropdown 기능이나 SelectBox를 div와 input Element tag로 Custom하게 구현할 때 div의 목록을 클릭해서 클릭한 목록의 대한 값을 input value에 나타내주는 기능을 구현하는 도중 onClick을 했을 때 onChangeHandler로 변경하는 input value의 값을 어떻게 변경해야하는지 막막함이 다가왔다. input의 value의 값을 useState Hook을 통해 변경할 때 대표적으로 2가지 방법을 사용하고 있다. // 1. 단일적으로 선언 const [data, setData] = useState(""); // 2. Object에 리스트형식으로 초기값 선언 const [data, setData] = useState({ testData: "" }) 변경할..

MSW(Mock Service Worker)?🤔 프론트엔드 개발을 하다 보면 백엔드 API 개발 속도와 맞지 않아 화면 단을 먼저 개발하거나 자신이 직접 Dummy Data를 만들어서 억지로 개발하는 경우가 많이 있었다. 그때마다 억지로 JSON을 데이터를 만들거나 백엔드 API 개발을 하는 데까지 기다렸다가 겨우 일정에 맞춰 빡빡하게 개발하는 경우가 많았는데, 최근에 토이프로젝트를 하면서 찾게 된 게 MSW(Mock Service Worker)다. MSW는 말 그대로 Mock 데이터를 API 통신처럼 사용하게 해줄 수 있는 라이브러리이다. 백엔드에서 앞으로 나올 API의 명세서가 있거나 Request에 필요한 어떤 키값을 쓸 건지 전달만 받으면 따로 별도의 서버를 사용하지 않고도 프론트엔드 프로젝트에서..