코딩연습장

팀 프로젝트가 끝났다. 바닐라 자바스크립트로 DOM을 동작하고, API요청을 하고 여러가지 작업을 진행하였다.처음으로 html파일을 두개를 만들어 페이지 이동을 구현해보았고, 페이지 이동 시 특정 id를 parameter로 넣고 빼는 작업도 해보았다.iframe을 이용하여 유튜브 영상을 페이지에 넣어보기도 하였고, 가로 스크롤을 휠로 작동시키는 것도 해보았다.Youtube Data API v3를 사용하여 영상의 유효성검사도 진행해보았다.Position: absolute도 어느정도 감을 잡았고, z-index와 함께 사용하여 배경 그림도 넣어보았다.다음은 우리팀의 KPT회고이다.Keep - 현재 만족하고 있는 부분바닐라 자바스크립트로만 코딩한 점팀 피드백 및 소통이 원활한 점서로 예쁜말 쓰고 화내지 않고 ..

웹 페이지에 영상플레이어를 넣으려면 video태그를 사용해야 하지만, 그렇게 하면 서버에 부담이 될 것이다.따라서 우리는 유튜브영상을 iframe을 이용하여 가져와 보자!원하는 영상의 공유버튼을 누르고, 모양을 누른다. 그러면 위처럼 iframe태그가 나오는데, 이를 복사해서 html에 넣으면 유튜브 비디오플레이어가 나오게 된다. 하지만 나는 원하는 영화의 예고편을 가져와야한다. 그리고 위의 src중 embed/뒷부분의 내용을 tmdb에서 지원해준다.따라서 저것만 넣어서 iframe을 만들고, 동적으로 붙여주는 작업만 하면 예고편 영상을 띄울 수 있는 것이다.디테일 페이지의 parameter에서 id값을 가져와 해당 id값을 tmdb 영상 관련 api에 요청을 한다.그러면 tmdb에서는 영화와 관련된 영..

이번 프로젝트는 팀원들의 개인 프로젝트 중 하나를 골라 업그레이드 하는 것이 목표이다.이번 mvp는 아래와 같다. 메인페이지무한스크롤로 pagenum에 따라 api 요청하기검색기능과 정렬필터 제작하기 디테일페이지영화 카드를 누르면 상세 페이지로 이동하여 내용을 보여주는것리뷰를 로컬스토리지를 활용하여 작성 및 조회하는 것 4가지 조건 중 영화카드를 상세 페이지에서 보여주는 것을 내 역할로 잡았다.위 사진의 위에 부분을 진행하는 것이다.어려운 부분이 없어 금방 끝낼 것이라고 생각하여 api에서 제공해주는 유튜브 링크로위 디테일 카드에 마우스 오버를 하면 유튜브영상이 재생되는 것을 더해볼 생각이다. 현재까지 작업상황은 위와 같다.영화 id에 따라서 해당 영화의 디테일내용을 받아오는 api를 사용했으며, 아직 ..

SSR : Server Side RenderingCSR : Client Side Rendering말 그대로 SSR은 서버측에서 렌더링을 하는 것이고, CSR은 클라이언트(사용자)측에서 렌더링을 하는 것이다.  CSR : Client Side RenderingSSR : Server Side Rendering1사용자가 웹 사이트를 요청함유저가 웹 사이트를 요청함2CDN이 HTML파일과 JS접근링크를 보내줌서버가 렌더가 준비된 HTML파일을 생성함3브라우저가 HTML을 다운로드하고, JS를 다운로드함단, 이때 사용자는 사이트를 볼 수 없음(빈 화면)브라우저가 HTML을 빠르게 렌더링하지만사이트는 아직 상호작용이 불가함4브라우저가 JS를 다운로드함브라우저가 JS를 다운로드함5JS가 실행되고 data를 위한 ap..

import { addEvent } from "./addEvent.js";import { isSearchedData } from "./isSearched.js";export function searchMovie() { const searchButton = document.querySelector(".searchButton"); const searchInput = document.querySelector(".searchInput"); const searchFunc = async function () { isSearchedData.isSearched = true; let movieArr = []; const options = { met..

이러한 페이지를 만들었다.영화데이터 제공 openapi를 사용하여 페이지 진입 시 영화데이터를 불러온다.불러온 데이터 중 원하는 키워드를 검색하여 해당 키워드가 '제목'에 있는 영화들만 보이도록한다.import { getMoviesFunc } from "./getMoviesFunc.js";import { movieCardsFunc } from "./movieCardsFunc.js";import { addEvent } from "./addEvent.js";import { searchMovie } from "./searchMovie.js";import { observer } from "./observer.js";observer();getMoviesFunc().then((res) => { movieCar..

클래스와 인스턴스클래스 - 학교에서 다양한 종류의 책상을 만드는 설계도, 설계도를 보면 어떤 종류의 책상을 만들 수 있는지, 책상의 특징은 무엇인지 알 수 있다.인스턴스 - 설계도를 보고 만들어진 실제 책상, 모양/크기/색상/재료 등 설계도에 따라 만들어지며 모두 다른 인스턴스가 된다. // 클래스라는 설계도를 만들어 봅시다.class Person { //사람이기 때문에 필수요소를 name, age를 가진다. constructor(name, age) { this.name = name; this.age = age; } //이렇게 함수를 만들어두면 인스턴스를 만들 때 메서드가 들어있다. sayHello() { console.log(`${this..

1. js가 왜 생겼는데 - 브라우저에서 사용하기 위한 언어이다. - 웹 페이지를 동적으로 만들기 위해, 즉 HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어디다. 2. 웹 페이지가 뜨는 과정 - 사용자가 'www.naver.com'을 주소에 입력한다.   1. 클라이언트가 서버에게 요청(req)을 함   2. 우리가 크롬을 통해 클라이언트의 역할을 하는 것 - HTML문서를 서버로부터 수신한다.   1. 네이버 서버는 우리(=브라우저 =클라이언트)에게 응답(res)을 한다.   2. 그 응답이 HTML문서이다. - 브라우저가 HTML 파일을 해석(parsing 파싱)   1. 브라우저에는 기본적으로 렌더링 엔진이 있다. 서버가 클라이언트에게 준 HTML문서를 렌더링 한다.   2. 렌더링..

프로그래머스 - 의상 처음 풀이하다 막힌 코드function solution(clothes) { var answer = 0; let clothesMap = new Map() console.log(clothes) for (let item of clothes) { let name = item[0] let type = item[1] clothesMap.has(type) ? clothesMap.set(type, [...clothesMap.get(type), name]) : clothesMap.set(type, [name]) } console.log('clothesMap= ', clothesMap) let clothe..

리액트로 들어가기 전 Javascript에 이해를 더 잘 이해하기 위한 주차이다.1, 2주차 강의내용은 아는 것이 많았지만, 몰랐거나 까먹은 부분도 있어 해당 부분에 대해서만 정리해보고자 한다. 1. 단축평가논리합, 논리곱 연산자를 이용하여 양 변에 따라 알맞은 값을 사용한다.console.log(true || "something") // trueconsole.log(false || "something") // somethingconsole.log(true && "something") // somethingconsole.log(false && "something") // false조금 생각해 보았는데, 논리합 ||연산자는 양 변중 단 하나라도 truthy하면 true를 뱉어내므로 첫 줄 true || s..