게시 됨 업데이트 됨cmd몇 초안에 읽기 (약 50 단어)

cli에서 줄바꿔서 명령어 계속 입력하기

cmd
1
2
3
echo 1 ^
2 ^
3
powershell
1
2
3
echo 1 `
2 `
3
shell
1
2
3
echo 1 \
2 \
3
  • cmd, powershell, bash 다 달라서 흠이다
  • cli에서 긴 명령어를 작성할 때 가독성을 높여줄 수 있다
 게시 됨 업데이트 됨javascript3분안에 읽기 (약 417 단어)

javascript this

나는 평소 js에서 this나 prototype을 활용해본 적이 없다
c, java를 하다가 js를 넘어왔는데, 공부하면서 use strict를 기본으로 사용했다
리액트는 타입스크트와 함께 시작했고,
리액트에서 컴포넌트를 만들 때도 함수형으로 작성을 시작해서 this를 사용해본 경험이 없었다
자연스럽게 thisless한 코드를 작성하게 되고 선호하게 되었다
근데 this를 사용한 코드를 볼 때, 해석할 수 있어야 한다
그동안 애매하게 알고 있었던 this에 대해 공부해보았다

this

  • use strict / default(sloppy mode)

최상위 스코프에서

  • window / windows

함수안에서 (function)

  • undefined / window

객체안에서

  • 자기 자신{} / 자기 자신
  • 객체 멤버로 화살표 함수가 있는 경우 : 자기 자신{}이 아니라 자기 자신{}보다 한 단계 위

화살표함수에서

  • window / window

정리

  • strict mode일 때와 아닐 때 동작이 달라진다
  • strict mode가 아닌 경우(sloppy mode)는 생각하지 말자
  • 화살표 함수는 항상 한 꺼풀 위와 동일한 this
  • 함수(function keyword)와 객체의 경우 자기 자신만의 스코프를 만들고 자기를 바라본다
  • this는 누가 실행했냐에 따라 달라진다
  • this를 고정시키려면 bind, apply를 사용한다

생각

  • this, 컨텍스트, 스코프 체인, 렉시컬 스코핑 뒤죽박죽 개념이 떠올라서 항상 헷갈린다

참고

 게시 됨 업데이트 됨nodejs1분안에 읽기 (약 125 단어)

npm 패키지 고르는 법

여러 비슷한 패키지들이 있는데 어떤 것을 고를지 고민될때가 있다
또 내가 알고 있는 패키지를 대체할 좋은 패키지가 있는지 찾아볼 때도 있다
이럴때 유용한 npm trends 가 있다

  • npm trends를 통해 패키지들을 비교해볼 수 있다
  • 패키지를 검색하면 연관된 패키지들이 추천되고 서로 비교해볼 수 있다

참고

 게시 됨 업데이트 됨react4분안에 읽기 (약 610 단어)

리액트 SPA 쉽게 공유해보기

내가 만든 리액트 앱을 친구들에게 공유하기 위한 간단한 방법을 소개한다
방법은 2가지가 있다

  • nodejs express
  • github pages

방법1. nodejs express

terminal
1
2
3
git clone https://github.com/chinsun9/serve-spa-expressjs.git
cd serve-spa-expressjs
npm i
  • 위 저장소를 클론하고, 종속성을 설치한다
  • index.js 에서 port와 staticDir을 내 상황에 맞게 수정한다

port

index.js:5
1
const port = 5000; // 원하는 포트로 수정

staticDir (spa path)

index.js:7
1
const staticDir = path.join(__dirname, '../build'); // 빌드된 spa 경로, index.js를 기준으로 빌드된 리액트앱 상대경로를 path.join 두번째 인자에 넣어준다

소스코드

방법2. github pages

  • 깃허브 페이지를 통해 배포할 수 있다
  • 하지만 깃허브 페이지에서는 SPA를 지원하지 않는다
  • 1페이지짜리 리액트 앱이면 상관없지만,
  • react-router-dom을 사용하면서 url이 변화하는 경우
  • index.html과 404.html에 스크립트를 추가해줘야 한다
  • github pages에서 spa처럼 동작하게 해주는 마법 ; https://github.com/rafgraph/spa-github-pages#usage-instructions
  • demo page

gh-pages 설치

terminal
1
yarn add -D gh-pages

package.json 수정

package.json
1
2
3
4
5
6
7
8
9
{
  // ...
  "scripts": {
    // ...
    "deploy": "gh-pages -d build"
  },
  // ...
  "homepage": "https://chinsun9.github.io/hello-react/"
}
  • deploy 스크립트 추가, homepage 필드를 추가한다
  • 이때 homepage필드의 값은
  • https://{username}.github.io/{repo}/로 한다

Router에 basename 추가

index.js
1
2
3
4
5
6
7
8
ReactDOM.render(
  <React.StrictMode>
    <Router basename={process.env.PUBLIC_URL}>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
  • 최상위 Router에 basename={process.env.PUBLIC_URL}을 추가한다

404.html 추가

index.html 수정

build && deploy

terminal
1
2
yarn build
yarn deploy
  • gh-pages 브랜치가 생성되어 있고,
  • 깃허브 페이지 기능이 활성화되어있는 것을 확인할 수 있을 것이다

소스코드

참고

 게시 됨 업데이트 됨git2분안에 읽기 (약 232 단어)

깃허브에서 검색할 때 포크 저장소 포함하기

깃허브에서 저장소를 검색할 때, 포크 저장소는 검색되지 않는다
github advanced search를 사용해서 검색해보자

상황

  • 원본 레포가 업데이트가 없어서 포크를 확인하고 싶었다
  • 그런데 기본적인 깃허브 검색으로는 포크가 검색되지 않았다

  • 검색 결과 왼쪽 칼럼 하단을 보면 advanced search 버튼이 있다

  • 여러 검색 옵션들이 있는데, 포크를 포함하여 검색하기 위해 and including forks. 로 설정했다

  • 이제 포크가 포함되어 검색되는 것을 확인할 수 있다
  • 검색 결과 화면에서 정렬을 사용할 수 있다
  • 나는 스타가 많은 순으로 정렬하여 인기 있는 포크를 확인할 수 있었다
 게시 됨 업데이트 됨git1분안에 읽기 (약 145 단어)

git config by workspace

  • 보통 global로 설정된 user.name, uesr.email이 있을 것이다
  • 깃 프로젝트 워크스페이스 별로 다른 계정을 사용해보자
terminal
1
2
3
4
5
# git config user.name {username}
git config user.name chinsun9

# git config user.email {email}
git config user.email chin_sung@naver.com
  • 글로벌로 설정된 이름, 이메일 대신, 다른 계정을 사용하고 싶은 워크스페이스로 가서 위 명령을 실행한다

참고

 게시 됨 업데이트 됨etc2분안에 읽기 (약 288 단어)

라즈베리파이에 라즈비안 설치 및 설정

라즈베리파이에 Raspberry Pi OS Lite 를 설치해보자

라즈비안 이미지 받기

sd 카드 준비

  • 라즈비안 이미지를 선택하고
  • 인스톨한 sd카드를 선택하여 os를 설치한다

와이파이로 인터넷 연결하기

  • sd카드를 꼽고,
  • hdmi로 모니터와 키보드를 연결하고 전원을 켠다
  • 기본 계정은 pi / raspberry 이다
  • 와이파이로 인터넷을 연결해주겠다
1
sudo raspi-config
  • system option -> wireless lan -> GB (영국) -> 와이파이명 -> 와이파이 비밀번호 -> 리부트
  • 재부팅 후에 인터넷 연결을 확인하기 위해 ifconfig 명령을 실행하여 확인해준다

ssh 설정하기

외부에서 리모트로 개발하기 위해 ssh 설정을 해줘야 한다

1
sudo raspi-config
  • interface option -> ssh -> enable
  • 이제 리모트 할 수 있다

참고

카테고리

아카이브

광고

×