[바닐라JS,HTML,CSS] 그림판 웹 사이트 만들기 후기, 윈도우 서버 host (with 노마드코더)

 

안녕하세요

오늘은 HTML과 CSS에 바닐라 JS까지 사용하여 간단한 웹 사이트를 만들어 본 후기를 써보고자 합니다.

느낀 점과 결과물 위주이고 코드리뷰를 위한 글은 아닙니다.

그리고 노마드코더 님의 강의엔 없지만, 서버 hosting까지 해보도록 하겠습니다. 윈도우 기반입니다.

---

유튜브에서 노마드코더로 활동하시는 개발자님의 웹사이트에서
그림판 만들기 강의가 있습니다.
냉큼 따라 만들어보았습니다. 좋은 강의 감사합니다.
nomadcoders.co/javascript-for-beginners-2/lobby

Watch Now - 노마드 코더 Nomad Coders

---

~ 목차 ~

1. 개발 환경 및 강의로 만든 결과물

2. 강의를 따라서 구현한 기능

3. 보시는 분들을 위한 자문자답

 Q1. 이 전 바닐라JS에 대한 초보자용 강의를 꼭 듣고 들어야할까?

 Q2. 바닐라JS 를 얼마나 배우게 되었냐

 Q3. 서버 Hosting 어떻게 했냐!

 

---

1. 개발 환경 및 강의로 만든 결과물

• 개발환경: 윈도우, VScode
• 사용언어: HTML, CSS, 바닐라 JS
• 서버 호스팅: Github서버를 이용한 호스팅 & Apache서버를 이용한 호스팅

 

• 완성된 모습입니다. (부끄럽)

[그림판 사이트] 화면 캡쳐

공유하기에 참 부족하지만..

성장해가는 웹 개발 일지 중

무려 바닐라JS를 사용한... 초석이 될 프로젝트라고 생각하여 업로드하기로 하였습니다.

---

2. 강의를 따라서 구현한 기능

1. 그림을 그릴 캔버스 (배경색 기본값 흰색)
   1. 캔버스 위에서 마우스 우클릭 방지
   2. 캔버스 위에서만 그림이 그려지고 외부로 나가면 중지
2. 9가지 색상 선택 기능(기본값 검정)
3. 선의 굵기를 range로 조절(기본값 중간)
4. FILL버튼을 누르면 전체 캔버스를 원하는 색으로 덮어쓰기 기능, FILL-PAINT로 버튼 내부 텍스트 바꾸는 기능
5. SAVE 버튼을 누르면 그린 그림 다운로드(다운로드 폴더로 "Painting_JS[EXPORT]" 제목으로 다운)

 

초보라 그런지 역시 그림판이라기엔 부족한 반쪽짜리 사이트입니다.

당장 느꼈던 부족한 기능은

 

1. 최근 그린 선 취소 기능

2. 지우개 기능

3. 색상 팔레트 선택 기능

4. 색상 드래그 앤 드롭으로 칠하기

 

등..

 

대략 이정도. 이런 내용은 강의에서 다루지 않습니다!

하지만 강의를 이해하신다면 혼자서도 할 수 있을 것입니다.

저도 여유가 되면 연습 겸 완성도있는 프로젝트를 위해 추가할 계획입니다.

---

3. 보시는 분들을 위한 자문자답

 

Q1. 이 전 바닐라JS에 대한 초보자용 강의를 꼭 듣고 들어야할까?

A. 바닐라 JS에 대한 이전 강의가 있어서, 이 강의에서 처음 접하시는 분들을 위한 기초강의를 진행하시는 것 같습니다.

 

( nomadcoders.co/javascript-for-beginner )

바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders

개발자님이 이 강의를 수강했다는 전제하에 그림판만들기 강의를 진행하셨습니다.

전 객체지향이나 object 등에 대한 개념은 python과 java에서 다루어봤기 때문에 추상적인 개념이 낯설거나 생소하지 않았습니다. 그래서 바로 이 강의를 진행하였습니다.

 

다른 언어에서 쓰지 않았던 자료형이나 메소드 등의 이름이 낯설긴 하지만, 공부해야할 것들로 체크해두며 넘어갔습니다. 그래도 수업의 전체적 흐름에 방해가 되는 정도는 아니었습니다.

이전 객체지향 프로그램에 대한 경험이 없다면 띠용? 할 수 있다고 생각합니다. 이 경우에 해당되시면 이 전 강의를 들으시는 것을 조심스레 추천하는 바 입니다....!

 

 

Q2. 바닐라JS 를 얼마나 배우게 되었냐

A. 바닐라 Java Script에 대해서 정말 백지의 수준에서 듣기 시작했습니다.

이제는 Html, css파일에서 만든 object들을 가져와서 JS로 뭔가 만들려면 어떻게 해야한다 의 큰 맥락을 잡게 되었습니다. 자세한 Js의 철학이나 문법 등은 아직 구글과 제가 따라친 코드와 함께 해야할 것 같습니다. 하지만 맨땅에 구글을 했을 경우보다 훨씬 친숙하게 헤딩할 수 있을 것입니다.

 

 

Q3. 서버 Hosting 어떻게 했냐!

A. 노마드 코더의 강의엔 없는 내용입니다.

인프런의 생활코딩 Web1 강의를 듣고 따라해보았습니다.

내용이 길어져서 따로 글로 정리해놓았습니다. 참고해보시면 좋을 것 같습니다.

 

thoughtprovo-king.tistory.com/8

 

 

소통하고 싶은 내용이 있다면 언제나 댓글 남겨주세요. 감사합니다.