TIL (37) 썸네일형 리스트형 [React-Query] useInfiniteQuery로 무한스크롤 구현하기 이번 프로젝트를 진행하면서 무한스크롤을 구현해봤습니다.타 회사에서 무한스크롤 구현하는 포스팅을 보고 참고해서 비교해 보면서 코드 리팩토링을 할 부분에 대해 작성해보겠습니다. NoticeTable.tsx"use client";import { DataTable } from "@/components/common/table/table";import { columns } from "./notice-columns";import { Row, getCoreRowModel, useReactTable } from "@tanstack/react-table";import { useRouter } from "next/navigation";import { useGetNoticeQuery } from "../queries/get-.. Tailwind CSS, CSS-in-JS, Styled Components 비교: 왜 Tailwind를 선택했는지? 이번 프로젝트를 진행하면서 Tailwind CSS를 사용했습니다. 이를 선택한 이유와 다른 스타일 라이브러리와의 비교를 통해 설명드리겠습니다.1. 스타일링 접근 방식Tailwind CSS: 유틸리티 클래스 기반의 프레임워크로, 미리 정의된 클래스들을 HTML 요소에 적용하여 스타일링합니다. CSS 파일을 작성할 필요 없이, 필요한 스타일을 HTML에서 바로 적용할 수 있습니다.CSS-in-JS: 스타일을 자바스크립트 파일 내에서 직접 작성하고 관리할 수 있게 해주는 접근 방식입니다. 대표적으로 Emotion, Styled Components 등이 있으며, 스타일을 컴포넌트 내부에 작성해 스타일링과 자바스크립트를 결합할 수 있습니다.Styled Components: CSS-in-JS의 한 종류로, 컴포넌트.. .gitignore가 작동하지 않을때 .gitignore가 제대로 작동되지 않아서 ignore처리된 파일이 자꾸 changes에 나올때가 있는데git의 캐시가 문제가 되는거라 아래 명령어로 캐시 내용을 전부 삭제후 다시 add All해서 커밋하면 된다!git rm -r --cached .git add .git commit -m "fixed untracked files" [Next.js] Nextjs에 Clerk 적용 2 이 전 문서는 클록을 설치하고 세팅하는 방법에 대해서 다뤄봤습니다. 이번엔 페이지에 관련해서 작성해보겠습니다. 5. 회원가입(sign-up) 페이지 만들기// /app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsximport { SignUp } from "@clerk/nextjs";export default function Page() {/* 아래에 SignUp 컴포넌트는 아까 Clerk 사이트에서 Clerk Application 만들 때선택했던 UI 기반으로 컴포넌트를 만든 것입니다.*/ return ; } 6. 로그인(sign-in) 페이지 만들기// /app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsximport { .. [Next.js] Nextjs에 Clerk 적용 1 안녕하세요.오늘은 Clerk을 사용해서 간단한 회원가입/로그인을 해보려고 합니다. 먼저 사이트에 접속 후 왼쪽에서 필요한 부분을 활성화 해주고 Create Application를 해준다.Application 을 만들면 대시보드 페이지로 이동하게 됩니다.이제 아래 표시된 순서에 따라 우리 프로젝트에 Clerk 을 붙여보겠습니다. 1. Clerk 설치npm install @clerk/nextjs2. .env 파일에 환경변수 입력3. Middleware 생성 및 설정// /middleware.tsimport { clerkMiddleware } from "@clerk/nextjs/server";export default clerkMiddleware();export const config = { matcher:.. Git 프로그램 설치 안녕하세요.저번 포스팅에 이어서 gitbub 가입 및 git 설치에 대해 알려드리려고 합니다.Github 가입하기1. github.com 에 접속해서 상단의 sign up 버튼을 누릅니다 2. 각 항목을 채워줍니다 Username은 github 에서 사용할 id 라고 생각하시면 됩니다. username 이 무엇인지 꼭 기억해두세요. 다른 설정에서도 계속 사용합니다! 나중에 바꿔줄 수는 있지만 관련된 설정을 모두 바꾸어야하는 불편함이 있으므로 신중하게 결정해주세요. 하단 verify 버튼을 눌러서 문제에 맞는 답을 골라주세요. 문제를 모두 맞추면 create account 버튼을 눌러서 가입을 완료합니다. Git 설치Windows다운로드: https://git-scm.com/ Git git-scm.com다.. Git commit, 원격 repo, .gitignore 안녕하세요.오늘은 평소에 사용하고 있는 git에 대해 순서대로 정리를 해보려고 합니다.01. Git 구조개발자라면 git을 무조건 사용하실텐데 그렇다면 git과 github는 같은걸까요?밑에 그림을 참고해서 확인해주세요. git에서 관리하는 영역은 크게 3가지가 있습니다.현재 작업중인 Working Directorycommit 할 파일의 예비 저장소, 혹은 추적 대상 파일의 공간인 Staging Area각 유저의 컴퓨터에서 관리되고 있는 로컬 저장소여기서 우리가 직접 눈으로 확인할 수 있는 저장 공간은 Working Directory이며, 현재 프로젝트가 담긴 디렉토리입니다.또 많은 사람이 혼란스러워 하는 부분은 바로 로컬 저장소라고 생각이 듭니다. 내 컴퓨터에 분명이 있는 저장 공간이지만 실제로는 눈에.. 설계 단계_아키텍처 설계 이 글을 쓰게 된 계기는 설계를 진행하면서 용어들에 대해 정확하게 인지하지 못하여 정리하게 되었다. 기본 설계 과정은1. 아키텍처 설계 : 정보 시스템을 서브시스템으로 분할하기 위한 기능 목록과 인프라가 되는 하드웨어, 네트워크, SW 구성 요소 파악2. UI 설계 : 화면의 레이아웃, 화면의 관계 및 전환을 설계3. 데이터 설계 : 코드화할 데이터가 있다면 코드 설계와 데이터가 어떤식으로 저장되고 관리 될 것인지 논리 데이터 설계4. 외부 인터페이스 설계 : 다른 시스템과 연동될 때 주고받는 데이터의 형식과 호출 방식을 설계이렇게로 나눌 수 있는데 이제부터 하나씩 정리를 시작해 보겠다!!!아키텍처 설계컴포넌트 구성과 연계 방법서비스 지향 아키텍처(SOA, 소프트웨어 구성 요소를 사용해 비즈니스 애플리.. 이전 1 2 3 4 5 다음 목록 더보기