'분류 전체보기'에 해당되는 글 187건

git에 익숙하지 않는 사용자들 중에서 로컬에서 commit등이 꼬여서 복구하지 못하는 경우가 종종있습니다.

이럴때는 원격 저장소에 있는 파일들을 내려 받아야 하는데 방법을 몰라 로컬을 전부 지우고 clone을 하는 경우가 있습니다. 

아래 명령으로 간단히 해결할 수 있습니다.

$ git fetch --all
$ git reset --hard origin/main

우분투에서 비쥬얼 스튜디오 코드를 사용하는 경우 업데이트를 할 때 직접 패키지를 다운로드 받은 후 기존의 VScode를 삭제하고, 다운받은 파일로 다시 설치해야 하는 불편함이 있습니다.

다른 패키지들과 함께 업데이트하면 편한데 말이죠.

지금부터 VS code를 다른 패키지들과 함께 업데이트 하는 방법을 설명하겠습니다.

Step1. curl을 설치합니다. (이미 설치되어 있다면 스킵합니다.)

$ sudo apt install curl

Step2. MS사의 GPG키를 다운하여 /etc/apt/trusted.gpg.d/ 경로에 복사해줍니다.

$ sudo sh -c 'curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > /etc/apt/trusted.gpg.d/microsoft.gpg'

Step3. VS Code를 다운받기 위한 저장소를 추가합니다.

$ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

* 스페이스 등 오탈자가 나지 않도록 주의하세요!

자! 이제 평소처럼 업데이트를 하면 됩니다.

$ sudo apt update && sudo apt upgrade

react프로젝트에 firebase를 연결할 때 발생하는 오류는 다음과 같습니다.

Compiled with problems:X

ERROR in ./src/index.js 9:12-20

export 'default' (imported as 'firebase') was not found in './firebase' (module has no exports)

이 문제는 firebase버전에 따를 호환성 이슈때문에 발생하는 오류라고 합니다.

먼저 프로젝트의 package-lock.json파일을 열고 firebase package 버전을 확인합니다.

  "packages": {
    "": {
      "name": "nwitter",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "firebase": "^9.6.5",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.4"
      }
    },

위와 같이 firebase가 9 이후의 버전인 경우라면 import를 다음과 같이 해줍니다.

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'

그리고 firebase가 8 이전의 버전이라면 다음과 같이 import 합니다.

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

좀 더 자세한 사상을 알고 싶다면 다음 문서를 확인해 보세요.

[Solved] export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’

대표적인 윈도우 CLI는 cmd와 PowerShell이 있습니다.

개발자들의 경우는 git이나 wsl 설치 등으로 여러 가지 shell을 사용하게 됩니다.

이때 윈도우 터미널을 사용하면 cmd를 포함한 모든 shell을 한 곳에서 사용할 수 있어 편리합니다.

다만 한 가지 아쉬운 것은 작업표시줄에서는 관리자 권한으로 실행할 수 없다는 것입니다.

관리자 권한으로 실행하려면 시작화면의 아이콘에서 컨텍스트 메뉴(마우스 우클릭으로 나오는 메뉴)를 통해서만 가능합니다. 

매번 시작 메뉴에서 아이콘을 우클릭하고 메뉴를 선택해서 실행하는 것이 불편하다면 다음 방법을 사용해 보세요.

1. 먼저 win + r 키를 이용해 실행 창을 엽니다. 

2. 실행 창의 열기에 wt를 입력합니다.

3. ctrl + shift 키를 누른 상태에서 enter키를 칩니다.

참고로 다른 CLI도 위와 같은 방식으로 열 수 있습니다.

위의 2번 항에 입력을 아래와 같이 하면 됩니다.

나머지는 동일합니다.

• 명령 프롬프트: cmd
• 파워 쉘: powershell

리눅스에서는 어떤 패키지도 자동으로 업데이트되지 않습니다.

정확히 얘기하면 update는 패키지의 목록을 갱신하는 것이고, 실제로 파일을 갱신하는 것은 upgrade라고 합니다.

물론 목록을 갱신하지 않으면 업그레이드도 되지 않습니다.

먼저 Git의 버전을 확인합니다.

$ git version

리눅스를 개발 PC로 사용하는 분들은 익숙하겠지 만 부팅을 하게 되면 제일 처음 하는 작업이 업데이트와 업그레이드입니다.

$ sudo apt update && sudo apt upgrade -y

그러나 위의 명령으로도 Git은 업그레이드되지 않습니다. 

왜냐하면 목록에 Git이 등록되어 있지 않기 때문입니다.

그래서 먼저 목록에 Git을 등록하고 업데이트와 업그레이드를 실행하면 다른 패키지들과 함께 업그레이드됩니다.

$ sudo add-apt-repository ppa:git-core/ppa -y
$ sudo apt update && sudo apt upgrade -y

첫 번째 명령은 git의 목록을 만들어 주는 것이고, 다음 명령은 패키지를 업그레이드하는 명령입니다.

이렇게 해주면 다음부터는 부팅 후 첫 번째 명령은 생략하고 두 번째 명령만 하면 다를 패키지들과 함께 업그레이드됩니다.

git은 자동으로 업데이트되지 않습니다.

따라서 주기적으로 버전을 확인하고 직접 업데이트를 해야 합니다.

버전 확인

PS> git --version

업데이트

PS> git update-git-for-windows

터미널에서 위와 같이 입력하면 필요한 파일을 다운로드한 후 설치합니다.

윈도우의 경우는 처음 설치할 때처럼 GUI스타일의 설치 창이 나타납니다. 

지시대로 따라 하면 업데이트가 완료됩니다.

마지막으로 업데이트가 잘 되었는지 버전을 확인합니다.

bind는 this를 변경 해주는 내장 메서드로 모든 함수에서 사용할 수 있습니다.

다음 예제는 this.foo는 전역으로 state 내의 foo는 지역으로 선언되어 있습니다.

(예1)처럼 bar객체를 생성해서 사용하면 전역의 this.foo 즉 10을 반환합니다.

state가 전역으로 선언되었고, this.foo도 전역에 있음으로 이를 반환하는 것입니다.
만일 전역에 this.foo가 없다면 어떻게 될까요?

브라우저 환경에서는 windows.foo를 찾게 되는데, windows.foo라는 것은 없으니 undefined라고 출력됩니다.

그렇다면 state내부에 있는 foo를 읽어오려면 어떻게 해야 할까요?

(예2)처럼 호출하면 지역의 state내의 foo, 즉 50 반환합니다.
이렇게 직접 호출하면 문제는 없지만 반복해서 여러번 호출해야 한다면 객체를 생성해서 사용하는 것이 편합니다.

객체를 생성해서 사용한 (예1)의 경우처럼 전역을 읽어오거나, undefined되는 것을 방지하기 위에서 (예1)에서 생성한 bar를 state와 binding시켜 새로운 객체를 생성하면 (예3)처럼 지역의 50을 반환하게 됩니다.

설명을 하기위해 예1, 예3의 과정을 거쳤으나 (예4)와 같이 바로 binding해서 사용하면 됩니다.

this.foo = 10
let state = {
  foo: 50,
  getFoo: function() { return this.foo }
}

// (예1)
let bar = state.getFoo
console.log(`전역 반환: ${bar()}`) // 10

// (예2)
state.getFoo()
console.log(`지역 반환: ${state.getFoo()}`) // 50

// (예3)
let bindBar = bar.bind(state)
console.log(`binding: ${bindBar()}`) // 50

// (예4)
let foobar = state.getFoo.bind(state)
console.log(`직접 binding: ${foobar()}`) // 50

개발자 포트폴리오는 깃허브 프로필 관리로 시작

깃허브 프로필이란?

다른 사람들이 내 GitHub 계정에 접속하면 제일 먼저 보이는 화면입니다.
계정의 주인이 보여주고 싶은 내용을 정리해 놓은 화면이라고 생각하면 됩니다. 
개발자라면 누구나 포트폴리오를 관리해야 합니다. 
포트폴리오는 취준생만 필요한 것은 아닙니다. 
개발자는 자신의 스킬을 향상시키기 위해 이직을 하는 경우가 있습니다. 이때도 당연히 포트폴리오가 필요하게 됩니다.
결국 개발자는 나이가 들어 더 이상 개발을 하지 않게 될 때까지 포트폴리오를 관리해야 합니다.
포트폴리오 관리에 중요한 하나가 바로 깃허브라고 할 수 있습니다.
그런데 이곳에 개발 코드만 올려놓으면 방문한 사람들은 코드를 자세히 살펴보기 전에는 계정 주인이 무엇에 관심이 있고 어떤 개발이 가능하고, 관심이 있는지 알기가 어렵습니다.
그래서 깃허브 프로필 관리가 필요합니다.
잘 꾸며 놓으면 첫인상을 좋게 할 수 있습니다.

본인 계정 이름과 동일한 Repository 만들기

본인의 id(계정이름)와 동일한 Public 저장소를 만듭니다.

그리고 README.md파일을 생성합니다. 

GitHub를 통해서 저장소를 만든다면 저장소 생성전에 'Add a README file'을 체크해 주면 자동으로 생성됩니다.

이렇게 생성된 README.md파일에 profile내용을 작성하게 됩니다.

확장자를 보면 알겠지만 내용은 mark down문법을 사용합니다.

그곳에 자신의 이력이나 관심분야, 특별히 어필하고 싶은 프로젝트의 저장소 링크, 사용할 수 있는 언어 등을 작성하면 됩니다.

아래 링크는 README를 꾸밀 수 있는 각종 리소스입니다. 

설명이 자세히 나와 있으니 확인 후 사용하시면 됩니다.

* 시간이 나면 하나씩 별도로 포스팅하겠습니다.

README.md를 꾸밀 수 있는 리소스 모음

배지 사용하기(shields.io)

헤더 베너 꾸미기(capsule-render)

조회수 확인(hits.seeyoufarm)

내 GitHub의 상태

내 daily 코딩 시간 기록