본문 바로가기

전체 글

 (152)
[본캠프]17일차 문제점깃허브에 올리는 과정에서 자꾸 인덱스를 제외하고 js와 css파일이 안들어가진다.보니까 master로 되어있어서 이를 병합해야 한다는 것이다. 해결$ git checkout master $ git branch main master -f$ git checkout main $ git push origin main -f위 코드를 터미널에서 순서대로 넣어주면 된다.문제점북마크페이지 크기해결#card>img { height: 400px;}문제점북마크 삭제 시 실시간 반영안됨 해결 function loadBookmarks() { const bookmarks = JSON.parse(localStorage.getItem("bookmarkList")) || []; // 저장된 북마크 목록 불러오기 const..
[본캠프] 16일차 어제 배운 걷기반 실습을 오늘 복습하고 수업에 들어가니, 아주 여유롭게 참여할 수 있었다.실력이 느는 게 몸소 느껴지지만 아직 해야 할 공부량이 많다....코드카타걷기반 복습영화검색사이트 수정  준비. hankang.html 파일을 만들고 Live Server로 열어줍니다.hankang.html 한강 대표작   2-2. 위 객체와 형식을 맞추어, 한강 작가의 대표작 목록이 담긴 배열을 만들어보세요.hankang.jsconst books = [{ title: '소년이 온다.', author: '한강', publisher: '창비', price: 13500, rating: 9.6}, { title: '적발하지 않는다', author: '한강', ..
[본캠프] 15일차 - 걷기반 복습!!! 배열 하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법let 강아지들 = ["밤송이", "재롱이", "밤비"];console.log(강아지들[0]); // "밤송이"console.log(강아지들[1]); // "재롱이"console.log(강아지들[2]); // "밤비"// 문자열을 모아놓을 수 있다.const 강아지이름들 = ["밤송이", "재롱이", "밤비", "행성이"];// 숫자들을 모아놓을 수 있다.const 짝수들 = [2, 4, 6, 8, 10];// 사실은 다양한 데이터 타입을 모아놓을 수 있다.const 여러데이터모음 = ["하하", 123, false, { age: 20 }]const puppiesContainer = document.querySelector(".pup..
10,11,12장 10장 - 객체 리터럴객체란? 원시타입은 단 하나의 값만 나타나지만, 객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복잡한 구조이다.원시값은 변경불가능한 값. 객체 값은 변경 가능한 값. 프로퍼티: 객체의 상태를 나타내는 값.메서드: 프로퍼티를 참조하고 조작할 수 있는 동작.인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체. obj객체에 Hello라는 프로퍼티를 추가하고 그 값으로 'world' 를 실행. 따라서 obj는 {Hello:'world'}됨이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀!!! let person = { name: 'lee',};console.log(person['name']);대괄호 안에 따옴표 필수!!!  12..
[갠프] js에 써먹은 모든 함수에 대해 (q&a) 1. async 및 await설명: async는 비동기 함수를 정의하는 키워드야. 이 함수 내에서 await를 사용하면, 비동기 작업이 완료될 때까지 기다릴 수 있어.용도: API 호출과 같은 비동기 작업을 쉽게 처리하기 위해 사용해.2. fetch()설명: 네트워크 요청을 보내고 응답을 받기 위해 사용되는 함수야. Promise를 반환하므로 비동기적으로 작동해.예제: fetch(url)은 주어진 URL에 GET 요청을 보냄.용도: 외부 API에서 데이터를 가져오는 데 사용.3. await설명: async 함수 내에서만 사용할 수 있는 키워드로, Promise가 해결될 때까지 기다려줌.예제: const response = await fetch(url);는 fetch 요청이 완료될 때까지 기다림.용도: 비..
[본캠프] 14일차 오늘한 일 걷기반 복// 버튼 셀렉터const button = document.querySelector(".convert-btn");// 점수 셀렉터const input = document.querySelector("#score");// if문으로 걸러진 출력값이 밑으로 보이게 함.const result = document.querySelector(".result");button.addEventListener("click", function () { const score = Number(input.value); if (!score || score 100) { alert('올바른 값 넣어') return; } if (score >= 90) { r..
[본캠프]13일차 개인플젝 중 오늘 검색기능 구현하려고 걷기반에서 다뤘던 내용으로 js을 작성하던 중 구현이 되지않아서 다른 팀원분께 여쭤봤다.const searchInput = document.querySelector("#query");searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); const filteredMovies = allMovies.filter((movie) => movie.title.toLowerCase().includes(searchValue) ); displayMovies(filteredMovies);});querySelector로 id값을 가져와서 event리스너로 구현하는 함..
7,8,9장 7장-연산자  산술연산자: 수학적 계산을 수행해 새로운 숫자 값을 만든다. let x=1;console.log(+x); //1console.log(x);//'1'x=true;console.log(+x);//1console.log(x);//truex=false;console.log(+x);//0console.log(x);//falsex='Hello';console.log(+x);//NaNconsole.log(x);//'Hello'여기서 처음 알게 된 점은 변수 앞에 +하나 붙이면 숫자타입으로 변환이 된다는 것이다!  할당연산자: 우항에 있는 피연산자의 평가결과를 좌항에 있는 변수에 할당한다.비교연산자: 비교 후 결과를 불리언 값으로 반환한다.등등은 알고 있던 내용이라 생략한다.  8장 - 제어문블록문//블..

티스토리툴바