어제 만든 기능과 연관된 이슈들을 몇 가지 적어보려고 한다. 처음 innerhtml으로 데이터를 웹 상에 구현했을 때 여러 시도를 해보며 알게 된 점이 있다. 한 번은 innerhtml로 여러 태그들을 만들고 그 안에 데이터를 넣었다. 이를 이용해 그 만들어진 카드를 클릭하게 되면 이벤트가 발생하는 기능을 넣으려고 했다. 분명 alert을 띄워주는 eventListener를 넣어주었는데 alert이 뜨지 않았다. 그래서 처음에는 html 폴더에 없는 건(js만든 태그는) querySelector에 eventListener를 달 수 없다고 생각했다. 하지만 몇번의 시도 끝에 '만들어지고 난 다음에는 js로 만든 태그에 querySelector로 eventListener를 달아 사용할 수 있다' 라는 것을 ..
TIL
오늘부터 개인 프로젝트를 시작했다. 주어진 과제는 다음과 같았다. 영화 open API를 이용해 영화 데이터를 가져온 후 웹에 구현하기 (영화 이미지, 영화 제목, 내용, 평점) 웹에 구현한 내용을 클릭하면 영화 ID가 alert창에 뜨도록 하기 영화 검색 기능 구현하기 처음에는 이 기능을 어떻게 구현하면 좋을지를 생각하며 프레임워크를 짜봤고 어떤 기능이 추가적으로 들어가면 좋을지 생각해봤다. 우선 가장 기본적인 필수과제부터 넣기로 했다. 기본적인 css는 주어진 예시파일의 css 기본틀을 차용했고 따로 display : grid를 적용해서 웹 구역을 나눠주었다. 또한 추가적으로 들어갈 기능들을 구상해봤는데 로그인 기능 넣기, 로그인에 따른 영화 장바구니 만들기. 각 영화정보 카드에 좋아요 누르면 좋아요..
오늘도 어김없이 새로 마주치게 되는 새로운 메서드들. 몇 개는 본 적이 있고 몇 개는 처음 보는 메서드이지만 확실하게 복습할 겸, 머릿속에 넣어두기 위해 정리하려고 한다. tofixed() : Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후 그 값을 문자열로 반환합니다. 특강을 듣다 우연찮게 발견한 친구이다. 특강 중 소수를 정수로 변환하는 작업을 하는 과정을 누군가가 tofixed로 해결했다. (나도 나중에 써먹어야지..) // 기본적인 사용 방법 numObj.toString([소수 자릿수]); let numbers = 1.2345; numbers.toString(); // 1 numbers.toString(1); // 1.2 numbers.toString(2); // 1.23 n..
매일 알고리즘을 보는데 매일 새로운 메서드들과 만난다. 메서드 엄청 많네.... 오늘 배운 메서드들을 정리해보려고 한다. reverse() reverse 메서드는 '배열'의 정렬 순서를 뒤집어 주는 메서드이다. '정렬의 순서를 바꿔준다' 라는 기능을 통해 다른 메서드들과 조합하면 문자열을 거꾸로 뒤집을 수 있다. // 정렬된 문자열 뒤집기 let str = "ABCDE" let str2 = str.split("").reverse().join(""); console.log(str2) // "EDCBA" // 정렬되지 않은 문자열 내림차순으로 정렬하기 let str = "BADEC" let str2 = str.split("").sort().reverse().join(""); console.log(str2) ..
새로 배운 메서드 혹은 메서드를 알고는 있었지만 새로 알게된 사용 방법을 적어보려고 한다. sort() 정렬을 시행해주는 메서드. 기본 사용법은 아래와 같다. // 기본적인 오름차순 정렬 array.sort(); // 함수를 이용한 내 마음대로 정렬 array.sort(funtction(a,b){ //내가 정하는 정렬 기준 }); sort 메서드의 function부분을 찾아보면 다음과 같은 설명이 있다. 조금 더 간략히 적어보자면, function의 파라미터는 array의 element를 a와 b로 받는데 이 a와 b를 비교해서 -일 경우 오름차순으로 정렬, +일 경우 내림차순으로 정렬, 0일 경우 정렬을 실행하지 않는다. 이 때, a와 b가 element를 받아오기 때문에 element가 객체라면 a[..
튜터님께 들은 정보들을 체계적으로는 아니지만 중구난방으로라도 적어보려고 한다. JSON (feat. Crawling) JSON이란 javascript object처럼 보이게 하는 문자열의 모음. 우리는 url을 통해 서버에 데이터를 요청하면 HTML파일로 데이터를 받을 때도 있고 JSON형태로 받을 때도 있다. 그런데 보통의 경우 백엔드 서버에 요청을 하면(API로 요청했을 때는) 서버에서 데이터를 JSON의 형태로 주고 그렇지 않은 경우에는 HTML의 형태로 준다. 그런데 이 때 백엔드 서버에서는 내부용 데이터와 외부용 데이터가 있는데 우리가 openAPI는 외부용 데이터라고 생각하면 된다. 크롤링을 하는 부분에서 서버에서 보내준 HTML파일을 사용하게 되면 단점이 있는데, 그 웹 페이지의 HTML형식..
스파르타 내일배움캠프 첫 프로젝트로 팀 소개 페이지를 만들고 난 후 코드리뷰를 하며 배웠던 사실들을 적어두려고 한다. 모듈화의 조건 1.독립성 2. 단일 책임 원칙 3. 재사용 가능성 4. 캡슐화 모듈화의 조건에는 위의 네 가지가 필요하다. 몇 가지만 추가적으로 정리해 보자면 단일 책임의 원칙이란 모듈화를 한 파일은 명확하게 한 가지 기능만 해야 한다는 것이다. 캡슐화는 지정한 변수나 함수를 다른 파일에서 바꿀 수 없게 만드는 것이다. 모듈화를 하는 이유 '코드의 유지, 보수에 좋다'와 같은 것들을 빼고 다른 부분들을 설명하자면 다음과 같다. 1. 다른 페이지에서 할당한 변수나 함수를 또 다른 페이지에서 마음대로 가져다 쓰면 scope가 뒤죽박죽이 될 수 있기 때문에 모듈화를 하는 것이 좋다. 2. 필요..
