🥞 오늘 한 일
- 알고리즘 코드카타
- 가운데 글자 가져오기
- 수박수박수박수박수박수?
- 내적
- 약수의 개수와 덧셈
- 알고리즘 특강 (09:00)
- 선택 정렬 숙제 풀이
- JavaScript 개인 과제 (영화 검색 사이트)
- 좌측 영화 리스트 제작 및 클릭 시 해당 영화 카드만 보이는 기능
- 과제 제출 완료
- JS 개인과제해설 수강
- 개인과제 해설 기반 과제 그로스
- form 태그에 submit 이벤트로 클릭 및 엔터 기능 하나의 스크립트로 대체
- 검색 결과 없을 때 알럿 처리
- 카드 반응형으로 줄바꿈시키기
🍽️ 문제 해결
알고리즘 특강 숙제
문제
선택 정렬을 이용해 배열 내 요소들을 정렬하기
내 풀이
function selectionSort(arr){
for (let i=0; i<arr.length-1; i++){
let minIdx;
for (let j=i+1; j<arr.length; j++){
if ((arr[i]>arr[j] && typeof minIdx === 'undefined')||(arr[minIdx] > arr[j] && typeof minIdx === 'number')){
minIdx = j;
}
}
if (typeof minIdx !== 'undefined'){
let curr = arr[i];
arr[i]=arr[minIdx];
arr[minIdx] = curr;
}
}
return arr;
}여러 시도 끝에 일단 선택 정렬의 방식처럼 작동하도록 코드는 짰다.
정답
function selectionSort(array) {
let n = array.length; // 루프 카운트!
// 이번에는 i ~ n - 2까지 돌면서 실험군을 선택해요!
for (let i = 0; i < n - 1; i++) {
let minIndex = i; // i번째에 들어갈 최소값을 찾아요!
for (let j = i + 1; j < n; j++) {
// 현재 최소값으로 설정된 친구보다 더 작은 친구를 발견하면!
if (array[j] < array[minIndex]) {
minIndex = j; // 최소값 인덱스를 갱신합니다!
}
}
// i번째에 최소값 인덱스에 있는 값을 넣어줍니다!
let temp = array[i];
array[i] = array[minIndex];
array[minIndex] = temp;
}
return array;
}정답이라고 되어있는 코드와 내 코드를 비교해보니, 내가 너무 힘들게 코드를 짰다는 것을 깨달았다.
내 코드를 기준으로 minIdx에 i를 적용시켜주기만 했다면 굳이 해당 변수 타입이 undefined인지 비교를 할 필요도 없었고 간단해지는 것...
minIdx가 i라면, 특별히 변경값이 없을 때 arr[minIdx]를 arr[i]로 설정해줄 때도 문제가 없는 것이다.
확실히 이런 잘 정리된 코드를 계속해서 보면서, 코딩의 구조에 대한 훈련을 해야겠다고 느꼈다.
알고리즘 코드카타
가운데 글자 가져오기
문제
단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.
내 풀이
function solution(s) {
let num = Math.floor(s.length/2);
let result = '';
if (s.length % 2 === 0){
return result += (s[num-1]+s[num]);
} else {
return result += s[num];
}
}가운데 인덱스를 Math.floor() 메서드를 사용해서 가져오는 방법으로 해결했다.
수박수박수박수박수박수?
문제
길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.
내 풀이
function solution(n) {
let result = '';
for (let i=0; i<n; i++){
if(i%2===0){
result += "수";
} else {
result += "박";
}
}
return result;
}짝수일 경우 2로 나눴을 때 나머지 값이 0인 점을 이용해 간단히 문제를 해결했다.
내적
문제
길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.
이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)
내 풀이
function solution(a, b) {
let result = 0;
for (let i=0; i<a.length; i++){
result += a[i]*b[i];
}
return result;
}문제가 간단하여 반복문으로 쉽게 해결했다.
약수의 개수와 덧셈
문제
두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.
내 풀이
function solution(left, right) {
let result = 0;
for (let i=left; i<=right; i++){
let num = 0;
for (let j=0; j<=i; j++){
if (i%j === 0){
num++;
}
}
if (num % 2 === 0){
result += i;
} else {
result -= i;
}
}
return result;
}이중 반복문으로 각 숫자마다 약수를 찾고 약수가 짝수일 시 더해주고 홀수일 시 빼줌으로 문제를 해결했다.
🍪 배운 것
JS 개인과제해설
- html에서 script 가져올 때 defer 속성을 넣게 되면 지연시켜 실행한다. 때문에 head에 있어도 문제없이 작동한다. 그러나 요즘엔 잘 사용하지 않는다. 요즘은 type=”module”을 더 많이 사용한다. defer 기능을 내포하고 있고 그 외 기능들도 많기 때문.
- type=”module”을 쓰는 이유 중 하나는 각 js 파일 별로 독립적인 scope를 보장하기 때문. 각자 다른 js 파일에서 동일한 변수명을 쓰더라도 문제가 없다. 각 파일끼리 export, import 하여 요소를 공유할 수 있다. 또한 stirct 모드가 기본적으로 적용된다.
알고리즘 특강 4일차 정리
오늘 배울 것
- 스택과 큐
- 정렬 알고리즘
- 버블 정렬
- 선택 정렬
- 삽입 정렬
스택
- LIFO (Last In First Out)
- 쓰이는 경우
- 모바일 앱에서 뒤로 가기 버튼에 활용하는 자료구조.
- 직전에 호출했던 스크린을 호출해야하는 특성 때문.
- Undo/Redo 같은 기능도 스택을 이용. 역순의 성질을 사용.
- 모바일 앱에서 뒤로 가기 버튼에 활용하는 자료구조.
- 스택의 대표적 기능
- 픽(peek)
- 스택의 Top 데이터를 보는 것.
- 푸시
- 스택에 원소를 삽입. 원소는 Top에 들어감
- 팝
- 스택의 Top에서 원소를 가져오는 행위.
- 픽(peek)
큐
- FIFO (First In First Out)
- 큐의 대표적 기능
- 픽(Peak)
- 큐의 Front 데이터를 보는 것
- enqueue(삽입)
- 큐에 원소를 삽입하는 행위
- dequeue(뽑기)
- 큐에서 원소를 뽑아오는 행위
- 픽(Peak)
정렬 알고리즘
- 버블 정렬
- 처음부터 두 숫자끼리 비교해서 반복하여 작은 숫자부터 큰 숫자 순서대로 정렬
- 한 번 할 때마다 마지막 숫자가 제일 큰 숫자가 되므로 다시 돌릴 때 해당 숫자들은 빼준다.
- 선택 정렬
- index 하나마다 위치할 원소를 결정하고 그 다음 index로 넘어가는 기법
- 인덱스 하나마다 반복해서 남은 숫자 중 제일 작은 숫자를 인덱스에 넣는다.
- 삽입 정렬
- 선택 정렬과 달리, 전체에서 하나씩 올바른 위치에 “삽입”하는 방식.
- 비교를 해서 비교되는 숫자가 더 작을 경우 그 전까지 여러번 비교를 해서 자신의 자리를 찾는다.
🍴 느낀 점
- 영화 검색 사이트를 저번주에 빠르게 구현했지만, JS 개인과제해설 강의를 보고나니 정말 많은 부분에서 부족했다고 느꼈다. 특히 async await이 계속 내 발목을 잡고있다고 느낀다.
🍳 내일 할 일
- 외출 (국취제 신청으로 고용센터 방문)
- 개인과제 해설 기반 과제 그로스 및 개인과제 재제출 (기한이 내일까지이므로 중요)
- async await 사용하여 구조 변경
- 카드 ul 태그에 이벤트 위임
- GIT 심화 특강(19:00)
