- 자원 사용을 최소화를 할 수 있도록 만들기.
- 단축속성으로 작성하기
- margin, padding, background 와 같은 것들
- background-image에 꼭 no-repeat 추가해주기.
- function마다 넣어놨던 return은 값을 꼭 반환해야 하는 것들이 아니라면 지워도 좋다.
- return 함수()와 같은 것들.
- .map, .filter와 같은 메소드를 유사배열일 때 사용할 수 있도록 만들기
- checkNumber의 구조 변경
- 7개의 숫자 중 중복이 발생한다면 중복 제거 후 새로운 숫자를 가져올 수 있도록 만들기
- 가져온 값에 필터도 추가한 뒤 7개가 될 때까지 반복하면 괜찮을 것 같음.
- function의 사용 의미. 재사용성에 대해서 생각해보기
- 재사용의 필요가 없다면. 아예 메인함수를 만드는 방법에 대해서 생각해보기.
- sortNumber에서 for문을 이용해서 출력하고 있는 부분 안에 lastNum을 합치는 방법?
- checkNumber의 .map 안에 기본클래스를 따로 분리하기.
- setTimeout은 시점적으로 정확도가 떨어진다.
- 값을 확인하고 1초마다 출력하는게 아닌 i*1000초마다 개별적으로 적용되어 있는 상태이기 때문에 try-catch를 이용해서 값을 정상적으로 받아오지 못했을 때 어떻게 할 것 인지 생각해서 내용 추가하기
- 연계되어 동작할 수 있도록 작성하기.
- function의 재사용성에 대해서 다시 한 번 생각해보기
- 현재의 구조가 아니라 메인 함수를 놓고, 재사용이 필요한 selectNumber? 정도만 분리된 형태로 제작하기.
- slideCount의 매개변수 지우기.
- slide_Frame이 움직여서 출력이 되는 방법에 대해서 생각해보기
- 현재 사용중인 내부의 아이템이 이동하면서 보여지는게 아니라 frame이 이동? frame의 위치를 수정하는 방법을 통해서 아이템이 출력되는것을 바꾸는 방법에 대해서 고민하기
- document.getElementsByClassName에서 document에서 풀페이지 서치가 아니라 개별적으로 검색하는 방법에 대해서 찾고, 적용하기.
- totalNumber, 빈 배열과 쓸모없는 for문 제거하기.
- return에서 값이 어떻게 출력되는지 확인하기 return asdf, function(); 와 같은 내용들.
- IE에서 하단부 배너 위쪽에 흰색의 여백이 보임.
- 디자인은 디자인 가이드를 참고하여 제작
- 회차는 임의, 날짜는 오늘 날짜가 출력될 수 있도록 구현
- "추천 번호 확인"을 클릭 시 1부터 45까지의 숫자 중 보너스 공까지 총 7개의 숫자를 중복없이 랜덤으로 추출하여 공 영역에 1초 간격으로 순차적으로 숫자가 보이게 처리.
- 추천 번호 적중 건수는 임의로 지정.
- 추천 번호 적중 내역은 http request를 활용하여 json/lotto.json 파일을 읽어오고 해당 데이터를 노출.
- 하단에 있는 3개에 있는 값에서 추첨번호 적중 관련 내용
- 추출한 값에서 크고 작은것을 비교해서 6개를 뽑아야 하고 7번째는 그냥 놓으면 될 것 같다.
- IE에서 동작할 수 있도록 만들어보기
- 능력이 된다면.
- 디자인 가이드와 images 파일에 있는 이미지에는 당첨결과 우측에 있는 Lotto 이미지가 없는데 없는대로 하면 될까요?
없으니 없는 쪽으로 만들기.
- 페이지 첫 로딩시 임의의 회차 849회 당첨 결과의 숫자가 출력된 상태로 페이지 로딩이 완료되면 되는것인지 아니면 비어있는 상태로 두면 되는 것인지 궁금합니다.
첫 로딩시 기본값은 비어있는 상태로
- 추천번호확인 클릭 시 랜덤으로 번호를 추출할 때
- 한 번에 숫자 1개를 추출한 뒤 출력하고 다음 숫자를 추출하며, 더 작은 숫자가 나왔을 때 큰 숫자를 우측으로 밀어내면서 만들면 되는 것인지
- 한 번에 숫자 7개를 전부 추출한 뒤 위치를 미리 정해놓고 출력하면 되는것인지
- 한 번에 숫자 7개를 전부 추출한 뒤 작은 숫자가 출력될 때마다 비교하여 큰 숫자를 옆으로 밀어내면서 만들어야 하는지 궁금합니다.
그냥 작은 숫자부터 순차적으로 출력되면 된다고 하셨으니, 7개를 전부 추출 후 앞에있는 6개를 분리 후 작은 순서대로 정렬. 그 다음 앞에서부터 반복문?을 이용해서 패턴이 있는 ID값에 순차적으로 집어넣기. id가 lottoNumber의 i번째 인 것 숫자별로 배경색이 있으니 숫자에 따라서 배경색을 지정하는 부분에 대해서도 생각해보기. 예를들어 textContent가 1-9면 노랑, 10-19는 파랑, 20-29는 빨강, 30-39는 초록, 40-45는 회색이 적용된 클래스를 추가하는 방향으로 제작. 출력 방법은 setTimeout에 1000을 넣어주면 될 것 같음.
추가질문
- 아래쪽에 위치한 "나의 추천번호 보기" 이미지는 동작이 없는건가요? 아니면 저 이미지를 클릭했을 때 ajax로 가져올 수 있도록 해야하는건가요?
- 동작 없음. 그냥 마크업만
- 현재 IE10에서 동작은 확인했지만, IE9에서 추천번호 확인과 Ajax로 값 불러오기는 동작하지 않는데 이 부분을 동작할 수 있도록 수정할 수 있나요?
- classList.add는 className = "lottoNumber 색상Num"; 으로 적용된 클래스 전체가 수정될 수 있도록 변경.
- +=로 작성할 경우 map때문에 이상하게 적용되는것을 확인함.
- 당첨결과 우측에 있는 Lotto 이미지가 없이 만들기
디자인 가이드 대로.
- 구조 .wrap>.lotto_image*3>.content_wrap
-
페이지 첫 로딩시 당첨 결과의 숫자는 비어있는 상태로 만들기
-
json으로 불러와야 할 숫자들이 있는 공간은 어떻게 처리할 것인지 생각해보기
- 예전에 룰렛에 사용했던 방법을 이용하면 좋을 것 같음.
- 경고용 텍스트 앞에 붙어있는 흰색 배경의 투명한?"!"를 만들고 아예 공통클래스로 생성하기
- display를 inline-block 또는 float으로 처리하면 좋을 것 같음.
- wrap 안에 3개의 이미지공간이 필요.
- 내부의 텍스트는 이미지 공간 안쪽에 다시 content_wrap을 생성하던가 하면 될 것 같음.
- 높이가 전부 3등분이 된 상태에서 각자 지정되어 있기 때문에 이미지의 높이를 확인해서 영역의 크기를 잡아야 할 것 같음.
- content_wrap의 border를 없애면 레이아웃이 무너짐.
- font가 가이드에 나온 나눔바른고딕을 적용했지만 사진과 실제 출력된 결과물이 다르게 표시됨.
- font-family를 나눔바른고딕을 기본으로 하고, 숫자만 tahoma 폰트 적용.
- 기본적인 폰트의 색도 #515151로 지정.
- 날짜 동기화
- 날짜를 오늘 날짜, (YYYY. MM. DD)의 형태로 출력해야 함.
- YMD를 출력하는 함수를 확인 후 내부에 textContent로 넣어주면 될 것 같으며, 로딩시 1회만 동작
- "추천번호 확인" 구현
- 작은 것부터 순차적으로 출력될 수 있도록 만들기
- 중복클릭 방지. 결과가 전부 출력되면 다시 클릭할 수 있도록 만들기.
- 한번에 7개의 숫자를 전부 추출 후 인덱스 0-5를 따로 배열로 만든 후, 혹은 마지막 인덱스의 숫자만 따로 출력 후(pop 사용)
내부에 있는 숫자를 작은 숫자 순으로 앞에 배치하기
- 뒤에있는 숫자는 보너스 번호로 가장 마지막에 출력될 수 있도록 만들기
- 내부에 있는 숫자를 당첨결과의 숫자 출력 부분에 출력하기
- for 문을 이용해서 6개를 setTimeout을 이용해서 1초마다 출력할 수 있도록 만들기.
- lottoNum의 i번째마다 값이 저장되어 있고, i*1000 마다 display:none을 display: block으로 만들기.
- for 문을 이용해서 6개를 setTimeout을 이용해서 1초마다 출력할 수 있도록 만들기.
- 따로 빼놨던 마지막 인덱스의 값은 7000 후 출력될 수 있도록 만들면 좋을 것 같음.
- 배열에서 뽑고, 없다면 다시 추출하는 방식으로 하는게 0-45까지의 범위에서 7개의 랜덤한 숫자를 출력 하면서 중복을 찾는것보다 좋아보임.
구현을 할 때,
-
숫자를 정렬 및 분리.
-
숫자를 미리 저장 후 보이는 것을 style로 제어.
-
슬라이드 구현
- 버튼에 slideCount 적용, 0일때와 최대 카운트일 때 동작 X
- 우측 버튼을 누르면 전체에 크기 + margin 값 만큼 이동할 수 있도록 만들기
- 무한 슬라이드를 넣고 싶다면, 혹은 끝에 도착했을 때 처음으로 가도록 만드려면 예전에 했던 코드 다시 찾아서 추가하기.
- Ajax 구현
- 변수1에 new XMLHttpRequest();값을 저장한다.
- 변수1.open('GET', 'json/lotto.json');과 같이 경로를 넣어준다.
- 변수1.send(); 는.... 잘 모르겠다.
- 변수1.onreadystatechange = function() { 로 시작한다. ( IE 호환성은 이 방법을 이용해야 한다. 그렇지 않다면 fetch, then || async await 등을 사용하면 된다.)
- IE 호환성을 위해 ``(백틱)은 사용하지 않는다.
- 내부에 정상적으로 응답이 되었는지 확인한다. if (변수1.readyState !== XMLHttpRequest.DONE) return;
if (변수1.state === 200) { 여기에 정상적으로 가져왔을 때 동작할 코드를 넣어준다. 변수2에 JSON.parse(변수1.response); 를 통해서 파싱한 값을 넣어줬다. 그 값은 객체의 형태이다. JSON.parse()는 객체의 형태로 분리하여 값을 저장하는 것이고 JSON.stringify()는 문자열의 형태로 값을 저장하는 것이다. JSON.parse()로 저장한 값은 Object.key(변수2).length; 로 키의 개수를 확인할 수 있고 Object.values(변수2)[0]; 으로 첫 번째의 값을 확인할 수 있다. }