박주니 개발 정리

설명전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 ..

작업을 하다보면 react만 실서버에 올려서 테스트하고 싶을 때가 있습니다. 그런데 nginx 셋팅을 하면 많이 번거롭고 생각처럼 잘안될때가 있는데 이때 추천하는 방식입니다. 저는 mobaxterm에서 진행했습니다.https://junhee6773.tistory.com/entry/mobaxterm-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95 mobaxterm 사용 방법1. user sessions에서 프로젝트 폴더 생성 후 우클릭▶session settings 클릭합니다. 2. ssh 클릭 후 remote host, user private key를 넣고 specify username을 체크해서 ubuntu를 입력합니다. 3. Bookmark settings에서 Session nam..