GRIDY

Web Frontend Developer

오늘은 특강에서 Git 사용법에 대해 특강이 있었다.
그래서 겸사겸사 git 명령어를 정리해봤다.

1. 기본 설정 및 초기화

• git config --global user.name "사용자 이름": Git 전역 사용자 이름을 설정합니다. 모든 저장소에 적용됩니다.
• git config --global user.email "사용자 이메일": Git 전역 사용자 이메일을 설정합니다.
• git init: 현재 디렉토리를 Git 저장소로 초기화합니다. .git 숨김 폴더가 생성됩니다.
• git clone [저장소 URL]: 원격 저장소를 로컬로 복제합니다.

2. 변경 사항 추적 및 커밋

• git status: 현재 저장소의 상태를 확인합니다. 어떤 파일이 수정되었는지, 스테이징되었는지 등을 보여줍니다.
• git add [파일명]: 특정 파일을 스테이징 영역에 추가합니다. 커밋할 준비를 합니다.
• git add .: 현재 디렉토리의 모든 변경된 파일을 스테이징 영역에 추가합니다.
• git rm --cached [파일명]: 스테이징 영역에서 파일을 제거하지만, 로컬 파일은 삭제하지 않습니다.
• git commit -m "커밋 메시지": 스테이징된 변경 사항을 로컬 저장소에 기록합니다. 커밋 메시지는 변경 내용을 요약합니다.
• git commit -am "커밋 메시지": 추적 중인(tracked) 파일의 모든 변경 사항을 스테이징과 동시에 커밋합니다. (새로운 파일은 git add 필요)
• git commit --amend: 가장 최근의 커밋을 수정합니다. 이전 커밋 메시지를 변경하거나, 누락된 변경 사항을 추가할 때 사용합니다.

3. 변경 내역 확인

• git log: 커밋 히스토리를 확인합니다. 각 커밋의 해시, 작성자, 날짜, 메시지 등을 보여줍니다.
• git log --oneline: 커밋 히스토리를 한 줄로 요약하여 보여줍니다.
• git log --graph --oneline --all: 브랜치 병합을 포함한 커밋 히스토리를 그래프 형태로 보여줍니다.
• git diff: 워킹 디렉토리와 스테이징 영역 간의 변경 사항을 비교합니다.
• git diff --cached: 스테이징 영역과 마지막 커밋 간의 변경 사항을 비교합니다.
• git diff [커밋1] [커밋2]: 두 커밋 간의 변경 사항을 비교합니다.

4. 브랜치 관리

• git branch: 현재 저장소의 모든 브랜치 목록을 보여줍니다. 현재 브랜치는 *로 표시됩니다.
• git branch [새 브랜치명]: 새로운 브랜치를 생성합니다.
• git checkout [브랜치명]: 특정 브랜치로 전환합니다.
• git checkout -b [새 브랜치명]: 새로운 브랜치를 생성하고 즉시 해당 브랜치로 전환합니다.
• git merge [병합할 브랜치명]: 현재 브랜치에 다른 브랜치의 변경 사항을 병합합니다.
• git branch -d [삭제할 브랜치명]: 특정 브랜치를 삭제합니다. (병합되지 않은 브랜치는 -D로 강제 삭제)

5. 원격 저장소 상호작용

• git remote -v: 현재 설정된 원격 저장소 목록을 보여줍니다.
• git remote add origin [원격 저장소 URL]: 원격 저장소를 origin이라는 이름으로 추가합니다.
• git push origin [브랜치명]: 로컬 저장소의 변경 사항을 원격 저장소로 업로드합니다. 보통 git push origin master 또는 git push origin main을 사용합니다.
• git pull origin [브랜치명]: 원격 저장소의 변경 사항을 로컬 저장소로 다운로드하고 병합합니다.
• git fetch origin [브랜치명]: 원격 저장소의 변경 사항을 다운로드하지만, 로컬 저장소에 병합하지는 않습니다.

6. 되돌리기 및 복구

• git reset --hard [커밋 해시]: 특정 커밋으로 돌아가며, 해당 커밋 이후의 모든 변경 사항을 워킹 디렉토리와 스테이징 영역에서 삭제합니다. 주의: 데이터 손실 가능성이 높습니다.
• git reset --soft [커밋 해시]: 특정 커밋으로 돌아가지만, 해당 커밋 이후의 변경 사항은 스테이징 영역에 유지됩니다.
• git reset HEAD [파일명]: 스테이징 영역에서 특정 파일을 제거합니다. (unstage)
• git revert [커밋 해시]: 특정 커밋의 변경 사항을 되돌리는 새로운 커밋을 생성합니다. 히스토리를 보존하면서 변경 사항을 취소할 때 사용합니다.
• git stash: 현재 작업 중인 변경 사항을 임시로 저장합니다. 커밋하기 전에 다른 브랜치로 전환해야 할 때 유용합니다.
• git stash pop: 가장 최근에 저장된 스태시를 불러오고 삭제합니다.
• git stash apply: 가장 최근에 저장된 스태시를 불러오지만, 스태시는 삭제하지 않습니다.

Next.js @svgr/webpack 사용시 스타일로 svg 크기 조절 안되는 현상

@svgr/webpack 설치 후 svg 크기를 스타일로 조절하려고 했는데 안되는 증상이 있었다.

코드를 살펴보니 기존 svg 태그에서 viewBox 속성이 사라지는 것을 확인했다.

https://stackoverflow.com/questions/64376001/pass-options-to-the-builtin-svgo-from-svgr-webpack/70360615#70360615

웹팩 설정을 아래와 같이 고치면 해결할 수 있다.

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false
                },
              },
            },
          ]
        }
      }
    },
  ],
}

Dockerfile 메모

FROM node:20.10.0-alpine AS base

WORKDIR /usr/src/app

COPY ./ ./

RUN yarn build

EXPOSE 3000

CMD ["node", "server.js"]

참고링크

https://bedevelopers.tistory.com/266

https://velog.io/@jadenkim5179/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-docker-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0

https://taeho.io/pages/8013f2c9-2602-48a9-abf4-053c9ea1dbb2

Springboot Docker 배포하기

작업환경

IDE: IntelliJ IDEA CE

Framework: Springboot

Build: Gradle

OpenJDK17

참고 링크 윗 링크에서는 Maven에서의 Docker 적용 방법도 있으니 참고!

Springboot 루트 폴더에 Dockerfile 생성 후 입력

# Docker File

# JDK IMAGE
FROM openjdk:17-jdk
# JAR
ARG JAR_FILE=build/libs/*.jar
# JAR FILE COPY
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

build.grale에 아래 내용 추가

jar {
	enabled = false
}

빌드 실행

$ ./gradlew clean build -x test

도커 허브 로그인

$ docker login

도커 빌드

$ docker build -t <도커 허브 아이디>/<만들 이미지명> .
# ex ) docker build -t psb/gridy-image .

만들어진 이미지명 확인

$ docker images

도커 이미지 도커 허브에 푸시

$ docker push <도커 허브 아이디>/<이미지 명>

사용할 서버에서 도커 이미지 가져오기

$ docker pull <도커 허브 아이디>/<이미지 명>

도커 이미지로 컨테이너 생성 및 실행

$ docker run -d -p 8080:8080 --name <만들컨테이너명> <도커 허브 아이디>/<이미지 명>
# 8080:8080에는 포트를 넣습니다

참고링크

https://lucas-owner.tistory.com/48

https://devfoxstar.github.io/java/springboot-docker-ec2-deploy/

Nginx Let's Encrypt SSL 적용하기

실행 환경

- Ubuntu 20.04 / Docker: Ubuntu 20.04 이미지 적용

- nginx에는 이미 http로 도메인 연결이 되어 있다고 가정한다.

CERTBOT 적용하여 Let's Encrypt SSL 적용하기

# 설치
$ apt-get install letsencrypt
$ apt-get install python3-certbot-nginx
$ apt-get install certbot

# SSL 인증서 등록
$ certbot --nginx
or
$ certbot --nginx -d [적용할 사이트 이름]

$ service nginx restart
or
$ systemctl restart nginx

# 3개월에 한번씩 갱신 필요
# 테스트 갱신
$ certbot renew --dry-run
# 실제 갱신
$ certbot renew

Crontab을 사용하여 자동 갱신

# Docker일 경우 crontab 설치 필요
$ apt-get install cron

# Crontab 편집
$ crontab -e

(매월 1일 오전 5시에 실행) - 자세한건 참고링크에서 확인해주세요!
0 5 1 * * /usr/bin/certbot renew --renew-hook="service nginx restart"

# Crontab 보기
$ crontab -l

참고링크

https://nuggy875.tistory.com/119

https://nuggy875.tistory.com/133

https://freedeveloper.tistory.com/264

Docker 컨테이너 생성 이후 포트 포워딩 하기

Docker에서는 포트포워딩을 하려면 docker 컨테이너를 생성하는 시점에서 해야한다.

하지만 이미 생성해버렸다면 docker 이미지를 생성한 뒤 그걸로 새 컨테이너를 만드는 방법으로 포트 포워딩을 할 수 있다.

이미지를 생성한 뒤 새로 컨테이너를 만드는 방법은 상태에 따라 데이터가 손실될 수도 있다고 한다.

다른 방법도 있는데 아래 StackOverflow 링크에서 확인할 수 있다.

# 컨테이너 종료
$ docker stop <컨테이너명>

# 도커 이미지 생성
$ docker commit <컨테이너명> <생성할 이미지명>

# 컨테이너 삭제
$ docker rm <컨테이너명>

# 컨테이너 80번 포트 포트포워딩 상태로 생성 및 실행
$ docker run -it -p 80:80 --name <컨테이너명> <생성한 이미지명> /bin/bash

참고링크

https://stackoverflow.com/questions/19335444/how-do-i-assign-a-port-mapping-to-an-existing-docker-container/26622041#26622041

https://docs.docker.com/network/drivers/overlay/#publish-ports