사이드 프로젝트

내가 데이터 고자라니! 😣 2020년 아무런 사이드 프로젝트도 안했다는 자책감에 2021년부터 이것저것 만들어보자고 생각을 했다. 회사에서는 백/프론트 가리지 않고 하고는 있지만 그래도 나는 프론트엔드를 더 잘 알고 좋아하는 프론트엔드 가이이다. 그러나 모든 프론트엔드 개발자들이 알고 있듯, 프론트엔드 개발자가 사이드 프로젝트 하는데에는 한 가지 문제가 있다! 그것은 바로 "보여줄 데이터가 없다는것" 😂 Open API를 찾아나서는 여정 🛣 이전에도 정말 정말 간단한 백엔드를 구축해서 사용하거나, GraphCMS 같은 CMS를 사용해서더 많이 더 적게같은 프로젝트도 진행했다. 그마저 안되면 넷상에 공개된 API Open Api(혹은 Public Api)를 사용하곤 해왔다.그런데 Open API를 찾는 것..

👋 들어가며 웹 개발 관련 다양한 강의들이 있지만 가장 매력적인 강의는 누가 뭐래도 클론 코딩 강의가 아닐까싶다. 내가 즐겨 쓰는 서비스를 내 손으로 만들어 볼 수 있다는 점은 강의에 대한 흥미를 돋우기 충분하다. 하지만 그 흥미에 비해 결과물인 클론 코딩을 제대로 활용하는 사람은 많지 않은 것 같다. 나름 클론 코딩 강의도 많이 듣고, 시행착오도 많이 겪으면서 결국에는 많은 도움이 되었던 경험을 바탕으로 글을 써보고자 한다. 🤷‍♂️ 클론 코딩이란? 말 그대로 클론하는 코딩으로, 주로 웹 개발에서 쓰이는 용어이며 인스타그램, 카카오톡, 에어비앤비, 유튜브, 넷플릭스 등 우리가 자주 사용하는 서비스나 웹사이트를 밑바닥부터 만들어가는 강의를 의미한다. 이후 이야기하는 클론 코딩은 클론 코딩 강의를 의미한다..

🐶 리액트(React)를 이용해 이모지 빙고게임 만들기 🐶 노마드 코더 슬랙을 둘러보던 중, 빙고 게임을 과제로 만드시던 분이 빙고 검증에 대한 구현을 질문하셨다. 처음에는 Codesandbox에 돌아가는 코드를 만들어서 보여드리면 어떨까 생각하다가, "내 사이드 프로젝트로 좋을 것 같은데?"라는 생각에 바로 당일 빙고게임 사이드 프로젝트 작업을 시작했다. 컴포턴트(Component)화 시작하기에 앞서 생각났던 프로젝트가 바로 리액트 공식 문서에서 제공하는 튜토리얼인 틱택토 게임이었다. Board와 Squrare로 컴포넌트화 되어있던게 빙고에 적용하기 딱이였고, 똑같이 Board와 Square라는 컴포넌트를 만들어서 진행했다. 함수구현 빙고에서 구현해야할 함수는 다음과 같다. 1. 특정 칸 클릭시 해당 ..

더 많이 더 적게 : 어떻게 발전시켜나갔는가? 사이드 프로젝트로 기획한 사이트인 가 나온 지 1달이 좀 넘었다. 침착맨님이 방송에서 잠깐 시간 남을 때 해줬으면 했던 게임인데 어쩌다 보니 다양한 스트리머들이 게임을 즐기면서, 금전적인 문제와 남들이 더 나은 게임을 즐겨야 한다는 생각에, 나도 재미로 이 사이트를 굴리기 힘들어졌다. ▲ 처음으로 게임을 즐긴 이말년 만화가님과 주호민 만화가님 가장 큰 문제는 역시 돈이었다. 도메인은 그냥 버리는 돈으로 생각하고, 좋은 경험했다고 넘어갈 수 있겠지만 서버비가 한 순간 감당할 수 없을 만큼 높아져 있었다. 게다가 정말 야매로 만든 코드라 백앤드 없이 오로지 프론트앤드로만 코드를 짜서 ZEIT으로 올렸던 프로젝트인데, 게임 내에서 계속 이미..