반응형 IT/JavaScript(TypeScript)58 폐쇄망 npm 패키지 등록 및 이용하기 인터넷이 연결되는 환경에서 프로젝트를 생성하고 패키지를 다운로드해서 옮기는 방식입니다.폐쇄망에는 넥서스3을 설치해서 이용합니다. (인터넷 연결되는 환경)1. yarn 설치npm i -g yarn 2. 필요한 패키지가 담긴 프로젝트 생성 ( react -app )yarn create react-app ods-samplecd ods-sampleyarn add axios react-modal react-router-dom styled-components 3. .yarnrc 파일 만들고 아래 내용 넣기yarn-offline-mirror "./npm_packages" yarn-offline-mirror-pruning true 4. node_modules 폴더 , yarn.lock 삭제 5. 캐시 삭제yarn c.. 2024. 5. 14. 자바스크립트 복습 * 클로저- 클로저를 이용한 카운터! + 0 * 스크립트 로딩시 defer 키워드를 이용해서 비동기 로딩하게 하기!HTML 삽입미리보기할 수 없는 소스 * 함수는 기본 화살표 함수로 정의 한다!const colorBg = () => { //백틱과 템플릿 문자열을 많이 활용하자 //querySelector를 이용해서 태그(요소)를 선택하자. document.querySelector("#colorText").textContent = `컬로코드: ${color.value}`;} 2024. 4. 25. [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.. 2024. 1. 11. [TS]타입스크립트 컴파일러 설치하기 npm i -g typescript ts-node 설치확인 tsc -v ts-node -v Typescript 연습할때 이용하자! 2024. 1. 10. [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.. 2024. 1. 9. [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.. 2024. 1. 1. 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... 2023. 12. 30. [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.. 2023. 12. 25. [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 이를 이용해서 루비 업데이트 후 프.. 2023. 12. 16. 이전 1 2 3 4 5 6 7 다음 반응형
