몇 주간 나를 밤새게 했던 프로젝트가 드디어 1차 마무리되었다. 아직 Markdown rendering과 몇몇 Front-end 컴포넌트들, 그리고 Prisma 2로의 업그레이드가 아직 이루어지지 않았지만 충분히 만족할만한 결과를 냈다.
나와 비슷한 처지의 사람들에게 동기부여가 됐으면 하는 마음에 쓰는 글.
웹 개발을 하고 싶지만 HTML, CSS, JS,PHP 밖에 할 줄 몰랐던 나는 다른 웹 사이트를 보며 나는 못할 거라는 생각만 하며 지냈다..
2020년 여름방학에 내가 만든 서비스를 배포까지 해보자!라는 생각을 가지고 프로젝트를 시작했다.
웹 개발에 관련된 기술들을 배워가며 만드는 게 목적이었기 때문에 무슨 기술을 적용해야할지 정해야 했다.
정말 많은 기술들이 있고, 지금도 나오고 있어서 무엇을 골라야 할지 잘 몰랐다...
그 와중에 친구가 ReactJS를 공부해보라며 추천해줘서 거기서부터 시작했던 것 같다.
ReactJS를 공부하다보니 불편한 점이 너무 많아보여 또 찾아보니 React hooks라는 게 있다! 그래서 React hooks + 관심을 가지게 된 GraphQL을 가지고 만들어보기로 했다.
그리고 마지막에 배포할 때는 Netlify, Heroku를 사용했다.
얘는 그래도 그렇게 힘들게 하진 않았다. DOCS가 워낙 잘 되어 있고, GraphQL을 쓰면 Prisma를 쓰라고 추천하는 사람이 많은데, 그 분들에게 압도적 감사...(아마 DOCS에서도 추천했던 걸로 기억한다)😂
prisma client(Prisma를 설치하면 알게 됨)에서 제공하는 api들을 이용해 정말 쉽게쉽게 백엔드를 구현했다.
GraphQL자체도 워낙 이해하기 쉬운 구조라 빨리빨리 끝낼 수 있었다.
GraphQL에 관해서는 따로 정리할 예정.
🚀 친절하게 한국어 DOCS가 있다.
https://graphql-kr.github.io
React가 페이지를 렌더링하는 방식이 낯설어서 발생한 에러들 때문에 시간을 좀 썼다. 그래도 React hooks는 함수형 컴포넌트들을 관리하기 편하게 되어있어서, React에 비해 훨씬 쉬운 것 같다.
가장 어려운 부분은 역시 styled-components를 사용하는 부분이었다. CSS를 알고 있으면 문법상 어려울 건 없지만, 박스들이 내 마음대로 움직이지를 않는다😂. 그래도 flex-box,grid-box의 도움을 빌려 꾸역꾸역 원하는 스타일을 만들어냈다.
이 부분도 워낙 설명이 친절하게 되어있어서 따라가다보니 됐다 그냥.. 여기는 진짜 어려운 게 없다!!
나처럼 최신 기술과 많이 쓰이는 기술에 대해 1도 모르고 개발을 시작하는 사람이 있을 수 있다.
할 수 있다. 웹 개발은 한국어로 된 자료가 많아서 공부하기도 쉽다. 공부는 프로젝트를 시작하고, 프로젝트를 진행하면서 해도 늦지 않다! 원하는 게 뭔지 모르겠을 때, 구글의 힘을 빌리고 docs의 힘을 빌려 진행하면 된다. 나도 한 에러 때문에 몇 시간을 보내고 그랬다.
더 이상 아는 기술이 없다고, 그 기술을 공부하려면 너무 많은 시간이 든다고 그만 두지 맙시다.
하고 싶은 건 하고, 할 수 있는 것도 하고, 할 수 없는 것도 하는 사람이 됩시다 모두 :)