회고록
[JUSTCODE] 1, 2차 프로젝트 리팩토링
Hazel Han
2022. 11. 29. 17:28
1차 프로젝트 photofolio
DeleteModal.js
중복되는 코드 map 돌리기
최상위 의미없는 <div>태그 삭제
모든 localStorage 삭제 시 clear();로 변경
before)
1.
<div className="delete-modal-content-each-wrapper">
회원님의 작품과 큐레이션 등 모든 정보가 삭제되며 복구할 수 없습니다.
<br />
</div>
<div className="delete-modal-content-each-wrapper">
또한 다른 사람에게 큐레이션된 작품, 사람들과 이야기 나눈 댓글도 모두
삭제됩니다. <br />
</div>
<div className="delete-modal-content-each-wrapper">
단, 콜라보레이션에 당선된 작품은 별도로 보관됩니다. <br />
</div>
<div className="delete-modal-content-each-wrapper">
외부로 공유된 회원님의 프로필 페이지와 작품 상세 페이지에 접속할 수
없습니다.
<br />
</div>
<div className="delete-modal-content-each-wrapper">
콘텐츠샵 판매자로 가입되어 있는 경우, 먼저 판매자 탈퇴가 되어야
포토폴리오 채널 삭제가 가능합니다.
<br />
</div>2.
//데이터 삭제
const deleteAccount = e => {
e.preventDefault();
fetch('http://43.201.0.95:8000/user/accountInfo', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
token: localStorage.getItem('token'),
},
})
//토큰값 삭제
.then(localStorage.removeItem('token'))
.then(localStorage.removeItem('profile_image'))
.then(localStorage.removeItem('id'))
.then(localStorage.removeItem('kor_name'));
after)
1. 중복되는 코드 map 돌리기
//모달 내용 배열
const modalContentArray = [
{
id: 1,
content:
'회원님의 작품과 큐레이션 등 모든 정보가 삭제되며 복구할 수 없습니다.',
},
{
id: 2,
content:
'또한 다른 사람에게 큐레이션된 작품, 사람들과 이야기 나눈 댓글도 모두 삭제됩니다.',
},
{
id: 3,
content: '단, 콜라보레이션에 당선된 작품은 별도로 보관됩니다.',
},
{
id: 4,
content:
'외부로 공유된 회원님의 프로필 페이지와 작품 상세 페이지에 접속할 수 없습니다.',
},
{
id: 5,
content:
'콘텐츠샵 판매자로 가입되어 있는 경우, 먼저 판매자 탈퇴가 되어야 포토폴리오 채널 삭제가 가능합니다.',
},
];{/* 모달 컨텐츠 배열 map */}
{modalContentArray.map(modalContent => {
return (
<div className="delete-modal-content-each-wrapper">
{modalContent.content}
<br />
</div>
);
})}2. 모든 localStorage 삭제 시 clear();로 변경
//데이터 삭제
const deleteAccount = e => {
e.preventDefault();
fetch('http://43.201.0.95:8000/user/accountInfo', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
token: localStorage.getItem('token'),
},
})
//모든 localstorage 데이터 삭제
.then(localStorage.clear());
AccountInfo.js
최상위 의미없는 <div>태그 삭제
before)
return (
<div>
<div className="account-out-wrapper">after)
return (
<div className="account-out-wrapper">
CardDetailContent.js
const token = localStorage.getItem('token');로 변수화해서 사용
before)
<div className="detail-reply-text-area-wrapper">
{localStorage.getItem('token') ? (
<textarea
type="text"
placeholder="주제와 무관한 댓글, 악플은 삭제될 수 있습니다."
ref={reply}
/>after)
const token = localStorage.getItem('token');<div className="detail-reply-text-area-wrapper">
{token ? (
<textarea
type="text"
placeholder="주제와 무관한 댓글, 악플은 삭제될 수 있습니다."
ref={reply}
/>
Channel.js
console.log(); 삭제
const id = localStorage.getItem('id');로 변수화해서 사용
의미 없는 삼항연산자 대신 && 사용
before)
1.
console.log(followingInfo);
console.log(followerInfo);2.
<div className="channel-account-info-btn-wrapper">
{localStorage.getItem('id') == userInfo.user_id ? (
<button className="channel-account-info-me-btn">
<Link to="/accountInfo" style={{ color: '#00d084' }}>
계정정보 수정
</Link>
</button>3.
{userInfo.eng_name ? (
<div className="channel-user-eng_name">
({userInfo.eng_name})
</div>
) : (
''
)}
after)
1. console.log(); 삭제
삭제
2. const id = localStorage.getItem('id');로 변수화해서 사용
const id = localStorage.getItem('id');<div className="channel-account-info-btn-wrapper">
{id == userInfo.user_id ? (
<button className="channel-account-info-me-btn">
<Link to="/accountInfo" style={{ color: '#00d084' }}>
계정정보 수정
</Link>
</button>3. 의미 없는 삼항연산자 대신 && 사용
{userInfo.eng_name && (
<div className="channel-user-eng_name">
({userInfo.eng_name})
</div>
Channel.scss
주석처리 된 스타일 삭제
before)
// .feed-channel-feed-div {
// margin-top: 157px;
// width: 814px;
// height: 100%;
// min-height: 845px;
// }after)
삭제
2차 프로젝트 Justit
Login.scss
불필요한 태그 선택자 삭제
before)
.login-modal-content-wrapper {
width: 728px;
margin: 0 auto;
.title-wrapper {
h1 {
font-weight: 400;
b {
}
}
}after)
.login-modal-content-wrapper {
width: 728px;
margin: 0 auto;
.title-wrapper {
h1 {
font-weight: 400;
}
}
MainCardList.js
Main.js의 props 자체에서 images[0].image로 넘겨주기
alt에 텍스트 값 할당하기
before)
<div className="image-area-wrapper">
<img src={images[0].image} alt="" />
<span className="view">{view}</span>
</div>after)
<div className="image-area-wrapper">
<img src={images} alt="회사이미지" />
<span className="view">{view}</span>
</div><div className="my-cardList">
{timeCardList.map(cardList => {
return (
<MainCardList
key={cardList.id}
id={cardList.id}
images={cardList.images[0].image}
company_name={cardList.company_name}
title={cardList.title}
tech_stacks={cardList.tech_stacks}
location={cardList.location}
career_max={cardList.career_max}
career_min={cardList.career_min}
position_id={cardList.position_id}
view={cardList.view}
type={cardList.type}
/>
);
})}
</div>
Signup.js
중복되는 코드 map 돌리기
before)
<label className="check-box-label" htmlFor="">
<input type="checkbox" />
<div className="check-box-text">만 15세 이상입니다.</div>
</label>
<label className="check-box-label" htmlFor="">
<input type="checkbox" />
<div className="check-box-text">개인회원 이용약관 동의</div>
</label>
<label className="check-box-label" htmlFor="">
<input type="checkbox" />
<div className="check-box-text">개인정보 수집 및 이용 동의</div>
</label>
<label className="check-box-label" htmlFor="">
<input type="checkbox" />
<div className="check-box-text">마케팅 수신 동의</div>
</label>after)
//checkbox text 배열
const checkBoxTextArray = [
{ id: 1, text: '만 15세 이상입니다.' },
{ id: 2, text: '개인회원 이용약관 동의' },
{ id: 3, text: '개인정보 수집 및 이용 동의' },
{ id: 4, text: '마케팅 수신 동의' },
];{/* 체크박스 문자배열 map */}
{checkBoxTextArray.map(checkBoxText => {
return (
<label className="check-box-label" htmlFor="">
<input type="checkbox" />
<div className="check-box-text">{checkBoxText.text}</div>
</label>
);
})}
느낀점
리팩토링 세션을 듣고 생각보다 많은 부분에서 코드를 고쳐야한다는 것을 알게되었다. 프로젝트는 팀단위로 진행되기 때문에 다른 사람이 내 코드를 보았을 때, 가독성이 좋아야한다.
따라서 리팩토링 시 최대한 간결하게 코드를 만들면서도, 중복되는 것이 없도록 하는 것이 중요하다.
이번 경험에서 가장 기억에 남는 리팩토링 방법은 localStorage에 있는 모든 요소를 삭제하는 방법이 따로 있었다는 것이었다. 전에는 그 방법을 알지 못해서 하나씩 remove를 해주었기 때문에 코드도 그만큼 길어지고 번거로웠는데, clear();를 사용해서 간결하게 만들 수 있었다.
리팩토링의 효과와 필요성에 대해 확실히 느낄 수 있는 계기였다.