fpzmfks 님의 블로그

오늘은 제시해주신 정답지를 기반으로 코드를 재구성해보려고 했다. 정답지가 제시되어 있음에도 불구하고 제법 어려웠는데, 많은 시간을 강의 듣는 데에 사용하기도 했지만 역시 코드를 정리하는 건 쉬운 일이 아니다.  그래서 이번 기회에 제시해주신 정답지를 제출용 js 파일을 사용해서 응용하여 작성해보고 코드를 깔끔하게 정리해보았다.   검색 기능이 아직 제대로 작동하지는 않지만, 가장 걱정되었던 fetch로 데이터 받아오고 카드 생성하는 것까지는 이 깔끔하게 정리한 코드로  잘 작동되었다.  이러한 깔끔한 코드의 핵심은 변수 선언과 함수 선언을 잘 활용하는 것이다. 또 그러기 위해서는 어떤 데이터를 활용해서 어떤 결과를 출력하고 싶은지도 잘 생각해보아야 한다.  생각해보면 지금까지 코드를 작성할 때는 '아무튼..

처음 완성한 코드let cardList = document.querySelector(".cardList");// 페이지가 로드되면 커서를 검색창으로 자동 지정window.onload = function () {  document.getElementById("inputBox").focus();};const options = {  method: "GET",  headers: {    accept: "application/json",    Authorization:      "??키??같은??정보??",  },};// fetch로 불러온 promise를 json=>객체 배열로 변환하여 사용함fetch(  "https://api.themoviedb.org/3/movie/top_rated?language=en-U..

어제는 주구장창 데이터 형태를 공부하면서 코드를 조금 깔짝여보고, 오늘에 이르러 그 동안의 노력이 빛을 발하여 과제를 완료했다.   페이지 렌더링과 함께 카드 생성, 돔 종료 후 검색 실행 기능 생성, 자식요소로 부모요소 검색, 홈 버튼과 위로 스크롤 버튼... 고난이 많았지만 대부분이 데이터 형태에 대한 무지에서 비롯된 것이었다.  다행히 어제 주구장창 일반복사와 얕은 복사, 깊은 복사를 공부한 보람이 있어서 이를 이용해 과제를 끝 마칠 수 있었다.  먼저 지난 잘못을 되돌아보자면, 저번에 페이지 렌더링를 끝마치지 못했던 것은 DOM을 제대로 다루지 못했기 때문이다. DOM을 잘못 이해하고 DOM으로 태그를 생성하는 부분을 for문에 돌리지 않고 변수 선언문처럼 사용하였으니 카드가 하나밖에 생성되지 않..

오늘은 어제 하던 개인과제를 일단락하고 다시금 자바스크립트 집중 학습을 시작했다. 꼭 알아야해서 배우고 있는 것이겠지만 이제 슬슬 학습이 버거워지는 시점이다.  데이터 타입(심화)먼저 데이터 타입(심화)를 정리해보자. 데이터 타입(심화)는 데이터의 타입이 기본형/참조형으로 갈린다는 것을 명시했다. 이러한 데이터 타입은 저장 방식과 불변성 여부로 갈리는데, 표로 정리하면 아래와 같다.  데이터 타입기본형참조형예시숫자, 문자, 불리언 등배열, 객체 등저장 방식값이 담긴  => 주소값을 저장값이 담긴 => 주소값을 저장한 묶음을 => 가리키는 주소값을 저장불변성 여부불변성 O불변성 X 이러한 구조를 다시금 표로 정리하자면 이렇게 된다. 데이터 저장 공간저장 공간 1저장 공간 2(불변성O)저장 공간 3(불변성X..

이번 주는 자바스크립트 공부와 함께 다음주 월요일까지 해야 하는 개인 과제도 있다. 때문에 오늘은 어제 배운 것들을 간단하게 복습하고, 대부분의 시간을 개인과제를 하는 데에 사용했다.  그리고 코딩이 내게 매번 새로운 놀라움을 준다는 것을 느꼈다. fetch로 반복문을 돌려서 영화 추천 리스트를 만들기 시작했는데, fetch를 다루는 게 너무 어려워서 내내 고생했다. 바로 어제와 아래에 객체와 배열을 이해했는데, 이제는 promise라는 것도 알아야 하고, 또 then에 대해서도 알아야 할 것 같다. 다만 아직 이러한 개념들을 이해하지 못했고, 따라서 과제도 완성하지 못했다.  오늘 배운 것은 이러한 것들은 아니고, 일단 당장에는 겉핣기로만 알게 된 다른 것들을 정리하려고 한다.  grid먼저 grid다..

map과 set은 기존의 객체와 배열보다 자료의 구성, 검색, 사용을 효율적으로 처리하기 위한 것이다. 특히 대량의 데이터를 처리하기 위한 자료구조이다.  엉성하게 정리하자면 객체 => map, 배열 => set으로 발전했다고 볼 수 있다. MAP먼저 map은 기존 객체의 구조의 key-value 관계에서value에만 온갖 데이터형식을 적용할 수 있었지만=> map에서는 key에도 온갖 데이터형식을 적용할 수 있다.  이러한 Map을 생성하고 관리할 수 있는 메서드들은 아래와 같다.  //생성const myMap = new Map()--------------------------------------------------//값 넣기myMap.set( 'key', 'value' )   //set과 get은..

오늘은 es6 문법과 객체 함수, map, set에 대해서 배웠다. 대부분 잘 모르는 것들인지라 하나하나 배운 것들을 정리하며 학습해나갈 것이다.  먼저 es6 문법이다. let, const에 대해서 다시 언급되었는데, 이는 2015년에 es6 대규모 업데이트로 추가된 것으로, 편리성을 개선한 변수 선언 방식이다. 이전의 var 변수선언 방식은 변수를 다시 선언할 수 있는 점 때문에 여러 문제가 있었으므로 코드를 짤 때는 변수 선언을 다시 할 수 없는 let과 const를 사용하는 게 좋다고 한다.  이 중 let은 재할당을 할 수 있기 때문에 특히 유용한 변수선언 방식이다. 할당이란 구조 분해 할당과 이어지는데 이전에 살펴 보았던 변수 선언 비교를 통해 알아보자면 let add = 0let add = ..

오늘부터 일주일 간은 자바스크립트 집중 학습기간이다. 그 동안 코드카타와 프로젝트 진행을 하며 어림짐작으로만 되면 되고, 안 되면 안 되고 말았던 것들의 작동 원리를 더욱 깊이 알아볼 수 있을 것이다.  해당 수업에 앞서서 배운 것은 일단 node.js를 이용하여 터미널에 콘솔을 찍어볼 수 있다는 것이다. 현재로써는 node.js의 다른 기능들을 잘 모르겠지만, 이렇게 일일이 콘솔을 찍어볼 수 있으니 각 함수나 변수의 작동원리를 알아보기는 편리할 것이다.  먼저 변수 선언과 관련된 것들이다. 변수란 같은 값을 재사용하기 위해서 특정한 값을 저장하는 것을 뜻한다. 내가 지난 시간 동안 알게 된, 그리고 강의에서 알려준 변수 선언은 'var, let, const'이다.  이 중 let과 const는 2015..

오늘은 마지막 날로, 거의 마무리된 결과물을 전체적으로, 그리고 세세하게 살피면서 css에 미흡한 점이나 페이지 이용에 불편한 점 같은 것들을 찾아서 수정했다.  그리고 먼저 언급할 것은, 어제 작업한 링크 등의 동적 css들을 내 마음대로 반영했다가 일부 삭제 피드백을 받았다는 것이다. 대강 구현한 게 거의 밤 9시이니만큼 다른 분들도 피곤할테니 일단 반영부터 하고 본 것인데, 사실 add commit만 해두고 오늘 아침에 피드백을 거친 후 merge하면 되는 일이기는 하니 내 잘못이 맞았다. 앞으로는 git pull 다음 git push뿐만이 아니라 git 피드백도 명심해 두어야겠다.  다음으로 오늘 한 것 중에서 가장 인상적이었던 것은 id값을 css에서 사용한 것이다. 사실 학습하는 입장이라 하루..

오늘은 다른 팀원들을 돕고, git을 열심히 자습하고, 메인프레임도 조금 건드리다가 '일거리는 스스로 찾아내는 것이다'라는 조언을 듣고 css에 자주적으로 손을 대어보았다. 태그를 이용해서 유튜브 링크를 숨겨넣는 등으로 페이지가 좀 더 동적으로 움직이도록 한 것이다.   태그는 지난 번에 이미 사용해보았으니 더 말할 것은 없고, 이번에는 hover와 cursor로 페이지를 꾸며 보았다.  먼저 hover는 css파일에서 .(클래스명):hover {    background-color: black;} 과 같은 형태로 사용되는 기능으로, 이 기능을 사용한 html 요소에 커서를 옮기면 대상의 색이 변하는 등의 변화가 나타나서 웹페이지에 생동감을 더할 수 있다. 나는 이 기능을 유튜브 링크를 숨겨넣은 글자,..