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 해주어도 전역에서 사용이 가능하다. 

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

안녕하세요 상훈입니다.

React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다.

app
ㄴcomponents
   ㄴNewNote.css
   ㄴNewNote.jsx
ㄴroutes
   ㄴindex.jsx
   ㄴnotes.jsx
ㄴstyles
   ㄴhome.css
   ㄴmain.css

파일 트리가 이렇게 되어져 있을 경우,

1. 기본 형태 
2. Surfacing Styles

두 가지를 작성하도록 하겠습니다.

1. 기본 형태 ✔

routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다.

2가지만 적용해주시면 됩니다.

1️⃣ import
2️⃣ function declare

// 1
import homeStyles from '~/styles/home.css';

// 2
export function links() {
  return [{ rel: 'stylesheet', href: homeStyles }];
}

특별히 설정해줄 것?  - 없습니다.

links 라는 함수명을 remix <Links> 에서 감지하여 하위 요소로 끌고가줍니다.

root.jsx 파일에서 보시면,  @remix-run/react  에서 import 한 Link 컴포넌트가 있습니다.

그리고 이 컴포넌트는 html > head 태그 내에 들어가있습니다.

마치 html 에서 기본적으로 삽입하는 link, script 태그들 처럼요. (이해가 딱 되셨을겁니다😎)

그러면 곧바로 2번째 surfacing styles. 시작해보겠습니다.

2. Surfacing Styles - 개별 파일에서 import 하기 ✔

NewNote : 자식 컴포넌트
NotesPage : 부모 컴포넌트

자식 컴포넌트에서 선언한 스타일을 부모컴포넌트에서도 사용하려면 다음과 같습니다.

✔ 자식컴포넌트-NewNote 에서 export 한 links 를 부모에서 별칭으로 import 하여 links 함수 내에 넣습니다.

✔ 그리고 links 함수에서 spread연산자로 links를 return 시켜줍니다.

주절주절 이야기가 길어졌지만 내용은 생각보다 매우 간단했습니다. 흥미롭고 특이한 점(Surfacing😎)도 있었고요.

이상으로 포스팅을 마치도록 하겠습니다.

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

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를 하게되었는데... 뭔소린지 하나도 모르겠어서 열심히 공부중입니다.....

화이팅.

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

✔ 발생 환경

Java - springfox 를 의존성 주입하여 프로젝트 git에 push 한 것을 pull 받아 바로 구동하려고하는데 

환경 : VSCode.

빨간줄이 떠버렸습니다.

The import springfox cannot be resolvedJava(268435846)

이런 안내문구와 함께요.

✔ 오류 발생 원인 

😢 이 에러가 발생한 건 Build 때문입니다.

✔ 해결 방법

✨Build를 진행하도록 하겠습니다.

build.gradle  > 우클릭  > Reload Projects 를 해주세요.

이렇게 새로운 빌드가 되는것을 보실 수 있습니다.

build가 완료되면 에러표시가 사라진것을 보실 수 있습니다.

만약 그래도 안사라지시면, vscode를 한 번 종료 후, 재구동 시켜서 build를 진행해주세요!

이상입니다.

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

'firebase.apps.length' 부분에서 객체에 대한 길이를 반환시켜 값의 존재유무에 따라 app의 값을 다르게 앱에 적용하려고하는데 해당 내용에서 자꾸만 에러가 출력되었다.

기존 코드는 login auth() 관련해서 기능을 구현하려고하였다.

바뀐 부분은 import 부분.

firebase의 버전은 v8이다. 

// 변경 전
import * as firebase from "firebase/app";

// 변경 후
import * as firebase from "firebase";

// 하단의 전체 코드

const firebaseConfig = {  ...  };

let app;
if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig);
} else {
  app = firebase.app();
}

const auth = firebase.auth();

export { auth };

이것 때문에 오전내내 시간을 사용하였다. 그래도 해결되었으니 기쁘구먼,,

그런데 왜 공식 페이지에서는 import 부분을 저대로 명시해놓았을까 의문이 든다.

안녕하세요 상훈입니다.

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json에서 type: 'module' 을 추가해주세요.

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

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

안녕하세요 상훈입니다.

Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다. 

바로 App.vue |  Index.vue 에서 components를 넣는것이죠.

하지만, 차이점이 존재합니다. 

Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다.

예시를 보여드리자면,

<Hero /> 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다.

결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다.

이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다.

해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다!

이상입니다. 

React.js hook를 사용하려고 하던 와중 처음부터 이러한 에러를 대면했다...

Uncaught SyntaxError: Cannot use import statement outside a module

문제점

1. 리액트 훅을 기본적으로 적용하는 법을 몰랐다.

해결방법

1. script 를 html에 적용시키는 과정에서 script의 type을 지정해주어야 한다.

<script type="text/babel" src=" "> </script>

type="text/babel" 혹은

<script type="text/jsx" src="./01.useState.js"></script>

type="text/jsx"로 해결이 가능하다.

스크립트 타입을 변경해주시길 바랍니다.