Web/JavaScript
package.json의 패키지들을 모두 버전 업 하고 싶다면
package.json의 패키지들을 모두 버전 업 하고 싶다면
2020.12.07package.json의 패키지들을 모두 버전 업 하고 싶다면 프로젝트를 진행하면서 사용하던 라이브러리들이 너무 노후화된 경우 날을 잡아서 최신 버전으로 업데이트하곤 합니다. 이때, 하나하나 제거하고 설치하면서 버전업을 할 수도 있지만, 커맨드 한 번이면 현재 설치되어있는 패키지들을 모두 버전업할 수 있습니다. 사용 방법 아래의 yarn upgrade-interactive 커맨드를 입력하면 됩니다. yarn upgrade-interactive --latest 현재 버전과 업그레이드 버전을 비교하여 세가지 색으로 나타냅니다. red : 이전 버전 호환이 안될 수도 있는 메이저 업데이트 yello : 이전 버전 호환이 되는 마이너 업데이트 green : 이전 버전 호환이 되는 버그 수정을 위한 패치 업데이트..
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
HTML5 Canvas Tutorial : 화면에 튕기는 공 만들기
2020.12.06
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
2020.11.28index.html app.js import { Polygon } from "./polygon.js" class App { constructor() { this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1; window.addEventListener('resize', this.resize.bind(this), false); this.resize() this.isDown = false; this.moveX = 0; this.offsetX..
Creative Coding 개발환경 설정 및 기본 프로젝트
Creative Coding 개발환경 설정 및 기본 프로젝트
2020.11.22개발 환경 설정 코드 에디터 Visual Studio Code Visual Studio Code 확장 프로그램 ESlint, jslint - JavaScript용 코드 lint 확장 프로그램 Beautify - 코드 포메터 확장 프로그램 Live Server - HTML 파일을 서빙하는 가상의 서버를 띄우는 확장 프로그램 추가 팁 파일이 크지 않기 때문에 로컬영역이 아닌 클라우드에 저장해서 사용하는 것도 좋다. 구글 드라이브 + 드라이브 파일 스트림으로 로컬 드라이브처럼 사용 가능) 기본 프로젝트 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%;..
Creative Coding을 들어가며
Creative Coding을 들어가며
2020.11.14Creative Coding 몇 년전에 김종민님이라는 개발자분의 포트폴리오를 보고 엄청 놀랐던 기억이 난다. 웹에서 예술을 구현했다고 해야할까 웹이라는 접근 편의성과 인터페이스를 이용한 인터렉티브를 정말 제대로 이용하였고, 몇몇 작업물만 보아도 내공이 느껴지는 작품들이였다. 그 당시, FE 개발자를 희망하고 디자인에 관심이 있다보니 저런 작업물을 만들어보고 싶었지만, 현재까지 생업을 핑계삼아(라고 쓰고 귀찮아서라고 읽음) 이런 생각들을 구석에처박아 놨었다. 그러다가 해당 개발자분이 운영하는 채널의 영상이 드문드문 유튜브에서 추천되어서 봤더니 올 해부터 유튜브 영상으로 작품에 대한 스토리 혹은 튜토리얼 등을 올리시는 걸 알게되었다. 이렇게 본격적으로 알려주는데 구석에 쳐박아 놓았던 나의 생각을 이제 꺼내볼..
[JavaScript] {} + {}의 결과는 뭘까?
[JavaScript] {} + {}의 결과는 뭘까?
2019.12.14해당 글은 JavaScript values: not everything is an object를 번역한 글입니다. 질문 {} + {}의 결과는 뭘까? 자바스크립트에서 객체나 배열들을 더할 때 우리는 종종 예상치 못한 결과물을 얻곤한다. 이러한 결과물이 생긴 이유에 대해서 알아보자! 자바스크립트의 더하기 연산 법칙은 간단한다. 오직 숫자(number)나 문자열(string)만 더할 수 있다. 숫자와 문자열 이외의 다른 모든 값들은 더하기 연산을 만나면 이 둘 중 하나로 변하게 된다. 해당 변환이 어떻게 이루어지는 지 알기 위해서는, 몇 가지 사실에 대해서 이해해야한다. 자바스크립트는 원시값(primitives)과 객체(objects) 두 종류의 값으로 이루어져 있다. 원시값에는 undefined, null..
[JavaScript] Ajax
[JavaScript] Ajax
2019.12.11웹 어플리케이션의 사용성은 데스크톱 어플리케이션에 비해 현저히 떨어져있었다. 고전적인 웹 어플리케이션 유저가 폼 영역을 채우고 폼을 제출한다. 브라우저가 서버에게 보낼 요청을 생성한다. 서버가 브라우저가 렌더할 정확한 페이지를 포함한 응답을 생성하고 보낸다. 브라우저가 새로운 페이지를 로드하고, 잠시 브라우저의 윈도우가 깜빡거린다. 클라이언트는 서버의 답을 기다리고 전체 페이지를 새로운 데이터로 다시 로드한다 동기적인 요청이 서버에서 처리되는 동안, 유저는 클라이언트 웹 브라우저와 상호작용할 수 없다. 동기적 모델은 하이퍼텍스트 문서들의 웹을 위해 고안되었다. Ajax 웹 어플리케이션 Ajax 어플리케이션에서, 유저는 페이지와 상호작용한다. 클라이언트는 요청을 처리하기 위해 XMLHttpRequest라는..
[JavaScript] 클로저(Closure)
[JavaScript] 클로저(Closure)
2019.11.24정의 함수와 그 함수가 정의된 렉시컬 환경의 조합이다. 렉시컬 환경? 렉시컬 환경의 의미는 어휘적 범위를 정해주는 렉시컬 스코프를 통해 지정된 사용 가능한 변수들을 포함한 환경을 의미한다. 즉 렉시컬 스코프 안에 있는 변수들을 접근할 수 있는 환경이다. 사용 예시 예시 1 일반적으로 클로져는 함수안의 함수 형태로 정의된다. let obj = function(){ let i = 0; return { setI(k){ i = k; }, getI(){ return i; } } // 호출시 얻는 함수들이 외부 함수의 변수인 i에 대한 메모리를 가지고 있는다. } let x = obj(); x.setI(2); console.log(x.getI()); // 2 x.setI(4); console.log(x.getI()..
🕵️♂️ 자동완성 모듈의 법칙
🕵️♂️ 자동완성 모듈의 법칙
2019.08.22자동완성 모듈의 법칙 글자를 알 수 있는 값으로 자동완성하는 모듈은 겉으로 보기에는 쉬워보인다. 그러나 많은 UI들이 이를 제대로 수행하지 못하고 있다. 이에 대해 개별적으로 불만을 제기하기 보다는, 주로 지켜지지 않는 몇 가지 법칙들을 적어보려한다. 이러한 법칙들이 최선이 아닌 경우가 있을 수도 있다. 그러나 이러한 법칙을 지키지 않는 경우에는 합당한 이유가 있어야한다. (예를 들어, 미국의 주의 리스트처럼 어떠한 법칙은 입력 영역이 고정된 집합 안에 있는 값으로 채워지지 않으면 적용하지 않는다.) 이러한 법칙들을 따른다면, 적어도 정상 수준의 경험을 줄 수 있을 것이다. 정확하게 일치하는 것들은 항상 먼저 배치한다. 만약 사용자가 찾으려는 대상을 정확하게 입력했다면, 다른 대상들은 항상 사용자가 입력..
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
2019.08.10Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Functional Programming 이전까지 가장 유명한 코딩 패러다임은 OOP(Object Oriented Programming)이었다. JavaScript에서 Function의 종류는 다음과 같다. Pure Functions 전역 변수를 건드리지 말아야한다, parameter는 reference로 넘어가기 때문에 mutate되지 않는다. High Order Functions reusability를 위해 쓰이는 함수로, 내가 parameter를 집어 넣었을 때 비로소 완성되는 함수이다. Callbacks and Higher Order Functions Higher-order funct..
[JavaScript] JavaScript의 기본 원리
[JavaScript] JavaScript의 기본 원리
2019.08.01Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Principles of JavaScript Global Execution Context ( 전역 실행 환경 ) const num = 3; function multiplyBy2 (inputNumber) { const result = inputNumber*2; return result; } const name = "Will" 해당 코드를 실행하면 어떤 일이 일어나는가? num이라는 변수 3을 저장한다. multiplyBy2라는 함수를 생성한다. ( 함수 안으로는 절대 들어가지 않는다 호출하지 않는 이상 ) name이라는 변수에 "Will"을 저장한다. JavaScript의 Thread Sing..
[JavaScript] Synchronous, Asynchronous, Blocking, Non-blocking
[JavaScript] Synchronous, Asynchronous, Blocking, Non-blocking
2019.06.02Simplified matrix of basic Linux I/O models 해당 주제 관한 가장 유명한 표입니다. x축, y축의 각각의 의미를 알아보고 둘의 조합에 해당하는 예시를 이용해서 이해를 해보겠습니다. Blocking / Non-blocking Blocking / Non-blocking은 호출된 함수가 바로 return을 하는 지 마는 지가 관심사입니다. Blocking I/O Model 호출된 함수가 자신이 할 일을 모두 마칠 때까지 제어권을 계속 가지고서 호출한 함수에게 제어권을 바로 돌려주지 않으면 Blocking입니다. Wait Queue에 들어갑니다. Non-blocking I/O Model 호출된 함수가 자신이 할 일을 채 마치지 않았더라도 바로 return해서 제어권을 건내주어 ..