[포스코x코딩온] 풀스택 부트캠프 13주차 정리 -1 3차 프로젝트 회고

12월 말에 2차프로젝트를 끝냈는데 2주만에 다시 시작이다...

typescript를 이용한 express와 react를 이용할 것 같은데 실습도 많이 안해봤고 리액트 라이브러리도 잘 모르는데 잘 할 수 있을지 의문이다. 그래도 해야지

 

01/15
현지인에게 외국어 질문 + 통화 서비스라는 컨셉으로 진행하기로 했고 백엔드 express + react with typescript로 프로젝트를 구성하기로 했다.
다만 프론트(리액트)와 백엔드를 연결하는 방법을 몰라서 집에 가서 알아오기로 했다.
그렇게 구글링 하다보니 express에서 sendfile을 이용해서 url 요청의 경우 react로 연결하는 방법이 있었다.
그래서 react의 src 파일 안에 express server.js 파일을 만들고 타입스크립트 서버측(port 8080)에서 요청에 해당하는 response가 없을 경우 app.get('*'/ function() {}) 구문을 통해서 react가 처리하게 했다,
문제 없이 실행되었으나 이렇게 하면 3000번 포트는 열리지 않았는데 리액트가 담당하는 부분은 잘 돌아갔다.

결과적으로 리액트를 쓰기는 하는 것 같은데 리액트의 포트인 3000번이 돌아가는지 의문이 들었다.

이 의문을 해결하기 위해서 내가 직접 다른 cmd에서 3000번 포트를 먼저 점유한 후 8080 포트 서버를 열어서 잘 작동하는지 확인하면 될 것 같은데 이미 파일을 지워버렸다. 나중에 기회가 되면 하기로 하자.
또한 이렇게 했을때 ES6 (모듈, import 방식) 과 common js(require) 방식에 충돌이 있었다.
그래서 ts config 파일 compile 부분에 "esModuleInterop": true, 등을 넣고 구글링 해서 그럴듯 한 건 전부 때려박았는데 
tsc를 통해 js파일을 통해서 서버를 여는 건 가능했지만 ts-node 자체를 통해서 (ts-node app.tx) 파일을 실행하니까 export라는 구문 자체를 인식하지 못했다.그래서 그냥 빌드를 해서 ts 파일을 js 파일로 만들고 실행하는 것이 마음 편할 것 같다는 생각이 들었다.

 

- 이건 import 문법이 es6가 아닌 common js에서는 require로 이용하는데 default method를 import로 받고 그 함수를 작동시켰을 때만 나타나는 에러이다. 물론 "esModuleInterop": true를 해주면 ts-node로 실행할 때는 오류가 뜨지 않지만 배포할 때는 이 오류가 다시 나옴을 확인했다. 어차피 build를 해야 사용자 입장에서 속도가 빠르기 때문에 결국 express 같이 default 함수를 import 하고 이를 호출하는 경우에는 common js문법인 require를 쓰는 걸로 내적 합의를 보았다.

 

 

01 / 16 
팀원분이 해온 리액트, 서버 연결방식과 내 방식이 달랐다.
나는 기본적으로 모든 요청은 서버에서 들어오게 하고 만약 response 할 수 없는 request가 있으면 app.sendfile을 통해 react 가 담당하게 했는데 다른 분은 리액트 서버와 백엔드 서버를 둘 다 열고 유저는 리액트 포트인 3000번 포트를 이용하고 거기서 post 등의 요청하면 서버가 받아서 답을 해주는 구조로 만드신 것 같다.
근데 이렇게 되니까 나는 서버 하나만 여는 건데 어떻게 3000번 서버를 이용하는 리액트가 동작하는 건지 의문이 다시 들었다. 그리고 cors를 쓰신다는데 뭔지 모르겠다. 그래서 cors를 쓰는 서버 두개를 만드는 방법으로 진행하기로 했다.

(다음 날이 되어서야 알았다. 프론트 주소의 포트에서 서버 포트이 자원을 사용할 수 있게 해주는 구문인 것 같다. 즉, 포트 번호 또는 서버 자체가 다르더라도 이용할 수 있게끔.)
그래서 client와 server의 폴더가 두개가 있다. 다만 typescript로 안짜오셔서 내가 집에가서 다 바꾸기로 했다.
어제 고생해서 바꾼 기억이 있기 때문에 나름대로 수월하게 했다.
그리고 어저께 ts-node로는 export 구문에서 에러가 떠서 서버측 app.js 실행하지 못하는 이유를 알았다.
react와 같은 tsconfig.json을 이용하고 있어서인것같다. 그래서 서버측 tsconfig.json 파일을 새로 만들고
컴파일러 옵션을
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}
으로 하니까 ts-node app.js를 이용해서 가능하게 되었다. 그렇다는 말은 nodemon도 활용할 수 있다는 뜻.

그래서 packge.json에 npm start 에 대한 script 또한 작성했다.
근데....  이게 프로젝트 사전구성인데 사전구성만 하는 데도 이렇게 오래걸리지

 

 

01/17

로그인, 회원가입 로직을 짜야하는데 로그인을 유지하려면 세션같은 도구가 필요하다.

저번 프로젝트에서는 쿠키와 jwt token을 이용해서 짰었는데. (이렇게 짜면 jwt token을 사용하는 이유가 없다. 참고하자) 다만 모든 요청이 서버를 거쳐서 들어오는 것이기 때문에 나는 요청이 있을때마다 jwt token의 유효성 검사를 실행하는 미들웨어를 만들어서 유효성 검사를 실행했다.

근데 이번에는 get 요청같은 경우는 리액트 서버를 이용하고 post 같은 api 요청만 서버를 이용하게 된다.

그렇게 되면 로그인 유효성을 어떻게 해야할 지 모르겠어서 리더님께 질문했는데 프론트 측에서 해야한다는 답변을 받았다. 그래서 대충 찾아보다가 react-cookie 라는 라이브러리를 발견했다. 프론트인데...? 쿠키?? 잘 이해가 가진 않지만 한번 라이브러리를 사용해보았고 쿠키를 만드니까 context나 props로 전달하지 않아도 전체 컴포넌트에서 이용이 가능한 것 같다. 아마 쿠키에서 가져오는 거겠지. 그리고 쿠키를 만드는 곳은 리액트 서버..? 라고 예측할 수 있을 것 같다. 그렇게 되면 백엔드 서버에서 토큰이나, 정 안되면 그냥 isLoggedin = true; 같은 boolean 값을 가져와서라도 구현할 수 있을 것 같다.

쿠키같은 걸로 설정하는 이유는 expire 설정을 할 수 있기 때문이다. 다만 아직 확인은 안해봐서 바로 expire 되면 만료가 되어서 사용을 못하는건지, 어떻게 되는지는 확인 해봐야겠다.

 

알고보니까 그냥 백엔드 단에서 세션 설정을 통해 다른 포트번호에서도 세션 값을 저장할 수 있었다. 다만 이렇게 되면 REST API의 기능을 달성하지 못하게 될 뿐이다.

 

 

그리고 cors가 뭔가 했는데 이거 보니까 이해가 됐다.

브라우저에서 기본적으로 API를 요청 할 때에는 브라우저의 현재 주소와 API 의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있게 되어 있습니다. 만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다.

근데... 웹팩은 지금 하는 프로젝트에서는 크게 필요가 없는 것 같은데... 어떻게 쓰는건지 누가 설명좀 해주면 좋겠다.

 

-- 결국 빌드할 때 썼다. 이 때는 react 자체에 웹팩이 내장되어 있는 지 모르고 새로 설치했다가 sass-loader 버전이 react 버전이 아닌 수작업으로 깔아버린 그 버전으로 인식해서 문제가 발생했다. 그래서 웹팩을 삭제하고 react에 있는 웹팩을 이용해서 build를 했다.