IT/javascript (39) 썸네일형 리스트형 [TS]React.js with TypeScript 설정 1. Visual Studio Code 설치( 이전 글 참고 ) [JS]기초 학습 (tistory.com) [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 St taisou.tistory.com 2. 플러그인 설치 Visual Studio Code 의 왼쪽 사이드 메뉴에 있는 네모네모 버튼을 누르고 ( Ext.. [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.. [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 해당 항목을 클릭하여.. [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 설치.. [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의 타입을 체크하는 패키지 추가! [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;.. 오프라인에서 폰트를 이용하는 방법 feat nodejs + fontsource.org 나같이 폐쇄망에서 일하는 사람은 퍼블링망이 연결되어 있지 않아, 웹링크로 폰트를 가져올 수 없다. 이럴때는 node 를 이용해 패키지로 설치해서 쓰면 좋다! 일단 fontsource.org 사이트에서 필요한 폰트를 찾는다. 해당 폰트 화면에서 install 탭을 누른다. 가이드가 나와있는데로 설치/링크설정/이용! 을 한다. //설치 npm install @fontsource/material-icons //index.css 에 추가 링크 import '@fontsource/material-icons'; //이용 home 이제 폐쇄망에서도 이쁜 아이콘과 폰트를 쓰자!! [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.. 이전 1 2 3 4 5 다음
