반응형 IT/JavaScript(TypeScript)61 [TS]Visual Studio Code 에서 타입스크립트 제네릭 사용시, auto close tag 로 불편할 경우! Typescript 의 Generic 기능을 사용할때, 태그와 동일한 모양새 때문에, 자동 닫기 태그가 활성화 되어 매번 불편하다. ! 설정을 통해서 TypeScript 에서는 자동닫기를 비활성화 하면 도움이 된다. Ctrl+Shit+P > Prefrences: Open User Settings(JSON) "auto-close-tag.activationOnLanguage": [ "html", "xml", "javascript", "javascriptreact", "typescriptreact", 2024. 9. 10. [TS]graphQL 샘플 프로젝트 생성 ( feat. GraphQL과 타입스크립트로 개발하는 웹 서비스 ) node -v : 20.16.0 # 프로젝트 구성 ( 프로젝트 루트 /graphql-book-fullstack-project )npm i -g yarn git init .gitignore 파일 생성 ( 아래 사이트에서 react, node 를 넣고 파일로 생성 )gitignore.io - 자신의 프로젝트에 꼭 맞는 .gitignore 파일을 만드세요 (toptal.com)# 프론트 생성 make projectcd projectyarn create react-app --template @chakra-ui/typescript web cd web yarn startyarn add @apollo/client graphql# 백엔드 생성 ## /project 에서 mkdir server cd server yarn.. 2024. 9. 9. [Next.js]차트와 대시보드 예제-홈화면 출처 : 레벨업 리액트 프로그래밍 1. 프로젝트 생성create-next-app@latest levelup-dashboard - 정상 확인cd levelup-dashboardnpm run dev 2. 추가 라이브러리 설치npm i @heroicons/react @tailwindcss/forms @tremor/react @vercel/postgres autoprefixer bcrypt clsx next-auth@beta use-debounce uuid zod -개발용 추가 설치npm i -D @types/bcrypt @types/uuid @vercel/style-guide dotenv eslint-config-prettier prettier prettier-plugin-tailwindcss 3. 파일 수.. 2024. 6. 30. 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. 이전 1 2 3 4 5 ··· 7 다음 반응형
