[TIL - 2022.10.08]

1.오픈소스기여하는 법 : 

오픈소스 하려고 할 때, 내가 먼저 찜해놓아야 한다. 먼저 찜해놓아야 본인이 차지해서 할 수 있다. 먼저 올려둔 이슈에 대해서 메인테이너가 도와준다. 

https://github.com/firstcontributions/first-contributions/issues/29706

Inconsistency in links to translations · Issue #29706 · firstcontributions/first-contributions

먼저 포크를 떠온다.  그리고 컨트리뷰션 가이드를 잘 읽어줘야 한다. 

 

https://github.com/pandas-dev/pandas

GitHub - pandas-dev/pandas: Flexible and powerful data analysis / manipulation library for Python, providing labeled data struct

위 프로젝트는 컨트리뷰터 친화적인 프로젝트다. 잘 들어가보면, 컨트리뷰트 가이드가 적혀있다. 그래서 이 가이드를 따라야한다. 만약 이런 가이드가 없는 프로젝트는 그냥 이슈 올리면 된다. 만약 가이드가 있는 경우면 무조건 가이드를 따라야 한다. 

https://pandas.pydata.org/docs/dev/development/contributing.html

Contributing to pandas — pandas 1.6.0.dev0+296.gac05d29cf8 documentation

이런 식의 가이드가 있다. 클로즈 된 곳에서 댓글이 많이 달려 있는 곳에 가서 확인해보면 분위기를 파악할 수 있다. 이런 곳을 통해서 분위기를 파악할 수 있다. 먼저 핵토퍼페스트에 들어가서 컨트리뷰트 가입을 해야한다. 

 

 

2.HTTP 변천사 글쓰기  :

오늘은 바이너리 프레임 레이어에 대한 부분을 작성했다.

멀티 플렉싱, 플로우 컨트롤, 헤더 압축, 서버 푸시 등등. 오늘 HTTP 변천사 글쓰기에 투자한 시간은 2시간 정도. 

 

 

3.ci단계에 번들 분석기 붙이기 :

name: 'Next.js Bundle Analysis'

on:
  pull_request:
  push:
    branches:
      - main # change this if your default branch is named differently
  workflow_dispatch:

defaults:
  run:
    # change this if your nextjs app does not live at the root of the repo
    working-directory: ./

jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Set up node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: yarn install --immutable

      - name: Restore next build
        uses: actions/cache@v2
        id: restore-build-cache
        env:
          cache-name: cache-next-build
        with:
          path: .next/cache
          key: ${{ runner.os }}-build-${{ env.cache-name }}

      - name: Build next.js app
        # change this if your site requires a custom build command
        run: yarn build

      - name: Analyze bundle
        run: npx -p nextjs-bundle-analysis report

      - name: Upload bundle
        uses: actions/upload-artifact@v2
        with:
          name: bundle
          path: .next/analyze/__bundle_analysis.json

      - name: Download base branch bundle stats
        uses: dawidd6/action-download-artifact@v2
        if: success() && github.event.number
        with:
          workflow: nextjs_bundle_analysis.yml
          branch: ${{ github.event.pull_request.base.ref }}

요렇게 워크플로우를 생성하고 pr을 보냈다. 뭔가 ci에서 통과는 하는데, 번들을 분석해 준 표같은게 나오지를 않는다. 어떻게 해야하는 것일까. 같은 팀원에게 물어보니 팀원이 말해주길 기존의 main에서 해당 워크플로우를 가지고 있지 않기 때문에 비교분석을 해줄 수 없다는 것이다. main에 워크플로우가 생성되고 다음 번에 pr을 보내면 표가 생성될 것이라고 말해주었다. 이 라이브러리를 배포한 문서에서는 그런 내용을 설명해주지를 않고 있다. 

아무튼 나는 덕분에 많은 시간을 아낄 수 있었다...

 

 

4.이미지 최적화 : 

오늘은 계속 이미지 최적화를 위한 전략을 찾아보고 도중에 글도 쓰면서 작업을 병행했다. 알고보니 넥스트js에서는 외부에서 불러오는 이미지도 캐싱을 진행해주고 있었다. ./next/cache/images 폴더에 들어가면 캐싱되어 있는 이미지들을 확인할 수 있다. 

내가 페이지에 새로 접속했을 때, 캐싱되어있는 이미지들이 불러와지고 있었다. (from memory)라고 네트워크 탭에서 나온다. 

그런데 다른 곳에서 다시 페이지를 새로고침해봤는데, 이번에는 from disk cache라고 나오는 것이다. 메모리와 디스크 캐시는 어떤 차이가 있는 것일까? 

https://stackoverflow.com/questions/44596937/chrome-memory-cache-vs-disk-cache

Chrome memory cache vs disk cache

이 자료를 통해 이해에 도움을 얻을 수 있었다. 메모리 캐시는 말그래도 ram에 저장되어있는 캐시를 말한다. 때문에 브라우저가 실행되는 동안에만 저장되어있다. 그래서 브라우저를 새로고침했을 때는 메모리에서 불어오기 때문에 from memory cache라고 적혀있다. 그런데, 브라우저를 닫는 경우에는 from disk cache라고 나온다. 브라우저의 메모리 캐시가 비어있기 때문에 디스크로부터 가져오는 것이다. 

확실히 실험을 해보니 이게 맞는 것 같다. 처음 탭을 띄운 다음에 화면을 열면 이렇게 disk cache로부터 이미지를 가져온다. 

disk cache

그리고 한번 더 새로고침을 하면 메모리로 부터 캐싱되어 있는 이미지를 가져온다. 

memory cache

흠... 근데 아직 이게 내가 제대로 캐싱을 해주고 있는 것인지에 대한 확신이 없다. 넥스트js에서 다 지원을 해주니까, 내가 뭘해야하는지를 모르겠다. 

 

우선 예전에 진행하던 플레이스 홀더 작업을 마저 해주기로 했다. 

plaiceholder를 설치하고 작업을 시작했다. 

 

 

작업 도중 요런 에러를 만났다. 

YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 4190, column 24:
    "chevrotain@npm:^9.1.0":
                           ^
    "chevrotain@npm:^9.1.0":
                           ^
    at $2 (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:13:795)
    at gt (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:13:897)
    at Wpe (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:20:1609)
    at of (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:20:4422)
    at _pe (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:20:6569)
    at eH (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:21:260)
    at rH (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:21:472)
    at $pe (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:21:741)
    at Ude (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:390:142)
    at Qi (/Users/noyechan/Desktop/RECOEN/.yarn/releases/yarn-3.2.4.cjs:390:490)

그냥 yarn install을 한번더 실행해주니까 곧 바로 해결되었다. 

 

 

다시 yarn dev를 실행해보니, 이번에는 

Module not found: Can't resolve 'child_process'

이런 에러가 나타났다. 해당 에러는 내가 런타임 중에 plaiceholder를 실행해서 그렇다. 브라우저 상에서 실행되는 자바스크립트로는 운영체제 상에서 요구되는 기능을 사용할 수 없다. 그래서 노드js 환경에서 해당 라이브러리가 사용되어야 한다. 이것을 위해서 나는 api 파일에 이렇게 블러로 가공해주는 라이브러리를 사용하기로 했다. 런타임 환경에서는 서버쪽으로 이미지를 블러로 가공해달라는 요청을 보내서 받고, 그리고 블러로 가공된 이미지를 받아서 이것을 데이터 베이스에 같이 올리는 것이다. 

 

 

 

5.타입스크립트가 제대로 작동을 안함 : 

무슨 일인지 모르겠다만, yarn berry로 마이그레이션 하고 난 이후 타입스크립트가 작동을 안하는 것 같다. 타입을 다르게 적어줬는데도, 에러가 발동하지 않는다. 

 

 

 

6.생활코딩 깃헙 액션 강의 듣기 : 

액션은 컴퓨터를 빌려준다. 액션을 처음부터 끝까지 만들면 힘드니까, 템플릿들이 제공된다. 

액션은 이벤트 기반으로 이루어진다. 이벤트 타입에는 push, 풀리퀘스트. 복수의 이벤트를 사용할 때는 []를 사용하면 된다. runs-on은 동작할 컴퓨터가 무엇인지를 설정해준다. 특정 액션이 발생했을 때, 깃허브에서 컴퓨터를 빌려준다. 

uses : 다른 사람이 만든 액션을 실행하고 싶을 때 uses를 사용한다. 마켓 플레이스에 많은 사람들이 만들어둔 액션들을 만들어두었다. 

env는 환경 변수를 주입할 때 사용한다. 

${{}} -> 이런 식의 문법을 사용한다. 

 

 

 

https://github.com/sdras/awesome-actions

GitHub - sdras/awesome-actions: A curated list of awesome actions to use on GitHub

https://gist.github.com/br3ndonland/f9c753eb27381f97336aa21b8d932be6

Getting the Gist of GitHub Actions