Front-End 32

Codeit Sprint 11기, 지난 6개월 동안

이전 직장을 그만두고 프론트엔드 개발자로 전향하는 것은 큰 결심이 필요했다. 개발자 취업이 어렵다는 것은 이미 잘 알고 있었고, 이전 직장에서 본 수많은 지원자를 보며 경쟁이 얼마나 치열한지도 실감하고 있었다. 하지만 더 늦기 전에 도전하지 않으면 나중에는 더욱 어렵게 느껴질 것 같았고 무엇보다도 개발에 대한 호기심과 궁금증이 컸던 것 같다.처음 웹 퍼블리셔를 준비할 때부터 프론트엔드 개발자가 되는 것이 최종 목표였다. 그러나 실무에서 퍼블리싱 업무를 하다 보니 개발과 점점 멀어지는 듯한 느낌을 받았고, "퍼블리싱과 개발은 다르다"는 이야기도 종종 들었다. 그래서 막연한 불안감이 있었고, 정말 내가 프론트엔드 개발자로 전향을 할 수 있을지 의문이 들었다. 그럼에도 불구하고 도전하기로 마음먹은 이유는 지금..

Front-End 2025.03.07

[React Query] React Query 기초 정리

React Query 개념과 활용법React Query는 React 애플리케이션에서 서버 상태 관리를 간편하고 효율적으로 처리할 수 있게 해주는 라이브러리입니다. 서버 데이터를 가져오고, 캐싱하고, 동기화하며, 업데이트할 때 강력한 기능을 제공합니다.useQuery() Hook`useQuery()`는 데이터를 가져오는데 사용됩니다. 컴포넌트가 마운트되면 `queryFn`에 정의된 함수가 자동으로 실행되어 데이터를 가져옵니다.const { data, isLoading, isError } = useQuery({ queryKey: ['posts', username], queryFn: () => getPostsByUsername(username), staleTime: 60 * 1000, // 60초 동안 fre..

[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

[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, ..

[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