01_PROJECT30 [ JavaScript ] replace와 정규식을 사용해서 해당 문자 대체하기(제거하기) replace와 정규식을 사용해서 큰 따옴표 제거하기 한번씩 문자열을 가져올 때 큰 따옴표까지 같이 값으로 가져와지는 경우도 있다. 그럴 때 replace와 정규식을 사용해서 큰 따옴표를 제거할 수 있다. JavaScript의 replace()메서드는 첫번째로 일치하는 패턴을 대체한다. 모든 큰 따옴표를 제거하기 위해서 (대체하기 위해서는) 정규식에서 'g'플래그를 사용하면 전역 검색(global search) 이 가능해진다. /는 정규 표현식의 시작과 끝을 나타내는 구분자로 replace(/"/g, '')로 써주면 모든 큰 따옴표를 빈 문자열 ('') ←작은 따옴표 2개 로 대체하여 큰 따옴표를 제거할 수 있다. replace와 정규식을 사용해서 숫자를 제외한 문자 제거하기 const imgUrl = .. 2023. 8. 2. [ CSS ] font-size (폰트 사이즈) rem 과 em이 뭐죠? rem 과 em 은 CSS에서 사용되는 상대적인 길이 단위 rem (Root EM) 최상위 요소인 의 폰트 크기 기준으로 설정된 길이. 요소의 폰트 크기를 1rem으로 간주하여 이를 기준으로 상대적인 크기를 지정한다. ex) 3rem이라고 하면 현재 폰트 크기의 3배 em (EM) 현재 요소의 폰트 크기를 기준으로 설정된 길이. 상위 요소의 폰트 크기를 상속받아 계산된다. ex) 부모 요소의 폰트 크기가 18px이고 자식요소의 폰트 크기가 1.5em이면 27px html 폰트크기가 커져도 상관없이 해당 요소의 상위요소 크기를 기준으로 계산됨. rem이나 em을 쓰는 이유는? rem이나 em은 상대적인 길이 단위이기 때문에 반응형 웹 디자인을 구현하거나 유연한 레이아웃을 만들 때 유용하다. rem은 루트 .. 2023. 8. 2. [ Firebase ] getAuth(app)와 getFirestore(app)는 전역에 쓸까, 지역에 쓸 1. 전역 const firebaseConfig = { ... }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); 전역에서 사용하는 경우, Firestore 인스턴스를 한번만 얻어와서 모든 컴포넌트 또는 함수에 사용한다. 인스턴스를 여러 번 생성하지 않고 하나의 인스턴스를 재사용하여 성능을 최적화할 수 있고, 여러 곳에서 Firestore에 접근해야 할 경우 반복된 코드를 쓰지 않기에 코드를 간결하게 할 수 있다. 2. 지역 각 컴포넌트나 함수 내에서 필요한 시점에 Firestore 인스턴스를 얻어온다. 프로젝트의 구조를 모듈화하여 관리하고자 할 때 유용하다. 어떤 방법을 .. 2023. 8. 1. [ JavaScript ] sessionStorage에 여러 아이템 저장하기, 객체를 세션스토리지에 저장하기 여러 아이템을 sessionStorage에 저장하고 싶다면 아래와 같은 방법을 이용할 수 있다. 키 하나에 모두 저장하기 const data = { updateName: name, updateURL: url, updateKey: key }; sessionStorage.setItem('userData', JSON.stringify(data)); 여러 아이템을 data라는 객체에 저장하고 JSON.stringify() 함수를 사용해 객체를 문자열로 변환시켜 userData 키에 저장할 수 있다. sessionStorage에는 아래와 같이 담긴다. 그런 다음 가져올 때는 JSON.parse() 함수를 사용해 문자열을 다시 객체로 변환합니다. const data = JSON.parse(sessionStorage.. 2023. 8. 1. [ JavaScript ] JS에서 src속성 추가 / 변경하기, setAttribute와 src JS에서 이미지의 src를 속성을 설정하거나 변경하는 법은 아래와 같이 두 가지가 있다. proImg.setAttribute('src',imgUrl); setAttribute(속성명,속성값) 메서드를 활용해서 쓰거나 직접적으로 src를 사용해서 속성에 접근할 수도 있다. proImg.src = imgUrl; 다만, setAttribute()메서드는 모든 브라우저에서 일관된 방식으로 동작하지만 src는 구형 브라우저의 호환성을 고려해야 한다. 구형 브라우저의 호환성을 고려해야 할 때는 setAtttribute()가 더 안전할 수 있다. 그렇지만 src는 현재 사용되는 대부분의 브라우저에서는 문제없이 작동되고 직관적이고 더 간결하게 쓸 수 있다는 장점이 있다. 2023. 7. 31. [ JavaScript ] innerText와 textContent에 대하여 innerText CSS스타일이 적용된 텍스트만 반환합니다. innerText는 많이 사용되지만 표준은 아닙니다. 또한, innerText 사용 시 레이아웃 시스템의 일부 정보가 필요하고 눈으로 보기엔 미미할 수 있지만 이는 분명히 성능이 저하되는 것을 볼 수 있습니다. 이에 대해서 자세한 설명이 있는 링크를 아래에 첨부합니다. kelly norton: innerText vs. textContent Why does innerText require layout? I ended with that question in my previous post about layout thrashing. Just to recap briefly, there are very common patterns of use in the.. 2023. 7. 29. 이전 1 2 3 4 5 다음
