러아니푸의 기록

Sourcetree로 원격 프로젝트를 클론하는 도중 올바른 경로가 아니라는 문제가 발생하였습니다.

이 경우에는 git repository 경로에는 문제가 없는데도 에러가 발생하게 됩니다.

저는 같은 문제를 두 번 정도 겪어보아서 두가지 해결 방법을 공유드리겠습니다.

1. git 버전 변경으로 해결할 수 있는 문제

설정 -> Git -> Git 버전 : 내장 Git로 되돌리기 클릭

2. 연결된 계정에 SSH 키가 설정되지 않은 경우

설정 -> 계정 -> SSH 오류가 발생한 계정 더블클릭 -> 프로토콜을 HTTPS로 변경

앞으로도 관련해서 오류가 발생하게 된다면 추가로 해결 방법을 남겨두겠습니다.

📜 오류 발생

맥북을 새로 구매하여 기존에 작업하던 프로젝트를 맥북에서도 이어서 개발할 수 있도록 세팅하였습니다.

개발도 이어서 진행하고 Sourcetree로 commit 후 push를 진행하려고 하자 아래와 같은 오류가 발생하였습니다.

fatal: Authentication failed for {깃 주소}

인증 관련해서 발생한 문제같아서 알아보니 현재 깃허브에서는 인증을 토큰으로 진행한다고 합니다.

토큰을 발급받고 적용하여 문제를 해결해보도록 하겠습니다.

💊 해결 방법

1. github에서 토큰 발급 받기

setting -> Developer settings 클릭

Personal access tokens -> Tokens (classic) -> Generate new token -> Generate new token (classic) 클릭

Note : 토큰을 어디에 쓸지 명시합니다. ex) Macbook , Desktop ...

Expiration : 토큰 만료 기간입니다. 90 Days 라면 앞으로 90일 동안 해당 토큰을 통해 권한을 유지할 수 있습니다.

select scopes : 해당 토큰을 통해 접근할 수 있는 범위입니다.

설정을 마치셨다면 노란색으로 가려진 부분에 발급받은 토큰이 보여집니다.

페이지를 벗어나면 다시 볼 수 없으니 바로 복사해서 저장해두세요.

2. SourceTree에 토큰 적용

Sourcetree로 들어와서 설정을 열어줍니다.

원격 -> 원격 저장소 경로에서 토큰을 적용할 경로를 더블 클릭합니다.

URL / 경로에 git repository URL이 들어있습니다.

발급 받았던 토큰을 아래 예시와 같이 넣으면 됩니다. (토큰@ 을 추가하면 됩니다)

https://토큰@github.com/xxx/project.git

토큰 적용을 완료하셨다면 위 오류가 해결될 수 있습니다.

📜 오류 발생

vercel에 연동된 Next.js 프로젝트에 postgres를 연동하던중 아래와 같은 오류가 발생하였다.

Error while fetching side menu data: VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.

오류상으로는 'connectionString', 'POSTGRES_URL'에 대해서만 나와서 다른 문제라고는 생각하지 못했는데

생각보다 간단한 문제로 나던 오류였다.

💊 해결 방법

postgres 데이터를 직접 불러오는 파일이 클라이언트 컴포넌트 상태라서 생기는 문제였다.

'use server'를 파일 상단에 입력하여 서버 컴포넌트로 변경시키는 것으로 간단하게 해결되었다.

'use server'

import { sql } from "@vercel/postgres";

interface MenuItem {
  id: number;
  name: string;
  description: string;
  link: string;
  sub_menus: SubMenuItem[];
}

interface SubMenuItem {
  id: number;
  name: string;
  description: string;
  link: string;
}

export async function getSideMenuData(): Promise<MenuItem[]> {
    try {
      const { rows }: { rows: MenuItem[] } = await sql`SELECT
        m.id AS id,
        m.name AS name,
        m.description AS description,
        m.link AS link,
        COALESCE(json_agg(json_build_object('id', sub.id, 'name', sub.name, 'description', sub.description, 'link', sub.link)) FILTER (WHERE sub.id IS NOT NULL), '[]') AS sub_menus
        FROM
        side_menu AS m
        LEFT JOIN
        side_menu AS sub ON m.id = sub.parent_id
        WHERE
        m.parent_id IS NULL
        GROUP BY
        m.id;
      `;
      return rows;
    } catch (error) {
      throw new Error('Failed to fetch side menu data');
    }
  }

📜 오류 발생

기존의 JavaScript 기반의 Next.js 프로젝트에 Typescript를 적용하던중 아래와 같은 오류가 발생하였다.

cannot use jsx unless the '--jsx' flag is provided

문제를 해결하기 위해 검색하던 중 VS Code에서Typescript 버전을 변경하면 해결된다는 자료들을 발견하였다.

F1 -> Typescript: Select TypeScript Version... 클릭

Use Workspace Version 클릭

Workspace Version으로 변경후 문제는 해결되었는데 VS Code's Version과 어떤 차이가 있길래 문제가 발생했는지 찾아보았다.

https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions

간단하게 요약하자면, 공식 문서에서 이야기하는 바는 아래와 같다. (초월 번역 했습니다)

VS Code는 자체적으로 최신 버전의 TypeScript가 기본으로 제공되는데, 이는 작업 파일을 컴파일하는 데 사용하는 TypeScript 버전과 별개이다. 일반적으로는 VS Code에서 기본으로 제공하는 TypeScript 버전을 사용할 수 있지만 문제가 생기면 작업 파일 버전으로 변경해야 할 수도 있다. (변경 방법은 위에 설명드린 내용과 같습니다)

📜 오류 발생

App Router 형식으로 되어있는 프로젝트에서 useRouter를 사용하는 도중에 아래와 같은 오류가 발생하였다.

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

에러 메세지에 달려있는 공식문서 링크를 확인해보니 App Router를 사용중이라면 next/navigation 를 통해 import를 하면 된다고 안내하고있다. 오류가 난 시점에는 next/router 로 import 중이었기 때문에 오류가 나는 문제는 해결되었다.

If used in the app directory, migrate to the new hooks imported from next/navigation.

다만 나는 네비바에서 현재 위치한 페이지를 활성화 시켜서 보여주기 위해 현재 페이지 경로값이 필요했는데 next/navigation 로 불러온 useRouter에서는 현재 경로값을 찾기 어려웠다.

그래서 공식문서를 더 찾아보니 next/navigation 에서 usePathname으로 경로값을 받아와서 링크 활성상태를 비교하는것을 권장하고 있었다.

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

'use client'
import Link from "next/link";
import { usePathname } from 'next/navigation';
// import linkData from ...;

const Sidebar = () => {
  const pathName = usePathname();

  return (
    <nav>
      {linkData.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={pathName === link.href ? "active" : "common"}
          >
            {link.label}
          </Link>
      ))}
    </nav>
  );
};

export default Sidebar;

usePathname을 사용하여, 현재 페이지 경로값과 일치하는 Link 태그에 활성화 표시를 할 수 있게 되었다.

📜 오류 발생

redux-toolkit을 클래스형 컴포넌트에서 사용하기 위해 'react-redux'에서 제공되는 connect를 사용하게 되었는데 아래와 같은 오류가 발생하였다.

usesyncexternalstore is not a function

해결 방법을 찾아보니 react 버전이 낮아서 발생하는 오류일 가능성이 있다고 해서 버전을 업그레이드 해주었더니 해결되었다.

기존 버전 ^17.0.1 -> 업그레이드 버전 ^18.1.0

"react" : "^18.1.0",
"react-dom": "^18.1.0",

📜 오류 발생

redux-toolkit을 사용하기 위해 라이브러리를 설치했는데 프로젝트 실행시 아래와 같은 오류가 발생하였다.

./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js
SyntaxError: /Users/otdeal/Desktop/projects/otdeal_projects/robomd/frontend/node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js: Missing class properties transform.

여러가지 라이브러리를 설치하면서 꼬이거나 오류가 발생했을까 싶어서,

node_modules를 지우고 package.json의 모듈을 다시 설치해주기 위해 'yarn' 명령어를 실행했는데 아래와 같은 오류가 발생했다.

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error expect@29.7.0: The engine "node" is incompatible with this module. Expected version "^14.15.0 || ^16.10.0 || >=18.0.0". Got "16.8.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

에러 메세지를 확인하니 node 버전 문제로 인해 발생하는 오류로 확인되었다.

현재 사용하고 있던 노드 버전이 많이 낮은 상태였기 때문에 과감하게 노드 버전을 LTS 버전으로 변경하기로 하였다.

노드 버전을 올려주니 문제가 해결되었다.

https://nodejs.org/en/download

특정 버전으로 설치를 원한다면 아래 주소에서 찾아볼 수 있다.

https://nodejs.org/download/release/

📜 오류 발생

yarn 버전 업그레이드를 할 일이 생겨서 'brew upgrade yarn' 명령어를 실행했는데 오류가 발생하였다.

Error: 
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!

에러 메세지에 'brew update'를 실행하기 위해서 어떤 명령어를 입력해야하는지 친절하게 알려주고있다.

아래 명령어들을 차례대로 실행해주어 brew를 업데이트 한다.

git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow

brew update

이후, yarn 버전 업그레이드를 위해 'brew upgrade yarn' 명령어를 다시 입력해주었더니 정상적으로 업그레이드 되었다.