자바스크립트
-
fetch의 함정(?); fetch는 resolve된 프로미스다.Web/Error & Fix 2022. 6. 11. 21:39
드디어 3주에 걸친 자스 기초 스터디가 끝나고 평화롭게 깜지를 적고 있었던 중 동기 분의 질문이 올라왔다. Q. "fetch의 url이 잘못되었는데, catch가 바로 실행되지 않고 then 안의 console.log가 실행돼요!" const f = fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.jsonㄹㄴㅇ') .then(data => { console.log('데이터 받기 성공!') const jsonData = data.json() return jsonData }) .then(json => { json.forEach(item => { console.log(item) const h2..
-
[Day 40] 알고리즘- 몸풀기 & 스택TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 26. 23:00
기다리고 기다리던 알고리즘 수업.. 아직 배열 메소드들이 익숙하지 않아 더욱 어려웠던 것 같다.. 메소드 많이 써보면서 연습하기...! //빈 배열 만들기 Array(10) //0으로 채우기 Array(10).fill(0) //1부터 100까지의 배열 Array(100).fill(1).map((value,index)=>value+index) //1부터 100까지 숫자 중 8이 몇 개? (Array(100).fill(1).map((value,index)=>value+index)+'').split('8').length-1 // https://codingdojang.com/scode/408?langby=javascript#answer-filter-area // 1차원의 점들이 주어졌을 때, 그 중 가장 거리가..
-
[Day 35] JS 클로저 활용 & ClassTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 18. 23:55
클로저를 이용한 모듈패턴, 사용자 정의 타입 패턴, 혼합 패턴 1. 모듈패턴 function Person(){ let age=15; //외부에서 접근할 수 없는 값 return { getAge: function(){ return age }, setAge: function(updatedAge){ age = updatedAge } } } const person = new Person(); console.log(person.getAge()); //15 console.log(person.age);//undefined person.setAge(40) console.log(person.getAge());//40 2. 사용자 정의 타입 패턴 function Person(){ this.age=13; } Person.p..
-
[Day 33] JS 로 만드는 3D 캐러셀TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 17. 22:01
https://daheejo.github.io/FrontendSchool_2/carousel/index.html Today's Color: 오늘 당신에게 맞는 색깔은? What's the color of the day? STOP REPLAY daheejo.github.io 일단 만들어본 3d 캐러셀! 계속 회전하는데, 버튼으로 조정할 수 있는 캐러셀을 만들어보고자 했다. (근데 아직 버튼 기능과 카드 뒷면 기능은 미완이다) css에 키프레임 애니메이션을 적용하였는데, 문제는 가운데 정렬한 캐러셀이 애니메이션만 적용하면 자꾸 가운데를 벗어나곤 했다 ㅠ 그래서 멘토님께 여쭤본 결과, @keyframes movingCarousel { from{ transform: translate(-50%, -50%) rot..
-
드롭다운 구현에서 blur와 click 이벤트, 그리고 CSS transition의 영향..Web/Error & Fix 2022. 5. 17. 15:00
드롭다운을 구현하는 중에 바깥을 클릭했을 때 드롭다운이 사라지게 하기 위해서(더 나은 UX..! 항상 사용자 입장에서 생각하기!!!) 'blur'라는 이벤트를 추가했다. 이렇게 const selectBox = document.querySelector('.select-box'); const dropbox = document.querySelector('.dropbox'); const dropboxOpt = document.querySelectorAll('li'); const OptText = document.querySelectorAll('.dropbox-opt'); selectBox.addEventListener('click',function (){ dropbox.classList.toggle('on');..
-
[Day 31] JS DOM & 이벤트TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 12. 23:16
DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다. 돔 트리에 접근 document.getElement~ document.querySelelector(All)~ (*querySelector() 는 코드 초단에만 사용하는 것이 좋다. 실행 시 코드 전체에서 요소를 찾아 실행하기 때문에 메모리 효율이 낮고 코드처리 속도가 느리다.. 그래서 함수 안에서 반복적인 사용은 지양된다.) 돔 제어 1. 이벤트 삽입 .addEventListener() 2. 클래스 제어 .classList.[add/remove/toggle/contains] 3.요소 제어 document.creat..
-
[JS] ClosureWeb/JS 2022. 5. 12. 01:10
자바스크립트에서 함수의 유효범위는 그 함수를 어디에서 실행됐는냐가 아니라 어디서 정의됐느냐에 따라 달라진다. 자바스크립트는 static (lexical) scope(함수 선언은 한 번밖에 못하는데 이거를 static, 정적이라 칭함)를 채택한다. 클로저란 부모 함수 안에서 자식 함수를 선언하면 자식함수를 어디에서 호출하더라도 자식함수 안에서 부모함수의 변수에 접근할 수 있다는 것을 의미한다! 프리코드캠프 글에서 살펴본 예시를 가져왔다. 아래와 같은 함수가 있다고 해보자. let count = 1 function counter() { console.log(count) } counter() // print 1 함수의 큰 장점은 재사용성인데, 이 함수를 다양한 곳에서 재사용하고 싶기 때문에 아래와 같이 또 다..
-
[Day 29] 함수 & call by valueTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 11. 01:46
원래 모르는 내용 위주로 슥샥 정리하는 식으로 TIL을 적었지만, 자스 진도 들어간 이후로 익숙하지 않은 내용이 점점 많아지기에.... TIL의 내용이 점점 부실해져가고 있는걸 체감한다...ㅜㅜ 나의 일기장(그만큼 막쓰는)인 걸 인정하고..ㅎ 이제 배운 내용은 그냥 핵심 코드만 쏙쏙 기록하는 식으로 간략히만 적는 방식으로 바꾸려고 한다..! 함수를 배우고 푼 오늘의 과제 //화살표함수를 그냥 함수로 바꾸기 let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let newData = arr.map(function(a){ a.map(function(n) { return n*2 }) }) //평균 구하는 함수 만들기 let data = [10,20,30,40]; function a..