react-markdown , remark-gfm 설치

npm i react-markdown remark-gfm

 

https://github.com/remarkjs/react-markdown

 

GitHub - remarkjs/react-markdown: Markdown component for React

Markdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub.

github.com

 

 

 

npm install -D @tailwindcss/typography

 

 

tailwind.config.js

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

 

 https://tailwindcss.com/docs/typography-plugin

 

@tailwindcss/typography - Tailwind CSS

Beautiful typographic defaults for HTML you don't control.

tailwindcss.com

 

 

하이라이터 개발자모드 설치

npm i -save-dev react-syntax-highlighter

 

 

MarkdownViewr.tsx

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

createRoot(document.body).render(
  <Markdown
    children={markdown}
    components={{
      code(props) {
        const {children, className, node, ...rest} = props
        const match = /language-(\w+)/.exec(className || '')
        return match ? (
          <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={dark}
          />
        ) : (
          <code {...rest} className={className}>
            {children}
          </code>
        )
      }
    }}
  />
)

 

반응형

'UXUI Development > React.js' 카테고리의 다른 글

Next.js 13 ESLint +Prettier 세팅  (0) 2023.08.29

 

 

https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

 

NVM(Node Version Manager) 맥OS에서 설치 & 사용하기

NVM(Node Version Manager) 맥OS에서 설치 & 사용하기. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

 

 

https://elisom.tistory.com/entry/vi-vim-%EC%A0%84%EC%B2%B4-%EB%82%B4%EC%9A%A9-%EC%A7%80%EC%9A%B0%EA%B8%B0

 

 

반응형

 

 

 

.eslintrc.json 

 

prettier

npm install --save-dev prettier
npm install --save-dev eslint-config-prettier
touch .prettierrc.json

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

.eslintrc.json

 

{
  "extends": ["next", "prettier"]
}

 

npm i --save-dev @typescript-eslint/eslint-plugin

 

 


 

최종

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 사용되지 않는 변수를 에러로 인식
    "@typescript-eslint/no-explicit-any": "error" // any 타입 정의를 에러로 인식
  }
}

package.json

 "dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "eslint-config-prettier": "^9.0.0",
    "prettier": "^3.0.2"
  }

 

 

참고자료

https://github.com/prettier/eslint-config-prettier

https://gist.github.com/Nivethan-Ar/2375bf451d4c30148916b59c7e0c51c0

https://findmypiece.tistory.com/203

https://velog.io/@2taesung/Next.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0

 

 

반응형

'UXUI Development > React.js' 카테고리의 다른 글

Markdown Viewer 라이브러리  (0) 2024.01.12

포트폴리오 작업할때 유용했던 무료 목업사이트들

 

 

Is grahpichs

https://www.ls.graphics/free-mockups

 

Download Free Mockups [PSD, Sketch, Figma] | Huge Collection at ls.graphics

ᐅ Dive into our vast collection of Free Mockups, Patterns, Illustrations, Scene Creators, and DIY Scenes for Photoshop, Sketch, and Figma. Experience the diversity of our resources and elevate your designs today! 🚀🎨🌈

www.ls.graphics

 

UI8

https://ui8.net/category/freebies

 

 

 

 

 

Mockup World

https://www.mockupworld.co/all-mockups/

 

Mockups Archive

This website uses cookies We inform you that this site uses own, technical and third parties cookies to make sure our web page is user-friendly and to guarantee a high functionality of the webpage. By continuing to browse this website, you declare to accep

www.mockupworld.co

 

 

페이스북 디자인 

https://design.facebook.com/toolsandresources/

 

Devices from Design at Meta

Whether you’re a product designer, writer, creative strategist, researcher, project manager, team leader or all-around systems-thinker, there’s something here for you.

design.facebook.com

 

반응형

 

 

https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-where-is-has-not

 

🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()

:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위

inpa.tistory.com

 

 

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%B5%9C%EC%8B%A0-CSS-%EA%B8%B0%EB%8A%A5-%F0%9F%8E%A8-supports

 

[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports

@supports 최신 스펙의 css값을 사용할 때, 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 css를 선언할 수 있다. 방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이

inpa.tistory.com

 

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

 

@supports - CSS: Cascading Style Sheets | MDN

The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditi

developer.mozilla.org

 

 

 

반응형

color-mode

 

 

https://nuxt.com/modules/color-mode

 

Color-mode Module · Nuxt

 

nuxt.com

 

https://color-mode.nuxtjs.org/

 

Documentation · Nuxt Color Mode

Dark and Light mode with auto detection made easy with Nuxt 🌗 Nuxt 3 and Nuxt Bridge supportAdd .${color}-mode class to for easy CSS themingForce a page to a specific color mode (perfect for incremental development)Works with client-side and universal r

color-mode.nuxtjs.org

 

 

 

반응형

 

nuxt3 i18n 

 

 

https://vue-i18n.intlify.dev/guide/integrations/nuxt3.html#setup-vue-i18n-on-nuxt-3-application

 

Nuxt 3 integration | Vue I18n

 

vue-i18n.intlify.dev

 

반응형

 

VSCode 뼈대작성

```html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
    <!-- 뼈대 잡기 -->
</body>

</html>
```

 

 

 

 

<div class="container">
  <button type="button" class="btn btn-primary">버튼</button>
</div>

 

 

<section class="hero text-center text-white py-5" style="background-color: #343a40;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <h1 class="display-4 mb-3">중고마켓</h1>
        <p class="lead mb-0">집에 있는 물건을 팝니다.</p>
      </div>
    </div>
  </div>
</section>

 

GPT에 이미지 더하기

이미지 찾기

[INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##

 

 

 

반응형

ChatGPT 가입 

https://chat.openai.com/chat

 

ChatGTP 사용전, 입력한 데이터 재활용방지 필수 설정하기

https://docs.google.com/forms/d/e/1FAIpQLScrnC-_A7JFs4LbIuzevQ_78hVERlNqqCPCt3d8XqnKOfdRdQ/viewform

 

OpenAI Data Opt Out Request (ChatGPT, DALL-E)

One of the most useful and promising features of AI models is that they can improve over time. We continuously improve the models that power our services, such as ChatGPT and DALL-E, via scientific and engineering breakthroughs as well as exposure to real

docs.google.com

 

1. 이메일 주소 입력

2. Account Org Settings 링크 클릭 하여 세팅해주기

https://platform.openai.com/account/org-settings

저장된 Organization ID 확인하여 값 입력 

동일한 방법으로 링크 클릭 후 저장된 Organization name 값 입력

https://platform.openai.com/account/org-settings

제출 버튼 클릭하여 양식 제출.

 

제출완료 되면  등록된 계정의 이메일로 입력결과 메일 수신됨. 

 

 

+++

 

 

Chat 문제 발생

Something went wrong. If this issue persists please contact us through our help center at help.openai.com.

 

에러날경우 아래방법으로 해결해보기.

보안상의 문제로 사내 PC에서 막은 느낌. (VPN이 깔려있고 업무상 삭제하면 안되서 사용포기.)

집에서 개인PC로 해보니 정상적으로 잘된다...!!!

 

https://jdh5202.tistory.com/966

 

chatGPT 에러 - An error occurred. If this issue persists please contact us through our help center at help.openai.com

chatGPT에서 채팅 시 다음과 같은 에러 메시지가 발생한다. An error occurred. If this issue persists please contact us through our help center at help.openai.com 원인은 명확히 알려진 바 없으나 다음과 같은 임시적인 해

jdh5202.tistory.com

 

반응형

 

v5 IE지원 X

v4 IE11+ 

v3 IE9+

 

 

https://getbootstrap.com/docs/4.6/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

반응형

'UXUI Development' 카테고리의 다른 글

아이폰X UI가이드  (0) 2019.04.16
git  (0) 2019.04.03
[Github/Git] vscode에서 깃허브/깃 연동하기  (0) 2019.03.20
무료 컴포넌트 UI KIT  (0) 2019.03.19

+ Recent posts