KBW's cosmos

필자는 Next.js와 Spring Boot를 이용해 서비스를 개발하고 있다. 이번에 무한 스크롤 기능이 필요했는데, No-Offset 방식의 레퍼런스가 많이 없어 애를 먹었다. 시행착오 끝에 잘 작동하여 이를 정리해보고자 한다. 근데 No-Offset이 뭐지? No-Offset 페이지네이션은 Offset을 사용하지 않고 페이지네이션을 진행한다는 말이다. Offset은 게임 개발할 때 많이 쓰이는 단어이기도 하다. 일반적으로 Offset을 사용하는 페이지네이션은 Offset(어디부터) limit(몇개의) 데이터를 불러올지 결정한다. 즉, 네이버 카페 같은 곳에서 볼 수 있는 위와 같은 번호들이 페이지 넘버이고 이 페이지 넘버가 Offset이라고 생각하면 된다. No-Offset은 이러한 Offset을 사..

React-Query의 useMutation을 커스텀 훅으로 만들어두면 편하다. 필자는 여기에 더해 mutate를 다루는 handler 함수를 정의하고 반환하는 방식의 커스텀 훅을 구현하였다. 아래는 예시 코드이다.(Typescript) 주석친 부분은 무시해도 된다. interface MutationProps { postId: number updatePostRequest: UpdatePostType } function usePostMutation( postInfoBeforeUpdate: PostInfoType, userId: number, updatedTitle: string, updatedContent: string, updatedIsAnonymous: boolean ): { handlePostMuta..

유튜브 등을 보면 영상이 올라온 경과 시간등이 표시된다. 커뮤니티 등을 개발하다보면 글 작성 경과 시간을 표시해줄 필요가 있는데 Dayjs를 사용하면 간단하게 구현할 수 있다. Dayjs는 기존의 구린 자바스크립트 기본 날짜 함수인 Date를 개선시켜준 라이브러리로 무척 가볍고 사용하기 편하다. Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 자바스크립트에서 날짜를 다룬다면 무조건 무조건 무조건 쓸 것을 추천한다. 우선 dayjs 라이브러리를 설치해준다. npm i dayjs 경과시간 함수를 만들기 위해선 duration 플러그인을 사용해야한다. Day.js · 2kB JavaScript ..

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

GA를 붙이는 여러 라이브러리들이 있다. 하지만 유럽권에서 개인정보를 활용한 마케팅에 규제를 가하고 있는 이유로 구글 새로운 방식의 마케팅 지원을 할 수 있게 변화를 주고 있다. 이런 변화에 대응할 수 있도록 라이브러리 없이 Vercel에서 제공하는 가이드 라인에 따라 조금은 투박하게 직접 붙여보기로 했다. _app.js 파일에 GA 측정 ID 추가 보통 태그나 태그 안에 들어갈 내용을 커스텀하기 위해 _document.js 파일을 이용한다. 하지만 아래 예제에 따르면 Next 11 버전에서 추가된 next/script를 이용해 _app.js에서 구현하기를 권고하고 있다. GitHub - vercel/next.js: The React Framework The React Framework. Contribu..

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 강제변환이 유용한 기능인지, 언어 설계상 결함인지는 처음부터 큰 논란거리였다. 여기서는 강제변환의 좋고 나쁨을 충분히 이해하고 자신의 프로그램에 적절한지 스스로 현명하게 판단할 수 있는 역량을 갖추어 보겠다. 어떤 값을 다른 타입의 값으로 바꾸는 과정이 명시적이면 '타입 캐스팅(Type Casting)', 값이 사용되는 규칙에 따라 암시적이면 '강제변환(Coercion)'이라고 한다. 자바스크립트에서는 대부분 모든 유형의 타입변환을 강제변환으로 뭉뚱그려 일컫는 경향이 있어 '암시적 강제변환(Explicit Coercion)'과 '명시적 강제변환(Implicit ..