코딩

오늘은 사이드바를 제작하고, 제작한 사이드바를 기반으로 ui가 바뀌어서 적용되는 스크립트를 작성하였다.사이드바는    div class="left-side-bar">      div class="status-ico">        span>▶span>        span>▼span>      div>      ul>        li>          a href="#" id="nowpop">인기 영화a>        li>        li>          a href="#" id ="upcoming">개봉 예정a>        li>        li>          a href="#" id = "historypop">역대 흥행 영화a>        li>      ul>    div>와 같이 ..

콜백 함수엔 다양한 함수들이 있다.SetTimeout을 이용한 일정시간 뒤의 log출력setTimeout(function() {    console.log("hello");}, 1000);forEach를 이용한 배열 출력const numbers = [1,2,3,4,5];numbers.forEach(function (number) {    console.log(number);});와 같은 다른코드의 인자로 넘겨주는 함수를 콜백함수라고 한다. 콜백함수의 경우는 제어권이 원래있던 코드가 아닌 콜백함수에 넘겨준 주체에있다고 생각해야한다.SetTimeout의 경우 1초후 hello라는 로직을 처리하는 제어은 callback함수인 setTimeout에게 있다.콜백함수의 제어권에 대해● 1.함수 호출시점에 대한 제어..

오늘은 간단한 코딩테스트를 먼저 진행했다.문제 이름은 자연수 뒤집어 배열로 만들기이다. 말 그대로 자연수 N을 받아온 것을 뒤집어서 결과값에 출력해주면 된다.풀이 코드를 먼저 보여주고 설명을 진행하겠습니다.풀이코드function solution(n) {    var answer = [];    //toString()문으로 num을 문자열로 바꾸고, split('')으로 각문단을 ("1", "2","3") 처럼 나눠준다.    let num = n.toString().split('');        for(let i = num.length - 1; i >= 0; i--)        {            //Number로 감싸줘서 다시 answer로 들어갈때는 정수형으로 들어가게 바꿔줌          ..

오늘은 영화를 검색할 경우 해당 영화 카드가 나오는 시스템을 제작하였다.function findCard() {  let name = document.getElementById('moviefind').value;  name = name.toLowerCase();  //데이터 없이 입력했을 경우  if (name === ' ') {    for (let i = 0; i targetdata.length; i++) {      document.querySelector('.movie-card').remove();    }    targetdata = null;    targetdata = obj;    makeCard();  }  else {    let foundname = obj.filter(item => ..

오늘은 개인프로젝트 제작을 하였다.혼자 작업을 하는거라 확실히 팀으로 작업하는거랑 조금 다른 느낌이 있었다.우선 개인프로젝트로 TMDB의 영화 데이터를 가지고와 영화 검색사이트를 제작하는 것을 목표로 프로젝트를 진행하였다.우선 TMDB에서 제공하는 OpenAPI를 가지고와야하는데다음과 같이 우측 상단의 Language를 우리가 쓸 언어인 Javascript로 바꾸어 주고 Fetch Request부분의 문구를 가지고와 Fetch해주면 데이터를 가지고 올 수 있다.다음과 같이 데이터를 가져오는 모습을 실행했을 경우 확인할 수 있다.해당 정보는 fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)  .then(r..

오늘은 몸이 좀 피곤한 날이였다..그래도 꾸준히 공부해서 성과를 내고 오늘은 프로젝트도 조금 준비해놔야한다.우선 공부를 마저해줬다, 실행 컨텍스트에 대해서 배웠는데실행 컨텍스트를 이해하기 위해선 우선 스택과 큐에 대한 개념을 배워야했다.STACK은 LIFO(Last In First Out) 이고, Queue 는 FIFO(First In First Out)이다.실행 컨텍스트는 그중 call Stack이기때문에 Stack의 구조를 따른다.실행컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.실행 컨텍스트는 보통 함수로 구성된다. 우리는 전역변수나 eval을 안쓸것이기 때문에 함수 위주로 생각하면 된다.쉽게 말해서 위에서부터 아래로 순서대로 함수를 실행한다고 생각하면된다.실행 컨..

어제 학습했던 6-2일차까지 작성이 끝나고, 오늘 배운 7일차를 정리해보고자한다. 우선 시작하면서 ES6 문법을 공부하게 되었다. ES6문법은 2015년도에 개발되어 최신인 javascript문법이다. 함수를 등록하는 방법이 추가되었는데 기존 함수를 function add() { //로직 } 과 같이 작성했다면 //arrow function var add = (x) => { return 1 } var add = (x) => 1; arrow function을 이용하여서 간단하게 나열할수 있다. x자리에는 매개변수가 들어온다. 밑에 var add= (x) => 1; 과 같이 한줄로 간단하게 표현할 수도 있는데 이것은 return 1과 같이 한줄로 결과 값이 나오는 경우에만 가능하다. 그리고 데이터 영역과 변..

오늘은 TIL7일차가 되었다. 어느덧 순수 공부날만 7일이 되어서 9시부터 일어나서 학습하는 것이 익숙해지기 시작했다. 오늘도 최선을 다해 오늘 배운 것을 정리해보고자 한다. 어제 저녁에 학습하여 TIL에 못 넣은 부분이 있다. 어제 저녁에는 본격적으로 조건문 반복문 (for, while)등을 배웠다. 그래도 대학생 시절에 c, c++을 배운 것이 도움이 되어서 조건문과 반복문을 배우는 것이 크게 어렵지 않았다. 조건문과 반복문 둘다 사용법이 c와 같았는데 조건문(if) 의 경우 //if - else if - else 문 let x = 10; if (x = 0 && x 0부터 9까지 실행 될것이다. 다음과 같이 배열을 실행해서 로직을 이용가능하다. while도 예시가 쉬운데 let i = 3; while..