🌱🧑‍🌾팜팜 프론트 개발 로그 2. 서비스 개발을 위한 Github 사용

안녕하세요 팜팜(palm-farm)팀 프론트엔드 개발을 맡은 최자연입니다.

창업팀에서 웹서비스 개발을 하다 보면 깃허브를 사용하게 되는데,

이번 팜팜팀 작업을 하며 생겼던 깃허브 관련 이슈들을 정리해보았습니다.

(이슈 발생시마다 본 메이커로그 업데이트할 예정입니다.)

1. There isn't anything to compare.
master and upstreambranch are entirely different commit histories. (24.01.29)

master branch에 커밋-푸시 했는데 main에서 받아올 수가 없다. 두 브랜치가 어떠한 히스토리도 공유하고 있지 않아 깃험이 두 브랜치 비교를 거부한다.

해결에 참고한 링크

에서 가장 위에 제시된 코드로 해결하긴 했는데 이 때 주의할 점은 해당 코드는 기존에 main branch에 있던 파일들을 모두 삭제해버리고 master branch의 내용을 main으로 가져오기 때문에 main에 작업해놓은 중요한 내용이 있다면 백업 후 아래 코드를 시행해야 한다.

난 다행히 main에 README 밖에 없었어서 문제가 없었다(휴..)

git checkout master   
git branch main master -f    
git checkout main  
git push origin main -f

2. git commit/push 취소하기 (24.01.30)

너무 일찍 commit/push 했거나 파일을 빠뜨리고 commit해버렸다. 다행히 해결방법이 있었고 아래와 같이 해결했다. 참고 링크

• 커밋 목록 확인(git log 후 나갈 땐 q키로)

  git log

• 마지막 commit 취소하고 해당 파일들은 staged 상태로 working directory에 보존

  git reset --soft HEAD^

• 다시 커밋 후 push

  git commit -m 'commit msg'
  git push origin [branch name] -f

팜팜팀 개발로그 1. 프론트 개발 시작: NextJS 폰트, svg 파일 import 에러 해결

팜팜(palm-farm)팀 프론트엔드 개발 팀원 최자연입니다.

작년(2023년) 말 팀에 합류하여 기획, 디자인, 데스크리서치, 사용자 인터뷰 등에 함께 참여하고 이번주에서야 개발에 착수했습니다. 개발하며 발생하는 여러 이슈들과 성과들을 디스콰이엇에 공유해보려 합니다.

팜팜 프론트엔드 개발 스택

언어: Javascript(Typescript)

프레임워크: NextJS

부끄럽지만 개발이 너무 오랜만이라 깃헙 기본적 사용법 복습 후 작업 시작..😅

NextJS 개발 Debugging

오랜만에 Next로 개발을 하려 하는데 이전에 못 보던 부분들이 생기기도 했고

이전까지는 회사에서 세팅해준 걸 기반으로 개발을 했어서 알게 모르게 수월했던 부분들이 있었는데 이번에는 혼자 다 해내야 한다.

1. Cannot use JSX unless the '--jsx' flag is provided

처음 create-next-app할 때 typescript 안 쓴다고 해서인가 이런 에러가 떴는데 다행히 구글링으로 쉽게 해결됐다.

2. 폰트 관련

import { Inter } from 'next/font/google' 
const inter = Inter({ subsets: ['latin'] })

근데 한국어 폰트는 적용이 안 된다.으으 굴림체 어쩔 거야..

구글링하다가 이 포스트 따라 적용해봤다. 더 나은 방법이 있을 것 같지만 일단 이대로 가는 걸로

3. SVG

SVG 파일을 사용할 수가 없다..

찾아보니 NextJS에서 svg 파일 import해서 쓰려면 @svgr/webpack을 설치해야 한다고 한다.

npm install --save-dev @svgr/webpack

그래도 여전히 같은 에러ㅠㅠ

우여곡절 끝에 거의 3시간만에 해결하긴 했는데 왜 되는지 모르겠다

근데 일단 되니까 안 건드릴래ㅠㅠ

구글링, 챗지피티, 예전 코드들, 공식문서 다 짜집기된 코드라 어디서 해결이 된 건진 모르겠지만

일단 안 됐을 적이랑 달라진 부분들은 아래와 같다.

• Icon.tsx : icon svg 파일 import해 모아둔 파일

  import ArrowLeft from 'public/assets/icons/icon-arrow-left.svg';
  import ArrowRight from 'public/assets/icons/icon-arrow-right.svg';
  ...
  export const Icon = {
   ArrowLeft,
   ArrowRight,
   ...
  };

• next.config.mjs : nextConfig 안에 아래 추가

  webpack(config) {
      config.module.rules.push({
        loader: '@svgr/webpack',
        options: {
          prettier: false,
          svgo: true,
          svgoConfig: {
            plugins: [
              {
                name: 'preset-default',
                params: {
                  overrides: { removeViewBox: false },
                },
              },
            ],
          },
          titleProp: true,
        },
        test: /\.svg$/,
      });
      return config;
    },

• package.json : 이래도 되는 건지 모르겠지만 이전 코드 참고해서 수동으로 수정해줌

  "@svgr/webpack": "^8.1.0", # devDependencies에 들어와있던 걸 dependencies로 옮겨줌

  "webpack": "^5.72.0" # devDependecies에 추가

• tconfig.json : 이전 프로젝트 코드 참고해 아래와 같이 수정

  {
    "compilerOptions": {
      "target": "es2020",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": true,
      "noEmit": true,
      "incremental": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "baseUrl": ".",
    },
    "include": [
      "global.d.ts",
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      "next.config.mjs"
    ],
    "exclude": [
      "node_modules"
    ]
  }