Today I learned
첫 개인과제! 영화 검색 서비스
오늘은 첫 개인과제의 발제가 있었고 나는 노션에 알고리즘 스터디 페이지를 만들었다.
과제는 간단한 영화 검색을 제공하는 웹 서비스를 만드는 것이다. 영화 정보 OpenAPI인 TMDB 에서 일부 카테고리의 영화 데이터를 받아와 카드리스트 형태로 뿌려주고, 간단한 검색 기능을 넣는 것 까지가 과제의 내용. 인데 나는 개인적으로 과제 준비 과정에서 API 키 요청하는 것을 처음 해봐서 이 부분도 공부가 된다고 생각했다.
과제를 조금 더 작은 단위로 쪼개보면 과제가 수강생에게 요구하는 것을 알 수 있다.
- JavaScript 문법 전반에 익숙해지기
- fetch API 중 가장 간단한 GET 메서드를 사용해보는 것
- Promise Chain을 직접 구현해보는 것
- JSON 데이터를 바탕으로 object를 만드는 것
- jQuery 없이 VanillaJS 로 DOM 을 조작해보는 것 - HTML 코드 직접 작성해보기
- JavaScript 공부하면서 조금 흐려진 기억을 되살려보는 것 - Bootstrap 없이 CSS 직접 작성하기
- flex나 grid를 이용해 UI를 직접 구성해보는 것
빠진것도 있겠지만 지금 생각했을땐 이정도일 것 같다. 원래 막 의도 같은 걸 생각해보는 타입은 아닌데 어쩐지 요즘 들어서 자꾸 이런다. 제대로 짐작할수만 있다면야 좋겠지만. 아무튼.
과제 문서 읽기는 이 정도만 하고 나머지는 index.html파일의 기초 뼈대 정도만 만들어두었다. React를 막 많이 써 본 것도 아닌데 벌써 html 파일 작성하려니 낯설고 버벅거린다. 사람이 편리한것에 익숙해지면 이렇게 되나보다...
그러면 오늘은 뭘 했냐 하면!
알고리즘 스터디 노션 페이지
노션 팀 페이지의 하부 페이지에 '알고리즘 스터디' 라는 페이지를 만들었다. 이름을 다 지우고 보니 나 혼자 있는 것 같은데... 팀원들과 함께 공부해볼 알고리즘 문제를 공유하고 풀이도 올려보는 페이지다. 노션은 처음 만져봤는데 왜 많은 사람들이 사용하는지 알 것 같다. 쥑이네.. 무료로 이용할 수 있는 캐퍼시티가 꽤나 박한 편이라 조금 걱정되지만 여차하면 스프레드시트에 백업할수도 있고 뭐... 하는데까지 해 보는거지. 많은 튜터분들이 말씀하시는게 '일단 해라' 이다. 그런 정신을 다시한번 새기면서.
알고리즘 문제 풀이
오늘은 여섯문제 정도를 풀었다. 오늘 푼 문제는 대부분이 배열에 관련된 것이였다. 난이도 0짜리여서 쉽게쉽게 풀릴거라고 생각했고 대체로 그랬지만 한 문제가 조금 시간을 잡아먹었다.
분수의 덧셈을 구현하는 문제인데, 사실 알고리즘 조금 풀어봤다 하는 분들에게는 익숙한 패턴일지 모르나 나에게는 낯설었다. 처음 문제 설명을 읽자마자 머릿속에 떠오른 키워드는 GCD였다. 그리고 실제로 GCD를 찾아야 하는 문제였다. 학부생때의 기억을 되짚어보면 재귀함수의 형태로 만들었던 것 같은데, 왠지 난이도 0 짜리에 그렇게까지 하고싶지는 않아서 그냥 반복문 하나로 약간 어거지로 만들었다.
우리는 암산으로 할 수 있는 일을 코드로 짜려니 시간이 걸린다는 아이러니함이 재미있어서 기억에 남을 것 같다.
function solution(numer1, denom1, numer2, denom2) {
var answer = [];
// 통분
let denom = denom1 * denom2; // 결과값의 분모
numer1 *= denom2; // 첫 번째 분수의 분자와 두 번째 분수의 분모를 곱
numer2 *= denom1; // 두 번째 분수의 분자와 첫 번째 분수의 분모를 곱
let numer = numer1 + numer2; // 분모가 같으니 분자끼리 더할 수 있다
// gcd(최대공약수) 구하기
const limit = Math.min(denom, numer); // 최대공약수는 피제수보다 클 수 없다
let gcd = 1;
// limit 부터 작아지면서 공약수를 구하면 첫 공약수가 최대공약수가 된다
for(let i = limit; i > 1; i--) {
if((numer % i === 0) && (denom % i === 0)){
gcd = i;
break;
}
}
//약분
answer[0] = numer / gcd;
answer[1] = denom / gcd;
return answer;
}웹 기초 특강
오늘 저녁시간 직후 튜터님께서 웹 기초 특강을 한시간가량 진행하셨다. 개인과제가 나오면서 혼란스러워하는 수강생들이 많아 준비하셨다고 했는데, 과연 들어둘만한 특강이었다. 가장 골자가 되는 내용은
웹 서버가 '서버' 라고 해서 백엔드만 있는 것이 아니다. 프론트엔드도 있다.
서버는 요청에 대한 처리를 한 후에 응답을 준다.
이정도인 것 같다. 웹 서비스는 클라이언트의 요청에 대해 처리를 하고 결과를 보여주는 것! 사실 다른 동료 수강생들의 혼란이 충분히 이해가 가는 게, 초등학생때부터 고사리손으로 야후꾸러기 들락거리면서 컸는데 여태 웹이 뭔지 모르고 있었으니. 근데 생각해보면 우리 대부분은 우리가 숨쉬는 공기(대기)의 구성성분도 모른다. 나무위키 찾아봐야지...
글을 마치며
오늘 TIL은 다소 수다스럽고 두서없었다. 음... 정돈된 글을 쓰려고 하면 시간이 무한대로 늘어나서 쓰다 말고 결국 자버리는 일이 부지기수였기에 오늘은 조금 많이 편하게 써 봤다. 쓰다 보면 스타일이 갖춰지겠지. Form follows function...
Links
