[Web] - 6편 React 기반의 자기소개 페이지 만들기

http://dongjun.me 

wq0212 / Dongjun Shin

최근 새로운 사람만날일이 부쩍 많아졌다.

다들 처음 만나서 이름, 나이, 학력을 물어보고 기술스택을 물어보며 첫마디를 땐다.

아무래도 다들 팀원을 구하고 있어서 그런가 이름보다 기술스택을 먼저 물어보는 일도 허다하다.

 

어딜가나 본인을 소개하고, 본인을 어필하는 일이 반복되다보니 개인적으로는 적지 않은 피로감도 느낀다.

누굴 만나면 면접을 만난 복어마냥 촉을 세우고, 자기를 소개해야하고, 남이 소개하는걸 들으며 (심지어 받아적는 분들도 있다) 팀원을 물색해야한다.

 

앞으로 개발자로 계속 일하다보면 본인을 소개할 랜딩페이지 정도는 있으면 좋겠다 싶어, 도메인도 하나 지르고 아래 두 선배분들 페이지를 참고해서 만들어 보았다. 

https://shiftpsh.com/ https://kevink1113.com/

 

최근에 동주리님의 강의로 React를 만지작거리고 있었기에 적용해보았고, 예전에 랜딩페이지 만들며 써봤던 fullpage.js라는 라이브러리를 가져와서 적용해보았다.

 

App.js 만 첨부해보면 Fullpage를 사용했고, 'react-responsive'로 미디어 쿼리를 써서 가로 750px 기준으로 모바일/웹 을 구분해서 따로 코딩했다(대부분이 비슷한데, UI를 좀 줄인느낌으로)

export default function FullPageLanding() {
  const standardWidth = 750;
  const ISpcScreen = useMediaQuery({ query: `(min-width: ${standardWidth}px)` });
  const ISmobileScreen = useMediaQuery({ query: `(max-width: ${standardWidth-1}px)` });
  $(() => {
      $('#fullpage').fullpage({
          scrollOverflow: true,
          sectionsColor: ['#ffffff', '#f0f0f1', '#ffffff','#f0f0f1'],
          navigation: ISpcScreen,
          navigationTooltips: ['Home', 'Career', 'Projects','Contacts'],
          scrollingSpeed: 1000,
      });
  });
  
  return (
    <div id='app'>
        {ISpcScreen && <Header></Header>}
        {ISmobileScreen && <MobileHeader></MobileHeader>}
        <div id="fullpage">
            {ISpcScreen && <FullPageSection1></FullPageSection1>}
            {ISmobileScreen && <MobileSection1></MobileSection1>}
            
            {ISpcScreen && <FullPageSection2></FullPageSection2>}
            {ISmobileScreen && <MobileSection2></MobileSection2>}

            {ISpcScreen && <FullPageSection3></FullPageSection3>}
            {ISmobileScreen && <MobileSection3></MobileSection3>}

            {ISpcScreen && <FullPageSection4></FullPageSection4>}
            {ISmobileScreen && <MobileSection4></MobileSection4>}
        </div>

    </div>

  );
}

 

이하 사이트 주소와 깃헙 링크이다.

http://dongjun.me 

wq0212 / Dongjun Shin

 

https://github.com/wq0212/profile-page-react

GitHub - wq0212/profile-page-react: Creating my profile page based on React