개발 🐾

JQuery 연습하기 영상 링크 1. 내용 지우기1) 지정하기- 태그에 적은 id를 지정하기function checkreasult() {let fruits = ['사과', '배', '감', '귤', '수박']$(#'q1')} 사과 배 감  2) 내용 지우기- .empty를 활용하기   2. 내용 붙이기1)html을 만들어서 붙이기 (백틱 활용하기) 2) .append 활용해서 붙이기 기존 내용이 사라지고 '감자' 가 나타난다.  3. fruits의 값 붙이기1) 한 값만 지정해서 붙이기- ${ }를 활용하기 2) 여러 값을 붙이기- .forEach 활용하기 (fruits와 a로 수정하기) 기존 내용이 사라지고사과배감귤수박이 나타난다.

[왕초보] 웹개발 종합반 3주차 3-2 강의 중"이전 거에서 복사해서 title 아래에 붙이면 돼요"라고 하며 가져온 '이게 뭐지?' 기억이 안 난다. 직전 2주차 강의를 다시 찾아보니 'JQuery CDN' 이라고 하는 코드스니펫이었다."JQuery는 누군가 만들어 놓은 라이브러리입니다.Javascript를 가지고 화면을 훨씬 더 쉽게 조작할 수 있는 거예요"라는 설명과 함께.. 이 기능이 뭔지 궁금해져서 바로 구글링 👩🏻‍💻 JQuery CDN이란콘텐츠 전송 네트워크의 약자로 데이터 사용량이 많은 페이지 웹페이지의 로드 속도를 높이기 위해 연결된 서버 네트워크이다.사용자가 웹 사이트를 방문하면 데이터를 주고 받기 위해 인터넷 통신이 이루어지는데특히 동영상이나 큰 이미지와 같은 대용량 일의 경우 ..

'destucture'의 뜻은 파괴하다배열, 객체 안의 데이터를 뽑아쓰다. Destructuring 📍array 적용 예시1. 아래 배열에서 "강아지"는 dog라는 변수에,"고양이"는 cat이라는 변수에 넣으려면?const 동물리스트 = ["강아지", "고양이"];더보기정답1.const dog = 동물리스트[0]; // dog => "강아지"const cat = 동물리스트[1]; // cat => "고양이" 2.const 동물리스트 = ["강아지", "고양이"];const [dog, cat] = 동물리스트;// dog => "강아지"// cat => "고양이"=> 순서에 맞게 구조분해할당이 적용된다. 2. 배열 colors에서 세 번째 값인 blue만 출력하려면?const colors = ["red",..

'spread'의 뜻은 펼치다, 뿌리다.단어의 뜻과 같이 배열 내의 요소들을 펼쳐놓는다.원본은 그대로 유지되고 복사본은 원하는 대로 변경이 가능하기 때문에 주로 객체나 배열을 복사할 때 쓰인다. Spread operator 📍기본 형식점 세 개(...)만 작성하면 된다.1. 양쪽 대괄호 [ ] 를 제거할 수 있다.let a = [1, 2, 3]console.log(...a) // 1 2 3// console.log(1, 2, 3); -> 1 2 3 2. 새로운 배열을 만들 수 있다.let a = [1, 2, 3]let b = [...a] // b는 새로운 배열 3. 두 개의 배열을 합칠 수 있다.let a = [1, 2, 3]let b = [4, 5, 6]let c = [...a, ...b] // [1..

map 메소드map은 똑같은 배열 요소의 개수를 갖는 새로운 배열을 만든다. 즉, 기존 배열 속 요소(객체)가 3개였다면 새롭게 만든 배열의 요소도 3개이다.결과값이 undefined 라고 해도 똑같이 3개가 나온다.[1, 2, 3] // map 메소드로 1씩 더한 새로운 배열[2, 3, 4]const tutors = [ { name: "최원장", age: 20, }, { name: "김병연", age: 21, }, { name: "윤창식", age: 22, },];// map 메소드로 나이를 10살 늘린 결과const tutors = [ { name: "최원장", age: 30, }, { name: "김병연", age: 31, },..

filter 메소드 filter 메소드는 조건에 맞는 데이터를 모두 찾을 때 사용한다. 📍기본 형식find와 마찬가지로 찾으려면 조건이 필요하다.return은 필수이고 return 뒤에 조건을 작성한다.조건에 맞는 데이터의 개수에 상관없이 배열로 출력된다.배열.filter((배열내의_요소) => { return 조건})  예시const numbers = [1, 2, 3, 4, 5];const 삼보다큰수들 = numbers.filter((number) => { return number > 4;});console.log(삼보다큰수들); // [4, 5]const products = [ { 브랜드: "수아레", 상품명: "케이블 카라 반팔 니트 - 6 Color", 가격: 39900, ..

find 메소드 find의 뜻은 대부분이 알고 있듯 '찾다'단어의 뜻 그대로 데이터 하나를 찾기 위한 메소드이다. 📍기본 형식데이터 하나를 찾기 위해서는 조건이 필요하다.return은 필수이고 return 뒤에 조건을 작성한다.요소 하나 혹은 객체 하나가 출력된다.배열.find((배열내의_요소) => { return 조건});  예시const numbers = [1, 2, 3, 4, 5];const 삼보다큰수하나 = numbers.find((number) => { return number > 3});console.log(삼보다큰수하나); // 4const products = [ { 브랜드: "수아레", 상품명: "케이블 카라 반팔 니트 - 6 Color", 가격: 39900, 평..

우선,for문이란?한마디로 반복문이다.변수를 할당하여 조건에 따라 작성한 코드를 하나하나 반복하여 실행한다.const a = [1, 2, 3]for(let i = 0; i 234 위와 같은 것이 for문의 기본적인 형식으로 대부분 ()안의 내용이 비슷하다.매번 이 조건을 작성하는 것은 비효율적이기 때문에 forEach를 활용한다. 그렇다면,forEach 반복문이란?앞서 본 for문이랑 비슷하지만 조건과 인덱스 작성 등이 필요 없다. 📍기본 형식 1. 배열 뒤에 점(.)을 찍고 forEach 함수를 실행한다.배열.forEach(); 2. forEach의 파라미터 (괄호 안)에 콜백함수를 작성한다.    콜백함수란? 함수의 파라미터에 들어가는 함수배열.forEach(() => {});// 혹은 배열.for..

비동기 1편 - promise비동기 2편 - async & await [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란? 외부에서 데이터(정보)를 가져오는 함수 📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소")) document.querySelectococo910.tistory.com [🍦] 손님~ 진동벨로 알려드릴게요! (2) - async, await비동기 1편 - promise [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란?..

비동기 1편 - promise [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란? 외부에서 데이터(정보)를 가져오는 함수 📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소")) document.querySelectococo910.tistory.com fetch는 비동기 함수이기 때문에 로직이 함께 시작해서 먼저 처리되는 것을 먼저 반환한다.아래 예시 사진을 통해 직관적으로 이해할 수 있다.  예를 들어 일의 순서가 아래와 같다고 하자.0. 시작한다고 알려주기1. TMDB 정보 가져오기2. TMDB 정보를 기반으로 UI 만들기3. 완성됐다..