본문 바로가기

Programming/Javascript6

[Tip] 구글 애드센스(AdSense) Height Auto Important 강제 적용 해제 구글 애드센스 (Ad-Sense) 를 적용했을 때위 이미지처럼 광고를 삽입한 태그에height: auto !important 가 강제로 적용된다.     이는 반응형 광고로 설정되어 있기 때문에광고 크기에 따라 설정이 달라져야 하기에스크립트가 강제로 스타일을 변형하는 부분이라고 하는데     애드센스 전체 설정에서 바꿔주면 된다고 하는데도이상하게 나는 적용이 되질 않았다.계속 height: auto !important가 적용되더라.그래서 다른 방법을 사용했다.     Observer를 사용하여 해당 태그의 Style이 변경되면이를 감지하고 다시 없애버리는 방법이다.태그를 확인해보면 사라진 것을 확인할 수 있다. 2024. 1. 27.
[JS] 순열 / 중복순열 / 조합 / 중복조합 1. 조합 조합이 훨씬 쉽기 때문에 먼저 살펴본다. 개념 = [1, 0] 과 [0, 1] 을 동일한 원소로 판단한다. 즉 순서를 고려하지 않는다. 주석으로 기재한 숫자 순서대로 보면 이해가 쉽다. 쉬운 이해를 위해 fnCombination([1, 2, 3, 4], 3) 을 호출했다고 하자. arr = [1, 2, 3, 4] 의 첫 번째 요소인 item = 1 을 제외한 나머지를 새로운 배열로 생성한다. 여기서 origin 과 arr 은 동일한 배열이며 slice 함수는 첫 번째 파라미터로 주어진 인덱스 요소부터, 두 번째 파라미터로 주어진 인덱스 요소까지를 리턴하겠다는 의미이다. 두 번째 파라미터가 없을 경우 배열의 끝까지 리턴한다. 위에서 만든 새로운 배열 reamin = [2, 3, 4] 을 파라미터.. 2022. 8. 10.
[React] 컴포넌트(Component) Fade In/Fade Out 구현 Fade In / Fade Out 을 구현해보자 1. 소스코드 2. 설명 z-index 때문에 반드시 visibility: hidden; 적용이 필요한 상황. 결론부터 말하자면 transition: all 0.2s linear 0s; 처럼 사용하면 된다. 이 때 가장 마지막에 오는 시간은 animaition-delay 에 사용되는 시간이다. 1s 로 설정 시 1초 뒤에 애니메이션이 실행된다. 검색해서 찾아보니 transition: opacity 0.2s visibility 0.2s; 같은 형식으로 사용하면 적용될거라 하던데, 막상 해보니 그냥 툭 하고 사라지며 애니메이션이 먹히지 않았다. useState를 사용하여 true/false 값에 따라 className을 분기처리 한 내용은 너무나도 당연한 부분.. 2022. 8. 3.
[React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. node_modules 폴더가 없는 것이 원인이다. 최초 React 프로젝트를 설치할 때 해당 폴더가 gitignore 걸려있는데, 다른 PC에서 Git Clone을 받을 경우 각종 의존성이 설치되어 있는 해당 폴더가 없어 react-scripts를 실행하지 못해 발생하는 에러이다. npm install 해당 명령어를 통해 package.json에 정의된 의존성을 설치하면 된다. 참고로 npm update 는 package.json에 정의된 의존성을 최신 버전으로 업데이트한다. 즉 package-lock.json 파일이 업데이트 되어 Git 변경사항에 잡힌다 (당연히 Rollback 해줘야한다). 2022. 8. 3.
[Javascrit] 정규표현식 (Regular Expression) 정리 0. 형식 "/패턴/플래그" 패턴 : 매칭 or 검색하고자 하는 문자열 조건을 기재. 플래그 : 조건에 추가적인 옵션 부여 1. 사용방식 다음의 메서드에서 정규표현식을 입력하여 사용. Method Description ("문자열").match("정규표현식") 문자열 내 정규표현식 일치하는 부분을 배열로 반환. ("문자열").replace("정규표현식", "대체문자열") 문자열 내 정규표현식 일치하는 부분을 대체문자열로 변환. ("문자열").split("정규표현식") 문자열 내 정규표현식 일치하는 부분을 나누어 배열로 반환. ("정규표현식").test("문자열") 문자열이 정규표현식과 일치할 경우 True 반환. 2. 패턴 (문자열 조건) 아래의 패턴을 정규표현식에 입력하여 조건 생성. Pattern De.. 2022. 7. 27.
[React] Modal 만들기 (React-Modal 사용 X) React에는 React-Modal 이라는 라이브러리가 존재한다. 그런데 사용법을 익히기도 귀찮았고(무엇보다 문서가 없었다), CSS 적용하기도 어려워서 그냥 직접 만들기로 했다. 생각보다 어려운 작업이 아니었다. 약간의 CSS 지식만 있다면 빠르게 구현할 수 있을 정도의 수준이지만, 이번 게시글에선 그 조차도 쉽게 설명해서 모두가 이해하도록 해보겠다. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import Main from './components/main'; import './index.css'; ReactDOM.render( , document.getElementById('root') ); App.js 사용하지 않았다.. 2022. 2. 26.