KDT0_ShimJeongAh 원어민 교사 관리 #57

joanShim · 2023-08-18T14:52:53Z

프로젝트 소개

원어민 교사들의 정보를 관리할 수 있는 리스트 사이트 입니다.

배포 주소 : https://project-js-160bd.web.app/

필수 요구사항

AWS S3 / Firebase를 이용하여 사진을 관리할 수 있는 페이지 구현
프로필 페이지 구현
스크롤이 가능한 형태의 리스팅 페이지 구현
전체 페이지 데스크탑-모바일 반응형 페이지 구현
사진 등록, 수정, 삭제 기능 구현
유저 플로우 제작
CSS
- 애니메이션 구현
- 상대수치 사용(rem, em)
JavaScript
- DOM event 조작

기술 스택

주요 기능

신규 등록
리스트 삭제
상세 페이지 이동
프로필 사진 업로드
정보 수정

유저 플로우

netlify · 2023-08-18T14:53:49Z

✅ Deploy Preview for js-proflist ready!

Name	Link
🔨 Latest commit	`30fdd8e`
🔍 Latest deploy log	https://app.netlify.com/sites/js-proflist/deploys/64df9f2516b51600080b9fe9
😎 Deploy Preview	https://deploy-preview-57--js-proflist.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

tkyoun0421

과제하시느라 고생 많이 하셨습니다!!

tkyoun0421 · 2023-08-24T10:03:53Z

dist/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">


html 언어가 en으로 되어있습니다ㅠㅠ

tkyoun0421 · 2023-08-24T10:06:30Z

js/app.js

+const firebaseConfig = {
+  apiKey: process.env.API_KEY,
+  authDomain: process.env.AUTH_DOMAIN,
+  projectId: process.env.PROJECT_ID,
+  storageBucket: process.env.STORAGE_BUCKET,
+  messagingSenderId: process.env.MESSAGING_SENDER_ID,
+  appId: process.env.APP_ID,
+  measurementId: process.env.MEASUREMENT_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const storage = getStorage(app);
+const db = getFirestore(app);


이 부분이 아래 profile.js에서도 중복됩니다ㅠㅠ 하나의 파일로 관리하는 것이 괜찮을 것 같다고 생각합니다!

// const dotenv = require("dotenv"); dotenv.config(); const firebaseConfig = { apiKey: process.env.API_KEY, authDomain: process.env.AUTH_DOMAIN, projectId: process.env.PROJECT_ID, storageBucket: process.env.STORAGE_BUCKET, messagingSenderId: process.env.MESSAGING_SENDER_ID, appId: process.env.APP_ID, measurementId: process.env.MEASUREMENT_ID, }; // Initialize Firebase const app = initializeApp(firebaseConfig); const storage = getStorage(app); const db = getFirestore(app);

태관님 말씀처럼 예를 들어 firebaseConfig.js 파일을 생성하고
app, storage db를 export 시키고 사용하는 JS파일에서 import 해서 사용하시면 간편하고 중복 코드를 줄일 수 있을 것 같습니다 :)

tkyoun0421 · 2023-08-24T10:10:58Z

js/profile.js

+      const profileImgElement = document.getElementById("profile-img");
+      profileImgElement.src = data.profileImg;


프로필 페이지에서 이런 오류가 계속 발생합니다ㅠㅠ
기본 이미지? 를 불러오는 오류가 있는 것 같습니다.

tkyoun0421 · 2023-08-24T10:12:29Z

css/common.css

+html {
+  overflow-x: hidden;
+}
+:root {
+  line-height: 1.5;
+  color: #3e4b5b;
+  font-size: 16px;
+}


브라우저의 기본 폰트 사이즈는 16px이라고 알고 있습니다. html에 font-size를 62.5%로 주시면 rem 을 사용할 때 10px로 계산되어서 계산도 편해지고 웹 접근성에도 도움을 줄 수 있다고 생각합니다!

@tkyoun0421
태관님 피드백 훌륭하십니다..
사실 저도 그냥 px로 작성 많이해요 ㅎㅎ...
반성하게 됩니다!

2YH02 · 2023-08-24T12:46:06Z

이번 과제 파이어베이스도 처음 사용하시고 어려웠을 텐데 정말 잘 해주셨습니다. 고생 많으셨습니다!

chaeminseok · 2023-08-25T06:35:26Z

등록과 수정페이지에서 기본이미지를 불러오는 부분에서 404 error가 발생합니다. 이미지를 넣어주니 멈추는 것같습니다. 이외엔
전체적인 ui가 관리페이지처럼 깔끔하게 구현된 것 같습니다. 고생많으셨습니다!

LEEJAEHYUB

전반적으로 과제의 한 싸이클을 다 돌리신 것 같아요!
그 점 너무 훌륭하고 잘 하신것 같습니다 👏
부분 부분 버그 부분이나, 코드 정리, 기능의 플로우를 깔끔하게 마무리하기 등
정리가 필요한 부분은 리팩토링을 통해 프로젝트의 완성도를 높혀보세요!
과제하시느라 고생하셨습니다!

LEEJAEHYUB · 2023-08-26T15:15:24Z

css/common.css

+html {
+  overflow-x: hidden;
+}
+:root {
+  line-height: 1.5;
+  color: #3e4b5b;
+  font-size: 16px;
+}


@tkyoun0421
태관님 피드백 훌륭하십니다..
사실 저도 그냥 px로 작성 많이해요 ㅎㅎ...
반성하게 됩니다!

LEEJAEHYUB · 2023-08-26T15:20:35Z

index.html

+  <body>
+    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>


firebase script태그는 head로 가야될걸로 생각됩니다! 페이지가 렌더링 되기전에 firebase 스크립트가 로드 되어야 할 것 같아요

LEEJAEHYUB · 2023-08-26T15:22:49Z

js/app.js

+const firebaseConfig = {
+  apiKey: process.env.API_KEY,
+  authDomain: process.env.AUTH_DOMAIN,
+  projectId: process.env.PROJECT_ID,
+  storageBucket: process.env.STORAGE_BUCKET,
+  messagingSenderId: process.env.MESSAGING_SENDER_ID,
+  appId: process.env.APP_ID,
+  measurementId: process.env.MEASUREMENT_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const storage = getStorage(app);
+const db = getFirestore(app);


// const dotenv = require("dotenv"); dotenv.config(); const firebaseConfig = { apiKey: process.env.API_KEY, authDomain: process.env.AUTH_DOMAIN, projectId: process.env.PROJECT_ID, storageBucket: process.env.STORAGE_BUCKET, messagingSenderId: process.env.MESSAGING_SENDER_ID, appId: process.env.APP_ID, measurementId: process.env.MEASUREMENT_ID, }; // Initialize Firebase const app = initializeApp(firebaseConfig); const storage = getStorage(app); const db = getFirestore(app);

태관님 말씀처럼 예를 들어 firebaseConfig.js 파일을 생성하고
app, storage db를 export 시키고 사용하는 JS파일에서 import 해서 사용하시면 간편하고 중복 코드를 줄일 수 있을 것 같습니다 :)

LEEJAEHYUB · 2023-08-26T15:33:05Z

js/profile.js

+  } catch (error) {
+    console.error("데이터를 가져오는 중 에러:", error);
+  }
+});


로드 될 때 콜백함수에 너무 많은 로직이 한번에 담겨져있습니다.
함수를 분리하여 가독성과 유지보수성을 향상시켜보세요.
코드분리, 함수 모듈화, 비즈니스 로직을 분리하는 코드의 구조가 더 깔끔하고 확장 가능합니다.
최대한 분리해보는 연습을 추천드려요!

예를 들어,

DOM 요소는 함수 밖에 선언해주세요. 함수가 실행 될 때 마다 DOM을 탐색하는 것은 불필요한 리소스를 사용하게 됩니다.

상세페이지로 redirect

새문서 추가

문서 삭제

테이블 행 생성
등등.. 이런 종류의 함수들을 나누어보세요!

joanShim added 10 commits August 13, 2023 15:13

Feat: Init firestore

61e2b09

Feat: get stored data at profile page

0e4d683

Feat: Get datas by docId at profile.js

f151631

Feat: add profile pic upload

90f1986

Feat: add delete doc

73eb9df

Feat: add Delete data at index.html

23f57d4

Style: change profile css

a3fec50

Style: add respoonsive css

d49eab3

Fix: fixed dotenv

02c4a9c

Fix: fix deploy error

d3e1c3b

joanShim added 3 commits August 19, 2023 00:41

Fix: fix deploy error

55f94c4

Fix: fix deploy error

bf6d1b8

Fix: fix deploy error - script

30fdd8e

joanShim force-pushed the KDT0_ShimJeongAh branch from 27db58b to 30fdd8e Compare August 18, 2023 16:41

tkyoun0421 reviewed Aug 24, 2023

View reviewed changes

LEEJAEHYUB reviewed Aug 26, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT0_ShimJeongAh 원어민 교사 관리 #57

KDT0_ShimJeongAh 원어민 교사 관리 #57

joanShim commented Aug 18, 2023 •

edited

Loading

netlify bot commented Aug 18, 2023 •

edited

Loading

tkyoun0421 left a comment

tkyoun0421 Aug 24, 2023

tkyoun0421 Aug 24, 2023

LEEJAEHYUB Aug 26, 2023

tkyoun0421 Aug 24, 2023

tkyoun0421 Aug 24, 2023

LEEJAEHYUB Aug 26, 2023

2YH02 commented Aug 24, 2023

chaeminseok commented Aug 25, 2023

LEEJAEHYUB left a comment

LEEJAEHYUB Aug 26, 2023

LEEJAEHYUB Aug 26, 2023

LEEJAEHYUB Aug 26, 2023

LEEJAEHYUB Aug 26, 2023

		const profileImgElement = document.getElementById("profile-img");
		profileImgElement.src = data.profileImg;

KDT0_ShimJeongAh 원어민 교사 관리 #57

Are you sure you want to change the base?

KDT0_ShimJeongAh 원어민 교사 관리 #57

Conversation

joanShim commented Aug 18, 2023 • edited Loading

프로젝트 소개

필수 요구사항

기술 스택

주요 기능

유저 플로우

netlify bot commented Aug 18, 2023 • edited Loading

✅ Deploy Preview for js-proflist ready!

tkyoun0421 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

2YH02 commented Aug 24, 2023

chaeminseok commented Aug 25, 2023

LEEJAEHYUB left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joanShim commented Aug 18, 2023 •

edited

Loading

netlify bot commented Aug 18, 2023 •

edited

Loading