프론트엔드 가보자GO 프론트엔드 가보자GO

🤓오늘 공부한 내용 자바스크립트 예제 문제를 공부하면서 for문을 자주 쓰게 되는데 추가로 for in문, for of문의 차이점에 대해 명확하게 이해하고 있지 않은 것 같아서 다시 개념을 공부 중이다. 📌1.for 반복문 - 가장 범용적으로 쓰이는 'for 반복문'은 특정횟수 만큼 반복하고 싶을때 사용한다. - 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다. - for문은 다른 반복문과 다르게 반복 변수를 let 키워드로 선언해야한다. - for문은 배열과 조합해서 많이 사용하는데 보통 배열의 length 속성만큼 반복을 돌리는 형태로 사용한다. for (let i = 0; i < 반복 횟수; i++) { 문장 } 가장 기본적인 예제를 하나 가져오면 let output = 0 fo..

튜터님께 이번 프로젝트를 진행하면서 내가 만든 코드에 이상은 없는지, 또 수정할 사항이 있는지 여쭤봤는데 역시나! 오류가 있었다 헤헿..😅 검색기능을 할 떄 filter 메서드를 이용했는데 거의 뭐 이름만 필터고 기능을 forEach로 쓰고 있었지 뭐야,,? ❗튜터님께 받은 피드백 1. ⭐filter 메서드 수정하기 2. 페이지 크기 줄일 때도 카드 사이 여백 유지하기 3. 검색창 여백 주고 검색버튼 css 신경쓰기 4. html에 있는 인라인 스타일 css로 옮기기 5. html에 있는 필요없는 영화카드 div 삭제하기 6. css에서 class로 통일해주기 💻코드 수정하기 1. ⭐filter 메서드 오류 수정하기 👇잘못된 코드 더보기 //검색 (movie title) 기능 if (value) { //..

어제 불러온 API들을 이용해서 영화정보 카드 리스트 UI 구현을 했으면 받아온 전체 영화들 중 검색 input창에 영화 제목을 입력한 문자값이 포함되는 영화카드만 나올 수 있도록 해야한다. 오늘 만든 코드들을 꼼꼼하게 작성해서 나의 일지가 좋은 공부노트가 될 수 있도록 해야겠다. 👇"btn" 요소에 클릭 이벤트 리스너를 추가하여 버튼이 클릭되었을 때 실행되도록 설정 (버튼에 id값("btn") 지정해주고, 검색시 정보를 받아올 수 있도록 input에도 id값("input-name") 지정 document.getElementById("btn").addEventListener("click", () => { //input값 받아오기 const inputText = document.getElementById(..

💡 프로젝트 개요 [영화 검색 웹사이트] S.A. 더보기 🔻프로젝트 소개 1. 프로젝트 명 : FilmHunt ("영화 사냥" : "Film"은 영화를 의미하고, "Hunt"는 사냥하다, 찾다라는 뜻을 갖고 있습니다. 따라서 "FilmHunt"는 영화리스트를 찾아내는 데 초점을 맞춘 영화 검색 사이트를 의미합니다.) 2. 메인페이지 기능 : 검색창에 영화 제목을 검색하면 리스트에 있는 인기 영화를 찾을 수 있습니다. 3. 와이어프레임 🔻필수 요구 사항 1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기 2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 3. 영화정보 카드 리스트 UI 구현 4. 영화 검색 UI 구헌 5. 하기 기재된 Javascript 문법 요소를 이용하여..

이번주 월요일부터 자바스크립트 문법 종합반 강의를 계속 듣고 있는데 자바스크립트에 대해 너무 초면이라 익숙치 않고 많이 어렵다,, 강의를 들을 때는 이해가 안되면 여러번 다시 들으면서 이해가 되지만 정작 알고리즘 문제를 풀 때는 어떻게 시작해야할지, 또 어떤 식으로 풀어야 할지 문법들이 떠오르지가 않아서 나에게는 기초 문법들을 익히는게 제일 먼저 해야할 일이라고 생각했다. 그 중 어제 문제를 풀 때도 그렇고 배열과 메서드를 이용해서 문제를 푸는 방식이 가장 마음에 들어 메서드가 익숙해지도록 더 공부해 볼 생각이다. 📕오늘 공부한 내용 1. push() : 배열 마지막에 추가 let fruit2 = ["사과", "바나나"]; console.log("1 =>", fruit2); //1 => [ '사과', '..

🧐문자열 연습하기 function solution(numbers) { var answer = 0; return answer; } 더보기 📌 문제설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 📌제한사항 0 ≤ numbers의 원소 ≤ 1,000 1 ≤ numbers의 길이 ≤ 100 정답의 소수 부분이 .0 또는 .5인 경우만 입력으로 주어집니다. 📌입출력 예 numbers result [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 5.5 [89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99] 94.0 📌해결과정 처음에는 먼저 정수 배열들의 값을 다 더하고 난 후에 평균값을 ..

🧐문자열 연습하기 function solution(s){ var answer = true; // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다. console.log('Hello Javascript') return answer; } 더보기 📌 문제설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 📌제한사항 문자열 s의 길이 : 5..

🔍발생한 이슈(오류) 일급객체로서의 함수 특징 중 this에 대해서 공부하다가 템플릿 리터럴과 화살표 함수로 변형해서 예시문제를 해결할 때 계속 오류가 났다. const person = { name: "john", age: 31, isMarried: true, sayhello: function () { console.log("hello, my name is " + this.name); }, }; person.sayhello(); 기존 예제문제는 실행하면 hello my name is john가 잘 출력이 된다. 📌해결과정 👉템플릿 리터럴을 이용 1번 console.log("hello, my name is " + `${name}`); //실패 2번 console.log("hello, my name is "..