μ·¨ν₯λΆν° μ₯μ, μκ°κΉμ§ λ무 λ§μ κ²μ κ³ λ €νλ€κ° κ²°κ΅ κ°μ κ³³μ μ°Ύμκ°μλμ? πΆπ»ββοΈπΆπ»
μ€νλΌμΈμ ν΅ν΄ μλ‘μ΄ μ§μμ ννν΄μΌνλμ?
μ΄μ λ SSAPIN, μΈνμμ μ½κ³ λΉ λ₯΄κ² μ₯μλ₯Ό μ°Ύκ³ μΆμ²ν΄λ³΄μΈμ ! π
λ²μ | μ
λ°μ΄νΈ λ΄μ© |
μ λ°μ΄νΈ λ μ§ |
---|---|---|
v1.3.1 |
robot.txt, sitemap.xml μΆκ° μΉ μ κ·Όμ± κ°μ μ μνΒ utton tag aria-label μΆκ° μ€λ³΅ μ½λ μ κ±° (navigator, header, footer) |
22.11.24 |
v1.3.0 |
λ©μΈνμ΄μ§ μ½λ 리ν©ν λ§ μ€μΌλ ν€ UI μ μ© intersectionObserver API μ μ©μΌλ‘ viewμ 보μ΄μ§ μλ μ»΄ν¬λνΈ λ°μ΄ν° μμ² x μ§λμ°ΎκΈ° μ€μΌλ ν€ UI μ μ© λͺ¨μ¬μ§λ μ₯μ μμ μ κΈ°μ‘΄μ μ₯μκ° μ§λμμ 보μ΄λ λ²κ·Έ 맡λνΉμ μ₯μκ° λ§μ΄ μ°ν μ§λμμ΄ μλλΌ μ°μ΄ λ§μ΄ λ μ§λ μμΌλ‘ λ³κ²½ |
22.11.20 |
v1.2.0 |
μΉ μ κ·Όμ± κ°μ νλ‘ νΈμλ λ©μΈνμ΄μ§ 리λ λ μ΄μ λ‘λ© μ»΄ν¬λνΈ video tagλ‘ λ³κ²½ λ‘κ³ width, height κ³ μ λλ€μ κΈμμ ν μΆκ° |
22.11.18 |
v1.1.0 |
λλ€μ μ€λ³΅νμΈ μ νΉμλ¬Έμκ° ν¬ν¨ λμ§ μμ μ± κ²μ¬λ₯Ό νλ νμμ ν΄κ²° μ§λμ μ°ν μ₯μμ μμΉκ° λ―ΈμΈνκ² μ€μ°¨κ° μλ λ¬Έμ μ μ ν΄κ²° μΆμ²μ§λ μΉ΄λμ μ°Έμ¬μμ λμ μ° κ°μλ‘ λ³κ²½ |
22.11.16 |
v1.0.1 |
λΆμΈκ²½ μΊ νΌμ€ μ₯μ μΆκ° μ μ§λͺ
λΆμΈκ²½μΌλ‘ μΈν΄ κ²μμ΄ λμ§ μλ λ¬Έμ ν΄κ²° μΈνΌ μΊ νΌμ€ λ§μ»€ μ€λ²λ μ΄ μμ λ° μ΄λ―Έμ§ λ³κ²½ λΉλ‘κ·ΈμΈμΌ λ μ₯μμΆκ° λ²νΌμ λλ₯΄λ©΄ λ‘κ·ΈμΈμ°½κ³Ό μ₯μμΆκ° λͺ¨λ¬μ΄ ν¨κ» λ¨λ μ΄μ μ₯μ μμ μ μ₯μ μΆκ° κΆν κ°λ₯νλλ‘ λ³κ²½ μ§λ μΆκ° λͺ¨λ¬ λ° νμ΄μ§ μ΄λͺ¨μ§ μ λ ₯λμ νκΈ μ λ ₯μ 밸리λ°μ΄μ ν΅κ³Ό μλ¬ μ§λ μ€λ²λ μ΄ κΈκΌ΄ μ§μ νλ²νΌ μ€ν¬λ‘€ μ΄λ²€νΈ (μ€ν¬λ‘€ λ΄λ¦΄λλ§ λνλ¨) λ§μ΄νμ΄μ§ μ ν¨μ± κ²μ¬ λ§μ΄νμ΄μ§ userdetailCard κΈμ¨ν¬κΈ° μκ² + μΌμͺ½μ λ ¬(pc ν¬ν¨) PlaceCard μ λͺ©μ΄ κΈΈ λ μμ λ²νΌ μ¬λΌμ§λ λ²κ·Έ μμ λΆλ§ν¬μ κ³μν΄μ mapRefetch λλ λ²κ·Έ μμ |
22.11.15 |
v1.0.0 |
ssapin.com μλΉμ€ μ€ν | 22.11.14 |
Front-end κΈ°μ μ€ν | |
Back-end κΈ°μ μ€ν |
|
Server κΈ°μ μ€ν |
|
λ°°ν¬ | π SSAPIN[μΈν] |
μ΄μ©κ°μ΄λ | βοΈ μ΄μ©κ°μ΄λ |
λ Έμ | π λ Έμ λ°λ‘κ°κΈ° |
μν€ν
μ³(Architecture) |
---|
![]() |
κ°μ²΄-κ΄κ³ λͺ¨λΈ (ERD) |
![]() |
UCC μμ | μμ° μμ |
![]() |
![]() |
ꡬκΈμ 'ssapin' κ²μ μ λνλλ νμ΄μ§
λ€μ΄λ²μ 'ssapin' κ²μ μ λνλλ νμ΄μ§
μΉ μ±λ₯ μ΅μ ν μ | μΉ μ±λ₯ μ΅μ ν ν (2022.11.24 κΈ°μ€) |
---|---|
![]() |
![]() |
-
'μ½λ λΆν (Code Splitting)' μ μ©
-
λΆνμν JS νμΌ μ κ±°
-
gif νμΌμ mp4 videoλ‘ κ΅μ²΄
-
μ΄λ―Έμ§ νμΌ μ΅μ ν
- λΈλΌμ°μ μ λ°λ₯Έ webp, png νμΌλ‘ κ΅μ²΄
μ μμ μ ν΅ν΄ Performace Score 46μ -> 77μ μΌλ‘ κ°μ , Speed Index μλ 4.6μ΄ -> 1.3μ΄λ‘ κ°μ , CLS 0.034 -> 0.004λ‘ κ°μ
κ΅¬κΈ μ λ리ν±μ€λ₯Ό μΈν νκ³ λ°°ν¬λ₯Ό ν΅ν΄ 11μ 14μΌλΆν° νμ¬κΉμ§ μ€μλΉμ€λ₯Ό μ΄μνκ³ μμ΅λλ€.
μ€μ μλΉμ€ λ°°ν¬ν 11μ 14μΌ λΆν° 11μ 18μΌκΉμ§ μ§μ€μ μΌλ‘ μ¬μ©μλ€μ΄ μ΄μ©ν΄μ£Όκ³ μμΌλ©°, νμ¬λμ§μμ μΌλ‘ μ μ§νλ©°, μ¬μ©μλ₯Ό ν보νκ³ μμ΅λλ€.
11μ 14μΌ ~ 11μ 18μΌλμ μ΅κ³ μΉ DAU 394 λͺ , WAU 773λͺ μ κΈ°λ‘νμμ΅λλ€.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
μ μ§μ°(νμ₯) (Front-end & Back-end) |
λ¨μμ΄ (Front-end) |
μμλΉ (Front-end) |
λ°μ§μ (Back-end) |
μ΄νκ· (Back-end) |
νμ€ (Back-end) |
μ΄λ¦ | μν | κ°λ° λ΄μ© |
---|---|---|
μ μ§μ° | Back-end Front-end νμ₯ |
Back-end - Place API μμ± - Junitμ μ΄μ©ν ν μ€νΈ μ½λ μμ± Front-end - storybookμ νμ©ν UIμ»΄ν¬λνΈ ν μ€νΈ - emoji-picker-reactλ₯Ό μ¬μ©νμ¬ μ΄λͺ¨μ§ ν€λ³΄λ μ μ© - Recoil, React-Queryλ₯Ό μ΄μ©ν μνκ΄λ¦¬ - βEmotionβμ μ΄μ©ν CSS-in-JS λ°©μμΌλ‘ μ€νμΌλ§ ꡬν - μ κ·μμ μ¬μ©νμ¬ input validation μ μ΄ - μ₯μ λ±λ‘ κΈ°λ₯ μ°κ²° - 리뷰 μμ± κΈ°λ₯ μ°κ²° - μ₯μ,μ§λ μ° κΈ°λ₯ μ°κ²° - μμ΄μ΄νλ μ λ° νλ‘ν νμ μ€κ³ (λ°μν) - λͺ¨λ°μΌ, PC λ°μν μΉ λμμΈ CICD - Jenkins, Dockerλ₯Ό ν΅ν μλλ°°ν¬νκ²½ κ΅¬μΆ |
λ¨μμ΄ | Front-end | Front-end - μλΉμ€ λ©μΈ ν νμ΄μ§ - kakaomap API νμ© μ§λ κΈ°λ₯ Β - μλΉμ€ λͺ¨μ¬μ§λ, μΆμ²μ§λ λ λλ§ Β - μΉ΄μΉ΄μ€ μ§λ κ²μ κΈ°λ₯ λ° μ₯μ μΆκ° Β - ν λ° μ€λ²λ μ΄ μ»€μ€ν μ μ - μ§λ λ° μ₯μ μΉ΄μΉ΄μ€ν‘ 곡μ - μΉ΄μΉ΄μ€ν‘ λ‘κ·ΈμΈ κΈ°λ₯ - 404 Not Found νμ΄μ§ - 'Recoil', 'React-Query'λ₯Ό μ΄μ©ν μν κ΄λ¦¬ - βEmotionβμ μ΄μ©ν CSS-in-JS λ°©μμΌλ‘ μ€νμΌλ§ ꡬν - κ²μ μμ§ μ΅μ ν(SEO) μμ (Lighthouse κΈ°μ€, SEO Score 100μ λ¬μ±) - μΉ μ±λ₯ μ΅μ ν μμ (Performance Score 46μ β 80μ μΌλ‘ κ°μ , Speed Index μλ 4.6μ΄ β 1.3μ΄λ‘ κ°μ ) - storybookμ ν΅ν UI ν μ€νΈ |
μμλΉ | Front-end | Front-end - λ²νΌ μ»΄ν¬λνΈ μμ± - λ§μ΄νμ΄μ§ λ μ΄μμ λ° κΈ°λ₯ μ°κ²° - λ‘κ³ λ° λ‘λ© λμμΈ |
λ°μ§μ | Back-end | Back-end - DB μ€κ³ - Map, TogetherMap API μμ± Front-end - μΉ΄λ/κΈ°ν μ»΄ν¬λνΈ μμ± - λ©μΈνμ΄μ§/μ§λκ²μνμ΄μ§ λ μ΄μμ λ° κΈ°λ₯ μ°κ²° - μ₯μ μμΈ λͺ¨λ¬ κΈ°λ₯ μ°κ²° |
μ΄νκ· | Back-end | Back-end - DB μ€κ³ - User, Auth API μμ± - Server to Server μΉ΄μΉ΄μ€ λ‘κ·ΈμΈ - JWT μΈμ¦ λ°©μ ꡬν |
νμ€ | Back-end | Back-end - DB μ€κ³ - Review API μμ± - 맑μ API Junit ν μ€νΈ μ½λ μμ± - μ μ λνΉ, 맡 λνΉ λ°°μΉ μ€μΌμ€λ¬ μμ± Front-end - κΈ°ν μ»΄ν¬λνΈ μμ± - ν€λ/μ¬μ΄λλ° λ μ΄μμ μμ± - μ₯μ μμΈ λͺ¨λ¬ λ μ΄μμ μμ± - μ§λ κ²μ λͺ¨λ¬ λ μ΄μμ μμ± |
22.10.06. ~ μ΄μ κ΄λ¦¬ μ€
- μ격 μ μ₯μ 볡μ
$ git clone https://lab.ssafy.com/s07-final/S07P31A307.git
- νλ‘μ νΈ ν΄λλ‘ μ΄λ
$ cd frontend
- νμν node_modules μ€μΉ
$ yarn install
- env νμΌ μ€μ
VITE_KAKAO_API_KEY=
VITE_KAKAO_JAVASCRIPT_KEY=
VITE_BASE_URL=http://localhost:3000
VITE_BASE_SERVER_URL=http://localhost:8000
- κ°λ° μλ² μ€ν
$ yarn start
Emoji | Code | κΈ°λ₯ | Description |
---|---|---|---|
β¨ | :sparkles: |
Feat | μ κΈ°λ₯ |
β»οΈ | :recycle: |
Refactor | μ½λ 리ν©ν λ§ |
π§ | :wrench: |
Chore | 리μμ€ μμ /μμ |
π | :bug: |
Fix | λ²κ·Έ μμ |
π | :memo: |
Docs | λ¬Έμ μΆκ°/μμ |
π | :lipstick: |
Style | UI/μ€νμΌ νμΌ μΆκ°/μμ |
π | :tada: |
Init | νλ‘μ νΈ μμ / Init |
β | :white_check_mark: |
Test | ν μ€νΈ μΆκ°/μμ |
βͺ | :rewind: |
Rewind | λ³κ²½ μ¬ν λλ리기 |
π | :twisted_rightwards_arrows: |
Merge | λΈλμΉ ν©λ³ |
π | :card_file_box: |
DB | λ°μ΄ν°λ² μ΄μ€ κ΄λ ¨ μμ |
π‘ | :bulb: |
Comment | μ£Όμ μΆκ°/μμ |
π | :rocket: |
Deploy | λ°°ν¬ |