L'etude36 모듈 export default / import 'as' 🪢 모듈이란? 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성 export : 모듈 내보내기 import : 모듈 가져오기 import 'as' 가져올 것이 많으면 import * as 이렇게 객체 형태로 원하는 것을 가져올 수 있다. 루티너리 Home 컴포넌트에서 style.ts 사용하려고 위의 방식을 사용해봤다. import * as Styled from './style'; 이렇게 가져온다음에 이런식으로 사용해줬다. 🪢 export default export default는 해당 모듈에는 개체가 하나만 있다는 것을 의미한다. export default 한 모듈을 가져오려면 {} 필요없음 default 키워드는 기본 내보내기를 참조하는 용도로 사용된다. +named e.. 2022. 5. 10. react background image 설정하기 react를 사용해서 프로젝트를 진행하던 중에 이미지를 background에 넣고 싶어서 넣었는데 div 크기만큼 완전 째깐하게 들어갔다,,; 구글링해보니까 background-size: cover; background-position: center; background-repeat: no-repeat; 이렇게 설정하면 된다길래 했는데도 안됨,,,🥲 그때 찾은정보..! 위처럼 저렇게 설정해도 배경에 꽉차게 안들어간다! 싶으면 height: 100vh; 이렇게 아래에 추가로 설정해주면 잘된다~ height: 100vh => veiwport 높이의 100%라는 의미 + 배경 이미지 넣는방법! 우선, 나같은 경우는 따로 css 파일을 만들어서 사용했다. 이렇게 이미지가 사용되는 폴더 안에 이미지 파일을 넣어주.. 2022. 5. 9. 변수의 유효범위와 클로저 / 함수 바인딩 🤖 클로저란 무엇인가? 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수 자바스크립트에서 변수는 더 이상 접근할 수 없을때 가비지 컬렉션이 정리를 한다. 그래서 함수가 종료되면 변수는 사라지고 더 이상 접근할 수 없게 된다. 하지만 어떤 함수가 새로운 함수를 반환하고 그 함수가 바깥에 있는 함수에 있는 변수에 접근하면, 바깥의 함수가 종료되었다고 하더라도, 새로 만들어진 함수에서 변수에 접근할 수 있으므로, 변수는 사라지지 않는다. 🤖 클로저는 어떻게 동작하는가? 자바스크립트에서 실행중인 함수, 코드 블록, 스크립트는 렉시컬 환경이라는 내부 숨김 연관 객체를 갖고 있다. 이 객체가 변수를 속성으로 저장하고 있고, 그리고 외부 렉시컬 환경에 참조를 가지고 있다. 그래서 내부에 없는 변수라고 하더라.. 2022. 4. 29. event.preventDefault() / event.stopPropagation() 📌 event.preventDefault() event.preventDefault는 어떤 이벤트를 설정해두지 않은 경우, 해당 이벤트에 대해서 기본 동작을 하지 않도록 한다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소한다. 즉 이벤트 구현에 대한 기본 동작을 하지 않게 해준다. 나 같은 경우에 handleSubmit 을 사용할때 event.preventDefault() 이 설정을 하지 않으니까 submit을 누를때마다 handleSubmit의 기본 동작인 페이지새로고침이 실행되었다. 🧷 event.stopPropagation() event.stopPropagation()은 링크나 버튼 클릭은 막는 것이 아닌, 현재 이벤트가 캡처링이나 버블링 단계에서 더 이상 .. 2022. 4. 20. 이전 1 ··· 3 4 5 6 7 8 9 다음
