얼리슬로스 라는 포켓서베이 사업을 중점적으로 하는 회사에서 프론트엔드로 약 4주간 인턴을 진행하였다. 가까운 미래에 상용화가 될 예정이라고 전달받은 포켓서베이몰 인앱브라우저 구현을 맡아 프론트엔드 2명(자신포함) 백엔드 2명이 프로젝트를 진행하였고, 진행과정에서 기술적으로 배웠던 내용들 중심으로 남겨보려 한다.
React.js(Functional), React-router, Hooks, redux-saga, styled components
/* SideMenu.jsx */
const SideMenuWrapper = styled.div`
...
transform: translateX(-100%);
${(props) =>
props.sideMenuStatus !== null &&
css`
animation: 0.2s ${(props) => (props.sideMenuStatus ? "showMenu" : "hideMenu")} forwards;
`}
@keyframes showMenu {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes hideMenu {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* SubNav.jsx */
...
const [focusedCategory, setFocusedCategory] = useState(location.state.id);
const subNavToCategories = (id, name) => {
history.push({
pathname: `/categories/${id}`,
state: { id: id, name: name },
});
setFocusedCategory(id);
};
...
return (
<>
{subNavValueMapping?.map((title, idx) => {
return (
<Categories onClick={() => subNavToCategories(title.id, title.name)}>
<SubMenu key={idx} underLine={focusedCategory === title.id}>
{title.name}
</SubMenu>
</Categories>
);
})}
</>
);
const SubMenu = styled.button`
...
border-bottom: 0.15em solid ${(props) => (props.underLine ? ({ theme }) => theme.color.esYellow : "none")};
color: ${(props) => (props.underLine ? ({ theme }) => theme.color.esYellow : "black")};
background-color: white;
`
/* QuestionBox.jsx */
...
const [focusedIndex, setFocusedIndex] = useState(null);
const [toggle, setToggle] = useState(true);
const selectDropdown = (id) => {
if (focusedIndex === id) {
setToggle(!toggle);
} else {
setFocusedIndex(id);
setToggle(true);
}
};
return (
<>
{mapList?.map((quest, idx) => {
return (
<Question key={idx}>
<QuestionTitleBox onClick={() => selectDropdown(idx)}>
<QuestionTitle>
<div>Q.</div>
<div>{quest.q}</div>
</QuestionTitle>
<RewardArrow className={focusedIndex === idx && toggle ? "arrow up" : "arrow"} />
</QuestionTitleBox>
{focusedIndex === idx && toggle && <QuestionContents>{quest.a}</QuestionContents>}
</Question>
);
})}
</>
);
개인적으로 이전의 2개의 프로젝트를 하면서 짧은 시간동안 집약적으로 배웠던 내용들을 정리하고 좀 더 찬찬히 들여다 볼 수 있는 시간이었다. 이외에도 리덕스를 공부해보고 살짝 맛보기를 해본 점, 실제로 디자이너분과의 협업도 조금이나마 경험해 볼 수 있었다는 점이 흥미로웠고, 갚진 경험이었다.