정상적으로 완료되었다면 netlify 에 접속한다.
\nImport an existing project에서 Github를 클릭한다.\n
모바일 청첩장이 있는 저장소를 찾아 클릭한다.\n
Build command를 CI= npm run build로 바꾸고 Deploy site를 클릭한다.\n
8. 수정하고 배포하기
\n변동사항을 commit 한 후 깃허브에 푸시하면 변동사항이 모바일 청첩장에 배포된다.
\n\n
\n\n🤔 저의 개발환경에서만 테스트하였기 때문에 혹여나 따라 하시다 안되는 부분이 생길 수 있을 거 같습니다. 망설이지 마시고 댓글 남겨주시면 적극적으로 반영할수 있게 노력하겠습니다 :)
\n
\n
위 과정을 따라하시면서 궁금하신 점이 있다면 아래 댓글로 남겨주세요!👇
\n\n올가을 우리 형이 결혼식을 하게 되는데, 조금 특별한 선물을 해주고 싶다는 생각에 모바일 청첩장을 만들어주자고 생각하였다. 기존 모바일 청첩장은 결혼식이 끝나면 사이트도 없어지기에 내가 직접 만들어서 평생 간직할 수 있는 사이트를 선물하면 조금 더 특별할 거로 생각했다.
\n
📝 모바일 청첩장 요구사항
\n- \n
- \n
처음 보이는 화면에는 동영상을 넣어 시각적으로 더 좋은 느낌을 연출하자.
\n \n - \n
대중적인 모바일 청첩장을 본 결과 배경은 종이 질감을 사용하여 편안한 느낌을 연출하였다. 따라 하자 😁
\n \n - \n
계좌번호 복사 기능, 카카오톡 지도를 사용하여 위치정보 제공하자
\n \n - \n
요즘 대부분 카카오톡을 이용하여 모바일 청첩장을 공유하므로 카카오톡 링크 기능 및 일반 링크 복사기능을 만들자
\n \n
🛠 모바일 청첩장 사용 기술
\n우선 기술 블로그를 만들 때 사용했던 거와 같이 정적 사이트 생성기인 Gatsby를 사용하였고 React, Ant Design, Styled-Components를 사용하여 만들었다. 갤러리 부분은 react-image-gallery라이브러리를 사용하였으며, 계좌번호 및 링크 복사 기능은 react-copy-to-clipboard라이브러리를 사용하였다. 배포는 netlify를 채택하였다. 기본적인 디자인을 제외하고는 거의 모든 기능들을 라이브러리를 이용하였기에 어려운 점은 없었으나 배포까지 진행하면서 어려웠던 점 몇 가지를 적어보고자 한다.
❗️ 고민했던 부분
\n🗾 Kakao Map 사용하기
\n결혼식 장소 정보를 제공하기 위하여 KakaoMap을 사용하였다 이미지파일이 아니라 움직일 수 있는 지도가 필요하였기에\n\n \n ![\"wedding-image-01.png\"](\"/static/8d85cc205a577ae767bf56b56596952c/37523/wedding-image-01.png\" "\\"\\"")
\n
위의 화면에서 소스 생성하기 버튼을 클릭하면 아래와 같은 코드를 제공한다. 이 코드를 삽입하면 위의 지도가 나타나게 된다.
<!-- * 카카오맵 - 지도퍼가기 -->\n<!-- 1. 지도 노드 -->\n<div\n id=\"daumRoughmapContainer1653547385965\"\n class=\"root_daum_roughmap root_daum_roughmap_landing\"\n></div>\n\n<!--\n\t2. 설치 스크립트\n\t* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.\n-->\n<script\n charset=\"UTF-8\"\n class=\"daum_roughmap_loader_script\"\n src=\"https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js\"\n></script>\n\n<!-- 3. 실행 스크립트 -->\n<script charset=\"UTF-8\">\n new daum.roughmap.Lander({\n timestamp: '1653547385965',\n key: '2adxz',\n mapWidth: '640',\n mapHeight: '360',\n }).render();\n</script>여기서부터 문제가 시작되는데 나의 프로젝트는 Gatsby/React이기 때문에 이거를 바로 집어넣을 수가 없다는 것이었다. 방법을 찾기 위해 열심히 검색하던 중 타사 스크립트 로드 의 글을 읽고 결국 리액트에서 동적으로 카카오 스크립트를 로드해야 한다는 걸 알게 되었다.
const Location = () => {\n // 카카오 맵 불러오기\n\n // <!-- 3. 실행 스크립트 -->\n const executeScript = () => {\n const scriptTag = document.createElement(\"script\");\n const inlineScript = document.createTextNode(`new daum.roughmap.Lander({\n \"timestamp\" : \"1652464367301\",\n \"key\" : \"2a8fe\",\n \"mapWidth\" : \"640\",\n \"mapHeight\" : \"360\"\n }).render();`);\n scriptTag.appendChild(inlineScript);\n document.body.appendChild(scriptTag);\n };\n\n // <!-- 2. 설치 스크립트 * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다. -->\n // document.write 문제가 발생해서 해당 파일을 직접 가져온다음 수정했음\n const InstallScript = () => {\n (function () {\n let c = window.location.protocol === \"https:\" ? \"https:\" : \"http:\";\n let a = \"16137cec\";\n\n if (window.daum && window.daum.roughmap && window.daum.roughmap.cdn) {\n return;\n }\n window.daum = window.daum || {};\n window.daum.roughmap = {\n cdn: a,\n URL_KEY_DATA_LOAD_PRE: c + \"//t1.daumcdn.net/roughmap/\",\n url_protocal: c,\n };\n let b =\n c +\n \"//t1.daumcdn.net/kakaomapweb/place/jscss/roughmap/\" +\n a +\n \"/roughmapLander.js\";\n\n // document.write -> doumnet.body.append로 수정\n const scriptTag = document.createElement(\"script\");\n scriptTag.src = b;\n document.body.append(scriptTag);\n scriptTag.onload = () => {\n executeScript();\n };\n })();\n };\n\n useEffect(() => {\n InstallScript();\n }, [InstallScript]);\n\n return (\n <div\n id=\"daumRoughmapContainer1652464367301\"\n className=\"root_daum_roughmap root_daum_roughmap_landing\"\n ></div>\n );위와 같이 수정하니 정상적으로 동작하였다. react에서 외부 라이브러리를 이런 식으로 사용했던 경험이 특별했다.
\n🖥 배포할 때의 몇 가지 에러
\n- \n
- “build.command” failed 에러 해결하기 \n
6:48:44 PM: failed Building production JavaScript and CSS bundles - 42.123s\n6:48:44 PM: error Generating JavaScript bundles failed\n6:48:44 PM: Can't resolve '../components/Greeting' in '/opt/build/repo/src/pages'\n6:48:44 PM: If you're trying to use a package make sure that '../components/Greeting' is installed. If you're trying to use a local file make sure that the path is correct.\n6:48:44 PM: \n6:48:44 PM: ────────────────────────────────────────────────────────────────\n6:48:44 PM: "build.command" failed\n6:48:44 PM: ────────────────────────────────────────────────────────────────\n6:48:44 PM: \n6:48:44 PM: Error message\n6:48:44 PM: Command failed with exit code 1: CI= npm run build (https://ntl.fyi/exit-code-1)\n6:48:44 PM: \n6:48:44 PM: Error location\n6:48:44 PM: In Build command from Netlify app:\n6:48:44 PM: CI= npm run build\n6:48:44 PM: \n6:48:44 PM: Resolved config\n6:48:44 PM: build:\n6:48:44 PM: command: CI= npm run build\n6:48:44 PM: commandOrigin: ui\n6:48:44 PM: publish: /opt/build/repo/public\n6:48:44 PM: publishOrigin: ui\n6:48:44 PM: plugins:\n6:48:44 PM: - inputs: {}\n6:48:44 PM: origin: ui\n6:48:44 PM: package: '@netlify/plugin-gatsby'이 문제는 처음 나왔을 때 뭐지? 싶었는데 정말 어이없는 실수였다 에러 내용을 읽어본 결과 Greeting 경로가 이상하다고 하는 내용이었고 혹시나 하고 코드를 하나하나 본 결과 index.js에서 Greeting 컴포넌트를 불러오는 과정에서 경로를 잘못 적어준 것이었다. 분명 로컬에서 테스트할 때는 정상적으로 동작했기에 단순 실수를 찾는데도 조금의 시간을 들였던 거 같다. 아직도 왜 로컬에서는 정상적으로 동작했는지는 모르겠지만 에러 내용을 믿고 다음부터는 실수를 더욱 빠르게 잡도록 노력해야겠다.
\n2.파일 크기 초과 에러
\n이것 또한 단순한 문제인데 간과해서 생긴 문제였다. 정적인 사이트에서 지원하는 용량보다 더 큰 파일을 넣었기 때문에 생긴 에러인데 확인해보니 동영상파일 크기 하나가 너무 컷기 때문에 리사이즈하여 빠르게 해결할 수 있었다.
\n6:56:09 PM: The function zip ../../../tmp/zisi-628dfc8c696ab60008c7d3be/__ssr.zip size is 105 MB, which is larger than the maximum supported size of 52.4 MB.\n6:56:09 PM: There are a few reasons this could happen, such as accidentally bundling a large dependency or adding lots of files to "included_files".\n6:56:09 PM: Contains 43 files\n6:56:09 PM:\n6:56:09 PM:\n6:56:09 PM: These are the largest files in the zip:🧑🏻💻 후기
\n👏 의미 있는 토이프로젝트
\n이번 프로젝트는 의미가 있어서 좋았다. 간단한 정적인 사이트지만 누군가를 위해서 열심히 만들었고 또 디자인 가안을 형에게 보여주었을 때 좋아하는 모습을 보면서 다시 한번 개발자로 직업을 정한 것에 뿌듯함을 느꼈다. 아마 나 뿐만이 아니라 모든 개발자분이 사람들에게 행복을 주는 프로젝트를 하고 싶을 것인데 이번 프로젝트는 그 니즈를 완벽히 충족한 프로젝트였다고 생각한다. 다음에도 이런 의미 있는 프로젝트를 진행할 기회가 있다면 주저 없이 시작할 것 같다.
\n🤔 개발회고
\n사실 입사하기 전 빠르게 만들려고 하다 보니 100% 만족스럽지는 않았다. 디자인도 만들면서 더 욕심이 났지만 절충했던 부분도 있고 외부 라이브리를 사용하여 빠르게 만들었지만 직접 기능들을 만들었으면 더 의미 있는 프로젝트였겠다라는 생각도 하였다.
\n하지만, 이번 프로젝트로 인하여 큰 프로젝트가 아니어도 사용자에게 좋은 가치를 줄 수 있다라는 자신감을 얻을 수 있엇고, 다음에 내 주변 사람들이 결혼식을 할 때 지금보다 조금 더 당당히 “내가 만들어 줄게!!” 라고 할 수 있을 거 같다.✌️
\n\n
궁금하신 점이 있다면 아래 댓글로 남겨주세요!👇
\n\n사실 1일 1커밋을 시작할 당시 1년을 채울 시점에 회고를 해보자고 생각하였지만, 6월 2일인 오늘부터 입사하게 되어 혹시 모를..(못 채울까 봐…?😂 ) 부랴부랴 회고를 해보기로 한다.
\n
🤔 왜 1일 1커밋을 시작햇어?
\n사실 나에게 족쇄? 채찍? 을 주고 싶었다. 내가 공부했던 것들을 기록하는 것도 좋겠다고 생각했지만 작은 행동들이 하나하나 모여 큰 결과를 만들 수 있다고 생각하기에 1일 1커밋은 그런 나에게 적합하다고 생각하였고 나 스스로가 동기부여가 될 수 있다고 생각하였다.
\n😲 주로 어떤 것들을 커밋해 나갔어?
\n사실 처음 1일 1커밋을 시작할 때는 부트캠프를 하고 있었기에 어렵지 않았다. 1달마다 프로젝트를 만드는 과정이었기 때문에 오히려 기능단위로 커밋을 끊어서 해야 하는데 한 커밋에 너무 많은 기능을 담아서 푸쉬하는 오류도 범했던 거 같다. 2022년 2월 부트캠프를 수료하고부터는 주로 아래의 것들로 커밋을 채웠다.
\n- \n
- 개인 프로젝트 \n
- 알고리즘 \n
- TIL(조금..😉 ) \n
개인 프로젝트를 진행하면서 전보다 커밋할 때 커밋단위와 커밋메시지를 신경 쓰면서 진행하였었고 코딩테스트가 한 번에 몰려있엇던 적이 있었는데 2-3주전부터는 알고리즘 한 것들을 커밋해 나갔었다. 지금까지 계속 기록하면서 공부하고 있지만 아직도 퀄리티가 좋다고 생각하지 않는다.😢 그래도 계속 진행해나가면서 더 성장하기 위해서 노력할 것이다.
\n💡 1일 1커밋을 하면서 장단점은?
\n👍🏻 장점
\n- \n
- 개발자에게 중요한 덕목 중 하나가 꾸준히 공부할 줄 아는 사람이라는 것인데 Github를 통해서 어필할 수 있다! \n
- 어느 정도 하다 보면 이미 했던 게 아까워서라도 1일 1커밋을 하기 위해 공부하게 되는데 이에 따라서 매일 코딩하는 습관이 생긴다.(개인적으로 이게 제일 좋은점 인거 같다👏 ) \n
👎🏻 단점
\n- \n
- 위에 내용과 겹칠 수도 있는데 매일! 무조건! 해야 한다는 것 때문에 번아웃이 올 수 있다.(꾸준히 나는 잘하고 있다고 마인드 컨트롤이 필요한 거 같다.) \n
- 커밋을 하기위한 공부를 하게된다. (이 내용에 설명을 조금 보태보자면 커밋을 할수 있는 공부 말고도 영어 공부, 개발 서적 읽기 등 커밋으로 남기기 애매한 부분들에 대해서 조금 소홀하게 되는 거 같다. 지금 생각해보면 이것 또한 TIL로 블로그에 포스팅해보면 어떨까 싶다.) \n
😺 앞으로의 계획은 뭐야?
\n8개월간의 회고를 적고 있지만 계속해서 1일 1커밋을 하며 공부해나갈 생각이다. 다만 걱정되는 부분이 지금 다니는 회사가 소방서, 경찰서 같은 공공기관의 관제시스템을 만드는 곳이라 출장이 꽤 있을 것으로 예상되어서 출장이 있을 때 어떻게 해야 할지 생각해보아야 할 것 같다. 최대한 할 수 있는데까지 1일 1커밋을 유지할 생각이지만 애초에 꾸준히 공부하는 것에 목표를 두고 시작했던 것만큼 어쩔 수 없는 상황에서는 포기..(는 없다 😝 ) 앞으로는 회사에서 자주 사용하고있는 전자정부 프레임워크와 내가 공부하기 희망했던 SSR, 아직 공부하지 못한 Typescipt를 공부하면서 개인 프로젝트 위주로 진행할 예정이다. 아직까지는 1일 1커밋 만큼 내가 이만큼 성장하기 위해서 노력하고 있다는 걸 보여줄 좋은 지표가 없다고 생각되기에 앞으로도 계속 진행할 것이다! 1일 1커밋 1년 후의 회고를 기약하면서 글을 마치도록 하겠다. 긴 글 읽어주셔서 감사합니당 🥰
\n