KDT0_CyinHayeon 디아블로 홈페이지 클론코딩 (기존 pr closed) #74
Conversation
|
아쉬웠던 점을 명확히 아시고 어려웠던 부분을 해결한 내용을 리드미에서 확인할 수 있어서 좋은 것 같습니다! 저도 이처럼 프로젝트를 하면서 기록을 많이 해 놔야겠다고 반성하고 갑니다 |
|
리드미에 명시하는 방법자체가 너무 인상적이네요 많이 배우고 갑니다. 만드시느라 고생하셨습니다 |
|
디아블로 사이트 그 자체가 아닐까 싶을 정도로 폰트, 배치까지 모두 다 굉장히 디테일하게 구현해주신 것 같습니다. 그리고 Commit 내역을 작성해 주신 것에서도 요소별로 어떤 부분이 추가/변경 되었는지 직관적으로 알 수 있어 좋다는 생각이 드네요. 한 수 배워갑니다 :) 고생 많으셨어요~! |
|
getCookie 함수로 생년월일을 받아서 영상 재생 여부를 구현하신 부분이 매우 인상적입니다..! |
asset/.DS_Store
Outdated
There was a problem hiding this comment.
이런 OS가 생성한 파일은 커밋되지 않게 .gitignore에 추가해둬주세요!
| @@ -0,0 +1,70 @@ | |||
| @font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format("truetype")} | |||
There was a problem hiding this comment.
가급적이면 배포하는 단계에 minify를 진행하고 형상 관리하는 파일에는 formatting을 해두는 게 좋아 보입니다!
| $("#month").append("<option selected value='0"+ i +"'>"+ i + "월" +"</option>"); | ||
| }else{ | ||
| if (i < 10){ | ||
| $("#month").append("<option value='0"+ i +"'>"+ i + "월" +"</option>"); |
There was a problem hiding this comment.
String.prototype.padStart()를 활용하시면 가독성을 향상시킬 수 있을 것 같네요.
| for(var y = (year); y >=(year-100); y--){ | ||
| $("#year").append("<option value='"+ y +"'>"+ y + "년" +"</option>"); | ||
| } | ||
| for(var i = 1; i <= 12; i++){ |
There was a problem hiding this comment.
이정도는 알아보기 편하긴 하지만, magic number 사용은 가독성을 위해 가급적 지양하시는 게 좋습니다.
const YEAR_TO_MONTH = 12;
for(let i = 1; i <= YEAR_TO_MONTH; i++) {
// ...| month = month >= 10 ? month : '0' + month; //month 두자리로 저장 | ||
| var day = date.getDate(); //d | ||
| day = day >= 10 ? day : '0' + day; //day 두자리로 저장 | ||
| return year + '' + month + '' + day; //'-' 추가하여 yyyy-mm-dd 형태 생성 가능 |
There was a problem hiding this comment.
${year}${month}${day}처럼 template literal을 사용하시면 가독성을 높일 수 있습니다.
| var x, y; | ||
| var val = document.cookie.split(';'); | ||
|
|
||
| for (var i = 0; i < val.length; i++) { |
There was a problem hiding this comment.
for loop의 조건문에서 length를 확인하면, 매 iteration마다 값을 확인해야합니다.
for (let i = 0, max = val.length; i < max; i++) {}Array 고차 함수를 쓰는 것이 가독성에 좋고, 위와 같이 초기문에 iteration을 진행할 수를 작성해두는 게 성능에 좋습니다.
| exdate.setDate(exdate.getDate() + days); | ||
| // 설정 일수만큼 현재시간에 만료값으로 지정 | ||
|
|
||
| var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString()); |
There was a problem hiding this comment.
escape() 은 deprecated되었습니다.
encodeURIComponent()를 사용해 인코딩하시는 걸 권장드립니다.
There was a problem hiding this comment.
@marshallku
헛 세세한 코멘트 감사드립니다 :)!
참고하여 수정하도록 하겠습니다 ㅎㅎ
디아블로4 홈페이지 클론 코딩
사이트 주소
작업 기간
2023년 7월 27일 ~ (진행중)
(과제 제출 후에도 보완 할 예정)
기술 스택
구현 내용
아쉬운 점
사이트 로딩에 오래걸림, 최적화 작업 필요해결(2)크롬 외 모바일 / 맥OS 사파리 등 타 브라우저에서 연령 확인 js가 동작하지 않음해결(1)해결 내용
→ button onclick으로 연령 인증 스크립트 구현하는 방식을 form action으로 변경
→ Img Loading lasy 추가, iframe 탭 활성화 시 src값 입력, window load 후 html fadeIn 효과