[영국워홀 D+12] 서류통과 후, 첫 과제 take-home test

분명 1-2시간정도만 투자해서 하라고 했는데.. 난 도저히 1-2시간으로는 구현을 못할것 같았다. 그래서 시간을 좀 더 오바해서 구현했다.

 
왜 오래걸렸냐면
 
1. 소스로 준 글꼴 중 몇개가 macbook에서 설치가 안되는 문제
-> 몇몇은 TTF로 변환해서 설치 후, 아래 블로그를 따라해서 글꼴 적용

[react] 폰트파일(.ttf) 로컬 폰트 적용하기

 
2. 리액트 까먹음(?). 최근 몇달간 Next.js만 쓰다보니까 쌩 리액트 라우팅, 동적 라우팅 등에서 시간이 오래 걸림
 
3. 데이터 흐름. 뭐 어디까지 얼마나 구현해야하는지 가이드가 없어서 상태관리까지는 안들어가고 그냥 Json 파일 만들어서 Import 해서 씀. 총 두개의 페이지를 만드는 거였는데, 거기에 아티클 데이터가 들어가는데 그렇다고 퍼블리셔마냥 그냥 다 복붙할 순 없잖숨.. 그래서 map 돌려서 뿌려줘야 하니까 Json 파일도 굉장히 오랜만에 끄적여봄.
 
4. 구조가 조금 요상했음. 아무래도 뭔가, 미적인...느낌이 많이 나는 페이지여서 딱딱 Div끼리 구조가 나눠져있는 그런 디자인이 아니었고 두 div 위에 걸쳐있고 딱봐도 absolute 많이 써야할것같은 그런 싸한(?ㅋㅋ) 느낌이 많이 들었다. 물론, absol 안하고도 잘 하시는 분들도 있겠지만, 나는 아직 개린이이기때문에 absol밖에 답이 안 보여서 구조도 좀 애매한데 일단 구현은 했다. 원래는 Header-Main-Footer 이렇게 나눠져야 시맨틱한데, 좀 애매한 부분들이 있어서 

    <StOuterFrame>
      <GlobalStyle />
      <StFrame>
        <Banner />
        <Header />
        <Main />
        <FormBox />
      </StFrame>
      <Footer />
    </StOuterFrame>

 

뭐 이런식으로 구조를 잡았다. 아주 이상하다.
 
5. CSS .. 좋았는데 싫어지는 너. 싫지는 않지만!!! 이번 스피드코딩마냥 우다다다하면서 느낀게 정말 css 다 마스터했다고 자신했지만 어렵다 여전히... 일단 내맘대로 styled-component 로 했는데 감점하진 않겠지? 모르겠다. 내 레벨 체크용이라고 했으니 알아서 잘 보겠지???
 
요번에 안 사실: absolute 할 때, 가로로 정 가운데 하고 싶으면 아래처럼 하면 된다!

position: absolute;
left: 50%;
transform: translateX(-50%);

 
 
그래도 아주 오~~~~랜만에 쌩 리액트로 규격 잡아보는 연습해서 좋았다.
아 그리고, 반응형 안했는데.... 에라 모르겠다~~