기존에 소개 페이지(=포트폴리오)를 Jekyll로 블로그 안에 만들어 나름 관리하게 편하게 섹션별로 만들어 나누어 두었는데 괜스레 React로 변경해 보고 싶었다. 생각보다 짧은 시간으로 옮길 수 있었는데 나름 코딩하는 습관이 나쁘지 않다는 것을 입증하는 것 같았다.

만들어진 페이지

1
2
3
4
5
6
7
8
9
10
11
12
<section id="social">
    {% include section-social.html %}
</section>
<section id="product">
    {% include section-product.html %}
</section>
<section id="skill">
    {% include section-skill.html %}
</section>
<section id="contact">
    {% include section-contact.html %}
</section>

위와같이 구분돼 만들어진 레이아웃들이 아래와 같이 깔끔하게 변경되었다.

1
2
3
4
5
6
7
8
9
return (
    <div>
        <SectionIntro/>
        <SectionSocial/>
        <SectionProdcut/>
        <SectionSkill/>
        <SectionContact/>
    </div>
)

다만 기존에 태그 안에 삽입된 이벤트들은 어떻게 처리해야 할 지 몰라서 빼거나 나중을 기약하는 중이다. 또한 chart.xkcd-reactaos같은 스크립트 파일들도 기존에 사용하던 방식으로 사용할 수 없어서 NPM으로 설치한 후 약간의 변경이 필요했다. 한페이지 변경하는 건 뭐 그럭저럭 했다지만 기존 프로젝트를 React로 완전히 전환시키려면 얼마난 노력이 필요할까…

WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com