GOE'sCINEMA5 [TIL 2023.06.09] Javascript call(), apply(), bind(), 팀과제 KPT 💻오늘 배운 내용 call(), apply(), bind() 세 함수는 모두 함수에서 this로 사용할 객체를 명시적으로 지정하여 실행되도록 해준다. call() 함수객체에 미리 정의되어 있는 함수로 첫번째 인자로 객체를 주는데 call()을 호출하는 함수가 인자로 주어진 객체에 딸려 있는 객체 처럼 동작하게 한다. 사용방법은 element.call(thisArg[, arg1[, arg2[, ...]]]) 첫 번째 인자는 함수를 소유하는 객체를 지정하고, 두 번째 부터는 옵션으로 필요하다면 함수로 보내는 인자를 지정할 수 있다. apply() call() 메소드와 기능은 동일. 차이점은 인자로 객체와 인자배열을 받는다는 것. bind() 인수로 주어진 객체를 this로 사용하는 함수를 반환한다. 반환된 .. 2023. 6. 10. [TIL 2023.05.31] 순수 자바스크립트로 무한루프 자동 슬라이드 만들기 (GOE's CINEMA) 💻오늘 배운 내용 a.cloneNode() a요소를 그대로 복사 // a.cloneNode(true) a요소에 자식요소까지 모두 복사 a.prepend() a요소의 앞에 추가 setInterval() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 예) 콘솔에 현재 시간을 2초마다 출력 ❓발생한 이슈/고민 무한루프 하는 자동슬라이드를 만들려고 한다. 20개의 카드들이 있고 그 앞뒤로 똑같은 20장의 카드를 복사한 뒤, -방향으로 한장씩 이동하는 애니메이션을 transition과 자바스크립트로 동작하게 한다. 그리고 기존카드의 마지막 카드가 카드들을 담고 있는 컨테이너의 첫번째에 오는 순간 슬라이드의 위치가 다시 처음으로 되돌아가는.. 2023. 6. 1. [TIL 2023.05.30] 자바스크립트 검색기능 (GOE’s CINEMA) 💻오늘 배운 내용 insertAdjacentHTML() element.insertAdjacentHTML(position, text); 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입 요소 변경이 아닌 요소 삽입만을 해야 하는 상황 position의 값은 beforebegin, afterbegin, beforeend, afterend만 사용할 수 있다. trim() 문자열 좌우에서 공백을 제거하는 함수 var a = " 가 나 다 라 마 " a.trim() //"가 나 다 라 마" replace() 문자열에서 변경하려는 문자열이 여러 번 반복될 경우, 첫 번째로 발견한 문자열만 치환 apple, banana, banana' 이렇게 'banana'가 여러 번 반복될 경우.. 2023. 5. 31. [TIL 2023.05.29] 영화 검색 페이지 만들기 (GOE’s CINEMA) 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 🧐궁금점과 부족한 내용 📋레퍼런스 💻오늘 배운 내용 CSS grid 사용 그리드 사용 방법은 의외로 간단했다. display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 2%; display를 grid로 두고 columns(가로), rows(세로) 값을 설정해주면 된다. 만약 간격을 주고싶다면 grid-column-gap 또는 grid-row-gap을 사용 fr이라는 단위는 fraction(뜻은 여기로)이라는 의미로 숫자 비율대로 트랙의 크기를 나눈다. 오픈 api를 이용해 바닐라 자바스크립트로 영화 카드 생성 결론은 웹개발 종합반에서 배웠던 내용을 응용해서 살짝만 변형한다면 굉장히.. 2023. 5. 30. [WIL 2023.05.28] 내배캠 2주차 📝 Situation(상황): 이번주 목표 자바스크립트 5주차까지 완강 개인과제 와이어 프레임 구성 및 Starting Assignments 작성 👀 Task(임무): situation 중 문제들 자바스크립트 이론 강의를 들으며 개인적으로 궁금했던 사항 중에 강의 안에서 해결되지 않았던 내용들이다. 프레임워크 vs 라이브러리 차이점 nodemon의 사용 자바 스크립트에서 ‘=’ ‘==’ ‘===’ 의 차이점 부족한 사고력? 컴퓨팅 사고와 개발실력을 늘리는 공부법 함수 표현식에서의 호이스팅 과정 문제사항이 생길 때 먼저 구글링을 해보고 그래도 이해가 잘 되지 않으면 튜터님에게 질문을 하는 방식으로 풀어갔다. 이번 주에 가장 충격 받은 순간은 개인 과제 발제 때가 아닐까 개인 과제라고 해서 그냥 알고리즘 문.. 2023. 5. 29. 이전 1 다음
