호텔리어 7년차에서 프론트엔드 개발자 되기!
코로나 때문에 여행 분야가 많이 힘들어 지고..
내 남은 인생을 호텔리어로써 계속 있는게 맞는 건가 회의 감이 들때 쯤..
지인을 통해 '프론트엔드 개발자'라는 분야에 대해 듣게 되었다.
20대 초반에 C언어에 두번이나 도전 했다가.. 한달도 못가서 포기한 이력이 있기 때문에.. 내가 할 수 있을까 하는 생각이 들었다..
그래서 내가 선택한 '코드캠프'는 5일간의 프리캠프를 통해 '개발자가 내 적성에 맞을까 ?' 라는 것과 프론트엔드의 기본적인 지식을 배울 수 있다고 해서 회사에 무급 휴직서를 내고 참가 하게 되었다. (내가 알아본 곳 중 제일 피드백이 좋고 오프라인 강의였다.)
부트캠프 전 진행 한 5일 간의 프리캠프에서 배운 디자인 적인 요소의JavaScrip, CSS, HTML의 기본 구조는 아래와 같았다.
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link href="../preCamp/cyworld/styles/home.css" rel="stylesheet" />
<!-- <link href="../cyworld/videos/Water.mp4" /> -->
</head>
<body>
<div class="wrapper">
<div class="wrapper__header">
<div class="header__top">Updated news
<span class="header__top__small">TODAY STORY
</span>
</div>
<div class="header__line">
</div>
<div class="header__bottom">오늘의 기분 너무 좋음
</div>
</div>
<div class="wrapper__body">
<div class="header__top">My video
<span class="header__top__small">introduce yourself</span>
</div>
<video class="video" loop="loop" muted="muted" autoplay="autoplay" controls="controls" src="../cyworld/videos/Water.mp4">
</div>
</div>
</body>
</html>-
css
*{ margin: 0px; box-sizing: border-box; }
html.body{
width: 100%;
height: 100%;
}
.wrapper{
width:100%;
height:442px;
background-color: white ;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 30px;
padding-right: 30px;
}
생각보다 수업이 너무 재밌고, 지금까지 사람들을 상대 하면서 받은 스트레스 보다 나 혼자만의 싸움을 통해 결과물을 만들어 내는게 훨씬 나았다 !
그래서, 본격적으로 퇴사를 하고 ! 부트캠프 참가 ㅋㅋㅋ
그런데.. 이번 부트캠프를 시작하면서 프로캠프에서 배웠던 내용들을 기본으로 Javascript를 통해 여러가지 프로그램을 터미널을 통해 설치 하고(IOS사용자), HTML 적인 요소와 CSS 적인 요소를 한번에 작성 할 수 있는 방법을 배우게 되었다.
- Javascript를 통한 HTML적 요소import {Wrapper, Top, SearchBox,Header_icon, Profile_Img,Active_BottomName, BottomName, Name_Icon, Time, Question1, Pic_Name,InfoAndmenu, Search, My, Next_Icon, Name, Menu, Menu_Name, Active_Menu_Name, MenuList, Question, ListHead, ListBody, DownAllow, Bottom, BottomMenu, BottomIcon, BottomBtn} from '../../../styles/quiz_css/quiz'
export default function MyBoard(){
return(
<Wrapper>
<Top>
<Header_icon>⏺</Header_icon>
<Header_icon>⏺</Header_icon>
<Header_icon>⏺</Header_icon>
<Time>12:30</Time>
</Top>
<InfoAndmenu>
<SearchBox>
<Search src="/search.png"></Search>
</SearchBox>
<Pic_Name>
<My>마이</My>
{/* <Profile_img src="/salad.jpg"></Profile_img> */}
<Name_Icon>
<Profile_Img src="/img.png"></Profile_Img>
<Name>임정아</Name>
<Next_Icon src="/arrow.png"></Next_Icon>
</Name_Icon>
</Pic_Name>
<Menu>
<Menu_Name>공지사항</Menu_Name>
<Menu_Name>이벤트</Menu_Name>
<Active_Menu_Name>FAQ</Active_Menu_Name>
<Menu_Name>Q&A</Menu_Name>
</Menu>
</InfoAndmenu>
.
.
.
</Wrapper>
)}
- Javascript를 통한 CSS적 요소
import styled from '@emotion/styled'
export const Wrapper = styled.div`
display: flex;
width: 642px;
height: 1138px;
background-color: #fff;
flex-direction: column;
box-sizing: border-box;
border: 1px solid #dcdcdc;
padding-right: 40.5px;
`
export const Top = styled.div`
display: flex;
justify-content: space-between;
width: 640px;
height: 43px;
margin: 0 0 36px 0;
padding: 5px 13px 7px 445px;
/ border: 1px solid black; /
text-align: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
`
.
.
.
function안의 retrun에는 하나의 <태그>만 받을 수 있기 때문에 요소들을 모두 묶어 줄 수 있는 제일 <태그>로 묶어주고, 기존의 css에서 요소 마다 하나씩 설정했던 값을 export const 를 통해 간단히 <변수값>으로만 불러 올수 있도록 하는 방식이 보기에는 간단하고 쉬워 보였다.
아직 이런 구조에 익숙하지 않아 코드가 깔끔하지 않고, 요소들에 대해 아직 세세하게 하나하나 완벽하게 이해 하지 못해서 길게길게 작성 했는데.. 하다 보면 많이 좋아지지 않을까 싶다.
이런건..시간이 해결 해주겠지...?
늦게 시작한 만큼 1등은 못해도 완강과 발전을 목표로 열심히 해야겠다.
