072DATA

안녕   오늘은 명시적으로 this를 설정하기 위해서 사용되는 3가지 메소드에 대해서 간단히 정리해보겟슴닷     call 메서드 함수 호출 시 this를 명시적으로 지정해야 할 때 사용합니다 특징컨텍스트 전환객체 메서드를 다른 객체에서 호출하고 싶을 때 call을 사용해 this를 바꿀 수 있음. 사용법functionName.call(thisArg, arg1, arg2, ...) const person1 = { name: '이태규' };const person2 = { name: '한도현' };function greet() { console.log('상민이 닮은, ' + this.name);}greet.call(person1); // "상민이 닮은, 이태규"greet.call(person2); //..

안녕안녕하세요 오늘은 프로젝트 진행중에 별점 기능을 추가하여해당 로직들을 살펴보고 설명해보는 글을 작성해보도록 하겠습니다. 또 자랑도 할 겸 이미지 캡처 올려드리고 깃허브와 배포 링크도 달아두겠습니다.구경 한 번씩 해보시고  피드백이나 에러사항 있으면 댓글로 부탁드립니다.   Moview - 배포 링크https://shyunis.github.io/Moview/ THISISMOVIETHISISMOVIE Movie Make Dreamshyunis.github.io  Moview - 깃허브 링크https://github.com/sHyunis/Moview GitHub - sHyunis/Moview: 영화 커뮤니티영화 커뮤니티. Contribute to sHyunis/Moview development by cre..

안녕  오늘은 프로젝트 진행중 구현된 기능중 슬라이드에 대해서 소개해보겠슴다   변수 선언 let currentSlide = 0; const slider = document.querySelector(".slider"); const slides = document.querySelectorAll(".slide"); const leftButton = document.querySelector(".slide-button.left"); const rightButton = document.querySelector(".slide-button.right");   먼저 슬라이드의 현재 위치를 업데이트 할 수 있도록 변수,슬라이드를 적용시킬 요소(div, button)를 querySelector를 사용하여 클래스 ..

안녕 TMDB API를 활용해서 영화 뿐만 아니라 크레딧과 OTT 정보도 가져올 수 있습니다. 해당되는 API의 URL을 Fetch로 요청해서 APIKEY를 삽입하고 데이터를 받으면 되는데 말로만 하면 이해하기 어려우니 코드를 삽입 하겠습니다.(OTT정보만 해볼게요) 데이터 요청 const apiKey = "TMDB에서 지급해준 API KEY를 담아줍니다.";//async, await문법을 활용하여 데이터를 원할히 받아서 보낼 수 있도록 합니다.//try, catch문은 덤으로 사용해주세요(코드 가독성과 에러 처리에 유용합니다.)async function fetchMovieOTT(id) { const API의 주소를 담긴 변수의 이름 = `https://api.themoviedb.org/3/movie/..

시작하기전    시작하기에 앞서 솔직히 두 복사를 알기 위해 공부해야할 사항이 많습니다.메모리에 대한 지식이나, 원시 타입과 참조 타입 그리고 객체란 무엇인지 등 이러한 여러가지 개념들에 대해서 이해하고 있지 않다면나처럼 오랜 시간을 붙들고 있어야 할 것이며 본다고 이해가 잘 되지 않을 겁니다. 그리하여 메모리 개념과 데이터 타입에 대해 공부를 한 뒤에얕은 복사와 깊은 복사에 대한 지식을 습득하길 권장합니다. 글의 순서로는 얕은 복사, 깊은 복사 그리고두 복사의 필요성에 대해서는 짧게 작성해 보겠습니다.   얕은 복사 (Shallow Copy)     얕은 복사는 객체를 복사할 때, 그 객체 안에 있는 직접적인 속성들만 복사합니다.하지만 그 속성들이 또 다른 객체를 가리키고 있으면,그 또 다른 객체는 복..

안녕오늘은 캠프에서 개인과제( 개인 프로젝트 )로영화 정보 검색 사이트를 만들어 본 과정을 작성해 보겠습니다.개발 환경Visual Studio CodeGithub사용 기술     프론트엔드JavascriptHtml/Css 외부 API TMDB API주요 기능영화 검색영화 ID값 가져오기페이지 디자인     먼저 구조는 네비게이션바와 영화 리스트 두개의 div로 나누었습니다전체적인 분위기와 색상은 왓챠를 고려해서 비슷한 색감으로 디자인 했습니다.  네비게이션 바에서 왼쪽 상단 로고와 검색창을 같은 div로 묶고로그인/회원가입 버튼도 다른 div에 묶어서  display: flex; flex-wrap: inherit; align-items: center; justify-content: ..

안녕   이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.     JQuery는 HTML 문서의 탐색, 이벤트 처리, 애니메이션, 그리고 Ajax 통신을 단순화하기 위해 만들어진 빠르고 간결한 JavaScript 라이브러리입니다   JQuery 문법$(document).JQuery의 메소드들  제이쿼리를 사용하면 기존 자바스크립트에서는 사용되는 문법  document.getElementById를 $표시 하나로 표현 가능합니다. 해당  문법을 참고하여 페이지를 만들어 보겠습니다. 시작!!  추억 앨범 만들기 디자인편 링크https://0723-0725.tistory.co..

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다.    먼저 보면 좋은 BootStrap 활용편 링크 https://0723-0725.tistory.com/22 BootStrap을 활용하여 페이지 구성하기안녕 오늘은 CSS,HTML 및 BootStrap을 활용하여 페이지를 구성해 볼 것이다.먼저 구성할 페이지는 맛집 소개 페이지이며 JavaScript를 사용하지 않았기 때문에 기능 구현은 되어있지 않다.     초0723-0725.tistory.com시작  나만의 추억앨범 추억 저장하기      먼저 HTML의 구조를 만들고 부트 스트랩의 링크 및 폰트..

APPETIZER    이번엔 관계형 데이터베이스와 비관계형 데이터베이스의 차이점을 알아 볼거야.. 시작하기에 앞서 내가 둘의 차이를 제대로 이해하지 못했을 때 서로의 차이점은 중요한 것과 그렇게 별로 중요하지 않은 것 이라고 생각하였는데 저어어어언혀 아니더라고 현재 공부중인 캠프의 이OO 튜터님께서 말씀하셨어. " 세상에 중요하지 않은 데이터(혹은 데이터베이스)는 없다. " 튜터님의 말처럼 중요하지 않은 데이터는 없는데 나는 뭔가 비 관계형의 특징으로서 여러가지 데이터를 다룰 때 유리한 점에 있어서 뭔가 가볍게만 생각한 것 같아. 자 그러면 둘의 특징과 차이점을 한 번 같이 알아보자 !    DB? 데이터베이스?   데이터베이스란 무엇일까! 데이터가 저장된 곳? 데이터를 기록하는 곳? 전부 다 맞고 정..

안녕 오늘은 CSS,HTML 및 BootStrap을 활용하여 페이지를 구성해 볼 것이다.먼저 구성할 페이지는 맛집 소개 페이지이며 JavaScript를 사용하지 않았기 때문에 기능 구현은 되어있지 않다.     초기구성 Header와 Footer 사이에 부트스트랩을 사용하여  좌측에 있는인풋 박스를 포함한 배경 이미지를 배치할 계획이며또 각 음식에 대한 후기가 기록된 카드들을 넣어줄 것이다.        BootStrap - Jumbotron  부트스트랩 Jumbotron 링크 -https://getbootstrap.com/docs/5.3/examples/jumbotron/ Jumbotron example · Bootstrap v5.3Add borders Or, keep it light and add a..