저는 웹 개발을 공부한 지 6개월 정도 된 대학생입니다! 원래 코딩이랑 깊은 관련이 없는 전공으로 살다가, 노마드코더를 처음 알고 개발에 발을 들이게 되었네요ㅎㅎ YouTube에 업로드 된 니꼬쌤 무료 강의 들으면서 개발 공부를 따라하면서 시작해서 지금은 퀘스트 깨듯 챌린지 도전하면서 공부하고 있어요. 아직은 웹 개발 언어로 자바스크립트를 살짝 다뤄본 코린이지만, 계속 공부해서 웹 개발 이외에도 여러 개발 분야를 넓게 공부해 볼 생각입니다!
서비스 소개
메모 기능
웹 로컬스토리지를 활용해서 메모를 추가하고 삭제, 편집하기
완료 영역과 미완료 영역을 나눠서 메모장 정리하기
사이트 저장 기능 & 디자인
웹 로컬스토리지를 활용해서 링크 이동과 삭제하기
디자인은 핀터레스트에서 웹 디자인 버튼 기능을 참고했고, class로 만들어서 필요한 부분에 반복해서 활용했습니다!
사이트와 관련된 이미지는 사이트 이름을 문자열로 받은 뒤에, 문자열 중 사이트 이름과 관련된 부분을 끊어서 FontAwesome 에서 이미지를 가져오게 만들었어요!
개발 과정 (어려웠던 점과 해결방법)
중간 중간에 계획을 많이 수정하고 엎어서 굉장히 시간이 많이 걸렸네요.. 처음에는 express를 활용해서 서버를 만들고, 메모 관련된 정보를 데이터베이스로 다뤄보는 게 어떨까하는 생각으로 시작했지만.. 다른 페이지로 넘어가는 게 자연스럽지 않았고 정보를 웹 로컬스토리지에서 다루는 걸로도 충분할 거 같다는 생각이 들어서 한 번 갈아 엎었습니다..ㅎㅎ 개발에서 프로젝트를 진행할 때 계획 단계가 중요하다는 걸 다시 깨닫게 되었네요. 다음 프로젝트 할 때에는 비슷한 상황이 나오지 않도록 계획단계를 잘 준비해야 할 것 같아요
원래는 아래의 영상과 같이 버튼 클릭 모션이 나오지 않는 심플한 디자인으로 만들었지만, 어딘가 부족하다는 생각이 들었고 프로젝트를 또 수정했어요. 버튼 클릭 시 애니메이션이랑 전체적인 디자인을 클래스를 활용해서 Btn.js , BtnActive.js 라는 파일로 만들었어요. 단순하게라도 클래스를 활용하니 재사용해서 금방 끝낼 수 있었어요
깃헙에 배포하는 과정에서도 시간을 많이 썼네요.. 기존 Master branch 에서 다른 branch 로 나눠서 여러 시도를 해 보고, 파일 경로도 참 많이 수정했어요. 이것저것 시도 끝에 github.io 에 오류 없이 프로젝트를 올리는 데에는 성공했지만 아직 Git & Github 공부도 많이 부족한 것 같다는 생각이 드네요ㅎ
(처음 했었던 버튼 모션 없는 디자인입니다!)
4. 앞으로 계획 & 기타
css layout, class, webpack, Git & Github 관련 부분 등등.. 이번 프로젝트를 진행해보면서 확인했던 부족한 공부들을 좀 더 보완할 생각이에요. 그리고 자바스크립트를 좀 더 깊이있게 공부해 보면서 반응형 웹 개발, 모바일 앱 개발, 서버 개발, 머신러닝 등등.. 이것저것 많이 공부할 것 같아요!
원래 필력이 좀 부족해서 쓰고나니 잘 썼는지 모르겠네요.. 긴 글 읽어주셔서 감사합니다!!