πŸ› μ—λŸ¬(이슈) 및 ν•΄κ²° 방법 - KIMSEUNGGYU/blog GitHub Wiki

일반적으둜 λ°œμƒν•œ μ—λŸ¬μ™€ ν•΄κ²° 방법을 μ„œμˆ  λ˜λŠ” μ°Έκ³ ν•œ 링크λ₯Ό μ²¨λΆ€ν•˜κ³ μž 함.

πŸ› react-notion-x 의 notion-client API jest ν…ŒμŠ€νŠΈ μ—λŸ¬

  • react-notion-x λ₯Ό μ΄μš©ν•˜μ—¬ notion-page 의 데이터λ₯Ό λ Œλ”λ§ν•˜λŠ”λ° 이λ₯Ό μœ„ν•΄ notion-client λ₯Ό μ‚¬μš©ν•΄μ•Όν•¨.
  • notion-client λ₯Ό jest λ₯Ό μ΄μš©ν•΄ ν…ŒμŠ€νŠΈ ν•˜λ €κ³  ν•˜λ‹ˆ 였λ₯˜κ°€ λ°œμƒ
  • 였λ₯˜ λ‚΄μš©μ€ react-notion-x λŠ” ESM 만 μ§€μ›ν•˜κΈ° λ•Œλ¬Έμ— jest μ—μ„œ ESM 을 μ§€μ›ν•˜λ„λ‘ ν•΄μ•Όν•œλ‹€κ³  함.
  • κ·Έλž˜μ„œ jest μ—μ„œ ESM μ§€μ›ν•˜λ„λ‘ μ„€μ •ν•΄μ„œ ν•΄κ²°

πŸ› Window 10 OS, WSL ν™˜κ²½μ—μ„œ Cypress μ‹€ν–‰λ˜μ§€ μ•ŠλŠ” 이슈 λ°œμƒ

  • ν•„μžλŠ” window 10 os ν™˜κ²½ 및 WSL ν™˜κ²½μ„ μ‚¬μš©ν•˜κ³  있음. cypress λ₯Ό open ν•˜κ³ μž ν–ˆλŠ”λ° μ‹€ν–‰λ˜μ§€ μ•ŠλŠ” 이슈 λ°œμƒ (MAC 은 정상 μž‘λ™ 됨)
  • 원인은 WSL ν™˜κ²½(ubuntu) μ—μ„œ GUI λ₯Ό μ‹€ν–‰μ‹œν‚€κΈ° μœ„ν•΄ ν•„μš”ν•œ 섀정을 ν•˜μ§€ μ•ŠλŠ” κ²ƒμœΌλ‘œ νŒŒμ•… (cypress open ν•˜λ©΄ μƒˆλ‘œμš΄ ν™˜κ²½μ΄ GUI 둜 λ‚˜μ˜€λŠ”λ° cypress 와 WSL 톡신 이슈) / (WSL GUI ν…ŒμŠ€νŠΈ 문제?)
  • μ—¬λŸ¬ ν¬μŠ€νŠΈλ“€μ„ μ°Έκ³ ν•˜μ—¬ ν•΄κ²°
  • ν•„μžκ°€ κΈ°μ–΅ν•˜λŠ” 핡심 λ‚΄μš©
    1. WSL μ—μ„œ GUI λ₯Ό μœ„ν•œ νŒ¨ν‚€μ§€ μ„€μΉ˜ν•˜κ³ , μœˆλ„μš° ν™˜κ²½μ—μ„œ VcXsrv λ₯Ό μ„€μΉ˜ ν›„ λ‹€μš΄ λ°›κ³ , λ§ˆμ§€λ§‰ μ‹€ν–‰ 전에 -ac μ˜΅μ…˜ μˆ˜ν–‰
    2. zsh λ₯Ό μ‚¬μš©ν•˜λŠ”λ° display 값을 μ μš©ν•΄μ•Όν•΄μ„œ zsh μ„€μ •ν–ˆμŒ
source ~/powerlevel10k/powerlevel10k.zsh-theme

# ...

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
export PATH=~/bin:$PATH

## μ•„λ§ˆ 이 뢀뢄이 핡심!!
# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY="$(~/bin/getdisplay.sh 'VPN Interface' 'Default Interface')"
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0

# tip 으둜 zsh μ—…λ°μ΄νŠΈ ν›„ μ μš©ν•˜λ €λ©΄ 
exec zsh

πŸ› cypress 와 jest type 좩돌 이슈

  • ν˜„ ν”„λ‘œμ νŠΈμ—λŠ” jest 와 cypress λ₯Ό μ΄μš©ν•˜μ—¬ ν…ŒμŠ€νŠΈλ₯Ό μˆ˜ν–‰ν•˜λŠ”λ° cypress κΈ€λ‘œλ²Œ type 으둜 인해 jest 의 νƒ€μž…μ„ μ œλŒ€λ‘œ 읽지 λͺ»ν•˜λŠ” μ΄μŠˆκ°€ μžˆμ—ˆλ‹€. (그둜 인해 μžλ™ 완성도 μ•ˆλ˜μ—ˆλ‹€ γ… γ… )
  • μ΄μŠˆμ— κ΄€λ ¨ν•˜μ—¬ μ°Ύμ•„λ³Έ κ²°κ³Ό tsconfig μ†μ„±μœΌλ‘œ cypress κ΄€λ ¨λœ 것을 exclude ν•¨μœΌλ‘œμ„œ ν•΄κ²°ν•  수 μžˆμ—ˆλ‹€.
    (exclude: ["cypress", "cypress.config.ts"]) μ‹€μ œ 적용 λΆ€λΆ„ μ°Έκ³ 

πŸ› nextjs pages 폴더 μ•ˆμ— test μ½”λ“œ μž‘μ„±μ‹œ λ°œμƒν•˜λŠ” 이슈

  • nextjs 의 pages 의 page νŒŒμΌμ„ ν…ŒμŠ€νŠΈν•˜κ³ μž ν–ˆλŠ”λ° λΉŒλ“œμ‹œ μ—λŸ¬κ°€ λ°œμƒν–ˆλ‹€.
  • ν•΄λ‹Ή μ—λŸ¬λ₯Ό μ•Œμ•„λ³Έ κ²°κ³Ό pages 폴더 μ•ˆμ— μžˆλŠ” νŒŒμΌμ€ λΉŒλ“œ νƒ€μž„μ— ν¬ν•¨λ˜μ–΄ νŽ˜μ΄μ§€ 경둜둜 κ°„μ£Όλ˜κΈ° λ•Œλ¬Έμ— λ°œμƒν•œ μ΄μŠˆμ˜€λ‹€. 즉, ν…ŒμŠ€νŠΈ μ½”λ“œ νŒŒμΌμ„ νŽ˜μ΄μ§€ 파일둜 μΈμ§€ν•˜κ³  λΉŒλ“œν•˜μ—¬ λ°œμƒν•œ 이슈! 이λ₯Ό ν•΄κ²°ν•  방법은 2가지가 μžˆλŠ”λ°
  1. ν…ŒμŠ€νŠΈ νŒŒμΌμ„ pages 디렉터리 μ™ΈλΆ€λ‘œ 이동
  2. pageExtenstions λ₯Ό μ„€μ •ν•˜μ—¬ νŽ˜μ΄μ§€ 파일 지정.
    ν•„μžλŠ” 2번의 경우λ₯Ό μ μš©ν–ˆλ‹€.