---
# System prepended metadata

title: Week 2 Peer Session

---

# Week 2 Peer Session 
> 참여자 : J069_문예은, J186_정수원, J198_주재우, J200_지화영

## 활동목적 
- PR review 회고
- 어려웠던 점 돌아보기 
- 새로 배운 점 돌아보기
- 구현하지 못했지만 해봄직한 것들 생각해보기

## 시연
> [정수원](https://clone-airbnb-j186.herokuapp.com/) • [주재우](https://airbnb-clone-j198.herokuapp.com/) • [문예은](https://j069-airbnb.herokuapp.com/) • [지화영](http://j200.herokuapp.com/)

## 코드 리뷰
### 문예은
> [코드링크](https://github.com/MoonYeeun/javascript-w1-airbnb/tree/J069)
- 지화영
    - public/javascripts 에서 main.js 남겨놓으신 이유가 있으신가요?
    - `new Date(today.setDate(today.getDate() + 1)).toISOString().slice(0,10);` 저도 이렇게 사용했는데 
    `Date 값을 입력값으로 받아서 toISOString().substr(0,10) 처리를 해주는 함수로 분리해보면 어떨까요?` 라는 리뷰를 받았습니다.
    - public/javascripts:36,37 if문이 의미가 있나요? 
- 정수원
    - 꿀팁 : script에서는 `document.getElementById('id_name');` 대신 ` id_name` 으로 바로 html 태그?객체?를 불러올 수 있어요!
    - `/service` 는 어떤 기준으로 나눈 스크립트 폴더인가요?
        - `/public/scripts` 와 역할이 어떻게 다른가요?
    - `&times;` 어떤 의미의 코드인가요?? :`/views/login.pug`
    - `alert('!{msg}')` 처음보는 변수(리터럴?) 활용인데, 설명해주세요!
        - `alert(`#{msg}`)` 와의 차이를 알려주세요  (이스케이프가 안먹어요..)
- 주재우
    - 검색창에서는 로그인 회원가입 버튼이 작동하지 않습니다.
    - 로그인 체크하실때 email과 암호화된 pwd두개의 객체로 한번에 찾아서 결과값의 길이를 비교하면 간단해졌을것 같습니다.
    - 쿠키 maxAge : 에 매직넘버보다 보기 쉽게 상수로 적는게 좋다고 리뷰받았습니다.

### 정수원
> [코드링크](https://github.com/JungSWon/javascript-w1-airbnb/tree/J186)
- 문예은
  - public/scripts/header.js에서 
`const cookies = document.cookie.split('; ')` 이 코드는 쿠키에 저장된 값을 불러오는 건가요? 
  - `const relativeUrl = window.location.pathname+window.location.search` 이렇게 하면 현재 보고 있는 페이지 url 을 가져올 수 있는 건가요?
  - 
- 지화영
    - public/scripts/search_result.js는 어떻게 동작하는지 설명해주세요
    - views/search.pug:11,12 _는 안쓰는 변수 표현할때 쓰는걸로 알고 있는데 __는 다른건가요?
    - pug에서 id값은 원래 안사용하시나요?
- 주재우
    - 매직넘버 대신에 상수를 사용하면 좋을 것 같아요.
    - 로그인 체크시 email과 pwd 값을 같이 넣어서 비교하면 로직이 간단해 질 것 같아요.
    - document 검색 비용이 크다고 들어서 최소한으로 검색하는것이 좋을 것 같습니다.

### 주재우
> [코드링크](https://github.com/joojaewoo/javascript-w1-airbnb/tree/day10)

- 정수원 
    - ㅋㅋㅋㅋ재우님 지금보니 `style.css`에 다 넣으셨네요 안헷갈리셨나여 ㅋㅋ
        - 61라인 : `::after` 설명해주세요! `::before`도 있는 것만 알고 쓰임은 알아보지 않았어요🙄
        - 292라인 : `border-right: var(--border-style-01);` 이것도 설명 부탁드려요 고급 css를 쓰셨군요 🌝
        - 재우님 체크인, 체크아웃 날짜 지정하고 색칠하는 로직 설명해주세요 왜냐면..  
    - `/modal` , `/component` 나눈거 좋은 것 같아요 저는 컴포넌트로 떄려넣었

- 문예은
  - css에서 > 키워드를 많이 사용하셨는데 ex) `option_list > div > button` >의 역할이 무엇인지 설명해주세요! option_list div 와 다른 의미인거겠죠..?
  - 
- 지화영
    - public/javascript/list.js:15 difList는 어디서 나온걸까요?
    - 백엔드 부분인데 routes/search.js 검색 부분 설명해주세요

### 지화영
> [코드링크](https://github.com/ji3427/javascript-w1-airbnb/tree/j200)

- 정수원 
    - 대박.. 메인배너 이미지 소스의 크기를 확인하였읍니다,, 에어비엔비에서 어떻게 가져오셨는지 알려주세요.. 
    - `border-right-width: 0.3px;` 픽셀은 소숫점 단위가 안먹히는 걸로 알고있는데 이거 적용 되셨나요?! - `/result.css`
        - 저는 얇은 border를 쓰고 싶은 경우는 inner shadow였나? 그거 썼어요 
    - `error.js` 에서 검색 값이 하나라도 없으면 에러를 띄워주셨는데 html input 태그 안에 `required` 옵션 걸어주면 submit 이 막힙니다! 
        - 혹시 다른 이유가 있어서 에러 핸들링 하신건가요? 
    - 예은님께 드린 팁과 마찬가지로 script 에서는 id 이름으로 바로 html 객체를 가져올 수 있어요! 

- 주재우 
    - 혹시 세션에만 시간을 정해주신 이유가 있나요?(쿠키에는 maxAge를 설정하지 않으신것 같아서 여쭤봅니다)
    - 매직넘버를 상수로 리팩토링하여 사용하면 좋다고 합니다.
- 문예은
  - 회원가입할 때 null value가 들어가는 것 같아요! 프론트나 백에서 이메일, pw와 같이 필수적인 값에는 null value 체크를 해주는 것이 더 좋을 것 같습니다!


## 리뷰리뷰 
- 변하지 않는 값엔 let 말고 const를 쓰는 습관 
- CSS 위주의 리뷰를 받음, camelCase/snake_case 일관되게 사용
- for 문 대신 map, filter 등 고차함수를 사용하는 습관 
- class, id 혼용하지 않고, 사용 기준을 세워보자 
- pixel, rem, em 유닛 기준을 세우고 일관되게 사용하자 
- 리뷰를 받고 최대한 반영을 했지만 놓친 부분은 계속 찔림 🌝


## 한 주 회고
- 구현하지 못한 기능들이 아쉬움, 주말에 구현할수있을까 
    - 메인 페이지 레이아웃, 숙박 총 금액, 폰트 설정 등등.. 
- css 로 고통받는 한 주 였습니다....ㅎ
    - <img src='https://i.imgur.com/4yRY6zo.png' width='150px'>
- 잘알지 못하는데 검색만해서 가져다 쓰는게 많아서 아쉬웠습니다.시간을 내서 공부할 필요성을 느꼈습니다.
  - 완전 공감합니다....
  - 특히 레이아웃...
- 풀스텍으로 홈페이지 만드는 것이 처음이였는데 많이 도움을 주셔서 잘 만들수 있었다. 전체적인 코드에서 부족한 점이 많은것 같다. 
- 왜 나만 리뷰 없어
- 팀원 그리고 본인의 프론트앤드 or 백앤드 성향을 엿볼 수 있었다.
- 하나의 프로젝트를 전체적으로 진행하면서 프론트와 백의 통신과정을 제대로 알게 되었다.
- 항상 클론 프로젝트 마음은 먹고있었는데 이번에 완성까지 갈 수 있어서 좋은 경험이었습니다.
- 코딩 속도가 좀 빨라졌나 했는데 역시 아직 느리다는 것을 느꼈다
    - 분명 하루종일 열심히 했는데 피어세션 내 코드리뷰가 금방 끝남..