일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- gitcommit
- github
- 깃버전
- javascript
- 리액트
- 깃허브
- 야놀자
- 패스트캠퍼스
- Firebase
- gitignore
- 클론코딩
- Git
- react
- HTML
- 국비지원취업
- 깃
- 깃커밋
- webdevcurriculum
- 파이어베이스
- ReactError
- 리액트오류
- gitrevert
- API
- 프론트엔드개발자
- 자바스크립트
- 코딩테스트
- nextjs
- typescript
- js
- 프로그래머스
- Today
- Total
Project.log
패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_JAVASCRIPT_PICTURE과제 본문
[직원 사진 관리 서비스]
두번째 개인프로젝트로 HTML5 / CSS3/ JS / AWS S3 or Firebase 를 이용하여 직원 사진 관리를 하는 서비스 과제가 나왔습니다.
https://poetic-pudding-e89335.netlify.app/
(▲위 결과물은 첫번째 프로젝트입니다)
이번 프로젝트의 중점적인것은 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
▲이 부분은 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.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
직원사진관리사이트: https://picture-f7221.web.app/
배운점
- 반응형을 어떻게 구현해야하는지 개념을 잘 이해하고 프로젝트에 반영하여 잘쓰게 된것 같습니다.
- Firebase로 어떻게 어떤부분을 추가하여 어떻게 구현해야하는지 배웠습니다.
- mediaQuery를 이용하여 각 환경마다 어떻게 보여줘야하는지 알게되었습니다.
아쉬운점
- 코드최적화가 아직 잘 안되있는것 같아서 아쉬웠습니다.
- 긁어온코드도 제것으로 만들어야 하는데 아직 부족해서 아쉬웠습니다.
- Firebase가 아직 낯설어서 직원등록, 직원수정, 직원삭제를 구현못하여 아쉬웠습니다.
- 민감한 정보는 환경 설정 파일(.env)에서 관리했어야 했는데 그게 안되어 아쉬웠습니다.
앞으로 해야할 것
- Firebase 기초다지기 및 사용법 제대로 알기
- JavaScript 더 공부하기
- 코드최적화하는 방법 배우기
- Jquery를 남발하지말고 바닐라JS로 해결하는법 알기
- 템플릿리터럴 방식 더 공부하여 사용하기
'ETC > 패스트캠퍼스X야놀자' 카테고리의 다른 글
ETC/패스트캠퍼스X야놀자패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_MiniProject (1) | 2023.12.22 |
---|---|
패스트캠퍼스X야놀자: 프론트엔드 개발 1기 부트캠프_HTML/CSS과제 (0) | 2023.08.07 |