728x90 반응형 전체 글104 프론트엔드 빌드 도구 Vite로 마이그레이션하기 @는 경로 별칭(alias)으로, 일반적으로 src 디렉토리를 의미하도록 설정하는 Webpack이나 Vite의 설정이다. // 복잡한 상대 경로 import Button from '../../../../components/ui/Button'; // 단순한 절대 경로 import Button from '@/components/ui/Button'; 이를 사용하는 이유는 폴더 이동 시 상대 경로는 전부 바꿔야 하지만 @를 쓰면 영향을 덜 받는다.이 방식은 자주 사용되고 있고 컴포넌트 수가 많아질수록 효과가 커진다. | Vite Vite는 차세대 프론트엔드 빌드 도구로, 기존의 Create React App 보다 훨씬 빠른 개발환경과 최적화된 번들링을 제공한다. / React 프로젝트를 새로 시작할 경우np.. 2025. 5. 26. React 컴포넌트화(Componentization) React 같은 컴포넌트 기반 프레임워크에서 반복되는 UI 조각을 작은 단위의 재사용 가능한 컴포넌트를 나누는 과정을 컴포넌트 추출(Component Extraction) 또는 컴포넌트화(Componentization) 라고 한다. 다양한 곳에서 같은 형태의 UI를 공통 컴포넌트로 만들어 사용하도록 기본적으로 만들면 좋은 것들 부터 시작하겠다. | Button 컴포넌트버튼은 일관되면서도 위치나 기능에 맞게 색상을 다르게 하고 크기 조절도 가능하게 한다. 예를들면 글쓰기, 저장, 삭제, 목록 등 여러 상황에서 버튼을 자주 사용되는데 색상만으로도 직관적으로 알 수 있게 한다. frontend/src/components/ui/Button.jsimport React from 'react';import clas.. 2025. 5. 19. 게시판에 반복되는 Tailwind 공통 UI 클래스 분리하기 Tailwind를 쓰다보면 className이 태그안에 길게 늘여 쓰거나 비슷한 페이지에 반복되어 효율적이지도 않고 유지관리에도 쉽지 않다. 여러가지의 이유로 공통 UI 부분을 컴포넌트로 분리하고 이를 가져다 쓰는 방식을 사용하게 된다. | 클래스 분리 방법 1) 공통 UI 컴포넌트로 분리하기게시글 박스, 버튼, 타이틀, 날짜 같은 요소들을 반복해서 쓴다면 아래처럼 컴포넌트로 뽑는게 효율적이다. 예) components/PostItem.jsexport default function PostItem({ title, author, date }) { return ( {title} {author} · {date} );} 2) tailwind.config.js 확장 or C.. 2025. 5. 16. Tailwind UI 적용하기 지금까지 기본 틀만 갖춰져 있던 페이지들에 Tailwind를 적용해 좀 더 보기 좋게 만드는 작업을 하려한다. | 게시판 리스트 수정 frontend/src/pages/PostListPage.jsimport React, { useEffect, useState, useContext } from 'react';import axios from 'axios';import { Link } from 'react-router-dom';import { AuthContext } from '../context/AuthContext';const PostListPage = () => { const [posts, setPosts] = useState([]); const [loading, setLoading] = useSt.. 2025. 5. 13. Header 구성 변경 및 추가 - Sidebar 어쩌면 가장 중요하다고 볼 수 있는 부분이다.홈페이지에서 상단에 메뉴 구성이 사용자가 쉽게 접근할 수 있게 하고 전체 레이아웃을 잡아주는 역할을 하기 때문에 충분히 공을 들일만한 것 같다. 그럼에도 아직은 부족하겠지만 일단적으로, 데스크탑일때는 가로로 메뉴가 보이게 하고 모바일일때는 햄버거 버튼을 클릭해야 사이드바 메뉴가 세로로 나타나도록 하는 작업이다. | 사이드바 컴포넌트 생성 frontend/src/components/Sidebar.jsimport React from 'react';import { Link } from 'react-router-dom';export default function Sidebar({ isOpen, toggleSidebar, user, logout }) { if (!i.. 2025. 5. 12. 페이지 라우팅 설정하기 이전 작업에서 라우터를 분리해 정리를 했었다. 이제 실제로 어떤 컴포넌트를 어떤 경로에 보여줄지를 앱 전체 흐름 안에서 구현할 수있게 페이지 라우팅 설정을 해야 한다.Layout을 라우팅에 적용하고 각 경로에서 알맞은 페이지가 보이게 하는 것이다. | 페이지 라우팅 설정a) 레이아웃에 children 대신 Outlet 적용 frontend/src/Components/Layout.jsimport Header from "./Header";import Footer from "./Footer";import { Outlet } from 'react-router-dom';export default function Layout() { return ( .. 2025. 5. 11. 반응형 내비게이션 - Navbar, lucide-react 이전에 만든 Header에 반응형 내비게이션을 추가해서 모바일에도 대응하도록 하기 위한 필수적인 작업이다. | Navbar 추가레이아웃 뼈대는 갖췄으니 이제 사용자가 실제로 페이지 이동이나 사용자 경험(UX)을 할 수 있도록 구성해야 한다. frontend/src/componets/Navbar.jsimport React, { useState } from 'react';import { Menu, X } from 'lucide-react'; // 아이콘 (lucide-react 설치 필요)const Navbar = () => { const [isOpen, setIsOpen] = useState(false); return ( My Project setIsOpen.. 2025. 5. 10. 공통 Layout 컴포넌트 - Header, Footer, Layout Tailwind 설치를 마치고 적용 완료가 되었으니 공통 레이아웃 컴포넌트를 만들어 전체 페이지 구조를 통일 시키는 작업이 필요하다.크게 Header와 Footer로 구분하고 전체 Layout 구조를 잡는다. | 폴더 구조components 디렉터리 안에 Layout.js, Header.js, Footer.js 파일을 생성한다.frontend/└── src/ ├── components/ │ ├── Layout.js │ ├── Header.js │ └── Footer.js └── pages/ └── HomePage.js | Header네비게이션이나 로고 등을 위치시켜 모든 페이지에 공통으로 보여질 수 있는 구조를 컴포넌트로 만든다. frontend/s.. 2025. 5. 9. React프로젝트에 Tailwind CSS 설치 및 설정 Tailwind CSS는 유틸리티 클래스 기반으로 아주 작은 단위의 클래스들을 조합해서 스타일을 구성한다.Bootstrap처럼 미리 만들어진 컴포넌트가 거의 없어 스타일을 설계하는 자유도가 높다.React 개발시 빠르게 디자인을 만들수 있어서 선택했다. | 구조현재까지의 구조를 보면 크게 이렇게 나위어 있는데 당연하겠지만 React(클라이언트)에 적용하면 된다.my-project/├── backend/ ← Node.js + Express (서버)└── frontend/ ← React (클라이언트) ├── src/ ├── public/ ├── package.json └── ... | Tailwind 설치 frontend 디렉터리 위치에서 설치를 진행한.. 2025. 5. 8. 마무리 작업 - HomePage, 이동버튼 추가 끝이라서 마무리 작업이아니라 시작을 위한 마무리라고 볼 수 있겠다.아직 css나 레이아웃을 적용하지 않아서 이쁘진 않지만 기능은 어느정도 기본을 갖춘 홈페이지가 되었다. 좀 더 자연스런 흐름을 갖도록 몇가지를 추가한다. 그러나, 이번 작업은 임시적인 것이다. | 메인 페이지 작성 프로젝트를 npm run dev로 실행하게 되면 http://localhost:3000 페이지가 열리는데 아직 루트 페이지를 지정하지 않아서 빈화면이 뜰 것이다. 메인 페이지를 만들어 루트로 지정하고 게시글 목록과 로그인 버튼이 보이게 해본다. frontend/src/pages/HomePage.jsimport React, { useEffect, useState, useContext } from 'react';import { .. 2025. 5. 8. 이전 1 2 3 4 ··· 11 다음 728x90 반응형
