박주니 개발 정리

설명전react CRA 방식으로 진행하게 되면 tailwindcss가 제대로 호환되지 않아서 적용되지 않습니다.그리고 vite방식으로 진행할때 CRA로 하는것보다 최적화가 되기 때문에 vite 방식으로 설명하겠습니다. tailwindcss 공식 홈페이지https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com 1. vite를 설치하고 선택사항은 react..

1. Dockerfile 파일에 기존에 node 버전 및 사용하고자하는 포트 확인해서 생성 및 적용합니다. DockerfileFROM node:22-alpine AS buildWORKDIR /appCOPY package.json package-lock.json ./RUN npm installCOPY . . RUN npm run buildFROM node:22-alpineWORKDIR /appCOPY --from=build /app/build ./buildRUN npm install -g serveEXPOSE 3000CMD ["serve", "-s", "build", "-l", "3000"]추가 설명)node:22 ▶ 서비스 적용된 node 버전 (적용된 node 버전으로 변경)3000 ▶ 서비스 적용된..

react 기본 환경 셋팅이 완료가 되고 퍼블리셔한테 기본적으로 html, assets폴더 images 폴더로 구성된 퍼블이 완료된 템플렛을 전달 받았을때를 가정해서 설명하겠습니다. 1. public 폴더에 assets, images 폴더를 넣습니다. 2. src 폴더에 components, pages폴더를 추가합니다. 3. 전달 받은 템플렛에서 메인이 되는 html 코드기반으로 Header, Sidebar, Bottom 따로 구분해서 만들고 그것을 한번에 관리하는 Layout.js 생성 후 적용합니다.// src/components/Layout.jsimport Header from "./Header";import Sidebar from "./Sidebar";export default function ..

1. Context 폴더를 생성하고 LoginContext.js를 생성합니다. createContext를 적용해서 초깃값을 셋팅 후 provider, context 부분을 export 합니다. import React, { createContext, useState } from "react"; // LoginContext 생성 const LoginContext = createContext(); // LoginProvider 컴포넌트 const LoginProvider = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [username, setUsername] = useState(""); const value = ..