패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_JAVASCRIPT_PICTURE과제

[직원 사진 관리 서비스]

두번째 개인프로젝트로 HTML5 / CSS3/ JS / AWS S3 or Firebase 를 이용하여 직원 사진 관리를 하는 서비스 과제가 나왔습니다.

https://poetic-pudding-e89335.netlify.app/

EDIYA Clone Coding

(▲위 결과물은 첫번째 프로젝트입니다)

이번 프로젝트의 중점적인것은 JavaScript로 사진 추가, 사진 수정, 사진 삭제를 할 수 있어야 하며 Firebase로 사진 관리도 되어야

합니다.

저번 첫번째 개인프로젝트에서 아쉬웠던 정적인 페이지를 반응형으로 만들고자 하였고 제가 어려워하는 JS와 Firebase로 사진 관리도

만들어 보려고 하였습니다.

 

 

[구성살펴보기]

[index.html]

[photo.html & logout.html]

[calendar.html]

[location.html]

 

CSS부분에서는 reset.css로 초기화 및 선언을 해줬습니다.

@charset utf-8;

/* 웹폰트 CSS */
@import url("https://fonts.googleapis.com/css?family=Montserrat|PT+Serif");

/* CSS 초기화 */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  font-family: "Montserrat", DroidSans, AppleSDGothicNeo, Sans-serif, Helvetica;
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul,
li {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

img {
  vertical-align: top;
}

hr {
  display: block;
  height: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}

input,
textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #757575;
  color: rgb(255, 55, 115);
  font-family: "Montserrat";
  font-size: 12px;
  vertical-align: top;
  border-radius: 0;
  box-sizing: content-box;
  appearance: none;
}

::-moz-input-placeholder,
::-moz-textarea-placeholder {
  color: rgb(255, 55, 115);
}

::-webkit-input-placeholder,
::-webkit-textarea-placeholder {
  color: rgb(255, 55, 115);
}

ui.css에서는 반응형에 핵심기술 media Query를 사용하여 

모바일에서 기본CSS를 구현하고 태블릿과 PC에서는 아래와 같이 구현을 하여 창크기에 따라 보여지는게 다르도록 구성하였습니다.

@media all and (min-width: 768px) {}

@media all and (min-width: 1132px) {}

---

[멘토님의 코드리뷰]

margin-bottom: 50px;
margin-bottom: 3.125rem;

▲ 멘토님: "같은 속성이 두 번 선언되어있네요."

margin-bottom: 3.125rem;

▲수정한 코드

---

.cfixed:after,
.container:after {}

▲ 멘토님: "::before, ::after로 사용하시는 게 올바른 문법입니다!"

.cfixed::after,
.container::after {}

▲수정한 코드

---

.header .nav {
    display: block !important;
 }

▲ 멘토님: "!important는 불가피한 경우가 아니면 최대한 사용을 자제하시는 게 좋습니다."

.header .nav {
    display: block;
}

▲수정한 코드

---

<div class="slideshow-container">
<div class="mySlides fade">

▲ 멘토님: "class, id 등엔 다른 html / css 속성들과 맞춰 kebab-case를 사용하는 게 일반적입니다!
윗 라인에 작성하신 것처럼 여기도 kebab-case로 수정해주시는 게 어떨까요?"

https://yangbox.tistory.com/65

Camel case, Kebab case, Snake case 그리고 Pascal case

▲이 부분은 case에 대해서 좀 더 이해하고 수정 또는 변경해보겠습니다.

---

        <article class="slider">
          <div class="slideshow-container">
            <div class="mySlides fade">
              <img src="./images/slide-img/slide01.png" style="width: 100%" />

▲ 멘토님: "재사용성과 성능을 위해 inline style 사용은 지양하시는 게 좋습니다."

.mySlides img {
  width: 100%;
}

위 스타일로 작업해보면 어떨까요?

▲변경된 코드 내포

---

let acc = document.getElementsByClassName("accordion");
let i;

▲ 멘토님: "for block 안에 변수를 선언해도 되지 않을까요?"

let acc = document.getElementsByClassName("accordion");

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");

    let panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

▲수정한 코드

---

let acc = document.getElementsByClassName("accordion");

▲ 멘토님: "재할당하지 않는 변수는 const로 선언하는 습관을 들이시면 좋을 것 같습니다."

const acc = document.getElementsByClassName("accordion");

▲수정한 코드

---

function leftPad(value) {
  if (value < 10) {
    value = "0" + value;
    return value;
  }
  return value;
}

▲ 멘토님: "String.prototype.padStart()에 대해 찾아보셔도 좋을 것 같네요."

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padStart() - JavaScript | MDN

▲보내주신 String.protoype.padStart()에 대하여 찾아보고 수정해보겠습니다.

---

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

▲ 멘토님: "갑자기 var가 사용된 이유가 있을까요?"

const modal = document.getElementById("myModal");

const btn = document.getElementById("myBtn");

const span = document.getElementsByClassName("close")[0];

▲수정한 코드

---

document
  .querySelector("#addEmployeeBtn")

▲ 멘토님: "querySelector, getElementBy* 등이 여러 상황에 혼재되고 있는데

• ID로 조회 -> getElementById
• 기타 -> querySelector

같이 패턴이 정리되면 좋을 것 같습니다."

 

▲차후에 JS를 더 공부해서 알맞는 패턴을 쓰도록 노력해보겠습니다.

---

    var newData = {
      name: name,
      email: email,
      phone: phone,
      position: position,
    };

▲ 멘토님: "이런 경우에는

const newData = {
  name,
  email,
  phone,
  position,
};

처럼 줄여서 쓰실 수 있습니다."

 

▲변경된 코드 내포

---

jQuery(function ($) {
  $(".menu-toggle-btn").click(function () {
    $(".nav").stop().slideToggle("fast");
  });
});

▲멘토님: "여기만 갑자기 jQuery가 사용된 이유가 있을까요?
slideToggle 때문이라면, "slideToggle without jQuery"같이 검색하시면 이정도 애니메이션은 쉽게 구현하실 수 있을 겁니다."

 

▲차후에 Jquery를 더 공부해서 수정해보겠습니다.

---

	const firebaseConfig = {
        apiKey: "AIzaSyBJMxxMV0HnBEBpzFAVLqmn31_00s1sDOQ",
        authDomain: "picture-f7221.firebaseapp.com",
        projectId: "picture-f7221",
        storageBucket: "picture-f7221.appspot.com",
        messagingSenderId: "694065976023",
        appId: "1:694065976023:web:cc0d5b6604ed934d745692",
      };

▲멘토님: "이런 정보는 환경 설정 파일에서 관리해보시는 걸 추천합니다!"

 

▲ .env파일 생성후에 apiKey, authDomain등 보관

---

깃허브링크와 직원사진관리사이트 배포링크

 깃허브링크: https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/tree/KDT0_LeeJinUk

GitHub - KDT1-FE/Y_FE_JAVASCRIPT_PICTURE

직원사진관리사이트: https://picture-f7221.web.app/

야놀자 (Yanolja)

---

배운점

 

1. 반응형을 어떻게 구현해야하는지 개념을 잘 이해하고 프로젝트에 반영하여 잘쓰게 된것 같습니다.
2. Firebase로 어떻게 어떤부분을 추가하여 어떻게 구현해야하는지 배웠습니다.
3. mediaQuery를 이용하여 각 환경마다 어떻게 보여줘야하는지 알게되었습니다.

아쉬운점

1. 코드최적화가 아직 잘 안되있는것 같아서 아쉬웠습니다.
2. 긁어온코드도 제것으로 만들어야 하는데 아직 부족해서 아쉬웠습니다.
3. Firebase가 아직 낯설어서 직원등록, 직원수정, 직원삭제를 구현못하여 아쉬웠습니다.
4. 민감한 정보는 환경 설정 파일(.env)에서 관리했어야 했는데 그게 안되어 아쉬웠습니다. 

앞으로 해야할 것

1. Firebase 기초다지기 및 사용법 제대로 알기
2. JavaScript 더 공부하기
3. 코드최적화하는 방법 배우기
4. Jquery를 남발하지말고 바닐라JS로 해결하는법 알기
5. 템플릿리터럴 방식 더 공부하여 사용하기