세계최강용사의 개발일기

npm install styled-components @types/styled-components

Next.js 배포 후 운영서버에서 확인해보면 이미지를 정상적으로 다운받지 못하는 이슈가 발생한다.

이때 basePath를 설정해주어야한다.

next.config.js에서 basePath를 설정해준다.

이후 이미지 등 정적파일의 경로에 basePath를 추가한다.

ex) 
/images/logo.png 였다면, /app/images/logo.png 로 수정해준다.

* basePath 설정 시 배포 후 URL 도메인 뒤에 basePath가 붙는다 주의하자

FROM node:14.21 AS build
#/usr/src로 이동
WORKDIR /app
# package 복사
COPY package*.json yarn.lock ./
RUN yarn install
#파일전체복사
COPY . .
RUN yarn build

FROM node:14.21  AS runner
WORKDIR /app
ENV NODE_ENV production


COPY .env ./
COPY next-env.d.ts ./
COPY next.config.js ./

COPY --from=build /app/package*.json ./
COPY --from=build /app/yarn.lock ./
COPY --from=build /app/public ./public
COPY --from=build  /app/.next/standalone ./
COPY --from=build  /app/.next/static ./.next/static
RUN yarn install --production
EXPOSE 30000
CMD ["yarn", "start"]

추가로 내가 작업한 dockerfile도 기록용으로 업로드 :)

Material-UI에서 maxWidth는 Container, Dialog, Drawer, Snackbar 등의 컴포넌트에서 사용할 수 있는 속성으로, 최대 너비를 설정할 수 있습니다. 이때, maxWidth값으로 사용할 수 있는 문자열은 다음과 같습니다.

• "xs" (extra small)
• "sm" (small)
• "md" (medium)
• "lg" (large)
• "xl" (extra large)

기본 값은 "lg"입니다. xs, sm, md 등의 값은 화면 크기에 따라 자동으로 조정되는 반응형 디자인에서 유용하게 사용됩니다.

리엑트 배포를하려면 먼저 build를 해야한다.

package.json에 아래와 같이 설정하자.

 "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

GENERATE_SOURCEMAP=false를 사용하는 이유는 sourcemap을 제거하여,

웹 사이트를 개발자도구로 확인시 소스코드가 직관적이지 않게 해준다.

위와 같이 설정 후 npm run build 명령어로 빌드해준다.

그 후 bash창에 아래와 같이 입력한다

npx serve  -s build -l 11119

11119 포트로 빌드한 리엑트가 실행된다.

What React Router ?

리엑트 url path경로에 맞는 화면은 렌더링 해줍니다.

How Install ?

npm install react-router-dom

How use React Router?

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/Second" element={<Second />}></Route>
        <Route path="/" element={<Login />}></Route>
      </Routes>
    </Router>
  )
}

샘플 사용방법입니다.

감사합니다 :)

리엑트 개인프로젝트를 진행하던 중, useEffect와 useState에대해 잘못 이해하고 있어, 

기록을 위해 남긴다.

나는 useEffect를 초기 화면 페이지 로딩 시 한번만 호출해주기 위해 사용한다고 이해하고 있었다 !

deps의 개념은 흐지부지하게 기억하고 있어 이슈가 발생하였는데 발생한 이슈는

나는 setStatus를 2개 사용하고 있다.

1. 날짜 컴포넌트 바꿀때

2. 날짜가 바뀔때 바뀐 날짜를 이용해 API를 호출해 가져와서 셋팅해줄때
버튼을 누를때마다 이게 setState가 비동기적으로 동작하여, 날짜를 찍어보니 서로 상이한 날짜를 찍고 있었다 !!

해당 부분에 대해서 어떻게 해결을할까 고민하던중 ~ useEffect의 deps의 개념이 정리된 블로그를 확인했다 !

useEffect(()=>{
    
 }, [count])

useEffect의 요런 코드가 있을때,

count State가 변경되면 useEffct안의 내용을 실행해주세요로 동기적으로 동작할수 있게 해준다는것을 배웠다 !!

그래서 setState를 두번하던 소스를 제거하고

  useEffect(() => {
    getUnitList()
  }, [weekIdx])

소스를 위와같이 수정하니 정상적으로 동작하는 부분을 확인했다 ~~

마지막으로 하나 더 useEffect에는 컴포넌트가 언마운트(사라질 때) 작업도 해줄 수 있다 

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

보통 마운트 시 (화면에 나타날때)

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API요청
• 라이브러리 사용(D3, video.js등)
• setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

언마운트 시 (화면에서 사라질때)

• setInterver, setTimeout을 사용한 작업들 clear하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

위 작업을 한다고 보면 될 것 같다 !

오늘도 많이 배운다 

다들 화이팅 ~