Skip to content

Instantly share code, notes, and snippets.

@swcho
Last active January 14, 2024 02:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save swcho/97233d005918e7b89e8a77a0bf9418ee to your computer and use it in GitHub Desktop.
Save swcho/97233d005918e7b89e8a77a0bf9418ee to your computer and use it in GitHub Desktop.
[20-03-4주] 지극히 주관적인 devlog

개발일반

이미지를 latex로 변환, 수학 공식 이미지를 latex로 변환하면 md 파일 등에서 수학 공식 입력 가능

What you should know before designing dashboard

  1. Who are your users?
  2. What type of business problem you are trying to solve?
  3. What type of decision needs to be made looking at your dashboard?
  4. How do data need to be visualised?

Clear, Meaningful, Consistent, Simple

  1. Hierarchy: 데이터의 계층을 나누어 보여준다.
  2. Simplicity: 복잡한 정보를 이해가능한 간단한 형식으로 보여준다.
  3. Consistency: 일관된 layout을 가진다.
  4. Proximity: 관련있는 정보를 가까이 배치한다.
  5. Alignment: 시각적으로 align 되고 balance가 맞도록 한다.
  6. Whitespace: 빈공간을 적절히 배치한다.
  7. Color: 효과적인 색생 배열을 사용한다.
  8. Font: 표준 폰트를 사용한다.
  9. Number Formats: 필요한 만큼의 숫자를 보여준다.
  10. Labels: 필요한 정보만 표시.
  • What are you testing?
  • What should it do?
  • What is the actual output?
  • What is the expected output?
  • How can the test be reproduced?

깃 실수 1: 마지막 커밋에 깜박하고 변경을 추가하지 않았을 때 깃 실수 2: 로컬 마스터에 변경을 커밋했을 때 깃 실수 3: 파일이나 디렉터리를 버렸을 때 깃 실수 4: 실수로 분기를 삭제했을 때 깃 실수 5: git push로 원격 분기를 손상시켰을 때 깃 실수 6: 공개 리포지토리에 비공개 정보를 커밋해버렸을 때

Front end

Error recovery가 가능한 websocket library

react hooks 모음

typescript로 react를 개발할 때, 적용할만한 best practice guide

Intersection observer를 활용한 sticky menu 구현 아이디어

다양한 텍스트 효과

npm v1

Dependency hell 해결

npm v3

Flattened dependency 관리로 깊어지는 서브 디렉터리 문제 해결

yarn

캐쉬를 통해 Offline CI 에서 install이 동작하도록 함. 해킹 방지, 속도 향상

Pnpm

패키지를 node_modules에 복사하지 않고 hard link를 통해 디스크 크기 및 설치 속도 감소

Workspace

monorepo 지원

PnP

.pnp.js 파일에 패키지 상대경로 기술 .yarn 폴더에 postinstall 스크립트까지 수행된 패키지들을 저장, node-sasspostinstall 스크립트를 통해 node js 버전에 따른 빌드를 수행함.

package-preview - npm

The Future

npm 8 에서는 fs 모듈을 재작성함.

  • npm install을 사용하지 않아도 됨. 재작성된 fs를 통해 패키지를 cache로 부터 가져오고 필요할 경우 다운로드 함.
  • TypeScript, JSX 등을 인식함
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment