본문 바로가기

Time waits for no one 😎
FE 개발자 지망생의 기술 블로그입니다.
[Github - https://github.com/inthhh]

블로그 내 검색

🎮 프로그래밍/👩‍💻 개발 공부31

[Springboot] 자바 스프링부트 Swagger 기본 설정 풀스택 미니 프로젝트를 진행하면서 메모하는자바 스프링부트 스웨거 설정 🔥 기본 URL = http://localhost:8080/swagger-ui/index.html#/ 🔥 디렉토리 = java/com/example/{프로젝트 이름}/global/config 🔥 build.gradle 의존성 추가 내용// swagger implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.7.0' 🔥 SwaggerConfig 기본 코드package com.example.kiosk_be.global.config;import io.swagger.v3.oas.annotations.OpenAPIDefinition;import io.swagger... 2025. 5. 1.

[NextJS] SSR 컴포넌트 vs CSR 컴포넌트 (Server Component와 Client Component), 페이지 로딩 사용자 경험 문제 해결 Next.js - Server Component와 Client ComponentNext.js 13부터 app 디렉토리 구조가 도입되면서, 컴포넌트가 서버(Server) 컴포넌트인지, 클라이언트(Client) 컴포넌트인지 구분하는 것이 매우 중요해졌습니다.이 글에서는 Server Component와 Client Component가 무엇인지, 각각 어떤 특징과 장단점을 가지는지, 그리고 언제 어떤 걸 선택해야 하는지 쉽게 정리해보겠습니다.Server Component란?Next.js에서 page.tsx나 layout.tsx 컴포넌트들은 기본적으로 Server Component입니다.Server Component는 서버에서 렌더링되고, 최종 결과만 HTML로 브라우저에 전달됩니다.✅ Server Compone.. 2025. 4. 26.

[NextJS] 이미지를 렌더링하는 두 가지 방법 : img vs Image 태그 비교 Next.js에서 img와 Image 컴포넌트 비교Next.js로 웹 개발을 하다 보면 이미지 태그를 삽입할 때 두 가지 선택지가 있다. 바로 HTML 기본 태그인 와 Next.js가 제공하는 컴포넌트다. 비슷해 보이지만, 두 방법은 내부 동작 방식, 성능 최적화, 사용 편의성 측면에서 상당히 다르다. Next.js를 사용하는 목적 자체가 최적화된 React 개발이기 때문에, 이미지 또한 전용 컴포넌트를 적극 활용하는 것이 바람직하다."빠르고 가벼운 웹 서비스" 를 목표로 한다면, Next.js의 를 사용하자! 1. 기본 정의 정의HTML 표준 이미지 태그Next.js 전용 고성능 이미지 컴포넌트제공 주체브라우저 표준Next.js (next/image 모듈)2. 동작 방식 태그그냥 HTML 그 자체.. 2025. 4. 26.

[NextJS] 라우팅 시스템 종류 - app vs pages 디렉토링 방법 비교, 폴더 구조 예시, useRouter 오류 디버깅 Next.js에서 app 디렉토리와 pages 디렉토리는각각 다른 방식으로 페이지 라우팅을 처리하는 두 가지 방법을 제공합니다.1. pages 디렉토리import { useRouter } from 'next/router'; 사용/pages 구조 예시 index.tsx → / about.tsx → /about # 👤 사용자용 client/ dashboard.tsx → /client/dashboard profile.tsx → /client/profile blog/ [id].tsx → /client/blog/:id # 🛠 관리자용 admin/ i.. 2025. 4. 25.

[React] Redux 개념 및 역할, 파일 구조 디렉토링 개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다. Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다. 여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다. 1️⃣ Redux 파일 구조 (in React typescript) /redux /actions # 액션 정의 (이벤트 발생 시 필요한 데이터 정의) categoryActions.ts /reducers # 리듀서 정의 (상태가 어떻게 변경될지 결정) categoryReducer.ts store.ts # 스토어 설정 (전체 상태 관리) 각 파일은 Redux의 핵심 요소인 액션(Acti.. 2025. 2. 27.

[React] Hook "useState" is called in function ~ that is neither a React function component nor a custom React Hook function. Error :React Hook "useState" is called in function "windowFour" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".eslintreact-hooks/rules-of-hooks -> 컴포넌트 함수 이름 첫 문자를 대문자로 바꿔주면 해결된다. 리액트의 컴포넌트는 항상 대문자로 시작할 것!!!! 2025. 2. 5.

이전 1 2 3 4 ··· 6 다음

728x90

티스토리툴바