Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KDT0_ChoiJeeHoon 운전자 보험 고객 사진 및 정보 관리 서비스, Zero Car (영 차!) #54

Open
wants to merge 220 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
220 commits
Select commit Hold shift + click to select a range
c710123
Env: Setting prettier for Code Review
JitHoon Aug 11, 2023
89c94a3
Env: npm init, Install webpack, webpack-cli
JitHoon Aug 11, 2023
2606513
Env: Install Babel
JitHoon Aug 11, 2023
a735fa3
Env: Setting runtime for async await syntext
JitHoon Aug 11, 2023
82152ee
Env: Setting runtime for use async await in global
JitHoon Aug 11, 2023
bd5348d
Env: Setting webpack and babel for js
JitHoon Aug 11, 2023
5edf20c
Env: Install firebase ans Set firebase app
JitHoon Aug 11, 2023
4e14055
Env: Setting webpack and Install sass for use scss
JitHoon Aug 11, 2023
dc87c10
Env: Setting .gitignore
JitHoon Aug 11, 2023
a6690aa
Env: Link and Script css, js
JitHoon Aug 11, 2023
146b234
Add title, favicon
JitHoon Aug 11, 2023
e5ede43
Env: Reset css
JitHoon Aug 11, 2023
4e77123
Design: Change Brand Icon
JitHoon Aug 13, 2023
5db0145
Env: ignore .DS_Store
JitHoon Aug 13, 2023
18029a6
Feat: Loading Auth Page
JitHoon Aug 13, 2023
856ebcf
Design: Setting design variables
JitHoon Aug 13, 2023
9299c4b
Design: Setting common styles
JitHoon Aug 13, 2023
207c91d
Design: Style Loading Auth Page
JitHoon Aug 13, 2023
1b7202e
Rename: Rename loadAuth to loadAdminLogin
JitHoon Aug 13, 2023
c012833
Feat: Add admin login form
JitHoon Aug 14, 2023
3304037
Env: Install dotenv-webpack and Set .env for login
JitHoon Aug 14, 2023
ee4078d
Feat: Check admin login ID and PW
JitHoon Aug 14, 2023
d2b0bfe
Design: Add colors variables
JitHoon Aug 14, 2023
278ebc7
Design: Display none all scrollbar
JitHoon Aug 14, 2023
322a34d
Env: Remove process
JitHoon Aug 14, 2023
9dd090c
Env: Add attribute defer in script
JitHoon Aug 14, 2023
1c9db8f
Design: Add alert color variable
JitHoon Aug 14, 2023
0738c90
Design: Style admin login page
JitHoon Aug 14, 2023
271095c
Refactor: Delete element parameter
JitHoon Aug 14, 2023
85390ac
Rename: Rename load admin login to load
JitHoon Aug 14, 2023
13496d7
Style: Remove load-loge and Rename loadAd to load
JitHoon Aug 14, 2023
8161d6d
Feat: Add load page in driverList
JitHoon Aug 14, 2023
1f578d3
Feat: Setting driver list layout
JitHoon Aug 16, 2023
9a71a99
Feat: Get driver list from firestore and Render
JitHoon Aug 16, 2023
9dc51aa
Feat: Add click event on add driver button
JitHoon Aug 16, 2023
f41bb63
Feat: Import driver list page components
JitHoon Aug 16, 2023
6d44088
Design: Styling driverList page
JitHoon Aug 16, 2023
1ea0d8a
Env: Setting firebase app, db, storage
JitHoon Aug 16, 2023
26b0338
Feat: Setting url page after check admin submit
JitHoon Aug 16, 2023
4cd33fd
Feat: Change title
JitHoon Aug 16, 2023
cf30abb
Design: Add body color and input common style
JitHoon Aug 16, 2023
9ce349e
Feat: Setting addDriver page Layout
JitHoon Aug 16, 2023
eb274c9
Feat: Add driver data to firestore
JitHoon Aug 16, 2023
6fa0f9d
Feat: Get driver data from input value
JitHoon Aug 16, 2023
23aab11
Feat: Create driver Mock Data that aren't in input
JitHoon Aug 16, 2023
99c5a44
Feat: Add driver Img to storage and Link firestore
JitHoon Aug 16, 2023
fc284cb
Feat: Import addDriverData components
JitHoon Aug 16, 2023
41d5e7a
Design: Styling addDriver page
JitHoon Aug 16, 2023
5e99ede
Rename: Rename scss file components to screens
JitHoon Aug 16, 2023
2992c36
Env: Import driverProfile page components
JitHoon Aug 17, 2023
16ec543
Feat: Setting driverProfile page Layout
JitHoon Aug 17, 2023
e12d35a
Feat: Get driverProfile data from firestore
JitHoon Aug 17, 2023
4d8e26d
Feat: Click editDriver Btn
JitHoon Aug 17, 2023
16a03af
Feat: Post editDriver Data to firebase and storage
JitHoon Aug 17, 2023
9fde5c3
Feat: Post editDriver to db and storage modules
JitHoon Aug 17, 2023
b2b9df0
Feat: Click BackBtn
JitHoon Aug 17, 2023
d0d8678
Feat: Update db imgUrl
JitHoon Aug 17, 2023
6f5748c
Design: Add driverProfile Styles
JitHoon Aug 17, 2023
32e819a
Feat: Setting confirm page Layout
JitHoon Aug 17, 2023
031bc31
Env: Import confirm page components
JitHoon Aug 17, 2023
f054c22
Feat: Get accidentProfile from db and render
JitHoon Aug 17, 2023
9d49a28
Feat: Setting new fields for accidentProfile data
JitHoon Aug 17, 2023
fe6c7ff
Feat: Click confirm btn
JitHoon Aug 17, 2023
220fd9a
Env: Ignore assets file
JitHoon Aug 17, 2023
c17e9ee
Design: Styling confirm page
JitHoon Aug 17, 2023
a3749e9
Refactor: Separate common input type file style
JitHoon Aug 17, 2023
0928739
Design: Add fadeIAni Mixin
JitHoon Aug 17, 2023
84d4482
Rename: Change common file to htmlTag
JitHoon Aug 17, 2023
fbb49d7
Refactor: Edit tablet breakpoin width
JitHoon Aug 17, 2023
e4eaa40
Env: Import All styles in compile file
JitHoon Aug 17, 2023
8e3ce3a
Env: Setting entry file for each pages
JitHoon Aug 17, 2023
d51ec8a
Feat: Delete driver doc in firebase
JitHoon Aug 18, 2023
dabcb8b
Feat: Setting basic Img for deleteDriver user flow
JitHoon Aug 18, 2023
89ad595
Feat: Click checkbax btn
JitHoon Aug 18, 2023
714a695
Env: Import driverList component
JitHoon Aug 18, 2023
4e303fb
Design: Seperate viewport mixin
JitHoon Aug 18, 2023
ccaba69
Design: Import vierport mixin
JitHoon Aug 18, 2023
6b08d29
Refactor: Edit some text in layout
JitHoon Aug 18, 2023
eada9fc
Design: Seperate viewport mixin
JitHoon Aug 18, 2023
e005e31
Design: Styling basic img
JitHoon Aug 18, 2023
154aa48
Design: Styling checkbox
JitHoon Aug 18, 2023
20c3f6f
Design: Edit driver list height for responsive
JitHoon Aug 18, 2023
7ca1eed
Feat: Reject not a number birthday data
JitHoon Aug 18, 2023
7c3985d
Rename: Rename confirm page to confirmAccident
JitHoon Aug 18, 2023
6388034
Rename: Rename confirmAccident
JitHoon Aug 18, 2023
02a28cd
Refactor: Edit confirn Btn text
JitHoon Aug 18, 2023
178cb4f
Feat: Click confirm accident btn
JitHoon Aug 18, 2023
a7bd586
Refactor: Add annotation
JitHoon Aug 18, 2023
c5fc82e
Feat: Search driver list
JitHoon Aug 18, 2023
ba5267d
Refactor: Add annotation
JitHoon Aug 18, 2023
87e7977
Refactor: Edit layout text
JitHoon Aug 18, 2023
b2eb239
Refactor: Import mixin first
JitHoon Aug 18, 2023
5be4f2d
Design: Styling back btn
JitHoon Aug 18, 2023
d91f074
Design: Styling title
JitHoon Aug 18, 2023
e74ae13
Design: Add color variable
JitHoon Aug 18, 2023
4edca17
Design: Styling driver list func btn
JitHoon Aug 18, 2023
f9b4475
Design: Styling title h2
JitHoon Aug 18, 2023
18e3082
Design: Styling admin form
JitHoon Aug 18, 2023
1f131ac
Design: Styling driver func btn
JitHoon Aug 18, 2023
e622952
Design: Styling driver profile
JitHoon Aug 18, 2023
326c318
Design: Styling load page for responsive
JitHoon Aug 18, 2023
e50762f
Refactor: Edit addDriver page
JitHoon Aug 18, 2023
a1fe049
Refactor: Edit driverList page
JitHoon Aug 18, 2023
8835dbb
Refactor: Edit driverProfile page
JitHoon Aug 18, 2023
9d65d5f
Design: Clean load design code
JitHoon Aug 18, 2023
89bb5e5
Public: Bundle and Compile SCSS, JS
JitHoon Aug 18, 2023
2f124aa
Doc: Reset README.md
JitHoon Aug 18, 2023
35e808f
Release: Delete pages folder
JitHoon Aug 18, 2023
cc1ebcc
Env: Set systemvars: true for netflify release
JitHoon Aug 18, 2023
04245a0
Release: link build file to html
JitHoon Aug 18, 2023
f7fee6e
Release: Change script assets to public
JitHoon Aug 18, 2023
3c7551e
Release: Add build files
JitHoon Aug 18, 2023
837a36e
Release: Add http-equiv meta tag for redirect
JitHoon Aug 18, 2023
884b9e3
Release: Add favicon.ico in HTML
JitHoon Aug 18, 2023
e3e47db
Refactor: Hide firebaseConfig using dot env
JitHoon Aug 19, 2023
860c21f
Fix: Solved click checkbox Uncaught SyntaxError
JitHoon Aug 19, 2023
809ae68
Refactor: Add Comment in clickCheckBox Component
JitHoon Aug 19, 2023
fe770e8
Troubleshooting: JS
JitHoon Aug 19, 2023
44a5e3d
Release: Setting v1.0.1 public file
JitHoon Aug 19, 2023
ff5fb6e
Troubleshooting: Solved webpack trouble
JitHoon Aug 20, 2023
9c0a0e3
Refactor: Use production mode in webpack
JitHoon Aug 20, 2023
02b6169
Troubleshooting: Solved webpack trouble
JitHoon Aug 20, 2023
56bfe78
Refactoring: Delete experiments config
JitHoon Aug 20, 2023
82ffb40
Refactoring: Use performance config in webpack
JitHoon Aug 20, 2023
1a20b7b
Feat: Add logo in load page
JitHoon Aug 20, 2023
df02231
Design: Styling load logo
JitHoon Aug 20, 2023
e5ed3df
Refactoring: Cleaning login page code
JitHoon Aug 20, 2023
3d4d8da
Env: Add load logo image
JitHoon Aug 20, 2023
b77b37a
Fixed: Change font for Browser Compatibility
JitHoon Aug 20, 2023
0ee5128
Troubleshooting: Edit some comment and link
JitHoon Aug 20, 2023
3a897ce
Release: Setting v1.0.2 public file
JitHoon Aug 20, 2023
30bddfb
Design: Move load.scss file to common style
JitHoon Aug 20, 2023
7befd06
Design: Edit logo title font-size
JitHoon Aug 20, 2023
82b90b7
Feat: Add load logo in all page and Style title
JitHoon Aug 20, 2023
d8342eb
Design: Import and Styling font
JitHoon Aug 20, 2023
8c6808e
Design: Add hover style on buttons
JitHoon Aug 20, 2023
ba3afb4
Refactor: Clean load component
JitHoon Aug 20, 2023
b1cc04d
Refactor: Make firebase folder
JitHoon Aug 20, 2023
6dbca3e
Refactor: Edit db import path
JitHoon Aug 20, 2023
f754be8
Refacor: Edit firebase components Import path
JitHoon Aug 20, 2023
e3ff091
Refactor: Add Comment in adminLogin component
JitHoon Aug 20, 2023
2b2931f
Refactor: Remove not using component in driverList
JitHoon Aug 20, 2023
2590ee0
Fix: Use removeProperty for hover style
JitHoon Aug 20, 2023
73f4509
Refactor: Clean getDriverList code
JitHoon Aug 20, 2023
4fefd5a
Refactor: Clean checkBox code
JitHoon Aug 20, 2023
656de40
Refactor: Clean getDriverList code
JitHoon Aug 20, 2023
cfad06d
Refactor: Clean clicDeleteDriver code
JitHoon Aug 20, 2023
93145b7
Refactor: Clean deleteDriver component code
JitHoon Aug 20, 2023
8987ad3
Refactor: Clean searchDriver code
JitHoon Aug 20, 2023
1c59588
Refactor: Clean clickAddDriver code
JitHoon Aug 20, 2023
9356b11
Refactor: Delete not use Import url in driverList
JitHoon Aug 20, 2023
91ce6ef
Release: Setting v1.0.3 public file
JitHoon Aug 20, 2023
5ac459c
Refactor: Clean clickBackBtn component
JitHoon Aug 20, 2023
a01a091
Design: Add hover style in submit btn
JitHoon Aug 20, 2023
7285f56
Refactor: Clean load component code
JitHoon Aug 20, 2023
26cb55c
Refactor: Seperate addDriver Modules
JitHoon Aug 20, 2023
eeb12b2
Feat: Add alert message if birth is not number
JitHoon Aug 20, 2023
3d09fd9
Refactor: Clean addDriverDoc code
JitHoon Aug 20, 2023
42e8d7e
Refactor: Clean addDriver page code
JitHoon Aug 20, 2023
145353c
Refactor: Clean addDriverDoc code
JitHoon Aug 20, 2023
e4d9cd9
Feat: Add previewDriverImg feat before upload
JitHoon Aug 20, 2023
ddfe4e3
Feat: Add show upload percent
JitHoon Aug 20, 2023
e0fd1c2
Release: Setting v1.1.0 public file
JitHoon Aug 20, 2023
800d873
Design: Edit back btn style
JitHoon Aug 21, 2023
9d4eb72
Doc: Update README.md
JitHoon Aug 21, 2023
df473fc
Doc: Update README.md
JitHoon Aug 21, 2023
cacc27e
Doc: Update README.md
JitHoon Aug 21, 2023
88357fa
Doc: Update REDMAE.md
JitHoon Aug 21, 2023
edc1086
Doc: Update README.md
JitHoon Aug 21, 2023
97ddf28
Release: Setting v1.1.1
JitHoon Aug 23, 2023
bee27ab
Doc: Update README.md
JitHoon Aug 23, 2023
1704f46
Feat: Add submit alert in driverProfile page
JitHoon Aug 23, 2023
83be4f1
Design: Make submitAlert common style
JitHoon Aug 23, 2023
d145a93
Fix: Give Width on back Btn
JitHoon Aug 23, 2023
e7d6a67
Design: Make submitAlert common style
JitHoon Aug 23, 2023
122ccdf
Design: Make submitBtn commom style
JitHoon Aug 23, 2023
6d622f9
Fix: Solved delete basic userr Img
JitHoon Aug 23, 2023
ab0adb2
Feat: Add preview Feat in driverProfile page
JitHoon Aug 23, 2023
c1c5bf2
Release: Setting public file v1.2.0
JitHoon Aug 23, 2023
964bda1
Troubleshooting: Add troubleshooting
JitHoon Aug 25, 2023
715f0e7
Refactoring: Clean load style code
JitHoon Aug 25, 2023
92f45b7
Rename: Rename authors to author
JitHoon Aug 26, 2023
2c07faf
Troubleshooting: Update troubleshooting
JitHoon Aug 26, 2023
e70f38a
Refactor: Upgrade fadeout animation performance
JitHoon Aug 26, 2023
dfd52a5
Troubleshooting: Update troubleshooting
JitHoon Aug 26, 2023
da5c55a
Doc: Update README.md
JitHoon Aug 26, 2023
12920a1
Troubleshooting: Update 구현 troubleshooting
JitHoon Aug 26, 2023
3b47849
Troubleshooting: Upload mainfest and PWA
JitHoon Aug 26, 2023
4738da8
Troubleshooting: Update meta tag 역할 정리
JitHoon Aug 26, 2023
134e494
build file ignore
JitHoon Aug 26, 2023
917c6a2
Refactor: Use function in switch case
JitHoon Aug 26, 2023
4eeb64e
Refactor: Clean search code and Upgrade Feat
JitHoon Aug 26, 2023
1186b7f
Refactor: Clean code by completeUpload function
JitHoon Aug 26, 2023
7dd1f80
Refactor: Clean Mock data 변수명
JitHoon Aug 26, 2023
d75b0c3
Fixed: Fix 이미지가 얿로드 되지않는 에러
JitHoon Aug 26, 2023
eeb1481
Refactor: Use dayjs
JitHoon Aug 26, 2023
943420d
Troubleshooting: Upload 트리쉐이킹과 export
JitHoon Aug 26, 2023
f921d6d
Refactor: Use setter
JitHoon Aug 26, 2023
d40b7ed
Refactor: Clean createDriverList code
JitHoon Aug 26, 2023
5ea301e
Doc: Update README.md
JitHoon Aug 26, 2023
bd95183
Refactor: Clean login page code
JitHoon Aug 28, 2023
3122804
Refactor: Clean login.js code
JitHoon Aug 28, 2023
8e53660
Refactor: Clean main page code
JitHoon Aug 28, 2023
11246f4
Refactor: Clean create page code
JitHoon Aug 28, 2023
74d096d
Refactor: Clean confirm page code
JitHoon Aug 28, 2023
b754e44
Refactor: Clean profile page code
JitHoon Aug 28, 2023
72b7596
Refactor: Clean create page code
JitHoon Aug 28, 2023
9343833
Refactor: Clean shared files
JitHoon Aug 28, 2023
818a662
Refactor: Clean login page code
JitHoon Aug 28, 2023
036a5b0
Refactor: Clean main page code
JitHoon Aug 28, 2023
d49e856
Refactor: Reset Rename files
JitHoon Aug 28, 2023
00f97ec
Refactor: Delete notFound page
JitHoon Aug 28, 2023
e1137aa
Refactor: Clean updateImg code
JitHoon Aug 28, 2023
3d0402d
Troubleshooting: Add Clean code troubleshooting
JitHoon Aug 28, 2023
b7ab23c
Release: Update public file to v2.0.0
JitHoon Aug 28, 2023
7195e3b
Refactor: Ignore build file
JitHoon Aug 28, 2023
74c1b6e
Refactor: Ignore build file
JitHoon Aug 28, 2023
50db3ae
Docs: Update README.md
JitHoon Aug 28, 2023
8c821a5
Release: Add Build file
JitHoon Aug 28, 2023
cc15eb7
Troubleshooting: 객체에 직접 접근하여 값을 변경하는 것을 지양해야하는 이유
JitHoon Aug 30, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.DS_Store
node_modules
assets
.env
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
README.md
18 changes: 18 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
250 changes: 238 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,240 @@
<div align="center">
<img src = "https://github.com/JitHoon/zero-car/assets/101972330/c7c34562-9610-4e30-aa25-d39e83078dd3" alt ="zero car" style="width: 200px; height: 200px"/>
</div>

# :camera: 직원 사진 관리 서비스
<br/>

<p align="center">
<a href="https://jithoon.github.io/zero-car/">
<img src="https://img.shields.io/badge/Zero Car (영차!)-navy?style=for-the-badge&logoColor=white" alt="zero car"/>
</a>
<a href="https://github.com/JitHoon/zero-car">
<img src="https://img.shields.io/badge/배포 repository-212125?style=for-the-badge&logoColor=white" alt="배포 레포"/>
</a>
<p align="center">임시 아이디 : 최지훈, 임시 비밀번호 : 777</p>
<p align="end">개발자: 최지훈(Jit Hoon)</p>
</p>

## [ Zero Car (영차!) 개요 ]
Zero Car(영차!)는 운전자 보험 고객 사진 및 정보 관리를 CRUD 할 수 있는 서비스입니다.

## [ ✨ Main Point : troubleshooting 기록]
Zero Car 프로젝트를 진행하면서 겪었던 trouble을 해결한 기록을 troubleshooting 파일에 기록해두었습니다.

<div align="center">

### Create
![create](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/ebecacb8-22f5-4b99-9127-11f93949de6b)

### Read, Update
![read-update](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/70ff918c-e8f8-43ab-b07c-2354bbc74348)

### Read, Delete
![Read-Delete](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/e659149b-b474-4192-89d0-7df3247249b2)

### 반응형 화면
![반응형](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/688200c9-8bca-4b9a-b80a-11c58cead1a0)

### 심사 화면
![심사 화면](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/a4d5e282-5a23-40bb-b503-9dc0ead81ccc)
</div>


## [ Environment ]
![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=for-the-badge&logo=Visual%20Studio%20Code&logoColor=white)![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=Git&logoColor=white)![Github](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=GitHub&logoColor=white)![Firebase](https://img.shields.io/badge/firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=white)![npm](https://img.shields.io/badge/npm-%23CB3837?style=for-the-badge&logo=npm)![webpack](https://img.shields.io/badge/webpack-8DD6F9.svg?&style=for-the-badge&logo=WEBPACK&logoColor=white)![bable](https://img.shields.io/badge/babel-F9DC3E.svg?&style=for-the-badge&logo=BABEL&logoColor=white)

> 다양한 서비스 중에 어느 것을 사용할지 결정하는 기준은 "나의 서비스의 요구 사항에 적합한가?" 이다.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

너무 중요하고 항상 생각해야 하는 말씀 같습니다. 저번 과제를 하면서 느꼈던 생각이 코드에 이유가 있어야 한다는 것 이었습니다. 그 예시를 정말 그대로 보는 것 같습니다.

또한 스터디 때도 항상 배우지만, 배운 것들을 이렇게 똑같이 구현해내는 것이야 말로 정말 엄청난 능력이자 노력이라고 생각합니다. 같은 시간을 사용해도 이러한 퀄리티를 낼 수 있다는 것에 오늘 뿐만 아니라 항상 배워갑니다

이번에 네이버에서 나온 클로바는 AI가 비행기 예약까지 해주더라고요!! 지훈님의 프론트엔드의 결과물이 이런 다양한 기술들과 함께 더 좋은 서비스를 만들어 낼 것을 믿어 의심치 않습니다. 무조건 잘 되실 거에요 👻

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

계속 저 생각을 이어가면서 작업을 한다는게 쉬운 일은 아닌 것 같아요ㅠㅠ
아직 몸에 체화가 되지 않은 문구이지만 매번 생각하면서 코딩하려고 노력하고 있습니다!

같이 많이 성장해서 함께 잘 됩시다 ~~!


<details>
<summary>나는 왜 Firebase를 선택했는가?</summary>

### [ 내 서비스 요구 사항 ]
1. 10일이라는 짧은 개발 시간
2. 간단한 CRUD 기능만 필요
3. 간단한 구조의 DB만 사용 됨
4. DB 구축 경험보다 검색, 정렬, 이미지 미리 보기 등 다양한 기능 구현 경험이 더 중요

### [ AWS와 Firebase 비교 ]

<details>
<summary>첫 째, AWS와 Firebase의 공통 기능</summary>

1. Auth (인증 기능)
2. **_Storage (저장소 기능 : 주요 사용 기능)_**
3. Push notifications (알림 보내기 기능)
5. Hosting (호스팅 기능)
6. Analytics (분석 기능)
</details>
<details>
<summary>둘 째, 앱의 프런트엔드와 통합하는 방법</summary>

**Firebase**
1. Android , iOS, Web 용 SDK(Software development kit)를 제공
- 프런트엔드 개발자는 백엔드 기술에 의존하지 않고도 쉽게 웹 개발 가능
2. REST API가 있어서 사용자가 원하는 API를 구축할 수도 있습니다.

**AWS**
1. Android, iOS, React Native에 통합하는 데 사용할 수 있는 AppSync라는 모바일 개발자에게 매우 좋은 솔루션을 제공
</details>
<details>
<summary>셋 째, AWS와 Firebase의 장점</summary>

**Firebase**
1. Cloud Firestore와 Realtime Database라는 두 가지 전용 데이터베이스 서비스를 제공
- 이 두 데이터베이스는 모두 NoSQL 데이터베이스라서 데이터베이스 설정 및 쿼리를 작성을 걱정할 필요가 없다.
- 10일 이라는 짧은 개발 기간동안 사용하기에 적합하다.

**AWS**
1. 백엔드에서 사용할 수 있는 다양한 유형의 데이터베이스를 제공
- Firebase는 오직 NoSQL 데이터베이스만 제공한다.
- 하지만 나의 서비스에서는 NoSQL DB만으로 충분하다.
2. 개발, 테스트, 앱을 위한 다양한 환경을 제공
- Firebase에서도 다양한 환경을 제공해 주지만 AWS보다 시간이 좀 더 걸린다.

</details>
<details>
<summary>넷 째. 구축과 유지 보수에 필요한 노력</summary>

**Firebase**
- Firebase 콘솔의 UI는 정말 심플하고 사용하기 매우 간단하다.
- 비교적 사용하기 쉬운 SDK를 제공해 줌으로써 많은 시간을 절약할 수 있다.

**AWS**
- AWS가 제공해 주는 서비스는 Firebase보다 10배 더 많다. Firebase와 비교하면 AWS는 약간의 학습 곡선이 있다.
- 간단한 실시간 앱을 만들 때도 필요한 API와 데이터베이스를 설정해야 합니다.
</details>

### [ 결론 ]

**Firebase (선택)**
- 쉽게 설정, 사용, 유지 보수할 수 있다.
- 간단한 앱을 개발하기에 적합하다.

**AWS**
- 크고 복잡한 앱 구축에는 많은 도움이 되지만 단순한 앱에는 과도한 활용이 될 수 있다.
- 모든 앱의 요구 사항을 충족시킬 수 있는 많은 서비스를 가지고 있어 단일 클라우드로 서비스를 구축할 수 있지만 비용이 많이 들 수 있습니다.

[참고자료](https://blog.naver.com/PostView.naver?blogId=devks0228&logNo=221835489763&parentCategoryNo=&categoryNo=27&viewDate=&isShowPopularPosts=true&from=search)
</details>


<details>
<summary>나는 왜 Firebase와 모듈 번들러인 webpack을 함께 사용했는가?</summary>

1. 트리 쉐이킹 (최종 빌드 시 사용하지 않는 코드를 삭제) 하여 개발 작업 환경 개선
- Firebase 자바스크립트 모듈식 API 버전 9 이상에서는 모듈 번들러의 최적화 기능과 연동하여 최종 빌드에 포함되는 Firebase 코드의 양을 줄이도록 최적화해준다.
- 프로젝트에서는 버전 10 사용
2. 모듈 간 충돌을 방지하여 생산성과 퍼포먼스가 뛰어난 애플리케이션를 만들기 위함.
- JS 파일이 많이 사용될 프로젝트이므로 모듈 간의 스코프가 구분이 되지 않아 발생하는 모듈 간 충돌 방지
- 실제로 페이지 별로 js 파일을 구분하여 번들링 (아래 [ 파일 구조 ] 참고)
3. 서브파티 라이브러리 관리나 CSS 전처리, 이미지 에셋 관리 등에 있어서 다른 번들러보다 강점
- 웹 애플리케이션에서 사용하는 CSS나 이미지 같은 에셋들을 JavaScript 코드로 변환하고, 이를 분석해서 번들하는 방식을 사용
- 프로젝트에서 SCSS를 사용하며 이미지 CRUD가 메인인 프로젝트이므로 webpack 사용의 필요성을 느낌
4. 오래된 만큼 생태계가 풍부하고 안전성이 뛰어남
</details>

<details>
<summary>나는 왜 Babel을 사용했는가?</summary>

1. 호환성 걱정 없이 생산성 높은 최신 문법을 사용할 수 있다.
- 개발할 때에는 최신 JavaScript 문법을 사용하되, Babel로 컴파일을 하고 난 후에는 같은 동작을 하면서 구형 브라우저 호환이 되는 JavaScript 코드로 변환시켜준다.
- 바벨은 네이티브하지 않는 외부 라이브러리나 운영 체제 서비스를 사용할 수 있도록 만들어주는 글루 코드를 제공하는 API(바인딩 기능) 이다.
2. webpack의 ES6에대한 구형 브라우저 호환성 문제 해결
- 대표적으로 webpack은 require(구문법)을 지원하지만 import(ES6)는 지원하지 않는다.
</details>

<details>
<summary>나는 왜 SPA가 아닌, MPA로 구현했는가?</summary>

### 결론
1. Zero Car 프로젝트에는 즉각적인 반응을 필요로 하는 기능이 없다.
- 주요 기능 : 보험자 추가, 보험자 삭제, 보험자 상세보기, 보험금 심사
2. Zero Car 프로젝트에는 많은 페이지를 요구하지 않는다.
- 웹 응용 프로그램에 점점 많은 페이지가 연결되면서 속도가 느려지는 이슈 때문에 SPA라는 웹 패러다임이 나타났는데, 프로젝트에는 많은 페이지를 요구하지 않는다.
3. 하지만 프로젝트 요구 사항과 상황에 맞춰 두 패러다임을 적절히 섞어 쓰는 것이 좋다고 생각한다.

### SPA (Single Page Application)
#### 개념
모던 웹의 패러다임으로, 한 개(Single)의 Page로 구성된 Application 이다.
서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

#### 작동 방식
SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드한다.
이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신한다. 기존 페이지의 내부를 수정해서 보여주는 방식이다.

#### 장점
1. 속도 및 응답시간
- 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

2. 모바일 친화적
- 모바일 앱도 SPA와 동일한 아키텍처에서 개발되므로 모바일 개발을 염두해두면 동일한 백엔드 코드를 재사용하도록 할 수 있다.

3. 효율적인 로컬 스토리지 캐시
- 한 번의 요청만 보내고 모든 데이터를 저장한 다음 이 데이터를 사용할 수 있으며 오프라인에서도 작동한다.

#### 단점
1. 초기 구동 속도
- SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.

2. SEO(검색엔진 최적화) 이슈
- 자바스크립트를 읽지 못하는 검색엔진에 대해서 크롤링이 되지않아 색인이 되지 않는 문제가 발생할 수 있다.

### MPA (Multiple Page Application)
#### 개념
기존 웹의 패러다임으로, 여러 개(Multiple)의 Page로 구성된 Application 이다.

#### 작동 방식
새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다. 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

#### 장점
1. SEO 친화적
- MPA를 사용하여 여러 페이지를 생성할 수 있기 때문에 훨씬 더 많은 수의 키워드를 타겟팅할 수 있다. 이렇게 하면 Google에서 얻을 수 있는 유기적 트래픽의 양이 자동으로 향상된다.

2. 확장성
- 다중 페이지로 원하는 만큼 페이지를 추가할 수 있다.

#### 단점
1. 페이지 이동 시 느린 속도
- 사용자가 새로운 페이지를 이동하면 전체 페이지를 다시 렌더링하기 때문이다. HTML, CSS, JS 와 같은 리소스들이 새로 고쳐져서 속도에 영향을 받는다.

2. 보안 및 유지보수
- 개발자는 모든 페이지가 안전한지 확인 해야하는데 페이지가 많아서 지속적으로 유지보수 하a는 것이 어려움
</details>

## [ Development ]
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)![SCSS](https://img.shields.io/badge/SASS-cc6699.svg?&style=for-the-badge&logo=Sass&logoColor=white)![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=Javascript&logoColor=white)

## [ User Flow ]
<div style="text-align: center;">
<img src = "https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/101972330/7f5e564e-100e-4710-a815-5e3d6f473532" alt ="user flow" />
</div>

## [ 어려웠던 점과 배운점 ]

> 1. 프로젝트에 webpack, babel, env, firebase, css 전처리 로더 세팅하기

프로젝트 환경에 필요한 다양한 외부 모듈과 개발 플랫폼들을 동시에 세팅하고 사용하는 것에 어려움을 겪었다. 예를들어 firebase와 webpack을 함께 사용하기 위해서 필요한 명령어나 과정이 따로 있거나, babel, env 설치에서 끝나는 것이 아니라 webpack에 추가 설정을 해주어야 한다는 점이 어려웠다.

하지만 공식 문서를 잘 살펴보면 다 방법이 있고 해결할 수 있었다. 프로젝트 초반부터 이 부분에 대해 어려움을 겪어서 troubleshooting 파일 최상단에 "firebase webpack babel sass 개발환경 세팅.md" 파일에 내용을 정리해 두었다.

> 2. SASS(SCSS)의 이점 살리기

프로젝트에 필요한 디자인과 스타일링이 늘어나면서 중복 되는 CSS 코드가 많아 SASS(SCSS)를 적극적으로 사용해보았다. 특히 mixin을 사용하여 반응형에 대한 반복되는 코드 작업 시간을 줄일 수 있어서 좋았다.

하지만 아직 SCSS에서 사용할 수 있는 효율적인 문법을 전부 다 알고있지 않아서 해당 프로젝트에서 SCSS의 이점을 극대화하지 못했다는 생각이 들었다. Refactoring 과정에서 이 부분을 더 공부하고 보완해 나갈 생각이다.

> 3. 파일을 활용한 코드 관리 최적화

프로젝트에 필요한 기능들이 많아지면서, 각 기능 별로 파일을 분리하는데 어려움을 겪었다.

예를들어 보험자 정보를 업데이트하는 기능 안에 input data 가져오는 기능, mock data 생성 후 가져오는 기능, image를 storage에 따로 저장하고 이미지 url을 가져오는 기능 등 다양한 기능들이 포함되어있어서 각각의 기능들을 어떤 기준으로 분리해야하고 어느 파일에 함께 보관해야하는지 어려움을 겪었다.

내가 선택한 방식은, troubleshooting/fe clean code.md 에서 확인 가능하다.

<details>
<summary>야놀자 테크 캠프 JS 과제 설명</summary>

# 직원 사진 관리 서비스

직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.

Expand All @@ -17,7 +252,7 @@
10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!

## [필수 요구사항]
- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
- 프로필 페이지를 개발하세요.
- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
Expand All @@ -37,13 +272,4 @@
- infinity scroll 기능을 추가해 보세요.
- 사진을 편집할 수 있는 기능을 추가해 보세요.
- LocalStorage 사용

## [화면 예시]
![Untitled (1)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/5dda6755-2501-4af4-bc3e-b63a353c44c2)

![Untitled (2)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/6c1805f1-2b00-453e-a729-2b483612726d)

## [흐름]
![Untitled](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/e2934c05-26f6-4ef6-88d4-beed76aa007a)


</details>
Binary file added favicon.ico
Binary file not shown.
44 changes: 44 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html style="font-size: 1.1vw" lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Permissions-Policy" content="interest-cohort=()" />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어떤 역할의 메타 태그인가요?! 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

머릿속에만 있는 내용들을 막상 꺼내려하니 어렵네요 ㅠㅠ 질문 감사드립니다!
트러블슈팅에도 추가하였습니다.

meta tag 역할 정리

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    html 파일의 텍스트와 같은 정보들을 인코딩해주는 역할의 태그입니다. 한국이 아닌 나라에서 사이트 접속 시 정보들이 깨지지 않고 잘 인코딩되도록 해주기 위함입니다.

  2. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    IE는 호환성 보기 모드가 존재하는데, 사용자가 지원하는 브라우저에 따라 오래된 브라우저에서 정상적으로 출력되지 않는 이슈가 발생할 수 있습니다. 이에 모든 IE 버전의 브라우저에 호환성 보기를 무시해주는 태그입니다.

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    사용자의 viewport에 따라 웹 서비스를 보여주기 위해 사용하는 태그입니다. width=device-width 는 기기의 화면 width에 맞게 웹 페이지의 width를 설정할 수 있습니다. initial-scale=1.0 는 웹 페이지 최초 로드 시 확대 정도입니다.

  4. <meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
    광고를 위헤 여러 브라우저의 내용을 계산하는 FLoC에 포함되지 않도록 하기위한 태그입니다.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meta 태그에 대해서 항상 공부해놓고 완벽하게 외우고 있을 필요는 없습니다!
하지만, 이걸 내가 알고 썻냐, 모르고 썼냐는 다르기 때문에 질문 차원에서 드린 건데 정리를 너무 잘 해주셨네요! 앞으로도 한 줄 한 줄에 이유있는 코드를 작성할 수 있는 습관을 들이셨으면 좋겠습니다!!

<title>운전자 보험금 기다림 제로, zero car!</title>
<link rel="icon" href="./favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./public/css/style.css" />
</head>
<body>
<div id="load">
<img id="load-logo" src="./src/imgs/zero-car-logo.png" alt="zero-car" />
<h1 id="load-title">Zero Car : <span>영 차!</span></h1>
</div>
Comment on lines +17 to +20

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로딩 ui를 미리 그려놓고 토글 시키는 방식 너무 좋았습니다!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이게 적절한 로딩 방식인지 고민이 많았는데 다행이네요 감사합니다!


<h2 id="title">운전자 보험금 기다림 제로, Zero Car!</h2>

<form id="adminLoginForm">
<input
id="adminIDInput"
type="text"
placeholder="관리자 아이디"
autocomplete="off"
required
/>
<input
id="adminPWInput"
type="password"
placeholder="관리자 비밀번호"
autocomplete="off"
required
/>
<input type="submit" value="로그인" />
<p id="adminLoginCheck"></p>
</form>
</body>
<script defer src="./public/js/login.js"></script>
</html>
Loading