본문 바로가기

전체 글451

변수의 유효범위와 클로저 / 함수 바인딩 🤖 클로저란 무엇인가? 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수 자바스크립트에서 변수는 더 이상 접근할 수 없을때 가비지 컬렉션이 정리를 한다. 그래서 함수가 종료되면 변수는 사라지고 더 이상 접근할 수 없게 된다. 하지만 어떤 함수가 새로운 함수를 반환하고 그 함수가 바깥에 있는 함수에 있는 변수에 접근하면, 바깥의 함수가 종료되었다고 하더라도, 새로 만들어진 함수에서 변수에 접근할 수 있으므로, 변수는 사라지지 않는다. 🤖 클로저는 어떻게 동작하는가? 자바스크립트에서 실행중인 함수, 코드 블록, 스크립트는 렉시컬 환경이라는 내부 숨김 연관 객체를 갖고 있다. 이 객체가 변수를 속성으로 저장하고 있고, 그리고 외부 렉시컬 환경에 참조를 가지고 있다. 그래서 내부에 없는 변수라고 하더라.. 2022. 4. 29.
39.Valid Parentheses Write a function that takes a string of parentheses, and determines if the order of the parentheses is valid. The function should return true if the string is valid, and false if it's invalid. Examples "()" => true ")(()))" => false "(" => false "(())((()())())" => true Constraints 0 2022. 4. 28.
event.preventDefault() / event.stopPropagation() 📌 event.preventDefault() event.preventDefault는 어떤 이벤트를 설정해두지 않은 경우, 해당 이벤트에 대해서 기본 동작을 하지 않도록 한다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소한다. 즉 이벤트 구현에 대한 기본 동작을 하지 않게 해준다. 나 같은 경우에 handleSubmit 을 사용할때 event.preventDefault() 이 설정을 하지 않으니까 submit을 누를때마다 handleSubmit의 기본 동작인 페이지새로고침이 실행되었다. 🧷 event.stopPropagation() event.stopPropagation()은 링크나 버튼 클릭은 막는 것이 아닌, 현재 이벤트가 캡처링이나 버블링 단계에서 더 이상 .. 2022. 4. 20.
CSS 웹 폰트 적용 / 버블링과 캡처링 ✨ Routinery 프로젝트를 하다가 폰트 바꾸려다가 text-animation에 대해서 알게 되었다. react 에서 폰트 적용 방법 우선, css 파일을 하나 생성 해준다. 나는 폰트를 다운 받지 않고 웹폰트를 사용하였다. https://fonts.google.com/specimen/Nanum+Myeongjo?preview.text=Make%20your%20routine&preview.text_type=custom Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 이곳에 들어가보면 이렇게 링크를 사용하는 방법과 @import를 사용하는 방법이 있는데 나는 @import를.. 2022. 4. 20.
38.Moving Zeros To The End Write an algorithm that takes an array and moves all of the zeros to the end, preserving the order of the other elements. moveZeros([false,1,0,1,2,0,1,3,"a"]) // returns[false,1,1,2,1,3,"a",0,0] function moveZeros(arr) { let array = arr.filter((num) => num !== 0); for (i=0; i < arr.length; i++) { if (arr[i] === 0) { array.push(0) } } return array; } 우선 주어진 숫자로 되어있는 배열에서 0을 제거해주었다. filter() let a.. 2022. 4. 14.
37.Simple Pig Latin Description: Move the first letter of each word to the end of it, then add "ay" to the end of the word. Leave punctuation marks untouched. Examples pigIt('Pig latin is cool'); // igPay atinlay siay oolcay pigIt('Hello world !'); // elloHay orldway ! function pigIt(str){ const words = str.split(' '); let w = ''; for (i=0; i < words.length; i++) { if (words[i].match(/[a-z]/i)) { w += words[i].subs.. 2022. 4. 11.

티스토리툴바