비전공 개발자

다음 명령어를 입력하여 서버를 실행하고 결과물을 확인한다. localhost:8080에 접속하면 확인할 수 있다. npm start 마지막으로 배포하고 마무리한다. 배포는 Heroku에 하였다. 기간 프로젝트 개발 기간 : 2020년 03월 1일 ~ 2020년 03월 15일 (2주) 블로그 정리 기간 : 2020년 04월 04일 ~2020년 04월 05일 (2일) 그림판 앱 배포 링크 https://jb-painter.herokuapp.com/ Painter jb-painter.herokuapp.com 그림판 앱 깃 주소 https://github.com/Jongbeom2/painter Jongbeom2/painter Contribute to Jongbeom2/painter development by c..

프로젝트의 모든 javascript는 app.js에 작성하였다. app.js // Constant const INITIAL_COLOR = '#2c2c2c' const INITIAL_BG_COLOR = 'white'; const INITIAL_LINE_WIDTH = 2.5; const BTN_CLICKED_CN = 'controls__color__clicked'; // Dom Element const canvasParent = document.querySelector('#canvas'); const canvas = document.querySelector("#jsCanvas"); const ctx = canvas.getContext('2d'); const colors = document.querySelec..

프로젝트에서는 두 개의 css 파일을 사용한다. reset.css와 style.css이다. 우선 reset.css에 대해 설명하겠다. reset.css는 직접 작성한 파일은 아니다. reset.css는 css를 초기화하기 위해 사용하는 파일이다. 브라우저마다 기본 태그의 스타일이 다르기 때문에 먼저 초기화를 한 후에 스타일을 적용시켜야 한다. reset.css는 다양한 버전이 있어 각자의 상황에 맞게 사용하면 된다. 이 프로젝트에서는 여기의 reset.css를 사용하였다. https://gist.github.com/DavidWells/18e73022e723037a50d6 reset.css GitHub Gist: instantly share code, notes, and snippets. gist.gith..

세팅 프로젝트 파일의 전체 구조는 다음과 같다. app.js, index.html, reset.css, style.css가 앞으로 작성할 파일들이다. 우선 server를 생성하고 시작하기 위한 초기 세팅을 한다. npm init 이를 실행하면 package.json이 생성된다. 이후 http-server를 다운받는다. npm i http-server 서버를 실행할 수 있도록 package.json에 스크립트를 작성한다. package.json은 다음과 같다. { "name": "painter", "version": "1.0.0", "description": "nomadcoders", "main": "app.js", "scripts": { "start": "http-server -c-1" }, "depen..

Vanilla JavaScript를 이용하여 웹에서 작동하는 그림판 앱을 구현하는 프로젝트이다. 데스크톱 프로그램 중에 그림판의 축소된 기능을 가진 앱이다. 접속 링크는 다음과 같다. https://jb-painter.herokuapp.com/ Painter jb-painter.herokuapp.com 완성된 형태는 다음과 같다. 기능은 크게 다섯 가지가 있다. 1. 캔버스의 크기를 조절하는 기능 2. 캔버스를 색칠하거나 그림을 그리는 기능 3. 결과물을 이미지로 저장하는 기능 4. 리셋 기능 5. 색 선택 기능 화면은 html 코드로 기능은 Vanilla JavaScript로 구현하였고 Heroku에 배포하였다. 소스 깃 주소 https://github.com/Jongbeom2/painter Jongb..