반응형 IT/JavaScript(TypeScript)58 clsx 모듈 - css 조건 적용하기 설치npm i clsx 활용 button.tsxclassName == css class 쪽에 clsx 와 : 을 이용해서 조건을 이용해서 css 가 적용되게 한다.import clsx from "clsx";export default function Button ({ kind = 'default', ...props} : React.ButtonHTMLAttributes & { kind? : 'default' | 'important' | 'reference';}) { return ( )} various-buttons.tsx'use client'import Button from "./button"import React, {useState} from "react"expo.. 2024. 6. 27. [TypeScript]제네릭 선언 안 닫게 하기 ( auto-close-tag plugin ) 플러그인을 찾아서 톱니바퀴 선택 Extension Settings 선택후, 아래 그림 선택 셋팅파일에 제외할 언어를 빼준다. "auto-close-tag.activationOnLanguage": [ "html", "xml", "javascript", "javascriptreact", "typescriptreact" ], typescriptreact 를 넣자니, 똑같고 빼자니 안닫히고... 계륵이다... 2024. 6. 27. [Next.js] React 복습 및 약간의 실습 - 프로파일 화면 만들기 app/composition/user-detail.tsx 파일 작성'use client';import React from 'react';interface ProfilePictureProps { src: string; }interface ProfileDetailsProps { name: string; email: string; }interface ContactButtonProps { onClick: () => void; }interface UserProfileCardProps { user: { profilePicture: string; name: string; email: string; }; onContactClick: () => void;}const .. 2024. 6. 25. [Next.js]프로젝트 시작 환경구성 vscode plugin 프로젝트 생성은 npx create-next-app@latest 를 이용하며,src/폴더 사용 이외에는 모두 Yes 를 선택합니다. 2024. 6. 24. [TS]Next.js 기초 - SSG 실습을 위해 next.js 프로젝트를 생성한다. npx create-next-app@latest --ts next-sample생성시 질의는 모두 No~~! SSG - Static Site Generation 정적사이트 생성빌드시 페이지를 생성한다. -- 사용 함수export const getStaticProps: GetStaticProps = async(context) =>pages/ssg.tsx 로 파일생성한다.next.js 에서는 폴더/파일 구조로 tsx 파일을 생성하면 그대로 호출 주소가 된다.즉, localhost:3000/ssg 로 호출 하면 이 페이지가 호출된다.import { GetStaticProps, NextPage } from "next";import Head from "next/h.. 2024. 6. 22. Next.js 외부인증 모듈 이용하기 Auth0 외부모듈을 이용한 회원가입/로그인 페이지 만들기 1. 프로젝트 생성npx create-next-app with-auth0모두 No! 2. Auth0 사이트 회원가입 후, 로그인Auth0: Secure access for everyone. But not just anyone. Auth0: Secure access for everyone. But not just anyone.Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.auth0.com 3. Auth0 내에서 프로젝트 생성다음 화면에서 Next.js 선택프로젝.. 2024. 6. 6. [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. 이전 1 2 3 4 5 ··· 7 다음 반응형
