Dev. note by Danna Dev. note by Danna

Web

• 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..

  Read More
• 드롭다운 구현에서 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');..

  Read More
• [JS] Closure

  Web/JS 2022. 5. 12. 01:10

  자바스크립트에서 함수의 유효범위는 그 함수를 어디에서 실행됐는냐가 아니라 어디서 정의됐느냐에 따라 달라진다. 자바스크립트는 static (lexical) scope(함수 선언은 한 번밖에 못하는데 이거를 static, 정적이라 칭함)를 채택한다. 클로저란 부모 함수 안에서 자식 함수를 선언하면 자식함수를 어디에서 호출하더라도 자식함수 안에서 부모함수의 변수에 접근할 수 있다는 것을 의미한다! 프리코드캠프 글에서 살펴본 예시를 가져왔다. 아래와 같은 함수가 있다고 해보자. let count = 1 function counter() { console.log(count) } counter() // print 1 함수의 큰 장점은 재사용성인데, 이 함수를 다양한 곳에서 재사용하고 싶기 때문에 아래와 같이 또 다..

  Read More
• [JS] Constructor Function

  Web/JS 2022. 5. 6. 15:50

  *freecodecamp 를 기반으로 작성하였다. Constructor Function 컨스트럭터(Constructor)는 새로운 객체를 만드는 함수이다. 이것은 새로운 객체에 속하는 프로퍼티나 기능을 정의한다. function Bird() { this.name = "Albert"; this.color = "blue"; this.numLegs = 2; } let bluebird = new Bird; 위의 컨스트럭터는 Bird라는 객체를 name, color, numLegs라는 프로퍼티들로 각각 정의하였다. 컨스트럭터는 다음과 같은 컨벤션을 따른다. 컨스트럭터는 컨스트럭터가 아닌 다른 함수와 구분하기 위해 함수 이름 첫 문자를 대문자로 정의한다. 컨스트럭터는 만들어질 객체의 프로퍼티를 세팅하기 위해 thi..

  Read More
• [CSS] 가상 클래스(Pseudo-class)와 가상 요소(Pseudo-element)

  Web/CSS 2022. 4. 3. 12:55

  CSS의 선택자 중에서 가상 클래스와 가상 요소가 무엇이고 그 차이점에 대해 정리해보고자 한다. (더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) 1. 가상 클래스(Pseudo-class) 가상 클래스란, 어떤 특정 상태에 있는 엘리멘트를 선택하는 선택자(selector)를 의미한다. 예) 타입 선택자의 첫번째 엘리멘트 마우스를 위에 올릴 때 색상이나 이미지 변경 등 가상 클래스는 콜론:을 붙임으로써 사용할 수 있다. 가상 클래스 중 많이 쓰이는 종류를 몇 가지 들어보자면, :hover `마우스 포인터가 위에 있는 경우 :focus 사..

  Read More
• [JS] 정규표현식(Regular Expressions)

  Web/JS 2022. 2. 11. 11:51

  정규식에서 쓰이는 메소드 1. exec 2. test 3. match 4. search 5. replace 6. split freecodecamp에서 배운 정규표현식 내용들을 정리하였다. 1. .test() 메소드 let testStr = "freeCodeCamp"; let testRegex = /Code/; testRegex.test(testStr); //true 2. operator | let petString = "James has a pet cat."; let petRegex = /dog|cat|bird|fish/; let result = petRegex.test(petString); //cat이 있기 때문에 true 3. Ignore Case While Matching let myString =..

  Read More
• 노마드코더 크롬 바닐라JS 챌린지 후기

  Web 2022. 1. 25. 15:18

  1. 완성작 https://github.com/daheejo/momentumbydahee.github-io GitHub - daheejo/momentumbydahee.github-io: clone coding with vanilla js clone coding with vanilla js. Contribute to daheejo/momentumbydahee.github-io development by creating an account on GitHub. github.com 2. Concepts you need to learn again .classList.add/remove() localStorage.set(get)Item() .createElement() JSON.parse() .forEach() f..

  Read More
• [JS] 소수점을 버리고 자연수를 얻는 방법

  Web/JS 2022. 1. 17. 10:39

  1. Math.round() : 반올림 2. Math.ceil() : 올림 3. Math.floor(): 내림 cf. Math.random() : 0~1 범위 내의 랜덤한 수 추출 사용 예시 Math.floor(Math.random()*10) Maht.ceil(Math.random()*10) //0~10 사이의 랜덤한 수 function randomRange(myMin, myMax) { return Math.floor(Math.random() * (myMax-myMin+1))+myMin; } //최솟값,최댓값 범위 내의 랜덤한 수

  Read More