반응형 IT/javascript57 [JS] 자바스크립트를 이용한 클래스 바꾸기(CSS) ** 태그에 css 클래스를 추가하는 방법 직접 교체하지 않고, ClassList 를 통해 처리한다. ex) "amazing" 클래스 적용하기 h1.classList.contains("amazing") 클래스 적용했는지 보고 h1.classList.add("amazing") 적용하거나 h1.classList.remove("amazing") 빼는게 가능! 하지만 더 간단하게!! h1.classList.toggle("amazing") 를 하면 토글이 된다... Element.classList - Web API | MDN (mozilla.org) Element.classList - Web API | MDN Element.classList 는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList (en.. 2023. 12. 3. [JS]기초 학습 1. 개발도구 설치 Visual Studio Code Download Visual Studio Code - Mac, Linux, Windows Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 해당 항목을 클릭하여.. 2023. 11. 29. [ReactNative-RN] 설정하기 on Windows11 1. nodejs 설치 Download | Node.js (nodejs.org) Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 현재 v18.18.0 설치 2. jdk1.8 설치 Oracle JDK1.8 설치 3. Android Studio 설치 Android SDK Android SDK Platform Android Virtual Device 체크하여 꼭 설치~ Android SDK Platform 34 설치 SDK Tools 설치 로컬유저데이터\Android\Sdk\platform-tools 를 패스에 등록 에뮬레이터 생성 4. Visual Studio Code 설치.. 2023. 11. 24. [TS]리액트 프로젝트 생성 npm init vite [프로젝트명] -- --template react-ts cd [프로젝트명] npm i 프로젝트 실행 npm run dev 부트스트랩 패키지 추가 npm i bootstrap 스타일을 책임지는 reactstrap 추가! npm i reactstrap 참고 링크! https://reactstrap.github.io/ Storybook reactstrap.github.io main.tsx 에 import 추가 - 모듈은 모듈이름으로 바로 임포트! vscode 약자는 imn import 'bootstrap/dist/css/bootstrap.css' npm i prop-types # prop의 타입을 체크하는 패키지 추가! 2023. 7. 3. [TS]리액트 복습 - 모던 자바스크립트 1. let 과 const ES6(=ES2015) 부터 등장. 변수 선언시, var 가 아닌 let과 const 이용 : hoisting 둘리의 호이호이? 가 아닌 호이스팅 자바스크립트에서는 선언되는 변수와 함수를 소스전체에를 스캔하여 메모리에 할당 후 처리하기때문에 컴파일러 언어를 익힌 나같은 사람은 착각하기 쉬운 일이 발생한다. console.log(A1); //오류 안난다. undefined 라고만 나올뿐... var A1 = "hello"; var A1 = 100; // 중복선언해도 오류 안남.. 이런걸 해결해주는게 let ! 일반적인 언어같이 위에 것들을 막아줌.. const 는 상수 선언 2. 구조 분해 할당 let arr = [10,20,30,40]; let [a1, a2,a3] = arr;.. 2023. 7. 2. 오프라인에서 폰트를 이용하는 방법 feat nodejs + fontsource.org 나같이 폐쇄망에서 일하는 사람은 퍼블링망이 연결되어 있지 않아, 웹링크로 폰트를 가져올 수 없다. 이럴때는 node 를 이용해 패키지로 설치해서 쓰면 좋다! 일단 fontsource.org 사이트에서 필요한 폰트를 찾는다. 해당 폰트 화면에서 install 탭을 누른다. 가이드가 나와있는데로 설치/링크설정/이용! 을 한다. //설치 npm install @fontsource/material-icons //index.css 에 추가 링크 import '@fontsource/material-icons'; //이용 home 이제 폐쇄망에서도 이쁜 아이콘과 폰트를 쓰자!! 2023. 5. 27. [TS] 타입스크립트 설치, Vscode 셋팅 방법 1. 타입스크립트 설치하기 npm i -g typescript ts-node 2. 설치 확인 tsc -v ts-node -v 3. 유용한 vscode 플러그인 Prettier Tailwind CSS Headwind PostCSS Language SUpport 4. ts 실행하기 샘플파일! index.ts console.log("Hello World!"); ts-node index.ts 실행! 5. 프리티어 정리 샘플파일 더블쿼트 -> 싱글쿼트 변경 세미콜론 -> 제거 .prettierrc.js module.exports = { bracketSpacing: false, jsxBracketSameLine: true, singleQuote: true, trailingComma: 'none', arrowPare.. 2023. 5. 20. [NodeJS] 윈도우에서 Scoop 를 이용한 nodejs 설치 1. 일반 파워쉘을 실행 2. 다음 명령어를 차례대로 실행(Scoop 설치) $env:SCOOP='C:\Scoop' [Environment]::SetEnvironmentVariable('Scoop',$env:SCOOP, 'User') Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -scope CurrentUser # 질문창이 나오면 A 모두 Yes 선택.. 난 안나옴 iwr -useb get.scoop.sh | iex # scoop 설치! 3. scoop 를 이용한 git aria2 설치 scoop install git aria2 4. scoop를 이용한 nodejs 설치 scoop install nodejs-lts # 현재버전 : 18.16.0 5. scoop.. 2023. 5. 19. LGTV nodejs 로 연동 제어하기(feat 라즈베리파이 제로) - 1 집에있는 LG tv 가 사용한지 8년이 지나지 리모콘의 뒤로가기 버튼이 안되기 시작함! 그래서 어쩔수 없이, 스마트폰의 앱에서 lg 리모콘을 이용하기 시작했는데, 너무 많은 광고에 스트레스!! 를 받기 시작 ㅡㅜ 쓰는거라곤, 비티비로 외부입력을 바꾸고 볼륨만 바꾸는건데 할때마다 광고때문에 채널 바꾸는데 3만년씩 걸리는듯 한 느낌 !! 화가 나서 폭풍검색을 하다보니, LGTV와 연동되는 node 관련 라이브러리를 발견했다! https://github.com/hobbyquaker/lgtv2#tvswitchinput GitHub - hobbyquaker/lgtv2: Control LG WebOS TV using node.js Control LG WebOS TV using node.js :tv:. Contrib.. 2023. 1. 21. 이전 1 2 3 4 5 6 7 다음 반응형
