[이동훈_FrontEnd] 3주차 과제 제출합니다. #27
Conversation
dooohun
left a comment
dooohun
left a comment
There was a problem hiding this comment.
수고하셨습니다!
내용이 어려워서 따라가기 힘들었을 거 같은데, 잘 수행해주셨네요! 고생하셨습니다.
리뷰한 내용 보고 답글 달아주세요!
| create(winningNum); | ||
| showResult(winningNum); |
There was a problem hiding this comment.
create 함수와 showResult 함수는 lotto 함수보다 밑에 정의되어 있는데, 문제 없이 잘 실행되는 이유는 무엇일까요?
There was a problem hiding this comment.
자바스크립트의 함수 호이스팅 개념 덕분입니다.
const 함수 = function() {} 같이 함수 표현식을 사용했으면 호이스팅이 안되지만
function 함수명() {} 같이 함수 선언문을 사용하면 호이스팅이 적용됩니다.
| const wrapperBall = document.createElement("div"); | ||
| wrapperBall.className = "wrapper-ball"; | ||
|
|
||
| winningNum.forEach((num, index) => { |
There was a problem hiding this comment.
forEach 메서드를 쓰셨군요👍
배열에서 자주 사용하는 고차 함수들을 학습하시면 큰 도움이 됩니다!
lotto.js
Outdated
| } | ||
|
|
||
| function purchase() { | ||
| pcArray = []; |
There was a problem hiding this comment.
변수를 선언할 때 var const let 과 같은 키워드를 사용하지 않아도 잘 실행이 됩니다.
왜 그럴까요?
There was a problem hiding this comment.
- pcArray가 이미 전역변수로 선언되었기 때문입니다.
- var, let, const 없이 변수를 선언하면, 해당 변수는 암묵적으로 전역 객체 속성으로 등록이 되기 때문입니다.
There was a problem hiding this comment.
네 맞습니다. 암묵적으로 전역 객체 속성에 등록이 됩니다. 지금은 복잡한 코드가 아니라서 크게 상관 없지만, 전역 객체에 변수가 선언되면 예상치 못한 에러, 부작용을 접하게 됩니다. 그렇기에 let, const로 변수를 선언하는게 좋습니다.
index.html
Outdated
| </div> | ||
| <div class="plus-result-01"></div> | ||
| <div class="plus-result-02"></div> | ||
| <!-- <div class="wrapper-result"> |
| } | ||
| } | ||
|
|
||
| function pcShow(pcNum) { |
There was a problem hiding this comment.
pcShow 라는 함수명과 pcNum 파라미터를 좀 더 의미있는 이름으로 지어주면 좋을 거 같아요.
| function pcShow(pcNum) { | |
| function showLottoNumbers(lottoNumbers) { |
컴퓨터가 생성한 로또 번호를 보여주는 함수로 보여서 위와 같이 이름을 지었습니다. 조금 더 의미있어 보이지 않나요?
그리고 pcNum 이라는 변수명은 컴퓨터가 생성한 숫자 정도로 이해가 되는데, 로또 번호는 반드시 6개가 생성되기 때문에 numbers 라고 지칭하면 좋을 거 같아요. 여기서 로또 번호들 이기에 lottoNumbers 라고 만들어봤어요.
처음에 이름짓는게 어렵지만, 다른 사람이 내 코드를 보고 이해할 수 있을 정도로 변수명을 지어주면 좋습니다!
lotto.js
Outdated
|
|
||
| wrapperResult.appendChild(text2); | ||
|
|
||
| pcNum.forEach((a) => { |
There was a problem hiding this comment.
| pcNum.forEach((a) => { | |
| lottoNumbers.forEach((lottoNumber) => { |
lottoNumbers로 변수를 지었기 때문에 a 라는 변수명보다 lottoNumber로 더 의미있는 변수를 쉽게 만들 수 있습니다.
There was a problem hiding this comment.
확실히 좀 더 의미가 있는 lottoNumber 로 변수명을 짓는게 좋은 것 같습니다.
Yejin0070
left a comment
Yejin0070
left a comment
There was a problem hiding this comment.
수고하셨습니다! 사소한 질문 몇 가지 남겨놨으니 읽어보시고 고민해보시면 좋을 것 같아요!
| <div class="frame"> | ||
| <div class="wrapper"> | ||
| <div class="wrapper-header"> | ||
| <div class="wrapper-header-text1"><div>로또 번호 생성기</div></div> |
There was a problem hiding this comment.
전체적으로 div태그를 많이 사용하신 것 같아요. 더욱 다양한 태그를 사용해보면 어떨까요? 예를 들어, header 영역은 header태그를, 또한 어떤 동일한 아이템을 담은 박스가 있을 경우 ul, li 태그 등을 쓸 수 있을 것 같아요.
시멘틱한 코드를 작성해보도록 신경을 써봅시다!
| <div class="create-num">번호 생성</div> | ||
| <div class="wrapper-ball"> | ||
| <div class="ball ball-01"> | ||
| <div class="ball-number">?</div> | ||
| </div> |
There was a problem hiding this comment.
div 태그는 블록 레벨 요소이고 span 태그는 인라인 요소입니다.
| height: 100vw; | ||
| width: 100vh; |
There was a problem hiding this comment.
px과 vw/vh, %의 차이점은 무엇일까요? 모두 섞어서 사용하신 것 같아 질문드립니다!
There was a problem hiding this comment.
px는 절대 단위로 반응형에는 적합하지 않고 고정되어 있습니다.
%는 부모 요소의 크기에 따라서 비율을 정하고
vw / vh는 뷰포트 기준 단위로 브라우저 화면 크기에 맞춰줘 반응형 디자인에 좋습니다. (width: 50vw는 화면너비의 50%를 의미합니다)
3 participants
[이동훈_Front] 3주차 과제 제출합니다.