개발을 시작했을 때, 4개의 작은 서비스를 만든 경험이 있다.
지금까지 배운 것만으로 가장 작은 서비스를 가볍게 보는 행위 자체가 나에게는 기술연마의 시간이다.
리액트 생활코딩 강좌를 완주했지만 연계해서 배워야 할 게 많았다.
하지만 일단 배운 것만으로도 충분히 서비스를 만들 수 있다고 생각했기 때문에 이번에도 또 그렇게 하기로 결정했습니다.
Express나 redux, router 등 리액트와 밀접한 관련이 있는 기술은 당장은 필요성을 느끼지 않기 때문에 필요할 경우 하나하나 배워나가면 좋을 것이다.
그 전에 ‘도메인’을 연결해 보기로 했어요. 작은 서비스도 몇 개 만들어 현재는 회사에서 큰 서비스를 운영하고 있지만 직접 도메인을 접속해 본 경험은 없다.
원리를 대충 아는 것 같지만 해본 적은 없어서 이번에 한번 해보기로 했어요. 가비아, 고어달 같은 회사들이 있는데 나는 고어달을 골랐다.
큰이유는없고저렴하고회사에서팀장님이활용하는것을얼핏본적이있기때문입니다.
지금 하는 프로젝트가 자주 말하는 “토이 프로젝트”에서 저는 이런 토이 프로젝트를 잘 쌓아가고 싶어서 toy project에서 도메인을 찾아봤습니다.
com은 살수는 있지만 500만원 정도 하니까 1년에 1,900원의.co를 골랐습니다.
나는 단지 ip와 도메인을 켜면 되는 줄 알았는데 네임 서버가 존재하기 때문에 도메인이 등록되는 절차가 필요했다.
네임 서버는 스키드리스, 구글 클라우드 플랫폼도 가지고 있어 많은 서비스를 가지고 있지만 해당 도메인이 바라볼 수 있는 네임 서버를 설정할 수 있으며 네임 서버를 중계로 ip로 향하게 할 수 있다.
처음에는 빈집 리디렉션 기능으로 하다 보니 뭔가 잘 안 될 것 같았지만 이것저것 찾아보고 네임서버에 도메인을 등록하면 일정 시간이 지나 반영되는 것을 알았다.
역시 해 보지 않으면 쉬운데 조금 당황해 버려서 곤란해 버리는 것 같습니다.
땅에 헤딩하는 것도 좋은 방법이지만 디자인 영역은 아무래도 디테일하게 하면 시간도 걸리고 또 비전공자에게는 어렵기 때문에 프레임워크를 활용하는 편이다.
웹서비스를 만들 때는 부트스트랩을 활용하고 안드로이드 앱을 만들 때는 머티리얼을 활용했다.
https://www.vobour.com/%EB%B2%A0%EC%8A%A4%ED%8A%B8-10-%EB%A6%AC%EC%95%A1%ED%8A%B8-ui-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-10-best-react-ui-lib
해당 URL을 참고하여 Material과 블루프린트 프레임워크를 설치하였습니다.
머티리얼은 어떤 설명도 적고 조금 이해하기 힘들었다.
그나마 블루프린트를 적용하기가 쉬워 디자인이 단순해 보여 활용하기가 좋았다.
그렇다 치더라도 부트스트랩의 점보트론과 같은 큰 레이아웃 컴포넌트가 없어서 조금 고생했다.
부트 스트랩이 좋은데 최대한 쓰지 않고 해보려고 하면 좀 어려웠던 것 같아.
자신이 만들고 싶은 구조는 메인 페이지에서 토이 프로젝트를 목록에 올리고 해당 프로젝트를 누르면 개별 토이 프로젝트 페이지가 존재하는 구조입니다.
최대한 리액트 생활 코딩 강좌의 결과물 구조를 응용해 만들어 갔다.
state, prop도 낯설고 style 주기도 낯설어서 힘들었다.
몇 가지 포인트가 있었다.
1) state는 각 컴포넌트마다 존재하기 때문에 컴포넌트 간에 컨트롤을 하려면 가지고 다녀야 합니다.
지금 구조가 APP.js=>Main.js=>MainList.js인데, MainList.js의 가장 마지막 컴포넌트 아래에서 App.js의 state를 접하기 위해서는 매번 this 객체를 보내야 했습니다.
App.js (Main에게 보내) Main.js (Main List에게 보내줘)
>
위의 vardata가 있지만, on Click 안에서 활용할 수는 없다.
활용하기 위해서는 bind를 사용하고 뒤에 인자로 추가한 후에 활용할 수 있습니다.
변수가 하나면 상관없지만 여러 개를 써야 할 경우 계속 콤마를 활용해 추가하는 데는 걸림돌이 분명 있을 것 같다.
이 부분도, 왠지 redux를 활용하면, 왠지 모르게 해결될 것 같다.
3) 리액트는 무조건 전체를 하나의 태그로 감싸야 한다.
render return 시 가장 바깥 태그가 하나만 존재하면 정상적으로 작동한다.
별일도 아닌데 계속 두세 가지를 활용해서 오류가 나곤 했어요. 이 법칙은 이것에만 해당되는 것이 아니라 태그를 객체로 쓰려고 할 때 크게 하나의 태그로 둘러싸야 제대로 작동된다.
>
desc 영역을 보면 전체를 하나의 span 태그로 둘러싸야 정상적으로 작동한다.
4) 한 페이지이므로 토이 프로젝트 한 개의 별도 url을 가질 수 없습니다.
충분히 할 수 있지만 이 부분의 필요성을 느꼈고, 이 부분이 router라는 기술과 관련이 있어 보입니다.
다시 한번 완성된 프로젝트가 얼마나 개발자의 피와 땀이 필요한지 느끼는 순간이었다.
되게 심플하게 구현한다고 하는데 시간이 좀 걸린 것 같아요. 마음만 먹으면 바로 서비스를 만들 수 있다지만 꼼꼼하게 그리고 컴포넌트 모듈화를 잘 해 놓지 않으면 속도는 어림도 없다.
리액트의 강점을 최대한 살려서 토이 프로젝트를 곧 인쇄할 수 있는 코드로 좁혀 나가고 싶다.
p.s. 간단하지만 흐름은 잡힌 것이나 마찬가지다.
우선 첫 번째 프로젝트는 간단하게 초대장을 만들어요!