반응형 IT/JavaScript(TypeScript)61 [Next.js]공식사이트 튜토리얼 따라하기 Learn Next.js | Next.js (nextjs.org) Learn Next.js | Next.jsLearn how to build a full-stack web application with the free, Next.js App Router Course.nextjs.org ** Next.js 는 이런거군 **1. 폴더로 라우팅 설정이 가능하다. 하이레키하게 설정이 된다. 주소와 폴더의 트리구조가 매핑! ( 직관적임)2. 폴더별로 page.tsx layout.tsx 파일을 생성해서 기본 값을 설정할 수 있다. 3. 루트(app/)의 layout.tsx 은 전체에 영향을 끼친다.4. php 를 대체? 하는게 목적이어서, 단순 SSR 뿐만아니라 서버리스 연동으로 마치 서버페이지역할도 한다. ( 예.. 2024. 5. 31. [Next.js] 샘플 프로젝트 시작하기 1. 프로젝트 생성 및 시작npx create-next-app@latest my-next-app # 생각보다 오래걸립니다.cd my-next-app npm run dev 2. 생성시 셋팅 화면처음하는 프로젝트니 추천 말고는 모두 No! 3. 실행화면 4. 간단하게 페이지 수정루트에 pages 폴더를 만들고 about.js 파일을 생성 하여 아래와같이 쓴다.export default function About() { return ( Next.js 시작합니다. )} 5. 테스트 페이지 접속 2024. 5. 30. React Native로 윈도우 데스크탑 프로그램 만들기 1. 환경구성 실행Set-ExecutionPolicy Unrestricted -Scope Process -Force;iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1');기존에 설치한 nvm 하고는 상성이 않맞아서 nodejs 는 재설정을 했다. ( 20.12.2 ) 2. 프로젝트 생성npx --yes react-native@latest init HelloWindowsApp --version "latest"cd HelloWindowsAPpnpx --yes react-native-windows-init --overwrite 3. 프로젝트 실행 테스트npx react-native run-windows.. 2024. 5. 19. 폐쇄망 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. 이전 1 2 3 4 5 6 7 다음 반응형
