---
# System prepended metadata

title: J17 Week5 피어세션

---

# J17 Week5 피어세션

## 👋 참가자
| 캠퍼ID |  이름  |
|:----:|:----:|
| J041 | 김영화 |
| J154 | 이윤성 |
| J178 | 장진희 |
| J212 | 표석훈 |
| J217 | 현상엽 |

## ✏️ 진행 순서

1. 간단한 자기 소개

2. 프로젝트 및 진행사항 소개

3. (질문, 주제) 모아서 이야기 하기


## 📝 공유한 내용

- 프론트엔드, 백엔드 포트 다르게 해서 실행하기
    - 서버와 클라이언트 나누기
    - 클라이언트는 webpack, express -> npm start
    - 서버는 바닐라 js, express 사용 -> 클라이언트와 별도 express
    - api를 서버에서 받고 클라이언트에서 해당 api를 요청하는 식으로 구성
    - express generator로 만들었을 때 bin 파일 실행으로 한번에 하는 방법도 존재
    - CORS 설정 : `cors` 라이브러리를 사용했는데 다른 url끼리의 연결 에러를 처리하는 라이브러리


- 자기 관리(번아웃 극복...)는 어떻게 하나요?
    - 작업(주변) 환경을 달리하기
    - 쉴 때 푹 쉬기
    - ~~열심히 하지 않기~~🥕


- 구현과 공부 사이의 조절 방법!
    - 공부를 하면서 구현을 못 하더라도 언젠가 도움이 될 것이다.


- frontend와 backend를 동시에 실행하는 다양한 방법
    - 터미널의 백그라운드를 이용해서 두 서버를 실행하는 방법
    - 프론트엔드와 백엔드를 나눴을 때 배포 환경에서는 다른 서버로 구현해도 되지 않을까!
        - (프론트엔드에서 gh-pages 랑 vercel 이용해서 공짜배포를 해보는 것도 좋을 것 같습니다)
   - 웹팩에서 같은 포트로 돌리면 npm start를 한번만 해도 되는 장점이 있다


- 프론트엔드에서 flex 쓰실 떄 빈 공간은 다들 어떻게 하시나요?
    - 고정된 경우에는 grid 속성을 사용하는 것을 추천
    - 반응형인 경우에는 flex 속성을 사용하는 것을 추천
    - margin, padding도 적절히 이용하여 사용 중


- Github OAuth 하신거 궁금해요
    - redirect_url, clientID등을 사용
    - passport 라이브러리 사용
    - serializeUser, deserializeUser 를 통해 세션에 저장 및 불러오기.

- 프론트 view? render return 방법
    - template literal과 황준일님 블로그 참조
    - hook과 Component class의 공생관계

- webpack dev server 사용하시는 분 계시면 어떤 구조로 돌아가는지 설명해주실수 있나요?
   - dev server는 개발용이고 product 모드로 바꾸면 안의 구조나 코드들이 변경됨


- 하루에 몇시간 주무세요
    - 6시간 이상 잡니다~
    - 7시간 이상 잡니다~
    - 평일 5시간+카페인 자고 주말 몰빵 휴식
