JavaScript

for...of 는 배열의 반복에서 사용, for...in은 객체의 반복에서 사용. for ... of (배열) var arr = [1, 2, 3]; for (var item of arr) { console.log(item); // 1, 2, 3 } for ... in (객체) var obj = { a: 1, b: 2, c: 3 }; for (var item in obj) { console.log(item) // a, b, c } 알고 있던 내용이지만 사용할 때마다 객체였나 배열이였나 헷갈려서 한번 더 개념정리하면서 포스팅

개요 매번 slide 작업할 때마다 까먹어서 찾아다니기 귀찮아서 글로 남기기.. CSS .qa-wrap .qa-box { cursor: pointer; } /* active 들어가는 부분 */ .qa-wrap .qa-box .contents { display: flex; flex-direction: column; gap: 12px; height: 0; margin-top: 0; overflow: hidden; transition: all .3s; } .qa-wrap .qa-box.active .contents { height: auto; margin-top: 16px; } JS const tabList = document.querySelectorAll('.qa-wrap .qa-box'); for(var ..

문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 제한 사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. 입출력 예 a return "a234" false "1234" true 문제 풀이 본처음엔 아래와 같은 코드로 풀었다 function solution(s) { var answer; if(s.length === 4 || s.length === 6){ if(isNaN(s)){ answer = false; } else { answer = true; } } else { answer = false; } return answer; } isN..

할인율 계산 프로그램 html 할인 가격 계산 프로그램 가격 원 할인율 % 계산 Copyright © 2023 : YOON scss(css) html { height: 100%; } body { height: 100%; margin: 0; display: flex; flex-direction: column; } header { text-align: center; } main { text-align: center; display: flex; flex-direction: column; gap: 20px; .wrap { display: flex; justify-content: center; align-items: center; label { width: 100px; } input { width: 150px; ..

요약 TMDB API나 영화진흥위원회 API를 활용한 영화 관련 정보 사이트 팀 제작 인트로 해당 영화 정보 사이트 팀 프로젝트를 진행하면서 어려움이나 얻은 것들을 정리해보자 한다. 시작부터 완성까지 들었던 고민들을 풀어놓고자 한다. 1. 기획 작업 먼저 기능 개발을 초점을 두다보니 지나고나서 보니 '이 기능이 꼭 있었어야했나?', '해당 표시가 UX적으로 맞는 것인가?' 라는 의문점이 들었다. 예전부터 다른 것보다 기획이 중요하단 얘기를 들었어서. 이건 하나의 프로젝트로 끝이지만 기획이 어그러졌으면 개발을 다 끝내고도 다시 뒤엎는 순간이 올 수도 있겠단 생각이 들면서 다음엔 기획을 또 직접 하게 된다면 더 시간을 들여서 잡아야겠다. 개발 공부를 하고 있는 사람끼리 하다보니 대화로써 이어갔는데, 나중에 ..

요약 영화 검색 기능에서 어떻게 보여줄 것인지에 대한 고민 고민한 내용 우리는 영화의 리스트, TV의 리스트, 인물들을 보여줄 기획을 했다. 그래서 검색하는데 각 페이지마다 검색을 하게 됐을 때 해당 내용에서 검색이 되는 방향으로 가는게 맞을지에 대해서 고민을 했다. 거기에 인물은 따로 header에 넣지 않게 되면서 애매하게 됐다. 생각한 해결 방법 검색 페이지를 별도로 따로 만드는 것으로 가기로 했다. 그래서 검색을 하게 되면 영화, TV, 인물 모두가 검색이 되면서 한 화면에 다 보여주는 것이다. 거기에 각 카드를 클릭시 해당 디테일 페이지로 넘어가게끔 작업했다. 이번 팀 프로젝트를 하면서 api를 다루지 않아서 오히려 검색 작업은 재미가 있었다. 1. API를 하나만 호출해서 해결 3가지를 보여주..

Javascript로 html 요소 생성 서버와 통신이든 추후의 js에서 html 코드를 만들어야 하는 경우가 있을 때 사용하면 좋다 createElement() 메서드 document 객체의 createElement() 메서드를 사용한 것 // div 생성 const div = document.createElement('div'); // 텍스트 적용하는 방법 div.textContent = 'Hello'; // 스타일 적용하는 방법 div.className = 'div-style' // 또는 div.classList.add('div-style'); // id 적용하는 방법 div.id = 'div-ID' // 원하는 위치에 생성된 div를 넣어줘야 화면에 나타난다. document.body.append..

시작 전 체크 function Test() { console.log(this); } Test(); 해당 함수를 호출하면 this는 전역객체로 바라봐서 window가 출력된다. 만약 전역객체 아닌 다른 객체를 출력하고 싶을 때 call, apply, bind를 사용한다. 1. call() call() 메서드는 호출 주체인 함수를 즉시 실행하는 메서드이다. 첫번째 인자는 this에 바인딩된다. 이후 인자들은 호출할 함수의 매겨변수로 전달된다. function test(c, d) { console.log(this, c, d); } test.call({a: 1, b: 2}, 3, 4); // {a: 1, b: 2} 3 4 출력 2. apply() apply() 메서드도 call() 메서드와 마찬가지로 호출 주체..

위는 해상도를 resize 중이거나 mobile 사이즈로 새로고침 됐을 때 모두를 적용 할 수 있는 fucntion이다. $(function(){ function windowSize() { if ($(window).width() > 770) { // pc화면 } else { // 모바일 사이즈 if ($(window).width() < 769) { if ($(window).width() < 480) { $('.paging .paging-wrap a.active').prev().show(); $('.paging .paging-wrap a.active').next().show(); } } } } windowSize(); $(window).resize(function() { windowSize(); imgWi..