[우테코 5기 프론트엔드] 프리코스 1주차를 마치고...

셔노·2022년 11월 1일
1

우아한테크코스

목록 보기
3/13

🥳 프리코스 1주차 미션 종료


첫 주차 프리코스가 정말 빨리 지나갔다. 중간고사 기간도 살짝 겹치기도 했고, 클린 코드를 작성하기 위해서 정말 많이 찾아보고, 코드 수정하고 커밋하고 하면서 정말 바쁜 한 주였다.

그래도 정말 많이 배웠고, 성장했다.

늘 코딩할 때, 변수명이나 함수명에 신경을 써야하는 것을 알고 있었지만, 대충 넘어가고 오류가 나거나 스케일이 커져서 코드가 많이 복잡해져서 가독성이 힘들어지면, 그 때서야 땅을 치고 후회했었던 것 같다.

그래서 이번 주차 과제는 코딩테스트를 푸는 게 메인이였지만, 사실 어떻게 가독성 좋게 코드를 짤까? 를 코딩의 절반이상 시간을 썻던 것 같다.

✒️ 1주차 프리코스 리뷰

우선 제일 중요한건 이전 블로그에서 도 언급했지만 학습한 과정이 잘 들러나게 하는 것이 핵심 이였던 것 같다. 그래서 commit도 정말 단계별로 쪼깨서 commit 메세지도 컨벤션에 맞게 꼼꼼하게 적었다.


📝 1번 문제

이 문제가 참 쉬워보이지만, 푸는데까지 오래 걸렸던 문제였다. 앞써 과정이 중요하다고 하다보니, commit 메세지를 어떻게 올려야할지, 코드를 어떻게 짜야할지 많이 공부를 많이 했다.

그리고 첫 문제이다보니, slack에서 처음에 이슈가 많았던 문제였다. input 값의 유효성 검사를 해야한다 파와 문제에서 제한을 뒀으니 따로 유효성 검사를 하지 않아도 된다 파 로 나뉘었다.

나는 만약 서비스를 운영해야하는 코딩이라면 전자가 맞다고 생각하지만, 알고리즘으로 코테를 치는 경우라면 문제에서 제한사항을 둔 상황이라면 유효성 검사를 하지 않아도 된다고 생각했다.

그래서 지금 코드에서 나온 checkValidation 함수에서는 문제제한이 없는 page번호가 1이상 400이하이거나 오른쪽페이지 - 왼쪽페이지 가 1이 일때만 접근할 수 있도록 했고 아닐 경우 -1을 출력하도록 했다.

📢 문제 핵심 키워드 Keyword Point

(Array).every(number => 1 <= number && number <= 400)
// Array 안의 배열에 number가 모두가 1이상 400이하여야 true 
// 하나라도 아니면 아니면 false

(Array).some(number => 1 <= number && number <= 400)
// Array 안의 배열에 number가 하나라도 1이상 400이하이면 true 
// 전부다 아니면 false

📋 구현할 기능 목록

  • 함수 checkValidation : input된 값 데이터 유효성 검사.
  • 함수 splitNumber : 수를 받아서 수를 한 자리로 나눠서 배열로 리턴하는 함수.
  • 함수 splitNumber : 수를 받아서 수를 한 자리로 나눠서 배열로 리턴하는 함수.
  • 함수 splitNumberSum : 배열 전부를 더한 후 전체 합계 반환.
  • 함수 splitNumberMul : 배열 전부를 곱한 후 전체 곱한 값 반환.
  • 함수 maxValueCalculator : 전체 값을 입력하여 최대값을 반환.

📢 1번문제 코드보기


📝 2번 문제

2번은 쉬울 것 같은 문제였지만, 정말 알고리즘이 많이 바꼇던 문제였다. 문제에서 나온대로 단계로 지우지않고 Stack을 이용해서 다음으로 들어올 글자와 Stack에 쌓인 마지막 글자와 비교하여 처리하였지만,

"zyelleyyez" > 기대값: "zyz" / 출력값 : "zez"

위 예시와 같이 기대값이 나오지 않고, 잘못된 문제로 출력이 되었다.

그래서 두 번째로 문제에 나온 예시대로 전체 글자를 탐색해서 중복이 있으면 처리하는 방법으로 구현을 했다.


function cryptogramSolver(cryptogram) {
  while (true) {
    const cryptogramArr = cryptogram.split("");
    tempCryptogram = removeDuplicatesChar(cryptogramArr).join("");
    if (cryptogram != tempCryptogram) cryptogram = tempCryptogram;
    else break;
  }
  return cryptogram;
}

function removeDuplicatesChar(cryptogramArr) {
  let progressChar;
  for (let i = cryptogramArr.length - 1; i >= 0; i--) {
    if (cryptogramArr[i] == cryptogramArr[i + 1]) {
      progressChar = cryptogramArr[i];
      cryptogramArr[i] = "";
      cryptogramArr[i + 1] = "";
    } else if (progressChar == cryptogramArr[i]) {
      progressChar = cryptogramArr[i];
      cryptogramArr[i] = "";
    } else {
      progressChar = "";
    }
  }
  return cryptogramArr;
}

정답은 나왔지만, 알고리즘이 마음에 들지 않았다.

그래서 Queue의 원리를 이용하여, 함수를 재귀하면서 단계적으로 삭제하는 방법을 택했다. 그래서 나온 코드는 [📢 2번문제 코드보기] 에서 확인할 수 있다.

📋 구현할 기능 목록

  • 함수 cryptogramSolver : 전체 프로세서를 관리함..
  • 함수 removeDuplicateChar : 연속된 중복문자를 제거해주는 함수.

📢 2번문제 코드보기


📝 3번 문제

3번은 문제를 읽자마자 떠오른 알고리즘으로 코딩을 했다. 다만 클린 코딩을 위해서, 몇번의 수정이 있었던 문제이다.

📢 문제 핵심 키워드 Keyword Point

Array.from({ length: number }, (_, idx) => idx + 1)	
// Array number 크기만큼 만들기

num === 3 || num === 6 || num === 9 // true / false
['3','6','9'].includes(num)	// true / false

위 코드에서 아래와 같이 includes를 사용하는게 가독성도 놓고 코드를 간단화 할 수 있다.

📋 구현할 기능 목록

  • 함수 game369App : 전체 프로세서를 관리함.
  • 함수 createNumberCollection : input의 크기만큼의 Array 생성 후, 각 index의 value는 'index+1'를 넣어서 return 함.
  • 함수 getCount369 : 전체 배열을 join("")을 통해 한 글자로 합친 후, '3','6','9' 의 각 갯수를 return 함.

📢 3번문제 코드보기


📝 4번 문제

이 문제도 utf16을 이용하여, 반대로 돌릴 수 있을 것이다 라고 떠올랐고, 알고리즘은 금방 풀었던 문제였다.
(물론 A부터 Z까지 대문자 배열 하나 만들고, a부터 z까지 소문자 배열 만들어서 index를 음수로해서 뒤집는게 가장 먼저 떠오르긴했다.)

다만 함수를 너무 많이 쪼개다 보니, 네이밍 하는 게 많이 힘들었던 것 같다.

📢 문제 핵심 키워드 Keyword Point

String.fromCharCode(UTF16Code);	// UTF16 코드를 문자로 변경
(String).charCodeAt(index);	// String의 index 번째를 UTF16 코드로 변경

📋 구현할 기능 목록

  • 함수 treeFrogApp : 전체 프로세서를 관리함.
  • 함수 createStringSplit : 입력된 문자열을 배열로 만들어 줌.
  • 함수 convertTreeFrogChar : 입력된 UTF16코드를 알파벳인지 확인한 후, 반대로 변경해서 문자로 변경하여 return 함.
  • 함수 convertUTF16 : 입력된 문자를 UTF16코드로 변경해 줌.
  • 함수 convertReverseCode : 입력된 숫자에 반대되는 문자로 출력해 줌.
  • 함수 convertChar : 입력된 UTF16코드를 문자로 변경해 줌.
  • 함수 checkAlphabet : 입력된 UTF-16 코드가 알파벳인지 판단해 줌.
  • 함수 convertString : 배열을 .join("")을 통해 한 문자열로 다시 만든 후, return 해 줌.
  • 함수 checkLowerCase : 받아온 utf16Code가 소문자인지 boolean 형으로 return 해 줌.

📢 4번문제 코드보기


📝 5번 문제

📋 구현할 기능 목록

  • 함수 withdrawApp : 전체 프로세서를 관리함.
  • 함수 createBillType : 지폐 종류가 담긴 배열을 생성.
  • 함수 calcWithdraw : money(현재 금액)과 billType(출금할 지폐 크기)를 입력하면, currAccount(남은 금액)과 billCount(최대 지폐수)를 출력하는 함수

📢 5번문제 코드보기


📝 6번 문제

6번부터 사람들이 많이 어려워 했었던 문제이다. 나 역시도 알고리즘을 여러번 바꿔가면서 풀었던 문제였다. 객체 Map과 객체 Set을 잘 알고 있다면, 문제는 쉽게 잘 풀릴 문제였다.

앞으로 코테를 할 때 자주 써볼 것 같다.

📢 문제 핵심 키워드 Keyword Point

const emailOfUsedNickName = new Set();	// Set 객체(집합)
emailOfUsedNickName.add(value);	// 추가 (중복이면 안들어감)
emailOfUsedNickName.size;		// 크기 출력 예) 3
emailOfUsedNickName.clear();	// 값 전체 비우기
emailOfUsedNickName.delete(value);	// 값으로 부분 지우기
emailOfUsedNickName.entries();	
// Set객체는 key value 같음 ["key","key"] 
emailOfUsedNickName.forEach((value,key,set)=>{});
// entries와 동일하게 key value 같음. [""]

📋 구현할 기능 목록

  • 함수 duplicateCheckApp : 전체 프로세서를 관리함.
  • 함수 checkValidation : input된 값 데이터 유효성 검사

📢 6번문제 코드보기


📝 7번 문제

📢 문제 핵심 키워드 Keyword Point

const infoOfUsedTwoLetter = new Map();	// Map 객체
infoOfUsedTwoLetter.has(key);	// key 값이 있는가?
infoOfUsedTwoLetter.set(key,value);	// key => value 추가
infoOfUsedTwoLetter.get(key); 	// key값으로 value 값 가져오기
emailOfUsedNickName.clear();	// 값 전체 비우기
infoOfUsedTwoLetter.delete(key); // key값으로 값 삭제
emailOfUsedNickName.entries();	
// Map객체는 key value 같음 ["key","value"] 
emailOfUsedNickName.forEach((value,key,map)=>{});
// entries와 동일하게 key value 같음. [""]

문제를 잘 이해하게 된다면, 6번보다 오히려 7번이 알고리즘을 푸는대는 좀 더 쉬웠던 것 같다. 동일하게 7번도 Map 객체를 이용한 방식이고, reduce를 사용했다.

📋 구현할 기능 목록

  • 함수 recommendFriendApp : 전체 프로세서를 관리함.
  • 함수 createRelationship : 친구 리스트 배열 friends을 받아 친구 관계를 정리하여 객체 Map으로 return 함. (예: 'mrko' => [ 'donut', 'shakevan' ])
  • 함수 calcVisitorScore : 방문자 리스트 배열 visitors를 받아 방문 횟수 별로 +1점씩 점수를 채점하여 userId 별로 Score를 저장하여 객체 Map으로 return 함. (예: 'Austyn' => 10)
  • 함수 calcFriendScore : friendRelationship을 참조하여, scoreBoard에서 반환한 객체 Map 을 기반하여 user의 친구의 친구는 +10점을 늘려줌.
  • 함수 sortByScore : calcFriendScore에서 반환한 객체 Map을 점수별로 정리하며, 만약 점수가 같은 경우에는 내부 함수 localeCompare을 사용하여 문자열로 정렬.

📢 7번문제 코드보기


🧑‍💻 프리코스 1주차 에서 배운 점

📌 코딩을 할 때 클린 코드로 작성할 수 있게 노력하게 되었습니다.

이번 주차는 첫 주차 답게 코딩을 할 때 클린 코드에 대해 공부도 많이 하고, 코딩할 때 시간을 많이 들였던 주차 였습니다. 특히, 함수나 변수명을 네이밍할 때 신경을 많이 쓰게 되었고, 함수에 하나의 기능만을 넣을 수 있도록 많이 노력했던 것 같습니다. 그래서 코드를 다시 분석할 때도 가독성이 좋아서 훨씬 보기 좋았던 것 같습니다.

📌 git commit 메세지 컨벤션에 대해서 배웠습니다.

평소 git을 commit 할 때, 기능 별로 커밋을 하지 않았고, 메세지에 의미를 담지 않아 오류가 발생했을 때 큰 어려움을 겪은 적이 있었는데, 이번 주차에서 기능 단위로 commit 을 하고, commit 메세지를 남길 때 컨벤션에 맞춰 적게 되니, 코딩했던 흐름도도 한 눈에 볼 수 있게 되어 있어서 오류가 발생했을 때 쉽게 해결 할 수 있었습니다.

🙈 앞으로 좀 더 보안할 점

  1. 1주차 때 배운 git commit 메세지 컨벤션을 지켜서, 2주차 때는 좀 더 신경써서 할 수 있도록 하겠습니다.
  2. 네이밍을 할 때, 항상 의미를 담고, 함수명은 동사나 동사구로 만들도록 좀 더 노력하겠습니다.
  3. 기능 목록을 좀 더 깔끔하고 명확하게 남길 수 있도록 하겠습니다.

오늘 낮 2시에 코수타(코치와 수다 타임)이 있다. 유튜브 라이브로 참여해서 코치분들과 대화를 나눠봐야겠다! 다른 분들이 어떤 질문을 할지 너무 궁금하다...ㅎㅎ

(p.s. 근데 나 2시에 수업있단 말이다....ㅠㅠ)

profile
초보개발자

0개의 댓글