나의 첫 리액트 토이프로젝트: My Colors

 

토이프로젝트 하나를 어찌 어찌 겨우 완성시켰다. 이름은 "My Colors". 색상 조합을 로컬스토리지에 저장할 수 있게 해 놓은 아주 간단한(이라고 쓰고 나는 정말 애먹었다고 한다) 웹 애플리케이션이다.

 

이걸 만들게 된 계기가 있었다. 실은 내가 필요해서 만들게 되었는데...... 포트폴리오 웹 페이지를 나름 예쁘게 제작하고 싶어서 열심히 열심히 예쁜 외국 사이트 디자인들을 구경하던 때였다. 나는 디자인 감각이 그닥 좋지 않지만... 그 중에서도 특히 색에 대한 감각이 부족해서, 대학교 다닐 적에도 PPT를 만들 때 도서관에서 배색 모음집 책 같은 걸 빌려다가 쓰곤 했었는데, 웹 사이트를 여기저기 구경하다 보면, 우와, 이건 진짜 색 조합이 예술이다!!+_+ 싶은 사이트들이 제법 있는 것이다. 그래서 그 때마다 개발자 도구를 열고, 메모장을 켜서, 색상 코드를 베껴다가 저장해놓곤 했는데, 생각해보니까 이 작업이 너무 불편하다는 생각이 들었다. 색상 코드만 저장하자니 색상 코드만 보고서는 무슨 색인지 알기도 힘들고, 그때그때마다 피그마를 열어서 사각형을 그리기엔 그것도 귀찮고, 포토샵 따위는 내 컴퓨터에 깔려 있지 않고...... 그래서!! 웹 서핑을 하다가 그때 그때 예쁜 색상 조합을 발견하면 색상 코드와 색깔을 같이 저장해둘 수 있는 페이지가 있으면 좋겠다는 생각을 했다. 

 

나는 Vue.js로 처음 개발 공부에 입문했고 지금도 가장 익숙한 언어가 Vue.js이지만, 이번 프로젝트는 리액트를 써봤다. 리액트를 쓴 이유는, 요즘 가장 대중적이고 널리 쓰이는 라이브러리가 리액트인데 조금이라도 리액트를 좀 알긴 알아야 하지 않을까라는 필요성에서, 스스로 공부를 해보기 위한 이유에서였다. 처음에는 html과 자바스크립트가 마구 섞여 있는 것 같은 비주얼에 당황했지만, 그래도 서당개 3년이면 풍월을 읊는다고 했던가, 비록 3년은 아니지만 한 석 달 미친 듯이 Vue 프로젝트를 진행하다 리액트를 공부해보니 그래도 아예 아예 아예 낯설지는 않아서, 큰 틀은 딱 하루 공부하고 잡았던 것 같다. (자랑 맞음 ㅇㅇ) 처음에 Vue 공부할 때에는 인강을 몇 개를 들어도 감이 안 오고 막막하고 뭘 어떻게 어디서부터 시작해야 할지도 모르겠고 발만 동동 굴렀던 것 같은데, 그래도 제법 코딩이 익숙해진 모양이다. 그래도 아직까지는 리액트가 낯설고, 어렵고, 개념을 정확히 알고 쓰지는 못한다. 약간 감으로 쓰는 감이 있........ㅠㅠ

 

그리고 이걸 만들어보면서 개념이 진짜 부족함을 뼈저리게 느끼고 "선 플젝 후 인강"으로다가 지금 열심히 강의를 들으며 리액트를 처음부터 다시 차근차근 공부하고 있다. 아무튼...

 

컬러피커를 삽입하기 위해 난생 처음으로 외부 라이브러리라는 것도 써봤고, 라이브러리라는 것을 어떻게 쓰는지 몰라 영어로 유튜브를 검색하며 떠듬떠듬 따라해보고, 이름만 들어 본 로컬스토리지 개념도 처음 써 봤다. 백엔드가 붙질 않아 저장 기능을 구현하지 못할 줄 알았는데, 새로고침을 해도 선택한 색상 리스트가 남아있는 걸 확인했을 때의 그 짜릿함이란!!! 완성된 코드가 있는 게 아니라 처음부터 끝까지 내가 디자인부터 직접 만들어야 했던 거였어서 단순한 애플리케이션이지만 진짜 꾸역꾸역 힘들게 만들었다. 그래도 그렇게 만들어 놓고 보니 너무 뿌듯하고, 내 자식새끼같은 느낌도 들고 그렇다. ㅋㅋㅋㅋㅋ 내가 필요해서 만든 것이니만큼 나는 유용하게 잘 쓰게 될 듯......