전체 글15 [Next.js] 페이지네이션 구현하기, 무한스크롤 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 무한스크롤 구현하기4. 전체 코드 [1. 초기설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DComment = { id: number; nickname: string; content: string;}; 3. api연결- getComment- 페이지값(page)과 한 페이지에 보여줄 댓글 개수(limit)를 통해 댓글을 조건에 맞게 가져온다- 반환 타입은 앞서 설정한 DComment의 배열 형.. 2024. 7. 4. [Next.js] 페이지 기반 페이지네이션 구현하기 (react-query) 목표- 리액트 쿼리를 사용해 재사용성이 높은 페이지네이션 훅을 만든다- 한 페이지에 보여줄 데이터 개수를 정할 수 있다- 페이지 번호를 클릭하면 해당 페이지로 이동한다- '이전', '이후' 버튼을 사용해 다른 데이터를 렌더링할 수 있다- 마지막 페이지일 경우, 이후페이지를 클릭할 수 없고 첫 페이지일 경우 이전 페이지를 클릭할 수 없다 목차1. 초기 설정2. 데이터 불러오기 (렌더링하기)3. 페이지 버튼 구현하기 - 훅 구현4. 데이터 가져오기 및 이전페이지, 이후페이지 구현하기 - 훅 구현5. 전체 코드[1. 초기 설정]0. 예시로 댓글을 렌더링하는 코드를 구현한다 1. 서버 코드- 여기에서 확인할 수 있다 2. 데이터 타입// src/types/comment.type.tsexport type DCom.. 2024. 7. 4. [Next.js] Modal 구현하기 목표- 재사용성이 높은 모달을 구현한다- '모달 띄우기' 버튼을 클릭하면 화면에 모달이 뜬다- 모달 외부는 어둡게 변한다- 모달이 뜬 상태에서는 스크롤 기능을 막는다- 모달 외부를 클릭하면 모달이 사라진다- 모달에 다양한 기능을 넣는다 목차1. 기본 환경 구성2. 모달 컴포넌트 생성하기3. 화면에 모달 띄우기4. 모달에 기능 넣기5. 전체 코드 [1. 기본 환경 구성]1. 버튼 생성- 아래와 같이 모달을 띄울 버튼을 생성한다- 코드// src/app/page.tsx"use client";import React, { useState } from "react";function Home() { return ( 모달 띄우기 );}export default Ho.. 2024. 6. 25. [Next.js] 이미지 업로드하기 (Nest.js연결 및 S3에 업로드) 목표1. 클라이언트에서 이미지를 선택해 저장을 누르면2. 서버를 통해 S3에 저장된다 목차1. S3버켓 만들기 및 서버 코드 작성하기2. 서버와 클라이언트 연결하기3. 클라이언트 로직 구현하기 1. S3 버켓 만들기 & 연결되는 서버 코드 작성하기- 아래 링크에서 확인할 수 있다- https://sangddong-back.tistory.com/59 2. 서버와 클라이언트 연결하기(1) 서버 코드 수정- cors 설정하기- 포트를 클라이언트와 겹치지 않도록 설정하기 (필자는 서버 3001, 클라이언트 3000으로 설정했다)// main.tsimport { NestFactory } from '@nestjs/core';import { AppModule } from './app.module';async fun.. 2024. 6. 14. [html/css] flexbox 0. 기초 코드 html css 결과 1. flexbox 설정 (1) display: flex; - flexbox를 구성하는 기초 문장이다 - 요소들을 포함하는 컨테이너 박스의 css설정을 바꿔준다 → display: flex - flex와 flexbox의 차이는 거의 없다 2. 수직, 수평정렬 (1) align-items : 수직정렬 제어 (2) justify-content : 수평정렬 제어, 요소들의 너비도 제어할 수 있다. (3) 대표적인 속성들은 아래와 같다. (난 센터를 좋아해서 앞으로 둘 다 센터에 둘 것) align-items : initial; justify-content : initial; align-items : center; justify-content : center; align-i.. 2023. 10. 17. [html/css] 링크(새 창) 보안 문제 해결하기 선요약 : 링크 안에 아래와 같이 rel=noopner를 추가한다. html코드에 새 창으로 열 수 있는 링크 코드를 삽입하는 방법은 아래와 같다 내 깃허브 링크 그런데 이 코드는 새 창에서 외부로 이동하는 것이므로, 보안문제가 발생할 수 있다. 따라서 해결방법은 아래와 같다 1. rel="noopner" 삽입 내 깃허브 링크 2. 이미지로 문구를 대신하는 경우 로컬에 저장하기 - 난 주로 이미지를 img라는 폴더 안에 저장하여 사용한다. - 인터넷에 올라와있는 이미지의 링크를 삽입하는 경우 보안 문제로 이어질 수 있다. - 로컬에 저장하여 사용하는 것이 가장 안전하다. - 이때에도 rel="noopner"는 사용해야한다 2023. 10. 17. [html/css] css의 단위 0. 선요약 상위 항목 (부모) - body 폰트사이즈 50% body 폰트사이즈 50% div 폰트사이즈 1.5rem html 폰트사이즈 10px body 폰트사이즈 50% div 폰트사이즈 1.5rem 부모에 따른 변화 O - % em % em % em rem 부모에 따른 변화 X - px rem px rem px 결과 1. 단위 요약 단위 의미 설명 % 백분율 기본사이즈의 백분율로 나타낼 수 있다. em 배수 모든 상위 항목으로부터 영향을 받는다 rem 배수 최상위 항목으로부터 영향을 받는다 px 픽셀 픽셀 단위 2. 단위 비교 (1) 상위 항목이 없는 경우 - 아래와 같은 코드가 있을 때 비교해보면, 각각 큰 차이는 없다 - 기본값(initial-scale)을 기준으로 변동하기 때문이다. 기본 h.. 2023. 10. 16. [html/css] Box Layout : border 먼저 레이아웃을 요약하면 다음과 같다. 1. border란? - padding처럼 content를 감싸지만 색을 다르게 설정할 수 있다. - 주로 테두리 디자인을 위해 사용된다. - border관련 기능이 아주 많은데, 내가 자주 쓰는 기능만 설명하겠다. 2. border의 주요 기능 css 결과 border-style : 테두리의 기본 형태를 설정한다. - border의 형태를 나타내는 설정이 있어야 border가 보이기 시작한다. 없으면 안보인다. (기본값 : 없음) - 왼쪽의 solid 스타일 외에도 solid 외에도 여러 가지 형태가 있는데 아래에서 추가로 설명하기로 한다. - border-style: solid dashed dotted hidden 등으로 각각 다르게 설정할 수 있다. - bor.. 2023. 10. 15. [html/css] Box Layout : content, padding 먼저 레이아웃을 요약하면 다음과 같다. 1. content - div, span, h, p 등등 안에 작성되는 내용 그 자체이다. - 다른 레이아웃 설정을 통해 높이 또는 너비를 바꿀 수 있다. 2. pading - content의 크기 자체는 그대로 두되, 너비와 높이 영역을 늘여주는 역할을 한다. - background 색상을 따로 지정할 수 없고, content와 같은 색으로 자동 설정된다. - 테두리 설정 전 width&height 대신 영역을 넓혀주는 역할로도 쓸 수 있다 - width&height 대신 같은 크기의 padding을 사용하면 자동으로 content가 수직·수평에서 가운데에 위치한다. - 코드의 길이를 줄일 수 있다. 코드 결과 html css1 - padding이 설정되어있지 않.. 2023. 10. 15. 이전 1 2 다음
