실습 결과물 화면
다시 버튼을 누르면 alert창 띄우는 기능 추가
기존에는 '다시' 버튼을 누르면 바로 초기화 됐지만, alert 기능을 추가해서 팝업창을 띄어보았다.
전체 코드를 이해하는 게 너무 어려웠다..그래서 화려한 기능을 추가하기 보단 배운 것 위주로 적용해보려고 노력했다!
코드 한 줄만 추가했지만 뿌듯하다 하하
*Node 기반 Javascript 프로젝트
노드 기반 서버에서 파일을 읽을 때는 style, script, html 문서를 요청시에 제공하기 때문에 각각 따로 파일을 생성 하고 url주소에 지정된 파일을 할당해주어야한다.
로또 추첨 앱 만들기 - 서버에 url과 파일 지정해주는 JS 작성
const server = http.createServer(function (req, res) {
//서버 앱 내에서 접근할 경로를 해석
const pageURL = req.url; //요청주소 읽어들이기
const pathname = url.parse(pageURL, true).pathname; //parse메소드가 주소 해석
logger(req, res, function (err) { //logger: 기능이 구현될 것
if (err) return console.log(err)
if (pathname === "/"){ // pathname ==='/' (3000이면) 경로따로 지정하지 않음
fs.readFile("./public/lotto.html", function(err, data){ //lotto.html 제공이 기본값
res.statusCode = 200;
res.writeHead(200, { 'Content-Type': 'text/html' })
res.end(data)
})
1. http.createServer: 서버 만들기
2. pageURL, pathname : 요청한 주소를 읽고, parse 메소드가 주소 해석
3. if) pathname==="/" : 3000번으로 끝나면 기본 제공값으로 lotto.html 제공
} else if (pathname === "/style.css"){ //주소 경로가 해당 파일을 요청하면 제공하겠다는 if문
fs.readFile("./public/style.css", 'utf8', function(err, data){
res.writeHead(200);
res.write(data);
res.end();
})
} else if (pathname === "/script.js"){
fs.readFile("./public/script.js", 'utf8', function(err, data){
res.writeHead(200);
res.write(data);
res.end();
})
4. else if) pathname ==="/style.css" : 지정된 주소로 style.css 파일 제공
5. else if) pathname ==="script/js" : 지정된 주소로 script.js 파일제공
HTML, Stlye 코드 작성하기
lotto.html, style.css 파일은 크게 어려운 내용은 없었다. 간단한 디자인과 필요한 기능들을 구현한 정도이기 때문에 script 파일을 집중적으로 보았다.
Script 코드 작성하기 - useState 활용하기
import { useState } from 'react'
import "./App06.css"
1. useSate, css 파일 import
function App(){
const [lottoNumbers, setLottoNumbers] = useState([])
const today = new Date()
const year = today.getFullYear()
const month = today.getMonth() + 1
const date = today.getDate()
const now = `${year}년 ${month}월 ${date}일 `
2. lottoNumbers 상태변수를 setLottoNumbers 상태함수를 통해 값 변경하는 useState 함수
3. 현재시각을 나타내는 변수 설정
return <div className="container">
<div className="lotto">
<h3><span>{now}</span>로또 번호 추첨</h3>
<div className="numbers">
{lottoNumbers.map((num, idx) => {
return <div className="eachnum" key={idx}>{num}</div>
})}
</div>
4.lottoNumbers.map(num,idx): map메서드는 콜백함수이지만 num, idx 매개변수를 포함하여 반환한다.
이때 num은 화면에 출력하고 idx는 키값으로 가지고 있는다.
<button onClick={() => {
const lottoNumbers = []
while(lottoNumbers.length < 6){
let ran = Math.floor(Math.random() * 45) + 1
if(lottoNumbers.indexOf(ran) === -1){
lottoNumbers.push(ran)
}
}
setLottoNumbers(lottoNumbers)
5. 랜덤숫자 뽑는 onClick함수: lottoNumbers에 빈 배열 생성, 길이가 6개 이상일 경우 반복문 중지
6. 1부터 45까지의 숫자를 랜덤으로 뽑아 ran에 저장, 중복이 아닐 경우 배열에 저장
<button onClick={() => {
setLottoNumbers([])
alert('다시 로또 번호를 추첨합니다.')
}}>다시</button>
</div>
</div>
}
export default App;
7. 다시 실행하는 onClick 함수: setLottoNumbers 배열을 비우기, alert 창 띄우기
8. App 내보내기
이번 과제에서는 useState 함수의 사용이 제일 중요했다. 상태변수와 상태변화함수를 이용해 데이터를 실시간으로 변경할 수 있도록 구현하는 게 이해하기 어려웠다. 코드를 한 줄 한 줄 복습했더니 수업 때보단 조금 더 이해가 되는 거 같다.