JS5 [TIL #1] 배열 속 해당 객체 추출하는 방법 토이 프로젝트를 진행하던 중 보드게임 리스트를 데이터로 받아왔다. 나는 이 리스트를 가지고 상세페이지를 만드려고 하던 중! 해당 게임 id를 페이지에서 눌러 받아온 데이터 중 같은 id를 출력해주고 싶었기에 filter를 사용하였다 그랬더니..? const gameData = game?.filter(v=> gameId === v.id); console.log(gameData); 배열을 반환하는 것!!! gameData[0].name 처럼 사용할 수도 있을 것 같았지만.. 이상하게 계속 에러가 나는 것이었다. 나는 객체만 반환해 주는 매소드가 필요했다 결과는? find 라는 매소드를 사용하면 되는 것이었다! 사용방법은 filter 와 동일하다. const gameData = game?.find(v=> ga.. 2022. 9. 17. [Javascript] 요소 찾기 querySelector, querySelectorAll Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element(요소)를 반환한다. 일치하는 요소가 없으면 null을 반환한다. querySelector 은 Element를 CSS방식으로 쉽게 검색할 수 있다. 기본 구문은 다음과 같다. document.querySelector(selectors); 사용 예시를 들기 위해 HTML을 작성해준다. 안녕하세요 luka라는 클래스 네임을 가진 div 태그를 지정해보려고 한다. const title = document.querySelector(".luka"); console.log(title); 코드를 실행해보면 알맞게 div태그를 잘 불러온 것을 볼 수 있다. 그렇다면 div태그 내부의 h1 태그를 불러.. 2022. 2. 26. [Javascript] - promise 메서드 then, catch, finally 소비함수 메서드(method): then, catch, finally new Promise에 전달되는 함수는 executor(실행자, 실행 함수)라고 부른다. executor는 new Promise 가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다. 만들어진 제작 코드의 결과를 기다렸다가 이를 소비하는 소비코드에 대해서 알아보려고 한다. then then을 이용해서 다음과 같은 코드를 작성해 보았다. //제작코드(producing code) const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('입장해주세요'); }, 3000) }); //소비코드(consuming code) pro.. 2022. 2. 25. [Javascript] 반복문_for 문 뽀개기 개인적으로 내 인생 자바스크립트 학습의 첫 걸림돌이지 않았을까 싶은 for문..! 개념을 확실히 잡고간다면... 어렵지 않지만 내가 듣는 수업에서는 확실한 개념설명을 해주지 않았기에... 너무나도 어려웠던 for문에 대해서 알아보자! 먼저 문법 예시! for ([초기문]; [조건문]; [증감문]) 문장 항상 느끼는 거지만 MDN문서는 나에게 너무나도 어렵다🥲 이해가 되지 않을 분들을 위해 조금더 보기 쉽게 변형해 보았다. for(1.시작문; 2.조건식; 4.종료식) { 3.동작문; } 순서는 1, 2, 3, 4 -> 2, 3, 4(반복) 예시를 통해 조금더 이해를 해보자! //1부터 100까지 출력하기// for(let i = 1; i < 101; i++) { console.log(i); } 1(시작문).. 2021. 12. 1. 이전 1 2 다음
