[우아한 테크코스/프리코스] 웹 프론트엔드 6기 1주차 회고록

시작하기 앞서...

이번에 우아한 테크코스 6기 웹 프론트엔드에 지원하게 되었다!

최종 인원을 뽑기 직전에 4주 동안 다른 지원자들과 함께 공부하고, 우테코 과정을 미리 경험해 볼 수 있다.

 

그래서 공부한 내용을 정리하면서 내가 한 내용을 공유하고 싶어 글을 작성하였다.

 

관련 내용은 메일로 오니깐 메일을 잘 확인하는 것이 중요하다!!

 

git 프로젝트 관리

매주 미션은 GitHub를 통해 제출해야 한다.

 

프로젝트 fork 하기

프로젝트 fork를 해서 나의 깃허브 저장소에 프로젝트를 가져온다.

그러면 정상적으로 내 깃허브에 프로젝트가 생긴다.

 

프로젝트 clone 하기

이제 프로젝트에 코드를 작성하기 위해 clone을 해야 한다.

 

clone은 깃허브에서 초록색 <>code 버튼을 클릭하여 아래 url을 복사하고, 앞에 git clone 명령어를 추가해 준다.

git clone https://github.com/{내아이디}/{저장소아이디}.git
ex) git clone https://github.com/easyhyun00/javascript-baseball-6.git

웹 프론트엔드는 비주얼 스튜디오(vs code)에서 진행하고, clone을 하기 위해 프로젝트를 진행할 디렉토리를 하나 만들어 준다.

그리고 터미널 창에 위에 있는 명령어를 입력한다.

그러면 프로젝트가 정상적으로 clone이 된다.

 

그리고 clone한 폴더로 이동해야 되기 때문에 cd 명령어를 사용한다.

(참고로 ls 는 현재 디렉토리를 보여주는 명령어이다.)

 

새로운 branch 만들기

main 브랜치에서 코드를 작성해도 괜찮지만 깃허브를 공부하기 위해 새로운 브랜치를 만들어서 작업을 했다.

git checkout -b {새로운브랜치이름}
ex) git checkout -b task1/baseball

 

프로젝트 기능 문서 작성

과제 진행 요구사항에 아래 사진과 같은 조건이 있었다.

그래서 docs 디렉토리를 만들고 README.md 파일을 만들어서 어떤 기능을 구현할지 작성했다.

 

프로젝트 push 하기

구현할 기능 목록을 다 적었다면 이제 코드를 로컬 저장소에 반영하기 위해 add 와 commit을 해준다.

 

먼저 git status 명령어를 입력해 코드의 변경 사항을 확인한다.

(src/App.js 는 무시하기..^^)

git status

변경 사항 목록 중에 내가 로컬 저장소에 올리고 싶은 것을 git add 명령어를 통해 추가한다.

git add . // 전체 파일 add 하기
또는
git add {올릴 파일명 or 디렉토리명}
ex) git add docs/

추가 후 다시 git status 를 통해 변경사항이 제대로 올라갔는지 확인한다.  

다음으로 커밋 메시지를 작성한다.

git commit -m "커밋메시지"

참고로 내 커밋 메시지 앞에 붙은 :memo: 는 gitmoji 라는 사이트를 참고했으며

커밋 메시지를 작성할 때 앞에 이모티콘을 붙여 가독성이 좋게 만들어 준다.

gitmoji

그리고 내가 구현할 기능 목록 문서를 작성했으므로 그에 맞는 타이틀인 docs 를 적어주고 옆에 설명을 적어주었다.

(참고로 명령어에서 -m을 빼면 vi 에디터로 작성이 된다.)

커밋메시지를 다 작성했으면 내 로컬 저장소에 해당 코드가 반영이 되었고

이제 원격 저장소인 깃허브에 올리기 위해 push 를 해야 한다.

git push origin {브랜치이름}
ex) git push origin task1/baseball

이제 깃허브에 들어가면 내가 작성하고 올린 코드가 반영된 것을 볼 수 있다!

 

미션 수행하기!!

이제 내가 작성한 구현할 기능 목록 문서를 보고 본격적으로 코드를 작성할 것이다.

입력, 출력을 하기 위해 저 함수를 써야 된다는 조건이 있어, 아래 코드처럼 사용하였다.

MissionUtils.Console.print("숫자 야구 게임을 시작합니다.");

 

전체적인 야구 게임 틀

그리고 무한 루프를 만들어 상대방(컴퓨터)의 수를 얻고, 숫자 맞추기, 재시작/종료 여부를 만들어야 한다.

 

getComputerNumbers() 라는 함수를 만들어 상대방(컴퓨터)의 수를 얻는다.

 

그리고 플레이어가 숫자를 입력해 숫자 맞추기 게임이 본격적으로 시작된다.

 

게임이 끝나고 재시작/종료 여부를 얻어야 한다. 아직 구현을 하지 않아 재시작/종료 여부가 2일 때,

break를 사용하여 무한루프를 빠져나와 코드가 종료되게 하였다.

while(true) {
  // 상대방(컴퓨터)의 수 얻기 - getComputerNumbers()
  const computerNumbers = this.getComputerNumbers();
  MissionUtils.Console.print(computerNumbers);

  // 숫자 맞추기 - 미구현

  // 재시작/종료 여부 얻기 - askForRestart() - 미구현
  const restart = 2

  // restart 값이 2일 때, 프로그램 완전 종료
  if (restart === 2) break;
}

 

getComputerNumbers() 함수 구현

상대방(컴퓨터)의 수를 얻는 함수를 구현해야 한다.

 

이 부분은 문서 요구사항 사용방법에 자세하게 적혀있어 그대로 사용할 경우 제대로 작동이 된다.

그러나 예시 코드를 보면 중복 숫자를 배열에 넣지 않고 있다는 것을 볼 수 있다.(서로 다른 수 3개라는 조건이 있음)

 

그래서 이걸 보고 생각난 것이 바로 Set 이다.

Set은 중복된 값을 허용하지 않아서 중복 검사를 하는 배열을 사용하는 것보다 시간 복잡도 낮아 효율적이라고 생각이 들어,

아래 코드처럼 작성하였다.

// 상대방(컴퓨터)의 수 얻기
getComputerNumbers() {
  const computer = new Set();
  while (computer.size < 3) {
    computer.add(MissionUtils.Random.pickNumberInRange(1, 9));
  }
  return Array.from(computer);
}

코드를 실행하면 상대방(컴퓨터)의 수가 제대로 얻어지는 것을 볼 수 있다.

여기까지 구현한 내용을 깃에 올린다.

 

위에서 했던 것처럼 로컬에 변경사항을 올린다. 그리고 이번엔 커밋 메시지를 vi 에디터로 작성하기로 해봤다.

(나도 몇 달 전까지 vi 에디터로 커밋 메시지 작성하는 방법을 몰라서 이에 대한 게시물을 한 번 올려봐야겠다!) 

내가 구현한 내용을 작성하고 #1을 붙였는데 깃허브 이슈를 사용해보고 싶어 붙여봤다.

사실 사용법 모르는데 그냥 이번에 해보고 싶어서 붙여봤다...ㅎ

 

커밋 메시지를 작성하고 push를 하면 깃허브에 정상적으로 올라간다.

그리고 깃허브 이슈를 사용하기 위해 setting-general 에서 이슈를 체크해 줘 활성화시켜줬다.

그리고 깃허브 이슈를 생성해 줬다...!

사실 모른다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 좀 더 찾아보고 직접 사용해 보면서 배워가야겠다

깃허브 이슈 생성했더니 #1 에 하이퍼링크가 생겼다 싱기싱기 😎😎😎

 

숫자 맞추기

getUserInput() 함수 구현

다음으로 숫자 맞추기를 구현할 것이다.

숫자를 맞출 때까지 입력받아야 되므로 무한루프로 구현하고, 먼저 숫자를 입력받는 함수를 구현한다.

// 플레이어의 숫자 입력 받기
getUserInput() {
  return await MissionUtils.Console.readLineAsync();
}

위에 코드처럼 구현을 하고 return 받은 값을 출력했는데, 앞에 Promise가 붙여있다.

Promise는 비동기 함수로, 작업이 완료될 때까지, 다른 작업을 수행할 수 있는 함수이다.

그래서 숫자를 입력받기 전에 다른 작업을 수행하면 안 되므로, 작업이 완료될 때까지 기다려야 한다.

 

이는 async/await 구문을 사용해서 이러한 문제를 해결할 수 있다. 👍

해당 함수를 호출하는 부분에도 await를 붙여줘야 한다.

// 플레이어의 숫자 입력 받기
async getUserInput() {
  return await MissionUtils.Console.readLineAsync();
}

이제 return 받은 값을 출력하면 정상적으로 숫자만 나오게 된다!

그리고 입력받은 수는 나중에 유효성 검사와 배열로 구성된 상대방(컴퓨터)의 값과 비교하기 위해

기존 문자열에서 숫자로 된 배열로 변경해 주었다.

const userInputArr = userInput.split('').map(Number);

해당 함수를 구현했으므로 깃허브에 올린다.

 

isValidInput() 함수 구현

사용자가 입력받은 수와 상대방(컴퓨터)의 수를 비교하기 전에 먼저 입력받은 수에 대한 유효성 검사를 해야 한다.

왜냐하면 사용자가 잘못된 수를 입력했을 경우 throw 문을 사용하여 예외를 발생시켜 종료시켜야 하기 때문이다.

 

사용자가 입력받은 수는 3개여야 하므로 먼저 3개인지 판별하고 그렇지 않으면 false를 반환한다.

그리고 3개의 수는 다른 수 이므로 이를 Set 으로 변경하여, 중복된 수가 있어 길이가 3이 아니게 된다면 false를 반환한다.

두 조건에 걸리지 않을 경우 알맞게 입력한 유효한 수이므로 true를 반환한다. 

// 입력한 수 유효성 검사
isValidInput(userInput) {
  if (userInput.length !== 3) // 숫자 3개가 아니면
    return false;
  if (new Set(userInput).size !== 3) // 중복된 수가 있는지
    return false;
  return true; // 제대로 입력
}

true일 경우 이제 사용자가 입력한 수와 상대방(컴퓨터)의 수를 비교하면 된다.

만약 false 경우 예외 발생했다는 문구를 출력하고 throw를 사용해 예외 발생시켜 종료시킨다.

if(this.isValidInput(userInputArr)) {
  MissionUtils.Console.print("제대로 입력")
} else { // 예외 발생
  MissionUtils.Console.print("[ERROR] 숫자가 잘못된 형식입니다.");
  throw new Error("[ERROR]");
}

test 파일을 보면 "[ERROR]" 이렇게 날려줘야 한다고 코드가 있어 저렇게 예외를 발생시켰다.

 

코드를 작성하고 결과를 봤는데 제대로 예외 처리가 되어 프로그램이 종료되고 예외 테스트가 성공된 것을 볼 수 있다!

해당 함수도 구현했으므로 깃허브에 올린다.

 

checkGuessResult() 함수 구현

이제 플레이어가 입력한 수와 상대방(컴퓨터) 수의 값을 비교해서 낫싱, 볼, 스트라이크 여부를 알아내야 한다.

 

for 문을 사용해서 index와 값이 같으면 스트라이크, index는 다르지만 해당 값이 다른 곳에 있으면 볼 개수를 얻어낸다.

그리고 strike와 ball 값에 따라 결과 문구를 반환한다.

// 입력한 수, 상대방(컴퓨터)수에 대한 결과
checkGuessResult(computer, user) {
  let strike = 0;
  let ball = 0;

  for (let i=0; i<3; i++) {
    if (computer[i] === user[i]) 
      strike++;
    else if (computer.includes(user[i]))
      ball++;
  }

  if (strike === 0 && ball ===0) return "낫싱";

  if (ball > 0) {
    return `${ball}볼${strike > 0 ? `${strike}스트라이크` : ''}`
  }
  return `${strike}스트라이크`;
}

해당 함수의 결과가 3스트라이크 이면 break를 사용해 맞추기를 종료한다.

const result = this.checkGuessResult(computerNumbers, userInputArr);
MissionUtils.Console.print(result);

if (result === "3스트라이크") {
  MissionUtils.Console.print("3개의 숫자를 모두 맞히셨습니다! 게임 종료");
  break;
}

코드를 실행해 보면, 정상적으로 결과가 나오고 3스트라이크 일 경우 게임이 종료가 된다.

해당 내용을 구현했으므로 깃허브에 올려준다.

그리고 이슈에 들어가니깐 아래처럼 로그가 남겨져 있다.

이걸 보니깐 앞으로 이슈 넘버를 쓰기 전에 깃허브 이슈 먼저 생성해야 될 것 같다!

싱기싱기

그러면 일단 숫자 맞추기 부분은 구현이 끝난 것 같고 이제 재시작/종료 여부가 남은 것 같다.

 

전체적인 야구 게임 틀

askForRestart() 함수 구현

이제 맞추기를 종료하고 사용자에게 게임을 재시작/종료를 할지 여부를 얻어야 한다.

 

재시작/종료 여부인 1 or 2를 얻는 코드를 작성하고 실행을 했는데

// 재시작/종료 여부 얻기
async askForRestart() {
  return await MissionUtils.Console.readLineAsync();
}

여기서 프로그램이 끝나지 않아,

type of 를 사용해서 결과를 출력하니깐 문자열이 나왔다.

그러면 이걸 숫자로 바꿔줘야 한다. 

나는 askForRestart 함수에서 결과를 Number(result) 이렇게 반환했다.

 

코드를 실행하니깐 정상적으로 1일 때는 다시 게임을 시작하고 2일 때는 종료된다!!!!!!

 

그런데 test가 실패한다... 왜인지 보니깐

결과 출력을 할 때 볼과 스트라이크 사이에 있는 띄어쓰기를 안 했다..ㅎㅎㅎ 휴 그래도 다행

추가한 내용이랑 수정한 부분을 깃허브에 한 번에 올릴 수 없어 따로 구분을 했다.

여기까지 test가 정상적으로 수행이 됐다.

이제는 코드 리팩토링 과정을 하면 될 것 같고 오늘은 여기까지~~

 

코드 리팩토링

사실 리팩토링 부분은 나도 아직 초보라서 잘 모른다..

그래도 일단 코드를 보면서 필요 없는 주석을 지우고

isValidInput(userInput) {
  if (userInput.length !== 3) // 숫자 3개가 아니면
    return false;
  if (new Set(userInput).size !== 3) // 중복된 수가 있는지
    return false;
  return true; // 제대로 입력
}

이렇게 된 코드를 더 간결하게 줄였다.

isValidInput(userInput) {
  // 숫자 3개가 아니거나 중복된 수가 있으면
  if (userInput.length !== 3 || new Set(userInput).size !== 3)
    return false;
  return true; // 제대로 입력
}

이거 말고 어떤 부분을 수정할지 모르겠어서 일단 여기서 마무리하기로 했다...ㅠㅠ

크

 

main 브랜치로 pull request

pull request 기능은 사용해 본 적이 거의 없다.

왜냐하면 지금까지 그냥 바로 merge를 해왔기 때문이다.

 

pull requests 창에 들어와서  New pull request  버튼을 클릭하고, 

task1/baseball 브랜치에서 main 브랜치로 pull request 요청을 한다.

그러면 정상적으로 요청이 된다.

task1/baseball 브랜치의 코드를 main 브랜치로 pull 을 승인하기 위해

 Merge pull request 버튼을 클릭한다.

했더니 아래처럼 main에 반영이 되었다..

 

미션 제출하기

똑같은 방식으로 미션을 제출하는 곳으로 pull request 를 요청한다.

다음으로 우테코 지원을 했던 사이트에 깃허브 아이디, pull request 주소, 소감을 적어 제출하면 된다!

후기

1주차 미션이 정상적으로 제출이 되었고 끝이 났다.

디스코드에 글을 올려 후기 리뷰도 하고 싶은데 유독 이번 주에 일이 있어 바빴다...ㅜㅜ 내일도 일정이 있다,,

2주차 미션부터는 열심히 다른 사람들과도 소통하면서 진행하도록 해야겠다.

밤에 시간 있는데 사실 내가 조금 나태했음..

 

[ 1주차 미션 깃허브 주소٩( ᐛ )و  ]

GitHub - easyhyun00/javascript-baseball-6: [우아한 테크코스] 프리코스 1주차