인프런 커뮤니티 질문&답변

안녕하세요

개발환경으로 code-server을 사용하고 있는데, 문제를 도대체 알 수 없어서 질문 올립니다 ㅜㅜㅜㅜㅜㅜ

code-server은 실행시 도메인/proxy/port로 실행 주소가 설정됩니다.

그래서 hot-reload 웹소켓 연결을 설정하기위해서 webpack.config.ts에

client: {
      webSocketURL: 'ws://0.0.0.0:443/proxy/3090/ws',
    },

를 추가했습니다.

index.html에서 src = "./dist/app.js"로 했습니다

다른 모든 코드는 setting/ts를 그대로 npm i 했습니다.

(여기까지 사전 참고내용)

이전 강의에서 App.tsx에 <div>코드어쩌구저쩌구</div>는 잘 나타났습니다.

이번 강의에서 react-router-dom을 도입해서 code-server에서 실행을 하게되면 브라우저에 아무런 화면이 나오지 않습니다.

그러나, code-server가 아닌 구름ide에서 같은 파일을 실행할 경우(서버 주소가 proxy가 아니게됨)

정상적으로 동작합니다.

1. react-router-dom을 사용했더니 화면이 안보이기때문에 react-router-dom 과 관련된 문제라고 추측합니다.

2. code-server에서 실행주소뒤에 'proxy/3090'이 붙었을때 문제가 생겼기 때문에 code-server 관련 문제로 추측됩니다.

3. code-server사용시 가져온 파일이랑 구름ide사용시 가져온 파일 비교해보면, code-server에서 파일2개를 못 가져온것 같은데, 이게 문제인거 같기도 합니다.

또한, App.tsx에서 react-router을 빼고 다음과 같이 입력후 실행해보았습니다.

import React from 'react';
import loadable from '@loadable/component';
import { Switch, Route, Redirect } from 'react-router-dom';

import SignUp from '@pages/SignUp';

const App = () => {
  return <SignUp />;
};

export default App;

 가져온 파일 목록은 다음과 같고, 정상적으로 signup화면이 나타납니다.

이번에는 loadable/component가 문제인가 싶어서, 이걸빼고 다음과 같이 App.tsx를 입력했습니다.

import React from 'react';
import loadable from '@loadable/component';
import { Switch, Route, Redirect } from 'react-router-dom';

import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';

const App = () => {
  return (
    <Switch>
      <Route path="/login" component={LogIn} />
      <Route path="/signup" component={SignUp} />
    </Switch>
  );
};

export default App;

그랬더니 이전과 같이 화면에 아무것도 안나옵니다.

도대체 뭐가 문제인지를 모르겠네요 ㅜㅜㅜ