UNTITLED

[힙한 취미 코딩 이벤트] 48시간내로 웹사이트 개발하기! (feat.스파르타 코딩 - 추억소환 코딩 패키지)

이도울 2021. 9. 12. 00:05
SMALL

이번에 스파르타 코딩에서 이벤트를 진행하길래 평소에 관심이 있던지라 곧바로 참여를 진행했다! 나는 엄청난 개발자니까 48시간내에 개발하는 것은 큰 무리가 없을 것이다! 라고 호기롭게 도전했다.

 

이벤트 도저언!

세상에 코딩을 무료로 배우고 맥북도 준다니... 대박적...

 

[]하는 내가 더 힙해지는 스파르타 코딩클럽이라는 이벤트는 내가 원하는 분야의 코딩클럽으로 입장하는 것으로 시작한다. 바로 로그인을 했지 후후... 왜냐면 입장만 해도 선물을 준다는 것이 마음에 들었다...!

 

평소에 게임을 즐겨하기도하고 경품인 게임키보드가 마음에 들어서 게임으로 입장권을 발급 받았다! 히히

 

제가 고른 미션은요...
추억의 공간을 지도에[찍어라] 입니다!

평소에 지도 API를 사용해보고 싶기도 했고, 추억의 공간을 찍는다는 의도가 마음에 들어서 골랐다.

48시간 이제 시작이다!

우선 기초 듀토리얼을 다 듣고, 본격적으로 수업이 시작되었다. 듀토리얼에는 강의에 대한 기본적인 설명과 이벤트에 대한 설명을 해주셨다. 48시간안에 미션을 달성하면 선물을 준다고..?(입틀막) 그리고 더욱 놀라운 건 2일의 시간에 내가 나만의 웹사이트를 만든다는 것이 너무 재미있었다. 또한 수업에 필요한 프로그램이나 기본적인 것들을 아예 처음부터 알려줘서 너무 좋았다..(세심해)

 

혹시나 문제가 생기면 바로 질문할 수 있도록 SLACK 채널도 있었다.

 

 

 

강의 한줄 후기 : 엄청나게 잘 만든 인스턴트 식품..!

아주 좋았던 건 보통 강의들은 아주 세세하게 기초부터 설명해서 강의가 지루하거나 바로 응용으로 넘어가서 헷갈리거나 이해를 하지 못했던 부분들이 많았는데, 이 강의는 기초와 응용 그 사이 어딘가를 빠르게 가르쳐 주었다. 웹 개발에 필요한 최소한의 지식 그러나 영양가가 좀 있는 그런 뭐랄까 인스턴트인데 잘 만든...? 그래서 더 맛있는 강의였다.

 

HTML의 태그 경우 헷갈리는 부분이나 어떻게 작성해야하는지를 쏙쏙 잘 설명해주셔서 이해하는데 어려움은 없었다. 그냥 작성하는대로 잘 따라가니까 어려운 부분이 없었는데 아예 웹개발이 처음도 아니었고, 강사님이 설명을 못하시는게 아니어서 어려운 부분이 없었겠지만... 아예 왕왕초보 분들은 SLACK 채널에 도움을 청할 수도 있겠다고 생각했다. 물론 이 강의 뿐 아니라 더 고급 강의들은 질문이 많겠지만..!

 

특히 HTML CSS가 어려운 것이 구조를 머릿속으로 생각해서 작성해야한다는 것인데, 쉽게 이미지로 만들어서 박스 구조를 잡아주셔서 따라가기 훨씬 편했다.

 

카카오 API를 사용하는 부분에 있어서도 공식 문서를 같이 보면서 코드를 적용하는 부분을 알려주신 점이 좋았다. 이 강의를 고른 이유도 지도 API를 다뤄보고 싶어서였는데, 그런 부분에 있어서 기초적인 궁금증은 해결되었다.

 

KAKAO WEB 지도 API 공식 문서 사이트

 

 

덕구와 함께한 추억, 웹사이트로 이제 기록할 수 있다!

개강이 시작되고 바빠지기전에 잠시 시골에 다녀왔었는데 시골에서 기르는 덕구와 같이 산책을 다녔다. 날씨가 맑고 선선한데 시골의 맑은 공기까지 더해져서 나에게는 이번 가을에 소중한 추억이 되었고, 웹사이트를 덕구와 함께한 추억으로 만들고 싶었다.

48시간 안에 만든 나의 웹사이트..! (감격적)

강의를 따라가며 하나 둘 이미지를 넣고, 지도를 만들고, 좌표를 찍고, 글을 작성하는 과정에서 추억을 다시 되돌아보고 힐링이 되는 느낌이었다....(코쓱)

강의 모바일 버전에는 덕구 눈이 잘 안보이길래 모바일일 경우 IMG의 HEIGHT 값을 조정했다! 그러자 보이는 덕구의 깜장 올리브

모바일 버전까지 만드는 방법을 알려주어서 좋았당... 나도 나름 응용해서 덕구의 귀여운 점 두개가 모바일에서도 보이도록 수정했다.

 

오프라인 환경에서 모든 것을 다 만든 뒤에 웹사이트를 만들기 위해 수업에서 제공한 사이트에 접속했다.

무야호!

이 밑에는 제목과 게시글 장소 이미지등을 입력할 수 있게 해두었고, 작성이 완료되면 링크가 생긴다!

 

 

덕구 사랑해 님의 추억사진

내가 만든 첫번째 웹페이지!

family.spartacodingclub.kr

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아놔 너무 귀엽잖아..? 수업에서는 카카오톡으로 공유하는걸 보여주었지만 이렇게 블로그 링크로도 요로코롬 잘 나오는데 뜬금없이 귀엽다ㅋㅋㅋㅋ 덕구야.. 오래오래 잘 살아야해!! 시골집 수호자..!

 

위 링크를 클릭하면 내가 작성한 게시글로 이동한다.

그리고 이 웹페이지 링크를 제출하면 완주 완료!

 

짜잔! 완주했다!!

 

공부를 하면서 배운 내용과 생각들을 적는 과정이 중요한 것 같다

 

이렇게 글을 적으면서 짧게 나마 배웠던 HTML CSS JAVASCRIPT의 간단한 원리가 생각났다. 그리고 이런 작은 지식만으로도 나만의 추억을 기록할 수 있는 웹사이트를 만들고 사람들에게 공유까지 할 수 있다는 것이 얼마나 강력한지를 느꼈다. 앞으로도 이런 이벤트가 있으면 종종 참여하고, 개발할 때마다 이렇게 개발 일지를 남겨보는 것도 재미있고 뿌듯할 것 같다. 지금이 딱 그 감정이 들기 때문이다! 뿌-듯-

 

르탄이가 현실세계로 돌아왔다니 이런거에 나 감동하네(코쓱)

LIST