TIL | [React] 처음하는 팀과제< 로또번호 생성기>

레이나·2024년 12월 16일

KPT React TIL codekata 사전캠프 코드리뷰 팀과제

Today I Learned

목록 보기

8/47

[사전캠프 8일차]

🛸 오늘의 Code Kata

🔹 나머지가 1이 되는 수 찾기

처음 코드를 작성할때 break;없이 작성을 하니 나머지를 1을 만족하는 가장 작은 숫자가 아니라 주어진 n번 째 숫자까지 계속 진행을 하기에 나중에 break;를 추가하여 완성.

// for문과 if문 중첩 사용
function solution(n) {
    let answer = 0;
    for(let x = 2; x < n; x++) { // 조건은 3부터 시작하기 때문에 0과1은 제외 하고 진행
        if(n % x === 1) {
            answer = x;
            break; //브레이크가 없으면 x<n 까지 계속 돌게 되어 가장 작은 수를 구할 수가 없어진다
        }
    }
    return answer;
}

코드 실행 결과 확인

🛸 첫번째 미니 프로젝트 팀과제 & 코드리뷰

🎱로또번호 생성기

상,중,하 단계로 나눠진 팀과제 중에서 선택하여 진행
누군가 잘한다고 해서 따로 진행하거나 하는 것은 없음
'팀'과 함께 협업하는 과정을 경험하는 것이 목적
우리팀은 다수가 코딩을 처음 접하는 분들이기에 난이도'하' 선택
일부 코드, 함수 등 조건을 제시된 상태에서 진행
코드를 나눌 것인지, html-css-js기능으로 나눌 것인지 감도 오지 않았음 > 매니저님한테 질의 하였으나 그것 또한 실무에서 각각 다르기에 팀원끼리 조율하여 나눠보라고 하심
팀원들은 감도 못잡고 있기에 각자의 방식으로 html-css-js모두 진행 후 의견을 나눠 보기로 하고 각자 코딩 진행
과정 중 질문과 의견이 오고감
처음에 생각없이 평소처럼 마이크를 켠 상태에서 구두로만 알려주고 의견을 주고 받음
나중에 코드를 슬랙에 올려서 확인하고 의견을 조율하며 인지한 부분이 이런 코드 관련하여 의견을 조율할 때는 기록을 해놓자! 어떤과정이 오갔고 내가 코드를 작성할 경우 다시 확인하면서 인사이트를 얻을 수 있다는 것을 알게됨

🔹 JS에서 의견이 오간 부분

Q.항상 콘솔에서만 출력값을 확인하였기에 왜 html화면에서 숫자값이 출력되지 않는가?
A. 함수이기에 return값을 반환해 주면 되는거였다..ㄷㄷ;;
중복값을 제거하는 방법에서 문제를 끝까지 확인 하지 않아includes()메소드를 사용하지 않은 상태에서 중복값 제거를 위한 비교

function generateLottoNumbers() {
let lotto = []; //6개의 값을 뽑아서 나열, 배열처리
//6번처리 - 반복문
for(let i=0;i<6;i++){
    //1~45사이의 새로 추가될 숫자를 랜덤하게 뽑기
    //random() : 0~1사이의 랜덤한 소수값을 표출
    //floor() : 내림처리해서 정수로 변경
    let num = Math.floor(Math.random() * 45) + 1;
    //중복된 숫자를 제거하기 위한 비교 배열 추가
    for(let j in lotto){
         while(num == lotto[j]){ //현재 새로나온 숫자가 기존 숫자와 같으면
             num = Math.floor(Math.random() * 45) + 1;
         }
     }
    //push() - 배열에 마지막에 값추가메서드
    lotto.push(num);
}
return lotto;
}

나중에 includes()메소드를 확인 후 사용방법을 구글링 한 후 코드

function generateLottoNumbers() {
	let lotto = [];
	let newA = []; // 중복 비교를 위한 배열
	for(let i=0;i<6;i++){
    	let num = Math.floor(Math.random() * 45) + 1;
    lotto.forEach((data) => {
      if(!newA.includes(data)){
        newA.push(data);
      }
    });
	return newA;
}

이후에 값이 6개가 아닌 5, 6개 랜덤하게 생성되어 이후에 다른 방법을 모색해 보았으나 나중에 추가한 값에서 중첩값이 적용되어 다른 방법 재확인

function generateLottoNumbers() {
let lotto = []; // 빈배열 생성
while(lotto.length < 6){ // lotto숫자를 6개 까지만 뽑기 위한 조건
  let num = Math.floor(Math.random() * 45 + 1);
  if(!lotto.includes(num)){ // lotto에 num이 없을때
    lotto.push(num) // num을 배열에 추가
  }
}
lotto.sort((a,b)=> a-b); // 오름차순 정렬을 위한 sort
return lotto;
}

수정을 하며 의견을 주고 받다보니 '기록을 해놔야 겠구나'라는 생각이 나중에 들어서 남긴 기록으로 일부 기록은 남아 있지가 않다.
이렇게 진행을 하면서 결국에는 각자가 만든 코드병합과정이 있기 때문에 이번 과제에서는 아래와 같이 역할을 나누기로 함
- html, 코드 병합, 서기
- css
- js
슬랙에 각자의 코드를 올리고 나서 병합한 후 완성본을 보여주며 추가 의견들이 오갔다.
나중에 이전 로또번호와 현재 로또번호를 보여주기 위한 값을 추가하고, 해당 값을 넣기 위한 html태그 추가, css 추가 사항들이 생기고, 위치 변경도 생기면서 의외로 간단한 과제에 여러의견들이 오고간 재밌는 과정이었다.