뉴히의 개발 로그

window.onresize는 리사이즈가 될때마다 객체에 발생하는 이벤트다. 팀프로젝트로 API를 받아와서 영화 정보 조회 사이트를 만드는 프로젝트였다. 영화 정보 상세페이지에 같은 장르의 영화를 추천해주는데 슬라이드 반응형으로 작업을 하기로했다. 모바일에서는 슬라이드가 2개, 태블릿은 3개, PC에서는 5개가 보여지도록 구현하기로. 불려오는 영화의 갯수가 다르기 때문에 스크립트에서 슬라이트 낱개의 너비와, 전체 슬라이드의 길이를 만들어줘야했다. let screenWidth = window.innerWidth; if (screenWidth < 768) { slides.style.width = 50 * slideCount + '%'; } else if (screenWidth < 1200) { slides...

팀프로젝트 막바지! TMDB에서 데이터를 불러와서 사용하는데 인기순위, 최고평점등의 객체를 20개씩만 불러올 수 있었다. 그런데 더 불러와서 더보기로 보여주고 싶었기에 fetch를 두개 불러서 합쳐보기루 처음엔 각 다른 패치를 따로 불러오려했었는데 합펴서 같은 값을 제거한는게 더 쉬운듯 해서 객체 합치기 공부 :) 배열 메서드 concat() concat 은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1..

스택(Stack) 자료구조 LIFO(Last In First Out) 스택은 흔히 프링글스에 비유가 된다. 프링글스 통 안에 감자칩이 쌓여있지만 우리는 가장 위에 있는 감자칩부터 꺼내는 수 밖에 없다. 즉, 마지막으로 넣은 것이 (맨위에 있으므로) 가장 먼저 나오는 Last In First Out(LIFO) 구조이다. 스택은 한쪽 끝에서만 자료를 넣고 뺄 수 있는 자료구조이다. 스택으로 할 수 있는 가장 기본적인 연산은 스택 맨 위에 값을 넣고(PUSH), 스택 맨 위의 값을 꺼내고(POP), 스택 맨위의 값을 확인하는(PEEK) 것이다. 큐(Queue) 자료구조 FIFO(First In First Out) 음으로 들어간 친구가 처음으로 빠져나오는 FIFO(First In First Out)의 성격을 가..

localStorage 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐! 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유..

지난 한주는 개인 프로젝트를 진행하고 제출하며 마무리했다. 그리고 + 새로운 팀프로젝트! 가 시작되었다. Keep | 다음 프젝에도 유지했음한다 개인프로젝트 지만 같은 과제를 진행하며 팀원들과 함께 여러의견 나누면서 공유하면서 작업 모르는 부분 서로 묻고 답해주고 같이 고민해보기 안되는 부분은 다양한 방법으로 접근해보기 Problem | 이번프젝 문제점/해결방안 API에서 필요한 데이터 가져오기 필요에 따라 함수, 메서드 다양하게 사용해 보기 Try | 다음 플젝을 위해 할 노력 어느 상황에 어떤 함수나 메소드를 사용해야하는지 공부하기 알고리즘 조금씩 꾸준히 공부하기 Feel | 이번 프로젝트를 통해 느낀점 갈길이 멀구나 ㅎㅎ 그래도 함께 팀원들하고 얘기하면서 배우는게 많은! 팀원이 있으면 정말 좋다 좋..

작업 환경 / 파일 디렉터리 셋업 및 html,css html문서 The Best Movie 검색창 검색 전체 목록 Copyright © NBCamp 2023 이런걸 방지하기 위해서 두가지의 방법이 있다. 태그 바로 위에 스크립트 소스를 넣거나 를 넣어준다! defer는 스크립트 소스코드가 상단에 있어도 다운로드는 받지만 실행은 html 파서가 문서 파싱을 한번쫙 다 한다음에 실행되도록 한다! defer를 그림으로 보면 이렇게 표현할 수 있다. 또한 스크립트는 독립적으로 나눠서 관리하는게 좋다. 자바스크립트는 import와 export를 사용해 모듈화 시켜서 작업 관리가 가능하다. 이렇게 모듈화 시키게 되면 협업시에 여럿이 각각의 모듈을 개발한다해도 작업, 유지 보수에도 좋고 스코프를 독립적으로 만들어서..

문자열 치환 replace() 함수, split(), join() 검색시에 공백을 제거해서 띄어쓰기가 틀리거나 해도 모두 검색이 될 수 있도록 split으로 공백을 기준으로 쪼개고 join으로 공백을 없애 주도록 했는데 튜터님께 코드 피드백 받는도중 저건 왜 split으로 쪼갠거죠? 하셔서 ㅎㅎㅎㅎㅎㅎ 코드봤을때 조금 의아했다! 하시며 replace 함수를 쓰는게 어떻겟나? 하셔서 변경해보앗다. 기존코드 const matchMovies = movies.filter((item) => { let titles = item.original_title.split(' ').join('').toLowerCase(); inputValue = inputValue.split(' ').join(''); return titl..

alert창 한번만 띄우기 !!! 어제 if 문으로 해결 된지 알았으나 아니었던것! 그 이유는! movies.forEach 안의 if문이라서 movies를 다 돌때 까지 alert창이 뜨는것 이였다 ㅎㅎㅎㅎ console창을 보면 알 수 있다! console을 잘 찍어봐야 하는 이유! let searchBtn = document.getElementById("search-btn"); searchBtn.addEventListener("click", function(){ let temp_html = ''; // input 입력값 let inputValue = document.getElementById("search-input").value.toLowerCase(); console.log('입력값->',inpu..