IT/javascript (39) 썸네일형 리스트형 자바스크립트 복습 * 클로저- 클로저를 이용한 카운터! + 0 * 스크립트 로딩시 defer 키워드를 이용해서 비동기 로딩하게 하기!HTML 삽입미리보기할 수 없는 소스 * 함수는 기본 화살표 함수로 정의 한다!const colorBg = () => { //백틱과 템플릿 문자열을 많이 활용하자 //querySelector를 이용해서 태그(요소)를 선택하자. document.querySelector("#colorText").textContent = `컬로코드: ${color.value}`;} [TS]material-Icon 추가하여 사용하기 1. 패키지 설치 ( fontsource.org 사이트에서 지원글꼴 확인해서 설치 가능!) npm i @fontsource/material-icons 2. main.tsx 에서 import import '@fontsource/material-icons` 3. className 에 materail-icons 라고 쓰고 아이콘명을 innerHTML 에 써서 원하는 아이콘을 설정하여 사용 home !! 좀더 편하게 쓰기위해 컴포넌트 형태로 바꾸자!! /src/components/Icon.tsx import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react'; type ReactSpanProps = DetailedHTMLProps; export type I.. [TS]타입스크립트 컴파일러 설치하기 npm i -g typescript ts-node 설치확인 tsc -v ts-node -v Typescript 연습할때 이용하자! [TS]테일윈드 CSS 프로젝트 만들기 + 가짜데이터 생성기 1. 프로젝트 생성 npx create-react-app ch03_2 --template typescript 2. 패키지 설치 npm i -D postcss autoprefixer tailwindcss 3. 구성파일 생성 npx tailwindcss init -p 4. 패키지 추가설치 npm i -D daisyui @tailwindcss/line-clamp 5. 구성파일수정( tailwind.config.js) /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [require('@tailwindcss/line.. [TS] import type 의 의미 TypeScript 에서의 import 문법에는 import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react'; 와 같이 import type 으로 쓰는 경우가 있다. 이는 TypeScript -> JavaScript 로 컴파일시에, 전혀 영향이 없는 타입만을 선언한 파일을 import 할떄 쓰는 문법이다. 즉, 저기에 있는 저 import 들은 (FC, DetailedHTMLProps, HTMLAttributes) 모두 타입이다!! type FC = FunctionComponent; type DetailedHTMLProps = ClassAttributes & E; interface HTMLAttributes extends AriaAttribute.. chocolatey 를 이용한 nvm, nodejs 설치 Windows용 패키지 관리자 Chocolatey(choco) 설치 및 이용하기 - 단편글 - EvaNOTE (mew.kr) Windows용 패키지 관리자 Chocolatey(choco) 설치 및 이용하기 이 글에서는 Windows용 패키지 관리자인 Chocolatey(약칭: choco)를 설치하고 이용하는 방법에 대해 알아봅니다. evanote.mew.kr Chocolatey Software | NVM 1.1.12 NVM 1.1.12 A node.js version management utility for Windows. community.chocolatey.org 1. 윈도우 파워쉘을 관리자 모드로 실행 윈도우키 + x 관리자 선택 2. cholatey 설치 파워쉘 실행창에 아래 입력 [System... [EXPRESS]간단한 API 서버 express 를 이용한 간단한 메모리 기반 서버 만들기 mkdir api-server cd api-server npm i express #현재기준 express version : 4.18.2 #board.js 파일 생성 const express = require("express"); const app = express(); let posts = []; app.use(express.json()) //req.body 이용하기위해서 미들웨어 지정 app.use(express.urlencoded({ extended: true })); //post 요청시 application/x-www-form-urlencoded 파싱 app.get("/", (req, res) => { res.json(posts); }); a.. [React Native]초기설정 https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev 잘됩니다~! macOS 의 특이점! cocoapods 설치시 루비 최소 버전이 2.7 이어서 설치가 필요함! https://cmjunghoon.github.io/posts/Install_Ruby/ Ruby 설치 / 업데이트 / 제거 ( MacOS ) macOS는 기본적으로 Ruby가 설치되어 있습니다. cmjunghoon.github.io 이를 이용해서 루비 업데이트 후 프.. 이전 1 2 3 4 5 다음