Skip to content
@Kelog-io

Kelog-io

README.md

"Kelog" :: VELOG CLONE CODING

Introduction of Project

  • 배포 μ‚¬μ΄νŠΈ
  • 2022.08.20 ~
  • FE[ReactJS] : κΉ€μ£Όν˜•, λ‚˜μœ μ§„ / BE[Spring] : λ…Έμš°μ—΄, κΉ€ν›ˆ, μ‘°μ›μ˜

μ£Όμš” κΈ°λŠ₯ κ΅¬ν˜„

πŸ’» FE

  • Infinite Scroll
  • Login/SignUp
  • Post CRUD
  • Post Likes
  • Comment CRUD
  • Image Upload
  • Image Resizing
  • Dark&Light Modes
  • Shared Url
  • CloundFront & S3 배포

πŸ’» BE

  • paging
  • JWT-Token
  • Git-Action
  • POST CRUD
  • COMMENT CRUD
  • LIKE
  • XSS Filter
  • ExceptionHandler
  • Spring Data JPA

μ£Όμš” κΈ°λŠ₯ μ„€λͺ…

πŸ’» FE

1. Image Resizing

  • browser-image-compression νŒ¨ν‚€μ§€ μ‚¬μš©ν•œ 이미지 μš©λŸ‰ μ••μΆ•
    • 2021λ…„ 8μ›” νŒ¨ν‚€μ§€κ°€ λ‚˜μ˜¨ μ΄ν›„λ‘œ (μ•½ μ£Ό 48,000회) 2022λ…„ 8μ›” ν˜„μž¬(μ•½ μ£Ό 75,000회) : μ‚¬μš©λŸ‰ 계속적인 증가
    • μžλ°”μŠ€ν¬λ¦½νŠΈ 기반으둜 된 이미지 μ••μΆ• 라이브러리
    • λ¬Έμ„œ κ°„κ²°, API μ‚¬μš©λ²• 직관적
    • 계속적인 버전 릴리즈 μ—…λ°μ΄νŠΈ
  • 이미지 μ‚¬μ΄μ¦ˆ μ€„μž„μœΌλ‘œμ„œ μ„œλ²„ λΆ€λ‹΄ μ΅œμ†Œν™” λͺ©μ 
  • λ„€νŠΈμ›Œν¬ λΉ„μš© νš¨μœ¨ν™”
  • 데이터 λ‘œλ”© 속도 κ³ λ €
  • μ‹€μ œ 이미지 μ‚¬μ΄μ¦ˆ 쀄인 사둀

πŸ’» BE

1. paging

  • μ‚¬μš© 이유 : ν”„λ‘ νŠΈμ—μ„œ μš”κ΅¬ν•˜λŠ” infinite scrolling κΈ°λŠ₯을 μœ„ν•΄ μ‚¬μš©ν•¨
  • κΈ°λŠ₯ μ„€λͺ… : μ„€μ •ν•œ ν•œνŽ˜μ΄μ§€μ— λ“€μ–΄κ°ˆ μ •λ³΄λŸ‰κ³Ό μ›ν•˜λŠ” νŽ˜μ΄μ§€λ₯Ό 받을 수 있게 함

2. JWT-Token

  • μ‚¬μš© 이유 : μ‚¬μš©μžμ˜ 인증과 μΈμ¦μƒνƒœ μœ μ§€λ₯Ό μœ„ν•΄ μ‚¬μš©ν•˜λ©°, 토큰을 톡해 μ‚¬μš©μžμ˜ 정보λ₯Ό μ–»κΈ°μœ„ν•΄ μ‚¬μš©ν•¨
  • κΈ°λŠ₯ μ„€λͺ… : 토큰을 톡해 μ‚¬μš©μžμ˜ μΈμ¦μƒνƒœλ₯Ό ν™•μΈν•˜κ³ , 토큰을 톡해 ν˜„μž¬ μ‚¬μš©μžμ˜ 정보λ₯Ό 확인함

3. Git-Action

  • μ‚¬μš© 이유 : μ„œλ²„ μ‹€ν–‰ μƒνƒœλ₯Ό μœ μ§€ν•œ 채, μ„œλ²„μ˜ 변경사항을 μ μš©ν•˜κΈ° μœ„ν•΄ μ‚¬μš©
  • κΈ°λŠ₯ μ„€λͺ… : κΉƒν—ˆλΈŒμ—μ„œ νŒŒμΌμ„ λΉŒλ“œν•˜μ—¬, S3에 μ „μ†‘ν•˜κ³  κ·Έ νŒŒμΌμ„ CodeDeployλ₯Ό ν†΅ν•˜μ—¬ EC2 μ„œλ²„μ— μ—…λ‘œλ“œν•˜μ—¬ μ‹€ν–‰

Trouble Shooting

πŸ’» FE

  • 문제 사항 - Redux μ‚¬μš©(λŒ“κΈ€ μˆ˜μ •, μΆ”κ°€, μ‚­μ œ)ν•˜λ©΄μ„œ filter, push λ“±μ˜ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λŠ”λ° NOT A Funciton μ΄λΌλŠ” μ—λŸ¬ λ°œμƒ(λ Œλ”λ§μ΄ μ•ˆμΌμ–΄λ‚¨)
  • λ°œμƒ 이유 - 데이터λ₯Ό μ „μ†‘λ°›λŠ” κ³Όμ •μ—μ„œ λ°μ΄ν„°μ•ˆμ— 데이터가 μžˆμ–΄ 경둜 였λ₯˜λ‘œ λ‚˜νƒ€λ‚¨
  • ν•΄κ²° 방법 - μ½˜μ†”λ‘œκ·Έλ₯Ό 찍어보며 데이터 ꡬ쑰λ₯Ό 보고 경둜λ₯Ό λ‹€μ‹œ μ„€μ •ν•΄μ„œ ν•΄κ²°

πŸ’» BE

  • 문제 사항 - κ²Œμ‹œκΈ€μ„ μ‚­μ œν•˜λŠ” κ³Όμ •μ—μ„œ μ‚­μ œκ°€ μ•ˆλ˜λŠ” 였λ₯˜κ°€ λ‚˜μ˜΄.
  • λ°œμƒ 이유 - κ²Œμ‹œκΈ€κ³Ό λŒ“κΈ€μ˜ 연관관계가 λŒ“κΈ€μ—μ„œ κ²Œμ‹œκΈ€λ‘œ 단방ν–₯ 연관관계가 λ˜μžˆμ–΄μ„œ λ°œμƒν•œ 문제
  • ν•΄κ²° 방법 - κ²Œμ‹œκΈ€μ—μ„œ λŒ“κΈ€μ— @OneToMany와 mappedBy μ–΄λ…Έν…Œμ΄μ…˜μ„ μ΄μš©ν•˜μ—¬ 연관관계λ₯Ό λ§Ίμ–΄μ£Όμ–΄ 해결함.
  • 문제 사항 - @VALUE μ–΄λ…Έν…Œμ΄μ…˜μ„ μ‚¬μš©ν•˜λŠ” 도쀑 ν•΄λ‹Ή λ³€μˆ˜μ— NULL값이 λ“€μ–΄μ˜€λŠ” 것을 확인함
  • λ°œμƒ 이유 - λ‹€λ₯Έ Beanμ΄λ‚˜ Componentμ—μ„œ TokenProviderλ₯Ό new 둜 μƒμ„±ν•˜λ©΄μ„œ Bean으둜 κ΄€λ¦¬λ˜μ§€μ•Šμ•„ λ°œμƒν•œ 였λ₯˜μ˜€λ‹€,
  • ν•΄κ²° 방법 - λ‹€λ₯Έ λΆ€λΆ„μ—μ„œ ν˜ΈμΆœλ˜λŠ” 뢀뢄에 @autowiredλ₯Ό μ„ μ–Έν•˜κΈ°μ—λŠ” 양이 λ§ŽκΈ°μ— TokenProvider 내에 Value μ–΄λ…Έν…Œμ΄μ…˜μ„ μ‚¬μš©ν•˜μ§€μ•Šκ³  λ³€μˆ˜λ‘œ μ„ μ–Έν•˜μ—¬ new μƒμ„±μž λΆ€λΆ„μ—μ„œ 값을 λ°›μ•„μ˜€κ²Œν•¨
  • 문제 사항 - Gitaction κ°œλ°œμ‹œ Error Gradle Script 였λ₯˜κ°€ λ°œμƒ.
  • λ°œμƒ 이유 - Gradle 슀크립트 /home/runner/work/*/gradlew 싀행이 μ•ˆλ˜μ„œ λ°œμƒν•œ 였λ₯˜
  • ν•΄κ²° 방법 - κΆŒν•œ 문제λ₯Ό νŒŒμ•…ν•˜μ—¬ 파일 속성을 λ³€κ²½ν•˜μ—¬ μ‹€ν–‰κ°€λŠ₯ν•œ κΆŒν•œμ„ λΆ€μ—¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ μ§„ν–‰ν•˜λ©΄μ„œ λŠλ‚€μ 

πŸ’» FE

πŸ† λ‚˜μœ μ§„

  • 생각보닀 배포가 λŠ¦μ–΄μ Έμ„œ λ°±μ—”λ“œμ™€ μ„œλ²„ 연결에 μžˆμ–΄ μ—λŸ¬ 뢀뢄을 보완을 ν•˜λŠ” 것에 μžˆμ–΄ κΈ‰λ°•ν•˜κ²Œ ν•˜λŠλΌ νž˜λ“€μ—ˆλ‹€.
  • μ‹€μ œ ν˜‘μ—…μ„ λ§žμΆ”λ©΄μ„œ μ†Œν†΅μ˜ μ€‘μš”μ„±μ„ λŠλ‚„ 수 μžˆμ—ˆλ‹€. 자주 자주 μ†Œν†΅μ„ ν•΄μ„œ κΈ°λŠ₯ ν•˜λ‚˜ν•˜λ‚˜ μ™„μ„±ν•˜λŠ” 뢀뢄도 μ€‘μš”ν•˜λ‹€κ³  λŠλ‚„ 수 μžˆμ—ˆλ‹€.

πŸ† κΉ€μ£Όν˜•

  • λ¬΄ν•œ 슀크둀 κ΅¬ν˜„μ„ μ œν•œ μ‹œκ°„ 내에 μ™„λ£Œν•˜μ§€ λͺ»ν•΄ 아쉬웠닀.
  • 이번 μ£Όμ°¨μ—μ„œ λ¬΄ν•œ μŠ€ν¬λ‘€μ„ κ΅¬ν˜„ν•˜λ €κ³  μ‹œλ„ν–ˆλŠ”λ° 2일을 ν—ˆλΉ„ν–ˆλŠ”λ°λ„ κ²°κ³Όκ°€ λ‚˜μ˜€μ§€ μ•Šμ•˜λ‹€.. μ§€κΈˆλ„ 계속 κ΅¬ν˜„ 쀑인데 μ™œ μ•ˆλ˜λŠ”μ§€ λͺ¨λ₯΄κ² λ‹€. 이번 μ£Όμ°¨κ°€ λλ‚˜λ”λΌλ„ κ³„μ†ν•΄μ„œ κ΅¬ν˜„ν•΄ λ³Ό 생각이닀.
  • μœ μ§„λ‹˜κ³Ό κΉƒν—ˆλΈŒ 머지λ₯Ό ν•˜λŠ” κ³Όμ •μ—μ„œ 수 λ§Žμ€ 좩돌이 λ‚¬μ—ˆλ‹€. ν˜‘μ—…μ„ ν• λ•Œμ—λŠ” μž‘μ—…μ„ ν•˜λ©΄ ν• μˆ˜λ‘ μž‘μ—…ν•΄μ•Ό ν•  양이 λ§Žμ„μˆ˜λ‘ 머지λ₯Ό 자주자주 ν•΄μ€˜μ•Ό ν•œλ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜λ‹€.
  • λ‘œκ·ΈμΈν›„ μƒˆλ‘œκ³ μΉ¨ν•΄λ„ 데이터가 λ‚ μ•„κ°€λŠ” λ¬Έμ œκ°€ μžˆμ—ˆλŠ”λ° 둜컬 μŠ€ν† λ¦¬μ§€μ— Access-token을 μ €μž₯해두고 κ·Έ 값을 μ½μ–΄μ˜€λŠ” κ²ƒμœΌλ‘œ ν•΄κ²°ν–ˆλ‹€.

πŸ’» BE

πŸ† μ‘°μ›μ˜

  • ν…ŒμŠ€νŠΈμ½”λ“œλ₯Ό μž‘μ„±ν•΄λ³΄κ³  μ‹Άμ—ˆμœΌλ‚˜ 처음 ν•΄λ³΄λŠ” μž‘μ—…μ΄μ—ˆκ³ , ν”„λ‘ νŠΈμ™€μ˜ ν˜‘μ—…μ„ μœ„ν•œ μ‹œκ°„μ΄ ν•„μš”ν•˜λ‹€ λ³΄λ‹ˆ μž‘μ„±ν•˜μ§€ λͺ»ν•œ 뢀뢄이 아쉽닀.
  • ν”„λ‘ νŠΈμ™€ 연결에 μžˆμ–΄μ„œ Http 와 Https μ—°κ²° 두가지 λ‹€ μ΄μš©ν•΄ λ³΄κ³ μ‹Άμ—ˆμœΌλ‚˜, μ‹œκ°„μ΄ μ—†μ–΄ 해보지λͺ»ν•œ 뢀뢄이 아쉽닀.

πŸ† λ…Έμš°μ—΄

  • λŒ“κΈ€ CRUDλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±μ„ 해보고 μ‹Άμ—ˆμœΌλ‚˜ μ‹œκ°„μ΄ λΆ€μ‘±ν•΄μ„œ μž‘μ„±μ„ λͺ»ν•œ 뢀뢄이 μ•„μ‰½μŠ΅λ‹ˆλ‹€.
  • μ˜ˆμ™Έμ²˜λ¦¬ κ΄€λ ¨ν•΄μ„œ μ»€μŠ€ν…€μœΌλ‘œ 처리λ₯Ό ν•˜μ˜€λŠ”λ° λ‹€λ₯Έ λΆ€λΆ„μœΌλ‘œλ„ μ˜ˆμ™Έμ²˜λ¦¬κ°€ κ°€λŠ₯ν•˜λ‹€λŠ”κ²ƒμ„ 늦게 μ•Œμ•„μ„œ κ΅¬ν˜„μ„ λͺ»ν•΄λ³Έκ²Œ μ•„μ‰½μŠ΅λ‹ˆλ‹€.

πŸ† κΉ€ν›ˆ

  • κ²Œμ‹œλ¬Ό μΉ΄ν…Œκ³ λ¦¬ κΈ°λŠ₯에 μ‹œκ°„μ„ 많이 μ¨μ„œ κ²Œμ‹œλ¬Ό ν•„ν„°κΈ°λŠ₯,검색기λŠ₯에 μ‹œκ°„μ„ ν• μ• ν•˜μ§€λͺ»ν•œκ²Œ 아쉽닀.
  • λ‹€μŒμ—λŠ” κΌ­ μ†Œμ…œλ‘œκ·ΈμΈμ„ FE와 ν˜‘μ˜ν•˜μ—¬ κΌ­ μ μš©μ‹œν‚€κ³  μ‹Άλ‹€

Popular repositories Loading

  1. BE_kelog BE_kelog Public

    CLONE CODING ::: Velog ::: ν•­ν•΄99 7μ£Όμ°¨ 클둠코딩 ν”„λ‘œμ νŠΈ-BackEnd

    Java 3

  2. FE_kelog FE_kelog Public

    CLONE CODING ::: Velog ::: ν•­ν•΄99 7μ£Όμ°¨ 클둠코딩 ν”„λ‘œμ νŠΈ-FrontEnd

    JavaScript 2

  3. .github .github Public

Repositories

Showing 3 of 3 repositories
  • FE_kelog Public

    CLONE CODING ::: Velog ::: ν•­ν•΄99 7μ£Όμ°¨ 클둠코딩 ν”„λ‘œμ νŠΈ-FrontEnd

    Kelog-io/FE_kelog’s past year of commit activity
    JavaScript 0 2 0 2 Updated Aug 26, 2022
  • .github Public
    Kelog-io/.github’s past year of commit activity
    0 0 0 0 Updated Aug 25, 2022
  • BE_kelog Public

    CLONE CODING ::: Velog ::: ν•­ν•΄99 7μ£Όμ°¨ 클둠코딩 ν”„λ‘œμ νŠΈ-BackEnd

    Kelog-io/BE_kelog’s past year of commit activity
    Java 0 3 3 (1 issue needs help) 0 Updated Aug 25, 2022

Top languages

Loading…

Most used topics

Loading…