CodeHoon

최근에는 거의 항상 Tailwindcss만 써서 직접적으로 css 를 import 해서 사용하지 않았기 때문에 다르게 쓰는 방식을 몰라 헤매었다.

SCSS Module Import Error In TypeScript 

에러가 발생하였는데, 계속 잡히지 않아서 이거저거 또 검색해보았다.

Perplexity, Cursor 에서도 제대로 에러를 찾아내지 못했고, 인터넷서칭으로 알아내었다.

React.ts 를 이용해서 개발중이었는데,

1. @import  대신 @use 를 사용

원래는 additionalData 에 @import 값을 넣어서 사용했는데, 2021년부터 @import 대신 @use 를 쓰도록 권장했다고 한다..

2. 추가적으로 사용하는 @forward

@use 를 위에 써주고 @forward 를 써서 redirect 해준다.

이렇게 사용하면 해당 파일만 index에서 import 해주어도 전역에서 사용이 가능하다. 

다른 경로의 파일에서 사용한 예시

안녕하세요 상훈입니다.

오늘 제가 구현한 내용은 해외 개발자들에게는 익숙한 Buy me a coffee☕ 입니다!

한국에서 제대로 처리되는 내용은 아직 없기 때문에 한국 버전으로 제가 만들어보았습니다.

QR-code 를 이용한 방법입니다.

사용환경 🏠

- React.js, TypeScript

개발결과 🚀

1. Real Link with Netilfy

2. GithubLink

만약 같은 내용으로 링크, 혹은 텍스트만 변경하고자 하신다면, 2.GithubLink를 방문하셔서 소스를 다운로드 하신후 사용해주세요!

특별한 디자인 요소를 넣지않고 개발해놓았습니다.
간단한 자기 소개 내용으로 처리했습니다. 

- Kakao, Toss 버튼에 따라 각각의 QR코드가 띄워지게 처리했습니다!

- 글을 작성하면서 떠오른 생각인데, 모바일 or 웹을 구분해서 버튼 클릭시 동작이 다르게 처리가 되면 좋겠다고 생각이 들었네요. 
추가 구현이 가능하면 구현하도록 하겠습니다.

여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경 설명 

- Vite, Vue3, typescript
- .env 파일에 firebase api key 를 넣어놓고 사용하려고 함  => 보안측면

✔ 방법

1. /.env 파일을 준비
2. /env.d.ts 파일을 준비
3. /src/firebase/index.ts  (:아무 경로나 상관없음) 을 준비

1. .env

1) .env에서는 key=value 형태로 작성하도록 합니다.
2) VITE_ 접두어(prefix) 를 적용하여 변수명을 입력합니다. 
    > 미작성시 호출못함

2. /env.d.ts

기본적으로 typescript 기반의 vite 프로젝트를 만들게 되면  root 경로에 위의 파일이 자동으로 생성되어져 있습니다.

/// <reference types="vite/client" />
interface ImportMetaEnv {
  env: {
    VITE_FIREBASE_API_KEY: string;
    NODE_ENV: 'development' | 'production';
  };
}

.env 에서 작성하신 변수명과 똑같이 작성해주세요.
( 실험해봤는데, NODE_ENV는 작성해도 안해도 상관없었습니다. MODE (개발,배포) 버전의 문제라서요.)

여기서 .d 가 의미하는건 declare(선언하다) 라는 뜻.
env의 타입(ts)을 선언(d)하겠다. 라는 의미인 것으로 저는 해석했습니다.

3. /src/firebase/index.ts  (:아무 경로나 상관없음)

저는 해당 파일을 firebase를 사용하는곳에다가 import 할 것이기 때문에 파일로 분리하였습니다.

보시면 상수 firebaseApiKey 를 할당할 때에 import.meta.env.VITE~로 해주었죠?

import.meta.env 를 통해서 환경변수에 접근이 가능합니다. (vite 공식문서에 있음)

그리고 이제 console 혹은 실제 서비스를 사용해보면 정상적으로 출력된것을 확인하실 수 있습니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

이번 에러는 에러라고 하기에는 애매하고, VSCode를 사용할 때에 발생할 수 있는 내용입니다.

프로젝트는 잘 구동되지만, 에러가 신경쓰였습니다.

Cannot find module './App.vue' or its corresponding type declarations.

src/main.ts 에서 [ import App from '@/App.vue' ] 부분에 밑줄이 그어지면서 에러라고 표기되었습니다.

✔ 해결방법

extensions - @builtin typescript - 설정(settings) - Disable(workspace) 를 해줍니다. 

그리고 reload VSCode! 

이제 빨간 에러문구가 뜨지않는것으로 확인하였습니다.

✔ 원인

이 extension이 .vue 파일을 제대로 읽어내지 못하기 때문인 것으로 보입니다.

진짜 별거 아닌데, 신경쓰여서..

이상입니다.

안녕하세요, 상훈입니다.

React.js + remix + typeScript 에서 data를 load 하는 내용을 포스팅 (이라 쓰고 기록을 한다.)을 하도록 하겠습니다.

<Link to="/"> </Link>

태그에 관한 내용을 반복문 map을 이용하여 목록으로 표시하려고합니다.

전체적인 설명은 아래 이미지있는 곳에서 하도록하겠습니다.

전체코드1. 

import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node'
import { Link, useLoaderData } from '@remix-run/react'
import { getLists, getPosts } from "~/models/posts.server"

//type 선언
type LoaderData = {
  posts: Awaited<ReturnType<typeof getPosts>>,
  lists: Awaited<ReturnType<typeof getLists>>
}

export const loader: LoaderFunction = async () => {
  const posts = await getPosts()
  const lists = await getLists()
  return json<LoaderData>({posts, lists})
}

export default function PostRoute () {
  const { posts,lists } = useLoaderData() as LoaderData

  return (
    <main>
      <h1>Posts!</h1>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link to={post.slug} className="text-blue-600 underline">
            {post.title}
          </Link>
        </li>
      ))}
      
      {lists.map((list) => (
        <li key={list.mapper}>
          <Link to={list.mapper}>
            {list.title}
          </Link>
        </li>
      ))}
    </main>
  )
}

전체코드2 - data

import {prisma} from '~/db.server'
export async function getPosts () {
  const posts = [
    {
      slug: 'my-first-post',
      title: 'My First Post!'
    },
    {
      slug: 'trail-riding-with-onewheel',
      title: 'Trail Riding with Onewheel'
    }
  ]
  return posts
}

export async function getLists () {
  const lists = [
    {
      title: 'First Title',
      mapper: 'frist-title',
    },
    {
      title: 'Second Title',
      mapper: 'second-title',
    }
  ]
  return lists
}

기존 영상(Remix Tutorial 영상)을 참고하여 리스트를 출력해보았습니다.
(대신 하나 추가해서 따라해봤어요.)

Remix 에서 데이터를 컴포넌트에 불러오는 방식을 위와같이 합니다.

저 loader 함수는 클라이언트가 볼 수 없는 함수가 됩니다. ==> remix의 장점

1) useLoaderData 라는 remix 훅을 import 합니다.
2) loader 라는 이름의 함수를 생성하여 그 내부에서 데이터를 불러옵니다. (async await 부분)
3) LoaderData 라는 형식을 선언해줍니다. (type LoaderData)
4) loader 함수 내에서 LoaderData 타입으로 데이터를 반환한다고 말합니다.
(--- json 이라는 라이브러리를 import 합니다.)
5) 데이터를 호출할 때 useLoaderData 함수를 LoaderData 형식으로 선언한다고 합니다.

엄청 왔다갔다 했네요. 이제 다 왔습니다. 
데이터만 뿌려주면 되네요.

map 이용하여 데이터를 loop 돌리도록 하겠습니다.

사이드 프로젝트를 하게되어 remix, react.js, typescript를 하게되었는데... 뭔소린지 하나도 모르겠어서 열심히 공부중입니다.....

화이팅.