비전공 개발자

다음 명령어를 입력하여 서버를 실행하고 결과물을 확인한다. 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..

비동기 함수의 결과에따라 서로 다른 코드를 작성하고 싶으면 콜백 함수를 이용해야한다. 하지만 이는 가독성을 해치게되고 이 문제를 해결하기 위해 프로미스 (Promise)가 등장한다. 하지만 프로미스를 사용하더라도 좀 더 코드를 간결하게 작성하고 싶은 요구가 있었고 이를 개선하기 위해 async, await가 등장한다. async 를 function 앞에 두어 선언하고 그 함수 내부에 비동기 함수 앞에 await를 두고 호출하면 .then이나 .catch를 쓰지 않더라도 코드를 간결하게 작성할 수 있다. 물론 이때 가정은 await를 두고 호출할 비동기 함수는 프로미스를 반환하는 함수여야한다. 일단 비동기 함수를 사용할 때 발생하는 가독성 문제와 이를 프로미스로 해결하는 방법을 이해하지 못하면 async,..

비동기 함수를 사용할 때 성공한 경우와 실패한 경우에 따라 코드를 작성해야 하는 경우가 많다. 이때 가독성이 매우 떨어지는 코드를 작성하게 된다. 예를 들어 다음과 같은 testLuck이라는 이름의 비동기 함수가 존재한다고 생각해보자. 이 함수는 비동기적으로 1초후에 각각 1/2의 확률로 isErr을 true로 저장하거나 false로 저장하여 callbackFunc 함수를 호출한다. 운이 좋으면 isErr가 false가 되고 운이 나쁘면 isErr가 true가 된다는 의미를 담아 예시로 함수를 작성하였다. 이제 이 비동기 함수를 사용하는 코드를 작성하겠다. 이때 콜백 함수를 여러 번 호출하면 위에서 언급한 가독성이 떨어지는 코드를 작성하게 된다. 이 코드는 testLuck이라는 함수를 첫 번째로 호출하고..

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..

자바스크립트 런타임 환경 Call stack과 event loop는 자바스크립트의 동작 원리를 이해하기 위해 꼭 숙지해야하는 개념이다. 자바스크립트가 실행되는 환경을 의미하는 자바스크립트 런타임 환경은 다음과 같이 구성되어 있다. 크게 Memory heap, call stack, web apis, callback queue, event loop가 있다. Call Stack Call stack은 함수의 호출을 저장하는 자료구조이다. 어떤 함수를 호출하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓으면서 가장 위에 쌓인 함수를 가장 먼저 처리한다. 대표적인 예제는 다음과 같다. 가장먼저 func1을 호출하므로 call stack에 func1이 쌓인다. 그리고 func1에서 func2를 호출하므로..

Closure 자바스크립트에서 closure는 함수의 scope에 존재하지 않는 변수에 접근이 가능한 함수를 의미한다. 대표적인 클로저는 다음과 같다. func라는 함수 내부에는 str이라는 변수와 funcClosure이라는 함수가 존재한다. funcClosure는 함수 scope에 존재하지 않는 str이라는 변수를 출력하는 함수이다. 이때 lexical scoping에 의해 funcClousre 함수는 'Hi'라는 문자열 출력하도록 선언할 때 결정된다. 이때 funcClousre 함수는 함수이면서 함수 scope에 존재하지 않는 변수에 접근이 가능하므로 closure가 된다. Closure을 이해하기 위해서는 scope와 lexcial scoping을 완전히 이해하고 있어야한다. https://jong..

Spread syntax Spread syntax (전개 구문)은 특정 상황에서 특정 객체 앞에 ...를 붙여 사용하는 syntax이다. Spread syntax크게 세 가지 상황에서 사용한다. 함수 호출에서 iterable 객체를 인자로 사용하고 싶을 때 배열 literal로 배열을 정의하는데 iterable 객체의 요소를 요소로 사용하고 싶을 때 객체 literal로 key-value 쌍으로 구성된 객체를 정의하는데 특정 객체의 요소를 객체의 요소로 사용하고 싶을 때 이렇게 세 가지 상황에서 어떻게 spread syntax를 사용하는지 설명하겠다. 참고 여기서 iterable 객체란 배열이나 문자열과 같이 [Symbol.iterator]라는 키로 함수를 가진 객체를 의미한다. 예제는 다음과 같다. 함..