DIY 새해 카드: React 웹앱(Web App
소중한 사람들에게 마음을 표현하는 나만의 방법
크리스마스 휴가지만 별도로 휴가를 길게 내진 않았다. 크리스마스 전후로 빨간 날이었고 마지막 날엔 반차만 써도 되어서 시간적 여유가 있었다. 연말을 맞이하며 그동안 소중하게 이어온 인연들에게 감사한 마음을 전하고 싶었다. MBTI상 전형적인 I형에다 집순이라 많은 인연은 아니지만, 부끄럽더라도 내 마음을 온전히 전하고 싶었다.
사실 연말에 시간적 여유가 생길 때 내가 하고 싶었던 것 중 하나는, 작년 프로그래밍 부트캠프에서 배웠던 코딩 스킬 복습이었다. 당시 Full-stack web development 부트캠프로, 자바스크립트와 리액트, Node.js를 주로 배웠고, 이후 독학으로 SQL과 Nexus, Typescript도 조금 더 공부했다. 그런데 새 일이 바빠지면서 제대로 공부를 못했었다. 오랜만에 VSC(Visual Studio Code, 비주얼 스튜디오 코드)를 켜보니 간단한 셋업도 버벅거렸다. 심지어 Github 커맨드도 다 까먹었다. (도와줘 ChatGPT ㅋㅋㅋ 역시 코딩할 때 내 베프는 너뿐...)
사실 나는 전형적인 문과라 코딩식 사고가 정말 어렵다. (네, 머리가 나빠요 ㅠ_ㅠ) 그래도 부트캠프 때는 의외로 너무 재밌게 배웠다. 특히 다른 일이 잘 안 풀리고 머리 아플 때면 요리하듯이 코드워(https://www.codewars.com)에 가서 8-6 난이도 문제를 풀곤 했다. 그 순간에 집중할 수 있었고, 1시간 넘게 끙끙대다 문제를 풀어냈을 때의 성취감은 대단했다. 물론 나보다 훨씬 빨리 잘 푼 사람이 56,496367명이나 되는 걸 보면...ㅎㅎㅎ 금방 겸손해졌다.
2024년의 마지막 날인 12월 31일, 드디어 책상에 자리를 잡고 앉았다. 예전 자료로 React 기본 지식을 되살리고 React 기반 웹앱을 만들었다. 사람들이 이름과 비밀번호(핸드폰 뒷자리 4개)를 입력하면 그 사람을 위해 쓴 메시지를 다른 페이지에서 보여주는 간단한 앱이었다.
나만의 2025 Greetings React Web App :)Components도 2개에 Route도 2개뿐이고, 이름과 비번, 에러 메시지만 State change하면 되는 매우 간단한 웹앱이었다. (웹앱이라 하기도 민망할 정도ㅎㅎㅎ) 하지만 React 기본 개념 복습용으로는 완벽했다. 게다가 카톡이나 왓츠앱으로 일일이 메시지 보내는 것보다 한 곳에 모아두니 편했다.
Canva로 지인들에게 보낼 한영 메시지를 작성해서 Users.js에 넣고, const user = users.find((u)=> u.codeName ===codeName)로 유저를 찾았다. 이름이 없거나 비밀번호가 틀리면 에러 메시지가 뜨게 해서 자기 이름과 폰번호 뒷자리를 아는 사람만 메시지를 볼 수 있는 아주 가벼운(!) authentication 기능도 넣었다.
31일 오후 2시에 급하게 시작했다. 1월 1일에 보내고 싶어서였다ㅎㅎㅎ 그래도 집중해서 디자인부터 깃허브 푸시, 배포까지, 이렇게 뜬금없이 시작한 프로젝트는 6시에 무사히 끝냈고, 구현된 최종 링크를 사람들에게 보냈다. 한참 만들 때는 메시지를 보낼 때 굳이 이렇게까지 해야 하나 싶었는데, 막상 보내고 나니 내 마음을 잘 전달한 것 같아 기분이 좋았다. 가족과 친구들, 지인들도 고맙다며 답장을 보내왔다.
마음먹은 대로 소중한 인연들에게 때맞춰 마음을 전해서 기분이 좋다. 좋은 새해의 출발이다. :))
내가 만든 Web App 편지 화면. 이건 내 자신에게 보내는 메시지다. :).
