해당문제는 SSL 문제이다. 

 

 npm config set strict-ssl false

 

 

 

error An unexpected error occurred: "https://registry.yarnpkg.com/create-nuxt-app: self-signed certificate in certificate chain".

 

yarn config set "strict-ssl" false
반응형

 

 

1. 안드로이드 설정> 개발자옵션 > 화면켜짐상태유지, USB디버깅 

2. USB 케이블로 PC와 안드로이드 기기 연결

3. chrome://inspect/#devices

 

 

 

 

 

https://uxdev.org/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EA%B8%B0%EA%B8%B0%EB%A1%9C-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%AA%A8%EB%93%9CWeb-Inspector-%EB%94%94%EB%B2%84%EA%B9%85-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

 

안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기

데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를

uxdev.org

 

 

 

반응형

 

기존 10버전대 사용자로 Nuxt-app 지원이 안되서 업그레이드를 하게 됨 

현재기준 LTS버전인 Node.js 16.15.1를 업그레이드하면서 NPM 8로 업데이트 되더니 

Nuxt 프로젝트 생성시 아래와같은 경고와 sass-loader 설치시 Webpack의 의존성문제로 에러가 발생했다. 

 

nuxt-app 프로젝트생성시 나타난 경고메세지
sass-loader 설치중 발생한 에러메세지

 

 

한참을 서치하다 찾은 해결

 

위의 경고메세지들은 NPM8에서 부터 발생하는 의존성관련 경고와 에러 였다. 

npm audit, npm audit fix, npm audit fix force 을 사용하여 보안취약점을 해결하라는 메세지가 있어 시도해봤으나 문제가 더 생기는 느낌... (삭제하고 새프로젝트를 생성하기로함.)

sass-loader설치시 발생했던 에러와 함께 가이드줬던 npm --force 나 npm--legacy-peer-deps 이런 메세지도 마찬가지였다. 

그래서 NPM8버전을 버리고 NPM7버전으로 변경하기로 함. 

NPM7과 최신 LTS버전의 node.js과는 상관없었던거 같은데 혹시 몰라서  

일단 먼저 node.js 버전을 한단계 짝수 아래 버전으로 변경해줬다. 

 

1. Node.js 제거 후 재설치 

윈도우에서 프로그램 제거를 통해 기존 Node.js를 제거해주고 

12이상의 짝수버전 12, 14, 16 중 14버전대의 LTS(14.19.3)을 선택해서 새롭게 설치해줌. 

 

https://nodejs.dev/download/

https://nodejs.org/download/release/latest-v14.x/

 

2. NPM@7 으로 재설치

윈도우키 + R - cmd 로 실행

$ npm install npm@7 -g

버전확인 

npm -v

 

3. webpack 4.X 버전 사용하기

버전을 변경한 후 Nuxt-app를 생성했더니  webpack5가 package.json에 설치되어있었고  

위의 오류메세지에서 webpack5버전 관련한 내용이 많이있어 다운그레이드를 해줬다.

webpack 5 을 제거후  4버전대로 변경

$ npm uninstall webpack

$ npm install webpack@4

 

4. sass-loader 설치 

sass-loader의 최신버전인 13과 12버전대는 Webpack4.x과 충돌이 났다. 

안전하게 10버전대로 설치해주니 정상적으로 적용됨. 

$ npm install sass-loader@10 --save-dev

 

sass-loader@12 설치시 에러 화면

 

sass-loader@10 설치완료 화면

 

5. node-sass 설치

node버전에 지원되는 node-sass 를 설치해주는데 이때 

sass-loader@10 은 node-sass4,5,6과 호환 된다고 하니 그중에 골라서 설치한다. 

$ npm i node-sass@6 --save-dev

node-sass@6 설치완료 화면

 

6. 실행하기

성공적으로 실행됨. 

$ npm run dev    // nuxt-app 프로젝트
$ npm run serve  // vue 프로젝트

 

 

 

반응형

 

REST

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

즉 REST란 

  1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
  2. HTTP Method(POST, GET, PUT, DELETE)를 통해
  3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

CRUD Operation이란
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 
REST에서의 CRUD Operation 동작 예시는 다음과 같다.

 

Create : 데이터 생성(POST)
Read : 데이터 조회(GET)
Update : 데이터 수정(PUT)
Delete : 데이터 삭제(DELETE)

 

REST 구성 요소

REST는 다음과 같은 3가지로 구성이 되어있다. 

 

  1. 자원(Resource) : HTTP URI
  2. 자원에 대한 행위(Verb) : HTTP Method
  3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

REST의 특징

  1. Server-Client(서버-클라이언트 구조)
  2. Stateless(무상태)
  3. Cacheable(캐시 처리 가능)
  4. Layered System(계층화)
  5. Uniform Interface(인터페이스 일관성)

 

REST의 장단점

장점 

  • HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
  • HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해 준다.
  • HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
  • Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
  • REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
  • 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
  • 서버와 클라이언트의 역할을 명확하게 분리한다.

 

단점 

  • 표준이 자체가 존재하지 않아 정의가 필요하다.
  • 사용할 수 있는 메소드가 4가지밖에 없다.
  • HTTP Method 형태가 제한적이다.
  • 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 정보의 값을 처리해야 하므로 전문성이 요구된다.
  • 구형 브라우저에서 호환이 되지 않아 지원해주지 못하는 동작이 많다.(익스폴로어)

 

REST API

RESPT API란 REST의 원리를 따르는 API를 의미합니다.

하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있으며 해당 규칙을 알아 보겠습니다.

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

Bad Example https://kang-ji.tistory.com/Category/
Good Example  https://kang-ji.tistory.com/category/  

 

2. 마지막에 슬래시 (/)를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/test/  
Good Example  https://kang-ji.tistory.com/test

 

3. 언더바 대신 하이폰을 사용한다.

Bad Example https://kang-ji.tistory.com/test_blog
Good Example  https://kang-ji.tistory.com/test-blog  

 

4. 파일확장자는 URI에 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/photo.jpg  
Good Example  https://kang-ji.tistory.com/photo  

 

5. 행위를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/delete-post/1  
Good Example  https://kang-ji.tistory.com/post/1  

 

RESTful

RESTFUL이란 REST의 원리를 따르는 시스템을 의미합니다.

하지만 REST를 사용했다 하여 모두가 RESTful 한 것은 아닙니다.  

REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며

모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 

REST API의 설계 규칙을 올바르게 지키지 못한 시스템은

REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

 

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

 

[네트워크] REST API란? REST, RESTful이란?

REST API란 REST를 기반으로 만들어진 API를 의미합니다. REST API를 알기 위해 REST부터 알아보도록 하겠습니다. REST란? REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원..

khj93.tistory.com

 

반응형

1. Repository 생성

2. 생성해준 저장소에서 Settings > Pages(GitHub Pages) > Source 기존 None을 Main으로 변경 , 기존 Root를 /docs 로 선택 후 Save 저장

 

3. 저장해주면 아래 처럼 url이 세팅됨. 

 

Code 로 돌아가서 Open with Github Descktop 선택 

GithubDesktop.exe 열기

 

 

 

npm run serve 로 프로젝트 실행 

 

 

 

 

 

vue.config.js

module.exports = {
  publicPath: "/portfolio/",
  outputDir: "docs",
};

npm run build를 해준다,

npm run build

npm run build 결과 설정해준 docs폴더내에 컴파일된 파일들이 생성되는 것을 확인 할 수 있다. 

 

이후 Push 하기  터미널에서 아래 순서대로 실행 

git add .
git commit -m "코멘트입력"
git push -u origin main

 

 

 

 

반응형

지난 글에서 NVM 설치내용을 다룸. 

 

NVM(Node Version Manager) 소개 및 설치

NVM 소개 및 설치 NVM(Node Version Manager) Node.js 의 버전을 관리하는 도구 프로젝트마다 사용되는 Node버전이 다를 경우 NVM을 통해 node 버전을 관리할 수 있다. 설치하기 1. Git Bash 터미널 환경에서 NV..

kang-ji.tistory.com

Node 버전변경 방법

프로젝트 경로의 터미널에서 nvm isntall [노드버전] 을 실행하면
해당버전이 설치돠면서 (최근)설치한 버전으로 세팅된다. 
버전 다운그레이드, 버전 업그레이드역시 install를 사용하여 변경해주면 됨. 

 

현재 Node 버전 12.18.0

 

추가로 필요한 Node 버전 install

nvm install 10.16.3

원래 버전으로 가고 싶을경우 다시 Install 하면 설치되며 사용 버전도 셋팅됨

nvm install 12.18.0

 

반응형

NVM 소개 및 설치

NVM(Node Version Manager) 

Node.js 의 버전을 관리하는 도구
Node 버전이 다를경우 충돌이 남.
프로젝트마다 사용되는 Node버전이 다를 경우 NVM을 통해 node 버전을 관리할 수 있다.

방법1. 설치하기 (- 이방법이 안될 경우 아래로 이동해서 방법 2로!!!! )

1. Git Bash 터미널 환경에서 NVM 공식 홈페이지에서 제공되는 명령을 실행하여 클론한다.

(윈도우의 경우 PowerShell 일 수 있는데 Bash로 변경해줘야함)

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

 

 

2. 설치가 완료되면 nvm -v 로 버전확인

$ nvm -v

 

3. 'nvm: command not found' 에러가 발생하게 되는데

명령어을 이용할때마다 NVM이 입력될 수 있게 세팅이 되지 않아 발생하는 에러.

 

4. 터미널 창에서 vi 편집기를 이용해서 home 디렉토리 밑에 있는 .bash_profile 또는 .bashrc 파일을 설정 해줘야한다.

vi ~/.bashrc 를 입력해주고 Enter. 
i 를 입력하여 삽입(Insert)쓰기모드로 전환한다.
$ vi ~/.bashrc

i
설정해줄 아래 구문을 복사하여 터미널창에 붙여준다. (이미 설정된 내용이 있을 경우 뒷쪽에 붙여준다. )
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

 

5. ESC를 눌러서 쓰기모드를 해제.

 : wq 를 입력하여 편집된 파일을 저장해준다.

! 저장이 됬는지 확인하려면  vi ~/.bashrc 를 재실행하면 수정한파일 확인가능.
! 수정이력이 없을 때는 :q 를 입력하여 편집종료해준다.  (강제종료는 :q!)

 

6. 프로젝트 경로의 새터미널에서 nvm 또는  nvm -v 을 치면 성공적으로 실행되는 것을 볼 수 있음..!!!!!!!!!


 

본문자료 - NVM 깃헙 https://github.com/nvm-sh/nvm

 

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod...

github.com

 


방법2. 직접 설치하기

PC를 포맷해서 방법1. 대로 재설치를 해봤는데

갑자기 git관련 SSL 인증서 오류관련 메세지로 설치에 계속 오류가뜸... 

직접 설치 방법으로 간단하게 해결가능했다.

 

윈도우용 NVM 설치 URL

https://github.com/coreybutler/nvm-windows/releases

 

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

이때 릴리즈 이슈 업데이트 시간때마다 node지원 버전대가 다르다. 

 

사용가능한 node 버전 조회하기

nvm list available

 

 

 

변경할 Node 버전 설치 

$nvm install [node버전]

nvm install 14.16.1

 

로컬에 설치된 node버전 조회

nvm list

 

변경할 node버전 사용하기

$nvm use [node버전]

nvm use 14.16.1

 

설정된 node버전 확인

node -v

 

https://devbirdfeet.tistory.com/101

 

Vue - (Windows) NVM 삭제하기

예전에 설치해놓은 Node.js를 깜박하고 NVM을 설치해 충돌이 났다. 급히 node.js를 지우고 nvm을 uninstall 하기위해 이것저것 뒤져보고 있었다. Vue - (Windows) NVM 삭제하기 stack overflow에서 여러 방법..

devbirdfeet.tistory.com

 

반응형

TortoiseGit

TortoiseGit은 깃 버전 관리 클라이언트의 하나로, 파일 탐색기로 구현되어 있고 TortoiseSVN에 기반을 둔다. GNU 일반 공중 사용 허가서로 출시되는 자유 소프트웨어

 

Tortoise Git을 사용하기 위해선 Git을 설치해야한다.

https://gitforwindows.org/

 

Git for Windows

Git for Windows focuses on offering a lightweight, native set of tools that bring the full feature set of the Git SCM to Windows while providing appropriate user interfaces for experienced Git users and novices alike. Git BASH Git for Windows provides a BA

gitforwindows.org

 

TortoiseGit 사이트에 접속한다.
자신의 Windows 환경에 맞게 32-bit 또는 64-bit을 선택하여 다운로드 받는다.
TortoiseGit 설치 파일과 언어팩은 함께 받는다.

 

Download – TortoiseGit – Windows Shell Interface to Git

Other resources Debug symbols, language dlls and other resources can be found on our dedicated download server: download.tortoisegit.org/tgit/2.12.0.0/. Preview releases The preview releases are built from the latest code that represents the cutting edge o

tortoisegit.org

 

반응형

커밋 Commit

현재 작업공간의 상태를 커밋으로 만들어서 저장소에 저장한다.

  • 파일상태에서 변경사항 확인하여 커밋
  • 주황아이콘  → 수정(변경)된 파일
  • 보라아이콘  → 새로 추가된 파일
  • 수정 및 추가된 파일들만 확인/선택*하여  선택내용스테이지 올리기 버튼 클릭
  • 메모란에 [지라코드] 입력 및 상세 코멘트 작성 후 '커밋' 버튼 클릭
  • 완료 되면 상단 'Push (푸시)' 클릭  > develop 체크확인 > 확인 버튼 클릭

푸시 Push

커밋 이후 Push에 업데이트된 숫자가 올라간다 Push까지 눌러줘야 원격저장소에 커밋이 완료됨.

 


풀 Pull

개발자가 커밋한 추가 변경사항을 받는다.

상단 '풀' 버튼 클릭 
소스커밋 전 변경된 사항이 있는지 꼭 확인하기 (변경된 사항이 있을 경우 아래 스태시 방법 사용하기)

 

본인이 로컬에서 수정한 동일파일이 존재할 경우 충돌이 생길 수 있다.
스태시를 통해 백업을 하거나 불필요한 수정내역일경우 해당파일은 폐기ㅎ한 후 Pull다운을 받는다. 

스태시 (Stash)  

로컬에서 작업한 소스를 임시로 다른곳에 백업(저장)해 놓는 기능
현재 로컬에서 작업중인 소스와 Pull다운 받아야할 변경된 사항과 겹칠때 유용하다.

  • 커밋하지 않은 변경사항(로컬에서 작업한소스)  백업하기
    1. 커밋하지 않은 채로 스태시 버튼 클릭
    2. 스태시 이름을 정해주고 확인 클릭 (스태시 이름은 헷갈리지 않도록 항상 다르게 !) 
    3. 스태시 목록이 생성됨. 스태시 하위에 내가 저장한 목록 확인
    4. 백업한 파일은 생성된 스태시목록에서 확인할 수 있음
    5. 숫자 클수록 최근 백업한 파일, 구버전일 경우 숫자없음(파일명으로 확인)
    6. 작업상태 초기화됨

  • Pull 버튼을 눌러 최신 소스 받기
    • 최신 개발소스 받은거 확인하기
  • 스태시에 백업했던 소스 복구하기
    • 스태시 목록 중 복구할 내용선택 후  우클릭  > 스태시 적용 클릭 > 작업상태로 돌아감
    • 정상적으로 Merge됨

※ 기타용어
원격 (Origin)  : 서버 저장소
브랜치: 로컬 저장소



브랜치 (Branch) 

원격 (origin) 목록 > 이동할 브랜치(HUB-45) 더블클릭 > 새 브랜치 체크아웃창에서 '확인'버튼 클릭 > 브랜치 목록에 HUB-45 생성됨을 확인

이동 전 브랜치에서 소스파일 수정이 됬을 경우 충돌이 일어남 
스태시를 통해 백업을 하거나 불필요한 커밋내용일경우 폐기처리 후 브랜치 이동

 

원격 (origin) 목록 > 이동할 브랜치 더블클릭

 

확인버튼클릭

 

결과

 

 

반응형

로컬호스트 모바일 접속 세팅

인터넷연결된 환경에서의 데스크탑 로컬호스트(localhost.com:8080) 모바일기기 접속 방법은 간단하나

인터넷연결이 안된 폐쇄망에서는 유무선 공유기를 통해 부가적인 세팅이 필요하다. 

 

(PC 로컬호스트와 모바일접속 연결하기 위한 로컬서버 구축에 대한 내용)

로컬호스트 (모바일 접속)를 위한 로컬서버구축

 

사용된 기기 : 
유선랜카드 (ipTIME U1G), 유무선공유기 (ipTIME604 Plus-i)

1. ipTIME 홈페이지에서 필요한 유틸 다운로드하여 Wifi 상태확인 (ex: ipTIME_MediaTek_Setup 설치파일)

 

2. 유무선 공유기 (ipTIME604 Plus-i) 전원 연결 후 기기 초기화(Reset)

3. 유선랜카드 USB(EFM ipTIME U1G)를 PC에  USB포트에 연결, 유무선 공유기와 랜선 연결

 

4. PC에서 http://192.168.0.1 접속 (iptime 초기 로그인화면 접속되면 성공)

5. ID: admin / PW: admin 로그인 > 관리도구

6. 관리도구 > 기본설정 > 무선설정/보안

7. 네트워크이름(SSID), 암호화 WPA2PSK + AES(권장) 선택, 네트워크 암호 설정 후 적용

8. 모바일에서 설정해준 WIFI로 연결한 후 http://192.168.0.XX 접속하기

 

 

 

 

반응형

Vue Cli 3.X 이상 일때 기준으로 Setting

1. SASS (scss)

  • node-sass, sass-loader 설치
npm install --save-dev node-sass sass-loader

 

  • vue.config.js 세팅 (모든 컴포넌트에 공통 스타일적용)
    • sass-loader 버전 8.X는 data가 아니고 prependData를 써줘야 한다.
    • 그 이상의 버전은 additionalData
// vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/scss/_reset.scss";
                    @import "@/assets/scss/_variables.scss";
                    @import "@/assets/scss/_breakpoints.scss";
                    @import "@/assets/scss/_mixins.scss";
                `
            }
        }
    }
};

2. Polyfill 

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요
  • @babel/polyfill, @babel/preset-env 설치 
npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

 

  • main.js (※ 최상단에 위치할 것)
//main.js

import '@babel/polyfill'
import Vue from 'vue'

 

  • vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기
//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

 

  • babel.config.js
// babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}

3. vuex

  • 설치
    • 이전 버전으로 설치 했을 경우 npm uninstall --save vuex 로 이전버전 삭제 후 설치
 npm install --save vuex@next

 

  • main.js
// main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js';

const app = createApp(App);

app.use(store);
app.mount('#app');

 

  • store폴더, index.js 파일 생성
// store/index.js

import { createStore } from 'vuex';

export default createStore({
  state: {
  },
  getters: {
    
  },
  mutations: {
  
  }
});

4. Router

  • 설치
npm i vue-router@next

 

  • main.js
// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');
import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
반응형

 

Github 계정이 없다면 미리 가입 후 진행하기.

 

SSH Key

GitHub 접속 시 SSH키가 필요한 이유

로컬에서 Git을 단독 사용하면 SSH가 필요없지만 

안전하게 외부 Git서버에 코드를 Push 하기위해 SSH프로토콜을 사용합니다. 

GitHub처럼 원격에서 Git저장소를 호스팅해주는 에서도 모두 SSH프로토콜을 지원하고 있습니다.

 

SSH키 확인하기

먼저 ssh키를 확인해 줍니다.

id_rsa.pub, id_ed25519.pub 등 .pub 파일이 있으면 이미 존재해서 새로 만들 필요 없습니다.
디렉토리 또는 파일이 없으면 CMD에서 새로 만듭니다.

$ cd ~/.ssh
$ ls

 

SSH키 생성하기

$ ssh-keygen -t ed25519  -C "your_email@example.com"
참고: Ed25519 알고리즘을 지원하지 않는 레거시 시스템을 사용하는 경우 다음을 사용합니다.
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

 

"키를 저장할 파일 입력"이라는 메시지가 표시되면 Enter 키를 눌러 기본 파일 위치를 적용

 

Generating public/private ed25519 key pair.
Enter file in which to save the key (C:\Users\xxx/.ssh/id_ed25519):

 

패스워드를 설정(불필요시 Enter) 깃헙에선 패스워드사용을 권장하고 있습니다.

추후 설정도 가능하니 일단 엔터 후 진행.

패스워드 추가 또는 변경 가이드 링크

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

 

cmd창에서 생성된 SSH 확인하기

(전 시스템 cmd창에서 확인이 안되서 Git Bash에서 출력했습니다.)

$ cd ~/.ssh
$ ls

아래처럼 확인할 수 없는경우 Git bash에서 확인해보세요.

시스템 cmd에서 오류

Git Bash에서 ssh 확인

Git Bash에서 cd ~/.ssh  명령어를 입력하여 ssh디렉토리로 이동 후  ls 파일리스트 출력 명령어를 입력하면

생성된 파일목록들을 (id_ed25519  id_ed25519.pub) 확인할 수 있습니다.

id_ed25519 -> 개인키

id_ed25519.pub -> 공개키

$ cd ~/.ssh
$ ls

 

 

개인키를 출력해보려면 목록을 확인한 디렉토리에서 아래의 명령어를 실행해 줍니다.

(개인키는 절대 공개되면 안됩니다.)

$ cat id_ed25519

 

공개 키(Public Key) 확인

아래의 명령을 실행시켜 공개키를 출력하고 출력된 공개키를 복사해 줍니다.

$ cat id_ed25519.pub

 

 

공개 키(Public Key)를 Github 계정에 등록하기

Tilte에는 등록하려는 키의 이름을 입력합니다. 이메일이나 본인이 구분하기 편리하도록 이름을 정해줍니다.

Key 입력박스 안에는 cat id_ed25519.pub로 확인된 공개키를 복사해서 입력해줍니다.

 

SSH Key Add New 링크

 

Add SSH Key 버튼을 누르면 아래처럼 공개키가 Github에 등록됩니다.

 

브라우저창에 github.com/[USERNAME].keys 를 입력하면 사용자의 공개키를 확인할 수 있습니다.

 

GPG Key

GPG 키 생성

$ gpg --gen-key

GPG 키를 이용해서 커밋에 서명하기

$ git config --global user.email test@email.com
$ git config --global user.name "Test RealName"
$ git config --global user.signingkey keynumber
$ git config --global commit.gpgsign true
$ git config --global gpg.program gpg

 

 

----

 

관련 자료:

 

 

https://docs.github.com/ko/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

 

새 SSH 키 생성 및 ssh-agent에 추가 - GitHub Docs

SSH 키 암호 정보 SSH(Secure Shell Protocol)를 사용하여 GitHub.com의 리포지토리에서 데이터에 액세스하고 쓸 수 있습니다. SSH를 통해 연결할 때 로컬 머신에서 프라이빗 키 파일을 사용하여 인증합니다.

docs.github.com

https://www.lainyzine.com/ko/article/creating-ssh-key-for-github/

 

GitHub 접속 용 SSH 키 만드는 방법

GitHub의 저장소를 사용할 때 HTTPS과 SSH 프로토콜을 사용할 수 있습니다. SSH 프로토콜은 공개키 방식으로 안전하게 정보를 교환할 수 있습니다. 이번 글에서는 공개키를 만드는 방법부터, GitHub에

www.lainyzine.com

 

반응형

(Git , Bitbucket , SourceTree 개발환경)

 

SourceTree(소스트리) 설치

 

1. 최신 소스트리 다운받기

https://www.sourcetreeapp.com/

 

Sourcetree | Free Git GUI for Mac and Windows

A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac.

www.sourcetreeapp.com

2. Install 

  • Bitbucket Server선택
    • Bitbukcet Server는 설치형으로 개별서버를 설치할 경우의 로그인할때 사용
    • Bitbucket은 Atlassian의 Bitbucket에 가입된 사용자가 로그인할 때 사용

소스트리 설치단계1

3. Registration

  • Url입력: pms 비트버킷 url
  • 사용자 입력
  • 계정로그인
  • 등록완료

4. 도구설치

  • 머큐리얼 선택해제 후 다음 선택
    • 머큐리얼은 Git과 비슷한 Tool

소스트리 설치단계 2_도구설치 (머큐리얼 체크박스 해제)

5. Preference

  • 다음선택
  • 완료

 

소스트리 사용법

https://kang-ji.tistory.com/202?category=946809 

 

Git / SourceTree(소스트리) 기본 사용법 (커밋, 푸시, 풀, 스태시, 브랜치이동)

커밋 Commit 현재 작업공간의 상태를 커밋으로 만들어서 저장소에 저장한다. 파일상태에서 변경사항 확인하여 커밋 주황아이콘  → 수정(변경)된 파일 보라아이콘  → 새로 추가된 파일 수정

kang-ji.tistory.com

 

반응형

+ Recent posts