📌Live share
이번에 페어프로그래밍 과제를 받고 처음으로 Live share의 존재를 알게 되었다. vs-code 확장 프로그램 중 하나인데 사용방법은 간단하다. 일단 vs 코드에서 Live share를 설치한다.
참여방법
우선 사용하기 위해서는 로그인을 해야한다.
github / MS / guest 계정으로 로그인 할 수 있는데, guest의 경우에는 읽기 전용으로 프로젝트에 참가가능하다. 여기서 share 버튼을 누르면 내 프로젝트링크를 만들어 다른사람에게 공유할 수있고 join 버튼을 누르고 다른 사람의 링크를 입력하면 다른사람의 프로젝트를 공유받을 수 있다.
참고사이트:
VScode liveshare를 활용한 협업
📌 JS로 숫자 야구프로그램 만들기
오늘 팀 과제로 나온 것은 숫자 야구프로그램 만들기였다. 조건은 다음과 같다.
- 컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. (ex) 123, 759
- 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다.
- 컴퓨터는 사용자가 입력한 세자리 숫자에 대해서, 아래의 규칙대로 스트라이크(S)와 볼(B)를 알려줍니다.
- 숫자의 값과 위치가 모두 일치하면 S
- 숫자의 값은 일치하지만 위치가 틀렸으면 B
- 기회는 무제한이며, 몇번의 시도 후에 맞췄는지 기록됩니다.
- 숫자 3개를 모두 맞춘 경우, 게임을 종료합니다.
1.랜덤으로 숫자 3개 만들기.
주어진 조건은 이렇지만 숫자야구는 중복된 숫자가 있으면 안되므로 중복도 안되는 걸로 생각하고 순차적으로 코드를 짜기로 했다. 일단 컴퓨터가 랜덤으로 숫자 3개를 만들게 하되, 위치도 같이 비교해야함으로 배열로 만들도록 코드를 짰다.
let makeNum = []
for (i=0; i<3; i++) {
randomNum = Math.floor(Math.random() * 10)
if (makeNum.indexOf(randomNum) === -1) {
makeNum.push(randomNum)
} else {
i--
}
}여기서 if문이 생긴 이유는 중복방지 때문이다. indexOf를 통해 값이 -1로 반환됐을 때,즉 랜덤으로 생성한 숫자와 배열 안 숫자들을 비교해서 그 값이 없을 때만 push되도록 한 것이다. 그런데 이렇게 만들면 같은 값이 비교된 시점에서 멈춰서 배열 요소가 2개가 될 수 있기때문에 else{i--}으로
다시 돌아가도록 설정해준다.
2.야구게임 프로그래밍
이 부분부터는 팀장님과 함께 코드를 짰다. 사실 나는 거의 업혀간 것에 가깝기 때문에 이 기회에 코드를 더 잘 이해해보려고 한다.
const readline = require("readline");
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
console.log("컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요!")
let count = 1 //몇번째 시도인지 확인용
process.stdout.write(`${count}번째시도 : `)
rl.on("line", (x) => {
let userNums = []
let userNum = x
if (!!Number(userNum) == false) { // 문자 입력 방지
console.log('숫자를 입력해주세요.')
process.stdout.write(`${count}번째시도 : `)
}
else if (userNum.length !== 3) { // 3자리 숫자 입력
console.log('3자리 숫자를 입력해주세요.');
process.stdout.write(`${count}번째시도 : `)
} else {
userNums = userNum.split('');
let strikes = 0
let balls = 0
for (let i = 0; i < 3; i++) {// 숫자비교
for (let j = 0; j < 3; j++) {
if (makeNum[i] === Number(userNums[j])) {
if (i === j) {
strikes++
} else {
balls++
}
}
}
}
let answer
if (balls == 3) {
answer = ('3B')
} else if (strikes == 3) {
answer = ('3S')
} else {
answer = (`${balls}B${strikes}S`)
}
console.log(answer)
if (strikes === 3) {
console.log(`${count}번만에 맞히셨습니다.\n 게임을 종료합니다.`)
rl.close()
}
else {
count++
process.stdout.write(`${count}번째시도 : `)
}
}
})
여기서 if 중첩문을 사용하였는데 makeNum[i] === Number(userNums[j]는 배열 자체를 비교해서 인덱스값과 상관없이 값이 있으면 나오고 i === j는 인덱스까지 같아야 strikes 숫자가 늘어나도록 만들어졌다. 이 것만으로도 야구 게임의 기능은 완성했지만 여유가 있었기에 입력값을 제한하는 식으로 업그레이드했다.let userNum = x과 let strikes = 0사이에
if (!!Number(userNum) == false) { // 문자 입력 방지
console.log('숫자를 입력해주세요.')
process.stdout.write(`${count}번째시도 : `)
}
else if (userNum.length !== 3) { // 3자리 숫자 입력
console.log('3자리 숫자를 입력해주세요.');
process.stdout.write(`${count}번째시도 : `)
} else {
userNums = userNum.split('');를 집어넣어 입력값을 제한할 수 있었다.
3.실행결과
📌 경험한 시행착오들
1.입력값 제한 과정
실질적으로 야구게임을 만드는 것보다 한글을 입력하거나, 숫자가 3자리인 것만 입력하도록 하는 if문을 만드는 과정에서 어려움을 겪었다. 특히 오류가 났던 부분은 if(!!Number(userNum) == false)이었는데 한글을 입력하면 userNum은 string타입이 된다. Number(userNum)는 인자로 전달된 문자열이 숫자일 때 Number 객체가 리턴되고, 숫자가 아니면 NaN이 리턴되는데 처음에는 NaN값이 아니라 string으로 본다고 생각해서 오류가 났었다. 나중에 그 값이 NaN이라는 것을 알고 !을 두번 붙여 NaN을 false로 만들어 완성했다. 참고로 저렇게 쓰면 Number는 true가 된다.
2.readline을 사용하기
처음엔 html로 파일을 만들어서 코드를 실행시켰는데 vscode내에서 콘솔을 실행하기위해 readline을 이용하게 됐다. 처음으로 알게 된 모듈이라 이해하는데 시간이 꽤 걸렸는데 일단 다음 사이트를 참고하고 조원들의 설명을 들으면서 이해할 수 있었다.
✍️페어프로그래밍을 하며 느낀 점
확실히 페어프로그래밍은 성장에 도움이 되었다. 사실 혼자서 코드를 분석하고 구글링을 하는 과정에서 내가 얻는 것도 있지만 남이 짜는 코드를 보고 설명을 들으니 더 이해가 잘 됐다. 정규시간이 마치고 나서 프론트앤드 사람들끼리 사랑방처럼 우글우글 모여서 서로 짠 코드를 보여주고 코드 짜는 것을 돕기도 했는데 자극도 받고 새로운 꿀정보도 많이 얻을 수 있었다. 앞으로도 질문 많이많이 해서 많이 배워가야겠다.
🔔귀동냥으로 얻은 꿀팁들
- 에러가 났을 때 어디인지 모르면 console.log를 사용해서 에러 위치 파악하기
- TIL용으로 사이트를 남겨둘때 날짜로 북마크를 남겨놓으면 찾기 편함
- 데이터타입때문에 오류가 나기 쉬운데 charAt()를 사용하면 좋다. charAt(index) 함수는 문자열[index]와 기능이 비슷한데
Index값으로 범위를 벗어나는 값이 입력되었을 경우
CharAt(index) 함수는 빈 문자열('')을 리턴한다.
문자열[index] 구문은 undefined를 리턴한다.
그래서 문자열[index]값과 달리 CharAt(index)는 undefined값이 나오면 넘어가서 조건문을 진행할 수 있다고 한다. 정말로 엄청난 꿀팁임 이거!
