본문 바로가기

TIL

 (100)
querySelectorAll 자바스크립트 DOM API 이해도 평가 문제들을 풀어보다가 살짝 헤매고 새로 알게된 부분들을 기록해본다. 요구사항"아래 HTML 요소에서 class가 "highlight"인 모든 요소의 텍스트색을 빨간색으로 변경하기" [HTML]    Change my color!    Don't change my color.    Change my color too!  ■  작성코드 JS[처음 작성한 코드]const changeColor = document.querySelectorAll(".highlight");changeColor.style.color = "red"; 여러번 본적 있던 querySelectorAll 을 사용해 동일한 class를 가지고있는 요소들을 전체 선택하여 색을 바꿔주면 될거라 생각했고 저장해봤..
Template Literals, Destructuring, Seperate Operator ■  Template Literals변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법백틱(`) 으로 구성할 문자열을 감싸주고 변수나 표현식은 ${ } 으로 감싸서 입력한다.(예시)let customer = { name: "하영" };let item = { name: "아메리카노", price: 4000 };console.log(`감사합니다, ${customer.name}님. ${item.name} 을(를) ${item.price}(원)에 구매하셨습니다.`);// 출력: 감사합니다, 하영님. 아메리카노 을(를) 4000(원)에 구매하셨습니다.  ■  Destructuring (구조 분해 할당)객체나 배열의 속성을 쉽게 추출할 수 있게 해주는 문법 ☛ 객체 Destructuring객체 안의 k..
localStorage Window.localStorage 웹 브라우저 로컬 저장 공간에 데이터를 저장하고 관리할 수 있는 storage 객체key-value(JSON 형식)으로 값을 저장만료기간이 존재하지 않으며 페이지 변경, 브라우저 종료 시에도 반영구적으로 유지됨도메인이 다른 경우 로컬스토리지 공유 불가  localStorage 메서드 데이터 저장localstorage.setItem(keyname, keyValue)key-value 쌍으로 인자를 받아 데이터를 저장하고 어떤 데이터 타입이던 키 값 모두 문자열로 변환된다.key-value 형식으로 풀어서 여러 개를 저장할 수도 있지만, 객체를 통째로 저장 시 JSON.stringify() 로 객체를 그대로 문자열화 해줘야함*JSON.stringify : 자바스크립트 객체를..
팀 프로젝트 - 영화 검색 페이지 빌드업 (240731~240807) tmdb 영화 api 를 불러와 만든 영화검색 페이지 개인과제에서 팀원 중 1명의 과제를 빌드업하여 리뷰, 상세페이지, 정렬 등 기능들을 추가한 첫 팀 프로젝트 ■  배포링크 👉 바로가기 1. 와이어프레임 제작figma 링크프로젝트의 필수 구현 기능들을 넣어서 메인페이지와 상세페이지, 리뷰작성부분, 정렬 등 전체적인 구조를 잡았다.  2. 역할 분담팀장메인페이지 영화카드 정렬기능 구현 (최신순, 인기순, 별점순)팀원1상세 페이지 영화 리뷰 작성 기능 구현팀원2메인페이지 영화카드 클릭 시 상세페이지 이동 기능 및 영화 포스터 슬라이드 기능 구현팀원3메인페이지 업버튼 (스크롤) 기능, 검색 추가 기능 구현팀원4 (나)상세페이지 구현 (타이틀, 이미지, 줄거리, 평점 등)  3. 내가 맡은 기능 : 상세페이..
분수의 덧셈 문제첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항0  입출력 예numer1denom1numer2denom2result1234[5, 4]9213[29, 6] 입출력 예 설명#11 / 2 + 3 / 4 = 5 / 4입니다. 따라서 [5, 4]를 return 합니다.#29 / 2 + 1 / 3 = 29 / 6입니다. 따라서 [29, 6]을 return 합니다. ■  문제 이해하기■  코드로 작성// 1. 분모덧셈// 2. 분자분모의 최대공약수로 나누기fun..
얕은복사, 깊은복사, 구조분해할당 ■  얕은복사외부 객체만 복사되고 내부 객체는 참조 관계를 유지하는 복사 ☛  ... 연산자(스프레드 문법) : 기존 객체의 속성을 새 객체에 대입할 때 사용    배열은 [ ...배열 ]    /    객체는 { ...객체 } 로 사용 ☛  concat( );  , slice( );  : 배열 메서드 사용   (예시)      const array = [ { a : 'b' }, { c : 'd' } ];    const light = array.slice();  메서드의 인수로 아무것도 넣지 않으면 됨 ☛  for ~ in 구문 : 객체의 모든 프로퍼티에 접근    객체를 복사 한 다음, 복사를 완료한 객체의 프로퍼티를 변경  ■  깊은복사외부 객체 뿐만 아니라 내부 객체(중첩)까지 참조 관계가 끊기면..
Promise / async & await Promise 는 데이터를 주고받는 약속이다. [ promise 의 3가지 상태 ]1.  pending (요청중) - 요청을 한 상태2.  fulfilled (성공) - 완료됨3.  rejected (실패) 우리가 코드에서 비동기 관련 처리를 한다.  =  'promise' 객체를 이용하여 코딩을 한다.[ promise 를 핸들링 할 수 있는 방법 중 큰 2가지 ]1.  then,  catch2.  async,  await ■  fetch의미 : 알을 품다.외부로부터 데이터를 가져와서 품고있는 것 = 데이터를 외부로부터 요청하는 것 ■  async,  await * JSON Placeholder 로 test 해보기// await 을 가지고 있는 함수를 가지기 위해서는 그 함수 앞에 async 가 있어야 ..
쿼리스트링과 URLSearchParams 어제 시작한 팀프로젝트에서 영화 상세페이지 구현 부분을 맡게 되었다.기본 메인페이지의 영화 이미지를 클릭하면 이미지에 있는 id 값을 받아와서 클릭한 영화와 일치하는 정보의 상세페이지가 나오도록 구현하기 위해서 이것저것 찾아보며 새로 공부한 내용들을 정리해보자. ■  쿼리스트링(?page=3)http://127.0.0.1:5500/?name=John&age=20http://127.0.0.1:5500/detail.html?id=238 쿼리스트링이란?물음표? 뒤에 키 = 값 & 키 = 값 형식으로 주소에 데이터를 붙여줄 수있다.데이터 쌍이 여러개 일때는 & 로 구분!주소에 데이터를 전달하는 가장 쉬운 방법, 서버도 알아들을 수 있음 쿼리스트링의 정보는 location 의 search 에 있다.console...

티스토리툴바