# 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 백앤드 성향을 엿볼 수 있었다. - 하나의 프로젝트를 전체적으로 진행하면서 프론트와 백의 통신과정을 제대로 알게 되었다. - 항상 클론 프로젝트 마음은 먹고있었는데 이번에 완성까지 갈 수 있어서 좋은 경험이었습니다. - 코딩 속도가 좀 빨라졌나 했는데 역시 아직 느리다는 것을 느꼈다 - 분명 하루종일 열심히 했는데 피어세션 내 코드리뷰가 금방 끝남..