soonitoon / til

TIL page repo

Hi there 👋 I'm hyuno Choi

• 🔭 I’m currently enrolled in Chungbuk National University
• 🌱 I’m currently learning
• 💬 Ask me anything!
• 📫 How to reach me: [email protected]

My major is psycologyΨ and Brain-Cognitive Engineering⚙🧠 I also interested in Programming! My first programming language is . I'm currently learing FrontEnd stack📚

Try my mobile Apps📱

Visite my...

• TIL📝 : https://soonitoon.github.io/TIL

• Blog📖 : https://velog.io/@soonitoon

• NPM : https://www.npmjs.com/~soonitoon

Status Bar

Language&Framework

Laptop

til's Issues

Next.js + storybook에서 static 파일 다루기

기본 설정

• 스토리북은 기본적으로 Next와 독립적으로 호스팅되기 때문에 정적 자원에 접근할 수 없다.
• 따라서 .storybook/main.js 파일에 정적 파일 경로를 설정해야 한다.

module.exports = {
  ...,
  staticDir: ['../public']
};

• 이제 스토리북에서 루트 디렉토리로 접근 가능하다.

public/
├─ fonts/
├─ images/
│  ├─ sample.png

• public 폴더가 이런 구조일 때 sample.png 파일을 불러오려면 스토리북 컴포넌트에서 images/sample.png 형태로 경로를 작성하면 된다.

next/image 대응

• next/image 모듈의 <Image /> 컴포넌트를 사용하면 Next의 최적화 기능 때문에 스토리북에서 에러가 발생한다.
• 따라서 스토리북에서 해당 컴포넌트를 로드할 때 최적화 기능을 끄는 설정을 해야 한다.
• .storybook/preview.js에 다음 내용을 추가한다.

import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />
});

• 레퍼런스1
• 레퍼런스2

Vim에서 특정 텍스트 검색하기(커서 이동하기)

• 현재 커서 위치에서 앞쪽 방향으로 검색: 노말 모드에서 / + 검색할 텍스트
• 현재 커서 위치에서 뒤쪽 방향으로 검색: 노말 모드에서 ? + 검색할 텍스트
• 다음 검색 결과: n
• 이전 검색 결과: shift + n

CSS font-size 기본값 === 16px

input 태그 placeholder 스타일링하기

input::placeholder {
  color: red;
}

Next.js middleware 사용시 Unexpected token '<' 오류

• Next.js에서 middleware로 요청 처리 시 요청 경로에 대한 분기처리를 해주지 않으면 해당 오류가 발생함.
• HTML이 아닌 파일에 대한 요청에 전부 해당 페이지의 HTML로 응답하기 때문.
• 따라서 HTML이 아닌 파일에 대한 요청은 middleware를 건너뛸 수 있게 해줘야 한다.

const PUBLIC_FILE = /\.(.*)$/;

const middleware = (request: NextRequest) => {
  const { pathname } = request.nextUrl;
  if (
    pathname.startsWith('/_next') ||
    pathname.startsWith('/api') ||
    pathname.startsWith('/static') ||
    pathname.includes('.') ||
    PUBLIC_FILE.test(pathname)
  ) {
    return NextResponse.next();
  }
// 미들웨어 코드
}

• 레퍼런스

GitHub에서 PR 머지되면 자동으로 이슈 닫기

• PR을 작성할 때 다음 단어 중 하나를 적고, 뒤에 #이슈번호를 적는다.

close
closes
closed
fix
fixes
fixed
resolve
resolves
resolved

• 예시: resolved #31
• 단, PR이 default branch에 머지되었을 경우에만 작동한다.
• 레퍼런스

storybook에서 argType.defaultValue 사용하지 말 것

No longer inferring default values of args

• 스토리북 6.3 이후 버전부터는 argType.defaultValue를 지원하지 않음.
• 기본값을 받는 대신 해당 매개변수는 undefined 상태로 남겨두고, 스토리북 UI를 통해 받도록 할 수 있음.
• 혹은 스토리를 export 할 때 매개변수에 기본값을 주는 방식을 사용할 수도 있음.

export const Primary: ComponentStory<typeof Label> = ({
  text = '라벨',
  marginBottom
}) => <Label {...{ text, marginBottom }} />;

MVP 제품이란

• Minimum Viable Product
• 최소한의 필수 기능만 담은 제품을 말함.
• 일반적으로 적은 수의 테스터에게 배포되고, 피드백을 받는 용도로 출시한다.

ref

Next.js 프로젝트에서 env 세팅하기

• Next.js 9.4 이상 버전부터는 별도의 설정 없이 env 파일을 사용할 수 있음.
• 여러 env 파일이 필요할 때는
  • .env.local에 비밀키 등을 저장하고
  • .env.development에 개발 환경 변수들을 저장하고
  • .env.production에 배포 환경 변수들을 저장하면 됨.
• $ next dev 명령어 실행 시 자동으로 .env.development 환경 변수가 적용됨.
• $ next start 명령어 실행 시 자동으로 .env.production 환경 변수가 적용됨.
• .env.local 환경 변수의 경우 언제나 적용됨.
• 환경 변수는 기본적으로 노드 환경에서만 접근할 수 있음.
• 만약 브라우저 환경에서 환경 변수에 접근하고 싶다면 반드시 환경 변수명 앞에 NEXT_PUBLIC_ 프리픽스를 붙여야 함.

ref

자바스크립트 이중 NOT 연산자로 형변환하기

어떤 변수가 false로 형변환 될 수 있으면(null, undefined, "" 등) false를 반환하고 true로 형변환 될 수 있으면 true를 반환하는 코드.

const isTrue = someVariable ? true : false;

이 코드를 이중 NOT 연산자로 단축할 수 있음.

const isTrue = !!someVariable;

기본적으로 ! 연산자는 형변환과 함께 불리언을 반대값으로 바꾸는데, ! 연산을 한번 더 하게 되면 원래의 자료형을 불리언으로 형변환했을 때와 같은 결과가 되기 때문.

z-index의 효과 범위

• z-index는 부모 요소의 제한을 받으며, 같은 형제 태그들 사이에서만 차이에 의한 효과가 있다.
• 즉, 부모 요소의 z-index 값이 0인 태그의 z-index를 9999로 설정해도, 부모 요소의 형제 요소가 부모보다 z-index 값이 1만 높아도 해당 태그에 의해 가려진다.
• 또한 z-index는 position을 static(기본값) 이외의 값으로 설정해야 작동된다.

 <div
      style="
        background-color: red;
        width: 100px;
        height: 100px;
        position: absolute;
        z-index: 0;
      "
    >
      <div
        style="
          background-color: green;
          width: 50px;
          height: 50px;
          position: absolute;
          z-index: 2;
        "
      ></div>
    </div>
    <div
      style="
        background-color: blue;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        z-index: 1;
      "
    ></div>

초록 박스의 z-index 값이 파란 박스보다 높음에도 부모 요소의 z-index가 0이기 때문에 파란 박스에 가려진다.

inline 속성 태그의 width, height 설정

• 불가능함.
• width 및 height를 제한하고 싶다면 display: inline-block 속성을 사용하면 됨.

Vim에서 특정 문자로 둘러싸인 영역 선택하기

• 특정 문자 내부 선택하기: vi + 문자
• 특정 문자를 포함해서 선택하기: va + 문자

time 태그

• 시간을 나타내는 내용을 담을 때 쓴다.
• 일반 텍스트와 똑같이 보인다.
• datetime 속성을 지정해주면 브라우저가 캘린더 등록 추천 등의 기능을 수행할 수 있다.

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

ref

안드로이드 스튜디오 에뮬레이터에서 로컬 서버 접속하기

http://10.0.2.2:3000 형식으로 접속하면 됨.

JS에서 숫자 소수점 붙이기

• Number.prototype.toLocaleString() 메소드를 사용하면 됨.
• number 타입을 특정 국가의 숫자 양식에 맞는 문자열로 반환해주는 메소드.
• 아무 인자를 전달하지 않으면 미국 기준으로 변환됨(세 자리마다 쉼표)

const number = 1000;

number.toLocaleString(); // '1,000'

next/link 컴포넌트 스타일링하기

• 기본적으로 className과 style 프롭을 받을 수는 있으나, 스타일링이 안 됨.
• 원하는 스타일을 <a> 태그에 입히고, <a> 태그를 <Link>로 감싸는 방법으로 해결할 수 있음.
• 이때 href 속성은 <Link> 컴포넌트에 주되, 반드시 passHref 속성을 함께 줘야함.
• 그러면 href가 자식 <a> 태그에 전달되고, 접근성과 SEO를 둘 다 챙길 수 있음.

<Link href="./togo" passHref>
  <a>Go</a>
</Link>

defer, async, 동적 스크립트

일반 스크립트(아무 속성도 주지 않음)

• 브라우저가 HTML을 파싱하다가 이 스크립트를 만나면 파싱을 멈추고 해당 스크립트를 불러오고, 실행까지 한 후에 다시 파싱을 시작한다.
• 따라서 해당 스크립트가 로딩 및 실행되는 동안 접속자는 스크립트 아래쪽 요소를 볼 수 없다.

defer 스크립트

• 스크립트가 HTML 파싱과 병렬적으로 다운로드된다.
• 언제나 브라우저의 HTML 파싱 완료와 DOMContentLoaded 이벤트 발생 사이에 실행된다는 것이 보장된다.
• 또한, 문서 상에서 위에 있는 스크립트가 먼저 실행된다는 것이 보장된다.

async 스크립트

• 스크립트가 HTML 파싱과 병렬적으로 다운로드된다.
• 브라우저의 HTML 파싱 전에 다운로드가 완료되었다면 파싱을 중단시키고 실행될 수 있다.
• DOMContentLoaded 이벤트는 async 스크립트 로딩 및 실행을 기다리지 않는다.
• async 스크립트와 다른 스크립트는 서로 순서를 기다리지 않는다.

동적 스크립트

• document.createElement('script'); 등을 통해서 동적으로 스크립트를 삽입하는 경우.
• aysnc 스크립트와 동일하게 동작한다. 동적 스크립트와 다른 스크립트는 서로를 기다리지 않는다.
• 엘리먼트의 async 속성을 false로 설정하면 문서에 추가된 순서대로 실행된다.

ref

[IOS 15 기준] 모바일 사파리에서 라디오 타입 인풋 스타일링 할 때 주의점

input 태그에 appearance: none; 속성을 주더라도 라디오 버튼이 있었던 자리가 여백으로 공간을 차지함.
width: 0; height: 0; 속성으로 라디오 버튼을 없애주면 됨.
참고로, 모든 플랫폼 공통적으로 라디오 타입 인풋에는 margin: 0; 속성을 주어야 바르게 스타일링 할 수 있음.

Next 앱에서 로컬 폰트 파일 적용하기

src/fonts 경로에 폰트 파일을 적용하면 불러올 수 없다.

• 프로젝트 최상단 public/fonts 폴더에 폰트 파일을 넣는다.
• _document 파일 헤더 안에서 <link /> 태그를 통해 폰트 파일을 불러온다.

 <Html>
      <Head>
        <link
          rel="preload"
          href="/fonts/PretendardVariable.woff2"
          as="font"
          crossOrigin=""
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>

• 글로벌 스타일에 폰트 페이스를 정의한다.

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local('Pretendard Variable'),
      url('/fonts/PretendardVariable.woff2') format('woff2-variations');
  }

Next.js Link 태그의 자식이 string이 아닐 때

• Next.js의 Link 컴포넌트는 자식이 string이면 자동으로 a 태그를 삽입한다.
• 하지만 string이 아니면 a 태그가 삽입되지 않고, 링크의 기능도 하지 못한다.
• 따라서 Link 컴포넌트에 string이 아닌 다른 태그를 자식으로 사용하는 경우에는 a태그로 자식을 감싸줘야 링크의 기능을 할 수 있다.

<Link>
  <a>
    <Child />
  <a>
</Link>

• stack overflow

:first-child와 :first-of-type의 차이

• :first-child: 부모 요소의 첫 번째 자식 태그 하나를 선택한다.
• :first-of-type: 부모 요소 내부에 여러 태그들이 있을 때 각 종류의 태그에서 첫 번째로 나오는 태그를 모두 선택한다.

<div>
  <div>1</div> <!-- div:first-child, div:first-of-type -->
  <div>2</div>
  <div>3</div>
</div>

<div>
  <span>1</span> <!-- span:first-child, span:first-of-type -->
  <div>2</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>3</div>
</div>

funtion.prototype.bind는 언제 사용할까?

다른 객체에서 메소드를 빌려 사용할 때

const person = {
  firstName: "",
  lastName: "",
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const Choi = {
  firstName: "Hyuno",
  lastName: "Choi",
}

let getFullNameOfChoi = person.getFullName.bind(Choi);
console.log(getFullNameOfChoi()); // Hyuno Choi

• Choi 객체는 아무런 메소드가 없음.
• 하지만 person.getFullName 메소드에 Choi를 바인딩하여 Choi의 this 맥락을 사용할 수 있다.

this 맥락을 유지해야 할 때

const Choi = {
  firstName: "Hyuno",
  lastName: "Choi",
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

setTimeout(Choi.getFullName, 1000); // undefined undefined

• 언뜻 예상하면 Hyuno Choi가 출력될 것 같지만 아무것도 출력되지 않음.
• setTimeOut 함수에 Choi.getFullName 메소드가 콜백으로 전달되는 순간 해당 메소드의 this 맥락이 사라지기 때문.
• 이때 Choi.getFullName 메소드를 전달해주는 동시에 Choi 객체를 바인딩하면 this 맥락을 유지할 수 있음.

setTimeout(Choi.getFullName.bind(Choi), 1000); // Hyuno Choi

Ref

• JavaScript Function bind()
• Function.prototype.bind()

네트워크 안 좋은 환경에서 yarn add

There appears to be trouble with your network connection. Retrying...

• 네트워크가 느린 환경에서 yarn add 실행 시 위와 같은 메시지가 뜨고 에러가 나면,
• yarn add --network-timeout 1000000 처럼 타임아웃 시간을 늘리고 기다리면 됨.

VSCode 터미널 간 전환 단축키(MacOS)

• 이전 터미널: Cmd+Shift+]
• 다음 터미널: Cmd+shift+[

git에서 push, pull upstream 세팅하기

$ git push --set-upstream origin dev

--set-upstream 옵션을 pull/push 할 때 붙이면 해당 브랜치의 업스트립이 설정됨. 이후에는 git pull만 써줘도 됨.

CSS로 스타일은 그대로 두면서 버튼 터치/클릭 영역 넓히기

�페이지 내에서 작은 크기의 버튼이나 링크를 써야할 때 넓히고 싶은 터치 영역만큼 padding 값을 준 후, margin으로 같은 값을 음수로 주면 스타일을 유지한 상태로 터치 영역만 넓힐 수 있다.

.button {
  padding: 10px;
  margin: -10px;
}

tabindex 속성

• tabindex 속성은 해당 엘리먼트가 포커스 될 수 있다는 것과, 키보드의 tab 키로 순환할 수 있다는 것을 나타낸다.
• tabindex="-1": 음수값은 엘리먼트가 키보드로 포커스될 수 없으며, 자바스크립트나 마우스 클릭을 통해서만 포커스가 가능하다는 것을 나타낸다.
• tabindex="0": 엘리먼트가 키보드로 포커스될 수 있다. 양수값 tabindex를 가진 앨리먼트가 순서상 먼저 포커스되고, 같은 0끼리는 HTML 상의 순서에 의해 포커스 순서가 결정된다.
• 양수값: 값이 낮은 순서대로 먼저 포커스된다. 가장 높은 값은 32767이며, 이는 곧 0과 같은 순서이다.

**주의: 인위적인 tabindex는 보조 기술을 사용해서 웹페이지를 봐야 하는 사람들에게 혼란을 줄 수 있다. 따라서 포커스 순서는 인덱스 값의 크기가 아니라 HTML 상의 순서로 결정해야 한다.

컴포넌트 드래그 방지하기

• 드래그를 막고 싶은 태그에 draggable="false" 속성을 주면 됨.
• <img draggable /> 처럼 단축형으로 쓸 수 없으며, 반드시 boolean 값을 줘야 함.
• MDN draggable

웹소켓 8.0.0 이후 버전부터의 message 이벤트 처리

• 웹소켓 8.0.0 이후 버전부터는 메시지를 자동으로 스트링으로 변환해주지 않고, Buffer로 받음.
• 따라서 toString() 메소드를 통해 직접 스트링으로 변환해야 함.

socket.on("message", (message) =>
  console.log(message.toString())
);

• Ref

CSS display: contents

div {
  display: contents;
}

• 이 속성이 적용된 태그는 박스 기능을 잃어버리며, 자식 태그들은 상위 태그 display 속성의 영향을 받는다(마치 자식 태그만 남아 있는 효과).
• 따라서 이 속성이 적용되면 width, height, margin, padding 속성을 쓸 수 없다.
• 하지만 대부분의 브라우저에서 display: contents 속성이 적용된 태그는 접근성 트리에서 제거되고 스크린 리더가 읽지 않는다.
• 이는 display 속성은 스타일에만 영향을 미치고 문서의 의미에는 영향을 미치지 않도록 해야 한다는 CSS의 의도와 어긋난다.
• 따라서 margin, padding 등의 속성을 제거하려고 시멘틱 태그에 display: contents속성을 사용해서는 안 된다.

MDN

VSCode에서 Restart TS server 명령어 안 뜰 때

• command + shigt + p로 명령을 찾을 때 Restart TS server가 보이지 않는다면,
• 현재 포커스된 파일이 TS 파일이 아니어서일 가능성이 큼.
• TS 파일에 포커스를 둔 채로 command + shift + p를 누르면 보인다.

YAGNI

• "You Aren't Gonna Need It"
• 실제로 필요할 때는 무조건 구현해야 하지만, 단지 필요해보인다는 이유로 어떤 기능을 개발하지 말라.

next/image에서 이미지의 원본 비율 유지하며 부모 요소에 꽉 채우기

• Image 컴포넌트의 layout 속성에 fill을 주고, objectFit 속성에 cover를 주어 원래 비율을 유지하며 부모 요소에 꽉 차게 만든다.
• Image 컴포넌트의 부모 태그 스타일에 position: relative 속성을 주고, width와 height로 이미지의 크기를 결정한다.

<div>
        <Image
          src={DEMO_GROUP_IMAGE_URL}
          layout="fill"
          objectFit="cover"
          alt="모임 프로필"
        />
</div>

div {
  position: relative;
  width: 100px;
  height: 100px;
}

git 빈 커밋 날리기

GitHub action등 CI/CD 테스트를 위해 테스트 커밋을 푸쉬해야 하는 경우에 유용한 명령어.

$ git commit --allow-empty -m "Empty-Commit"

<b> vs <strong> vs <em>

<b> vs <strong>

• 두 태그는 모두 볼드체로 보이지만 의미는 살짝 다르다.
• <strong>은 컨텐츠가 매우 중요함을 나타낸다.
• <b>는 중요도와 관련 없이 해당 텍스트에 주의를 끌기 위해 사용한다.
• 의미와 상관 없이 단순히 굵은 글씨를 원한다면 CSS의 font-weight 속성을 사용해야 한다.

<em> vs <strong>

• <em>은 문장을 읽을 때 강세를 두는 부분을 의미한다.
• 강세를 어디에 두느냐에 따라 문장의 의미가 달라진다.
• <strong>은 문장의 일부분에 중요하다는 의미를 부여한다.

enabled, disabled 상태에 따라 서로 다른 스타일 지정하기

활성 여부에 따라 자바스크립트로 조건부 스타일을 줄 필요 없이, CSS의 :enabled, :disabled 선택자를 사용하면 된다.

.button {
  width: 200px;
  height: 50px;

  &:enabled {
    color: red;
  }

  &:disabled {
    color: green;
  }
}

JS 구조 분해 할당에서 변수 이름 바꾸기

해당 문법을 사용하여 구조 분해 할당에서 원하는 변수명을 사용할 수 있다.

const person = {
  name: 'choi',
  age: 22.
};

const { name: choiName } = person;
console.log(choiName); // choi

width 상대 크기 키워드 정리

• auto: 부모 요소에서 차지할 수 있는 가용 공간에서 margin을 제외한 너비.
• min-content: 요소 속 컨텐츠를 최대한 줄인 너비. 텍스트에서는 단어 단위로 줄바꿈을 수행했을 때 가장 긴 단어의 길이가 width가 됨.
• max-content 요소 속 컨텐츠를 최대한 늘린 너비. 텍스트에서는 줄바꿈을 수행하지 않고 문장 전체의 길이를 width로 사용함.
• fit-content: auto와 max-content의 중간. 가용 공간이 남을 때는 max-content와 동일하게 동작하고, 가용 공간이 부족하면 auto처럼 작동한다.

자바스크립트에서 어떤 문자열에 특정 문자가 포함되어 있는지 여부 검사하기

const myName = 'Hyuno Choi';
const subString1 = 'Choi';
const subString2 = 'Kim';

console.log(myName.includes(subString1)); // true
console.log(myName.includes(subString2)); // false

• 대소문자 구분함.
• includes(searchValu, start) 형태로, start 매개변수를 통해 탐색을 시작할 문자열 인덱스를 지정할 수 있음.

Favicon

• Favorite icon
• 대부분의 브라우저 탭 및 즐겨찾기 아이콘으로 쓰인다.
• Favicon이 준비가 안 된 상태에서 개발자 도구 콘솔의 404 에러를 없애고 싶다면, head 태그 안에 밑의 link 태그를 삽입하면 된다.

<link rel="icon" href="#" />

Vim에서 단어 앞글자로 커서 뒤로 옮기기

b 키로 이동

Vim에서 스크롤하기

• 한 줄씩 스크롤
  • 위로: Ctrl + y
  • 아래로: Ctrl + e
• 페이지 절반만큼 스크롤
  • 위로: Ctrl + u
  • 아래로: Ctrl + d
• 페이지 단위 스크롤
  • 위로: Ctrl + b
  • 아래로: Ctrl + f

kakao-js-sdk 타입 정보 얻기

• JS에서는 window 객체에 접근해서 사용할 수 있음.
• TS에서는 window에 카카오 sdk 타입 정보가 없기 때문에 오류가 발생함.
• 대부분 window interface에 Kakao: any를 추가해서 사용함.
• 하지만 @types/kakao-js-sdk 모듈을 사용하면 타입 정보를 유지하면서 개발할 수 있음.

$ yarn add -D @types/kakao-js-sdk

DOMContentLoaded VS load

• DOMContentLoaded 이벤트는 초기 HTML document가 완전히 로딩 및 파싱되었을 때 작동되는 이벤트다. 여기서 로딩이란 스타일시트, 이미지, 외부 스크립트 로딩 시간을 제외한 순수한 document 로딩 시간을 말한다.
• load 이벤트는 위에서 제외한 스타일시트, 이미지, 외부 스크립트 로딩 등이 모두 끝난 시점에서 작동되는 이벤트다.

:disabled 상태인 버튼은 동시에 :active 상태도 가질 수 있다.

<button disabled>버튼</button>

• 위처럼 disabled 상태인 버튼은 눌러도 작동하지 않으며, CSS에서 :disabled 가상 선택자로 선택할 수 있다.
• 하지만 작동하지 않는 버튼이라도 :active 상태는 가질 수 있다. 따라서 버튼을 눌렀을 때 다른 스타일을 적용했다면 비활성화된 버튼임에도 불구하고 클릭 효과가 나타나게 된다.
• 이를 막기 위해서는 :enabled:active처럼 활성 상태인 버튼에만 active 상태일 때의 스타일을 주어야 한다.

button:enabled:active {
  background-color: red;
}

textarea 태그 사이즈 변경 못 하게 하기

textarea {
  resize: none;
}

CLI로 원격 브랜치 삭제하기

$ git push origin --delete test/branch