[우테코 5기 프리코스] 웹 프론트엔드 1주차

우아한테크코스 5기부터는 지원서 작성 인원 전원에 대해 프리코스를 체험해볼 수 있게 해주었다.

나는 웹 프론트엔드에 지원했고, 지난 주 수요일부터 어제(화요일)까지 일주일의 시간 동안 총 7문제의 과제가 있었다.

1주차 과제는 모두 js 알고리즘 문제였고, 크게 어렵지는 않았다.

 

---

PROBLEM 1

🚀 기능 요구 사항

포비와 크롱이 페이지 번호가 1부터 시작되는 400 페이지의 책을 주웠다. 책을 살펴보니 왼쪽 페이지는 홀수, 오른쪽 페이지는 짝수 번호이고 모든 페이지에는 번호가 적혀있었다. 책이 마음에 든 포비와 크롱은 페이지 번호 게임을 통해 게임에서 이긴 사람이 책을 갖기로 한다. 페이지 번호 게임의 규칙은 아래와 같다.

1. 책을 임의로 펼친다.
2. 왼쪽 페이지 번호의 각 자리 숫자를 모두 더하거나, 모두 곱해 가장 큰 수를 구한다.
3. 오른쪽 페이지 번호의 각 자리 숫자를 모두 더하거나, 모두 곱해 가장 큰 수를 구한다.
4. 2~3 과정에서 가장 큰 수를 본인의 점수로 한다.
5. 점수를 비교해 가장 높은 사람이 게임의 승자가 된다.
6. 시작 면이나 마지막 면이 나오도록 책을 펼치지 않는다.

포비와 크롱이 펼친 페이지가 들어있는 배열 pobi와 crong이 주어질 때, 포비가 이긴다면 1, 크롱이 이긴다면 2, 무승부는 0, 예외사항은 -1로 return 하도록 solution 메서드를 완성하라.

제한사항

• pobi와 crong의 길이는 2이다.
• pobi와 crong에는 [왼쪽 페이지 번호, 오른쪽 페이지 번호]가 순서대로 들어있다.

실행 결과 예시

pobicrongresult

[97, 98]	[197, 198]	0
[131, 132]	[211, 212]	1
[99, 102]	[211, 212]	-1

첫번째 문제는 pobi와 crong에 대하여 총 4가지 방법으로 점수를 구한 후에, Math.max() 메서드를 사용하여 해결할 수 있었다. 점수를 구할 때 숫자를 하나씩 쪼개서 더하고 곱해야 했기 때문에, 숫자를 문자열로 바꿔준 후 반복문을 사용하여 하나씩 잘라 새로운 배열에 담는 형태로 코드를 작성하였는데, 뒷부분 문제를 풀다 보니, [ ... str ] 메서드를 통해 간편하게 배열로 바꿀 수 있었다.. 나의 부족한 공부량을 알 수 있었던 좋은 문제였다. 머리가 나쁘면 손가락이 고생한다.

 

내가 작성한 자세한 코드는 아래 링크에서 확인 할 수 있다.

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem1.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

 

---

PROBLEM 2

🚀 기능 요구 사항

암호문을 좋아하는 괴짜 개발자 브라운이 이번에는 중복 문자를 이용한 새로운 암호를 만들었다. 예를 들어 "browoanoommnaon"이라는 암호문은 다음과 같은 순서로 해독할 수 있다.

1. "browoanoommnaon"
2. "browoannaon"
3. "browoaaon"
4. "browoon"
5. "brown"

임의의 문자열 cryptogram이 매개변수로 주어질 때, 연속하는 중복 문자들을 삭제한 결과를 return 하도록 solution 메서드를 완성하라.

제한사항

• cryptogram은 길이가 1 이상 1000 이하인 문자열이다.
• cryptogram은 알파벳 소문자로만 이루어져 있다.

실행 결과 예시

cryptogramresult

"browoanoommnaon"	"brown"
"zyelleyz"	""

두번째 문제는 알고리즘을 짜는 것 자체는 쉬웠지만, 특정 조건을 만족할 때가지 계속해서 반복시키는 것이 약간 어려웠다. 암호가 들어오면 중복 제거 함수를 실행시켜준 후 다시 처음 함수로 돌려보내서, 이전 암호값과 변경된 값이 변화가 없다면 리턴하고 변화가 있다면 제거 함수를 한 번 더 실행시켜주는 방식으로 코드를 작성하였다. 

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem2.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

PROBLEM 3

🚀 기능 요구 사항

배달이가 좋아하는 369게임을 하고자 한다. 놀이법은 1부터 숫자를 하나씩 대면서, 3, 6, 9가 들어가는 숫자는 숫자를 말하는 대신 3, 6, 9의 개수만큼 손뼉을 쳐야 한다.

숫자 number가 매개변수로 주어질 때, 1부터 number까지 손뼉을 몇 번 쳐야 하는지 횟수를 return 하도록 solution 메서드를 완성하라.

제한사항

• number는 1 이상 10,000 이하인 자연수이다.

실행 결과 예시

numberresult

13	4
33	14

이 문제는 비교적 수월하게 해결할 수 있었다. 숫자(자릿수마다) 에 3, 6, 9가 들어가 있을 때마다 answer 값에 1씩 더해주었다. 자릿수 체크는 이중 반복문을 통해서 해결하였다.

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem3.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

PROBLEM 4

🚀 기능 요구 사항

어느 연못에 엄마 말씀을 좀처럼 듣지 않는 청개구리가 살고 있었다. 청개구리는 엄마가 하는 말은 무엇이든 반대로 말하였다.

엄마 말씀 word가 매개변수로 주어질 때, 아래 청개구리 사전을 참고해 반대로 변환하여 return 하도록 solution 메서드를 완성하라.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Z

Y

X

W

V

U

T

S

R

Q

P

O

N

M

L

K

J

I

H

G

F

E

D

C

B

A

제한사항

• word는 길이가 1 이상 1,000 이하인 문자열이다.
• 알파벳 외의 문자는 변환하지 않는다.
• 알파벳 대문자는 알파벳 대문자로, 알파벳 소문자는 알파벳 소문자로 변환한다.

실행 결과 예시

wordresult

"I love you"

"R olev blf"

이 문제도 크게 어렵지는 않았다. (그치만 효율성과 정확성은.. 잘 모르겠다)

대문자는 대문자끼리, 소문자는 소문자끼리 알파벳의 순서를 뒤집어주는 문제였다. 

먼저, 입력값으로 들어온 문장을 한글자씩 나누어 배열에 담아주었다.

그 다음에는, 아스키코드 (정말 오랜만에 써봄) 를 이용해 대문자 배열과 소문자 배열을 만들어주었다.

미리 쪼개둔 문장 배열 속 단어들을 반복문으로 순회하며

1. 공백일 경우엔 공백을

2. 대문자일 경우엔, 대문자 배열 내에서 반대편에 위치한 대문자로

3. 소문자일 경우엔, 소문자 배열 내에서 반대편에 위치한 소문자로 뒤집어주었다.

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem4.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

PROBLEM 5

🚀 기능 요구 사항

계좌에 들어있는 돈 일부를 은행에서 출금하고자 한다. 돈 담을 지갑이 최대한 가볍도록 큰 금액의 화폐 위주로 받는다.

돈의 액수 money가 매개변수로 주어질 때, 오만 원권, 만 원권, 오천 원권, 천 원권, 오백원 동전, 백원 동전, 오십원 동전, 십원 동전, 일원 동전 각 몇 개로 변환되는지 금액이 큰 순서대로 배열에 담아 return 하도록 solution 메서드를 완성하라.

제한사항

• money는 1 이상 1,000,000 이하인 자연수이다.

실행 결과 예시

moneyresult

50237	[1, 0, 0, 0, 0, 2, 0, 3, 7]
15000	[0, 1, 1, 0, 0, 0, 0, 0, 0]

이 문제도 크게 어렵지 않았다. 초등학생 수학 문제 같았는데, 조건문을 작성하면서 조건을 꼼꼼히 작성해야 겠구나를 깨닫게 해준 좋은 문제였다. 처음에 조건을 5만원 이상일 경우 오만원권의 장수를 세고, 만원 이상일 경우 만원의 장수를 세는 것처럼 하한선만 설정해두었더니, 더 큰 단위로 셀 수 있음에도 불구하고 작은 단위로 쪼개서 세는 경우가 발생하였다. 이 문제는 상한선을 설정해주지 않아 생긴 문제였다. 따라서, 예를 들면 천원의 장수를 세는 조건을 작성할 때 if (money >= 1000 && money < 5000) 와 같이 상한선과 하한선을 모두 설정해주었다.

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem5.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

PROBLEM 6

🚀 기능 요구 사항

우아한테크코스에서는 교육생(이하 크루) 간 소통 시 닉네임을 사용한다. 간혹 비슷한 닉네임을 정하는 경우가 있는데, 이러할 경우 소통할 때 혼란을 불러일으킬 수 있다.

혼란을 막기 위해 크루들의 닉네임 중 같은 글자가 연속적으로 포함 될 경우 해당 닉네임 사용을 제한하려 한다. 이를 위해 같은 글자가 연속적으로 포함되는 닉네임을 신청한 크루들에게 알려주는 시스템을 만들려고 한다.

신청받은 닉네임 중 같은 글자가 연속적으로 포함 되는 닉네임을 작성한 지원자의 이메일 목록을 return 하도록 solution 메서드를 완성하라.

제한사항

• 두 글자 이상의 문자가 연속적으로 순서에 맞추어 포함되어 있는 경우 중복으로 간주한다.
• 크루는 1명 이상 10,000명 이하이다.
• 이메일은 이메일 형식에 부합하며, 전체 길이는 11자 이상 20자 미만이다.
• 신청할 수 있는 이메일은 email.com 도메인으로만 제한한다.
• 닉네임은 한글만 가능하고 전체 길이는 1자 이상 20자 미만이다.
• result는 이메일에 해당하는 부분의 문자열을 오름차순으로 정렬하고 중복은 제거한다.

실행 결과 예시

formsresult

[ ["jm@email.com", "제이엠"], ["jason@email.com", "제이슨"], ["woniee@email.com", "워니"], ["mj@email.com", "엠제이"], ["nowm@email.com", "이제엠"] ]

["jason@email.com", "jm@email.com", "mj@email.com"]

내가 짠 알고리즘은 다음과 같다.

1. 닉네임 리스트 뽑기

2. 닉네임 별 두글자씩 자른 리스트(doubledList) 넣기 ex) '제이슨' -> [ '제이', '이슨' ]

2-1. 자르면서 자른 이름이 이미 doubledList에 있다면 이메일 대상 리스트에 넣기

3. 이메일 대상 리스트에 있는 닉네임에 맞는 이메일 주소를 찾아 리턴

 

근데 이때 문제점이 몇가지 있었다.

2번 ~ 2-1번 과정에서 닉네임을 자르는 과정에서 중복 체크를 하다보니, 첫번째 사람에 대한 체크는 이루어지지 않아 별도의 과정을 통해 체크를 해주어야 했다.

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem6.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

PROBLEM 7

🚀 기능 요구 사항

레벨 2의 팀 프로젝트 미션으로 SNS(Social Networking Service)를 만들고자 하는 팀이 있다. 팀에 속한 크루 중 평소 알고리즘에 관심이 많은 미스터코는 친구 추천 알고리즘을 구현하고자 아래와 같은 규칙을 세웠다.

• 사용자와 함께 아는 친구의 수 = 10점
• 사용자의 타임 라인에 방문한 횟수 = 1점

사용자 아이디 user와 친구 관계를 담은 이차원 배열 friends, 사용자 타임 라인 방문 기록 visitors가 매개변수로 주어질 때, 미스터코의 친구 추천 규칙에 따라 점수가 가장 높은 순으로 정렬하여 최대 5명을 return 하도록 solution 메서드를 완성하라. 이때 추천 점수가 0점인 경우 추천하지 않으며, 추천 점수가 같은 경우는 이름순으로 정렬한다.

제한사항

• user는 길이가 1 이상 30 이하인 문자열이다.
• friends는 길이가 1 이상 10,000 이하인 배열이다.
• friends의 각 원소는 길이가 2인 배열로 [아이디 A, 아이디 B] 순으로 들어있다.
  • A와 B는 친구라는 의미이다.
  • 아이디는 길이가 1 이상 30 이하인 문자열이다.
• visitors는 길이가 0 이상 10,000 이하인 배열이다.
• 사용자 아이디는 알파벳 소문자로만 이루어져 있다.
• 동일한 친구 관계가 중복해서 주어지지 않는다.
• 추천할 친구가 없는 경우는 주어지지 않는다.

실행 결과 예시

userfriendsvisitorsresult

"mrko"

[ ["donut", "andole"], ["donut", "jun"], ["donut", "mrko"], ["shakevan", "andole"], ["shakevan", "jun"], ["shakevan", "mrko"] ]

["bedi", "bedi", "donut", "bedi", "shakevan"]

["andole", "jun", "bedi"]

이 문제는 조금 머리가 아팠다. 친구 추천 알고리즘을 구현하는 문제였는 데, 두가지 조건이 주어졌다. 그 중, 첫번째 조건이었던 '사용자와 함께 아는 친구의 수'를 이해하는 게 조금 힘들었다. (다 풀고나서 생각해보니 그리 어려운 건 아니었는데 암튼 문제 풀 때는 머리 아팠다.)

 

1. [이름, 점수] 의 형태로 친구별 점수를 카운트할 리스트를 만들었다.

2. 사용자와 함께 아는 친구의 수 당 10점씩 추가하기

2-1. 사용자의 친구 리스트 뽑기

2-2. 친구 관계가 표시된 리스트 순회하며, 이름이 사용자가 아니고 이미 사용자의 친구가 아닌 사람에 대하여, 사용자의 친구 리스트에 있는 사람이 친구인 사람에 대해 10점을 추가해주었다.

3. 사용자의 타임라인에 방문한 횟수 당 10점씩 추가하기

3-1. visitors 리스트를 순회하며 점수 대상 리스트에 있는 사람에 대하여 점수를 1점씩 추가해주었다.

4. 점수 순으로 정렬한 후, 점수가 같은 경우 이름순으로 정렬하였다.

 

https://github.com/innerstella/javascript-onboarding/blob/innerstella/src/problem7.js

GitHub - innerstella/javascript-onboarding: 온보딩 미션을 진행하는 저장소

---

이번 주에 조금 바빠서 일주일의 시간을 온전히 못 쓰고 월요일~화요일에 몰아붙여서 한 것이 조금 아쉽기는 하지만, 평소에 자꾸 미루기만 했던 알고리즘 연습을 할 수 있어서 좋았다. 알고리즘을 풀다보니, 자바스크립트 자체의 내장 메소드들을 더 알아볼 수 있어서 좋았으며, 알고리즘 문제를 풀 때 배열과 정렬이 정말 많이 쓰인다는 것을 알게 되었다.

 

남은 2,3,4 주차도 파이팅! :)