전체 글 54

[Next.js] Image 태그

Image 컴포넌트의 장점자동 최적화 : 이미지 크기, 형식, 품질을 최적화하여 페이지 로딩 속도를 개선.지연 로딩(Lazy Loading) : 화면에 보이는 이미지부터 로딩, 초기 렌더링 시간 단축.반응형 크기 지원 : 다양한 뷰포트 크기에 따라 적절한 크기의 이미지를 로딩.캐싱 지원 : CDN을 통해 효율적인 이미지 제공기본 사용법`Image` 컴포넌트는 `next/image`에서 제공되며, 아래와 같은 형태로 사용됩니다.import Image from 'next/image'; 필수 Propsrc : 이미지의 경로(URL 또는 로컬 경로)alt : 이미지 대체 텍스트, 접근성(웹 접근성 표준)을 위해 필수 추가 Propwidth, height : 픽셀 단위로 이미지 크기를 설정fill : 부모 요소에..

Front-End/Next 2024.11.25

[Next.js] Next.js 주요 기능

컴포넌트``는 Next.js에서 페이지 간의 빠르고 부드러운 전환을 제공하는 컴포넌트입니다.HTML의 `` 태그를 대신 사용하며, 페이지 전체를 새로고침하지 않도록 최적화합니다.import Link from 'next/link';export default function Page() { return 홈페이지로 이동;}useRouter Hook`useRouter`를 통해 URl 쿼리와 페이지 전환을 제어할 수 있습니다.1) 쿼리 값 가져오기Params 값 : 파일명 `[id].js`에 따라 동적으로 URL의 값을 참조합니다.import { useRouter } from 'next/router';export default function Product() { const router = useRouter(..

Front-End/Next 2024.11.20

[Weekly Paper] Next.js 사용 이유

1️⃣ 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.우선 `Next.js`는 `React.js`를 기반으로 한 웹 개발 프레임워크로, `React.js`를 보다 강력하고 편리하게 사용할 수 있도록 다양한 기능을 제공합니다. `React`의 확장판으로 이해할 수 있으며, Vercel에서 개발하여 오픈소스로 운영되고 있습니다.Next.js의 주요 특징1. 페이지 라우팅Next.js는 파일 기반 라우팅 시스템을 제공합니다.Pages 디랙토리 안의 파일들이 URL 경로로 자동 매핑됩니다.2. 빌트인 최적화 기능서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원합니다.코드 스플리팅, 이미지 최적화, Lazy Loading 등 웹 성능을 극대화하기 위한 기..

Weekly Paper 2024.11.19

[TypeScript] 타입스크립트 Enum, Interface 문법

Enum`enum`은 열거형을 정의하는 방법으로, 숫자나 문자열 등을 상수처럼 사용하고, 이를 코드에서 의미 있는 이름으로 사용할 수 있게 해주는 `TypeScript`의 기능입니다.기본 값을 사용하는 방법(숫자 값)`enum`을 정의할 때, 각 항목에 값을 지정하지 않으면 기본적으로 0부터 시작하는 숫자 값이 자동으로 할당됩니다.enum Size { S, // 0 M, // 1 L, // 2 XL, // 3}Size.S = 0Size.M = 1Size.L = 2Size.XL = 3값을 직접 지정하는 방법 (문자열 값)숫자 값 대신, `enum` 항목에 직접 값을 할당할 수도 있습니다.enum Size { S = 'S', M = 'M', L = 'L', XL = 'XL',} 이렇게 하면 숫자 0, 1, ..

[Weekly Paper] 타입스크립트 사용 이유와 동작 원리

1️⃣ JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.`TypeScript`는 `JavaScript`의 상위 집합으로, `JavaScript`의 기능을 모두 포함하면서 추가적인 기능을 제공합니다. 이를 통해 `JavaScript`에서 발생할 수 있는 많은 문제를 해결하고, 대규모 애플리케이션 개발 시 많은 이점을 제공합니다. JavaScript vs TypeScript특징JavaScriptTypeScript타입 시스템동적 타입 언어정적 타입 언어실행 방식인터프리터 언어컴파일 언어독립성독립적으로 사용 가능JS로 컴파일된 후 실행(JS 의존적)유연성타입에 제한이 없음(더 유연)더 나은 구조, 간결함, 일관성, 재사용성파일 확장자.js.ts프로젝트 적합성작..

Weekly Paper 2024.11.11

[TypeScript] 타입스크립트 기본 문법

기본형종류타입문자열string숫자형number불린형booleanundefinedundefinednullnull배열과 튜플배열 타입은 타입 뒤에 `[]` 를 붙여서 정의할 수 있습니다. 만약 이차원 배열을 만들고 싶다면, 배열 타입뒤에 다시 `[]`를 붙이면 됩니다.튜플은 길이와 순서가 정해진 배열로, 대괄호 `[]` 안에 각 요소의 타입을 쉼표로 구분하여 명시합니다.// 배열const arr: string[] = [];arr.push('');arr.push('');// 배열의 배열(이차원 배열)const carts: string[][] = [ ['', ''], [''],];// 튜플let newArr: [number, string] = [27, '신휘철'];객체 타입중괄호 `{}` 안에 프로퍼티 이름..

[TypeScript] 타입스크립트 실행하기

Node.js 프로젝트 생성npm init프로젝트 초기화를 위해 위 명령어를 실행합니다. 필요한 정보를 입력한 후 `package.json` 파일이 생성됩니다.TypeScript 설치npm install --save-dev typescript정상적으로 설치가 되었다면 `package.json` 파일의 devDependencies 섹션에 typescript가 추가됩니다.TypeScript 설정 파일 생성npx tsc --init명령어를 통해 `tsconfig.json` 파일이 생성됩니다. 이 파일은 TypeScript 컴파일러의 설정을 관리합니다.TypeScript 코드를 JavaScript로 변환package.json 파일에 build 명령어를 추가합니다."scripts": { "build": "tsc..

[React] Paging

1. 부모 컴포넌트로부터 Paging 컴포넌트에 prop 받기const Paging = ({ handlePageChange, totalCount, currentPage }) => { }`handlePageChange` : 페이지를 변경하는 함수`totalCount` : 전체 항목의 갯수`currentPage` :  현재 페이지 번호2. 페이지 제한과 전체 페이지 계산const pageLimit = 5; // 보여줄 페이지 버튼 수const totalPages = Math.ceil(totalCount / 10); // 전체 페이지 수 계산`pageLimit` : 화면에 보여줄 페이지 번호 버튼의 갯수를 5개로 제한합니다.`totalPages` : 전체 상품 수(`totalCount`)를 10으로 나누어 한..

Front-End/React 2024.10.24

[React] 스타일 재사용 (styled, css함수)

`styled()` 함수Styled components 라이브러리에서 제공하는 기능으로, 기존 컴포넌트에 스타일을 상속하거나 추가 스타일을 적용할 수 있습니다.// Button.jsimport styled from "styled-components";const Button = styled.button` border: 1px solid #58c4dc; background-color: #343a46; color: #ffffff; padding: 16px; &:hover { background-color: #ffffff; color: #343a46; }`;export default Button;// App.jsimport styled from 'styled-components';impor..

Front-End/React 2024.10.16

[React] useParams로 상세 페이지 구현

React Router 페이지 나누기Route 컴포넌트를 사용하여 리스트 페이지(Items)와 상세 페이지(Item)를 Route로 묶어 서로 다른 컴포넌트로 분리페이지 라우팅 설정import { Routes, Route } from "react-router-dom";import Items from "./Items";import Item from "./Item";function App() { return ( } /> } /> } /> );}export default App; `/items` 경로는 Item 리스트 페이지를 기본으로 표시, `:id` 경로는 각각의 아이템 상세 페이지(Item)를 렌더링합니다.API 호출 함수아이템의 ..

Front-End/React 2024.10.15