본문 바로가기
반응형

Web-Dev9

HTML, CSS, Javascript 압축하기 구글 검색 결과는 페이지 랭크에 따라 앞쪽에 등장하는데, 이 페이지 랭크에 페이지 로딩 속도가 관여한다는 소식을 접했습니다. 제 다른 사이트는 정적 사이트임에도 그다지 좋은 속도가 안 나오네요. 그래서 속도 늘리기 대책 겸 웹 리소스 압축에 대해 찾아본 결과를 정리해 봤습니다. HTML 압축하기 HTML 압축하기는 HTMLMinifier를 사용할 수 있습니다. 아래 커맨드로 쉽게 설치할 수 있습니다. npm i -g html-minifier 사용 방법은 옵션이 길어서 좀 귀찮을 수 있습니다. html-minifier --collapse-whitespace \ --remove-comments \ --remove-redundant-attributes \ --remove-tag-whitespace \ --mi.. 2020. 6. 15.
비동기 웹 서버 C 구현체 httpserver.h 어쩌다 접하게 된 httpserver.h라는 이름이 왠지 정겹게 느껴졌습니다. 와 이거 C 헤더 파일 아닌가 하는 느낌으로 말이죠. https://github.com/jeremycw/httpserver.h jeremycw/httpserver.h Single header library for writing non-blocking HTTP servers in C - jeremycw/httpserver.h github.com 네 정말 헤더였습니다. ㅎㄷㄷ htpserver.h는 비동기 웹서버 구현을 C 헤더 파일 하나에 몰아서 해 놓은 변태 같은 프로젝트입니다. 왜 굳이 헤더냐고 할 수도 있는데 이 말은 "엔트리 포인트는 당신네가 구현해라" 이런 소리와 일맥상통하겠지요. 자 그럼 예제를 돌려볼까요? 일단 저장.. 2019. 12. 17.
연산자(Operators) | JS & ES6 공부 노트 #6 연산자의 정의를 어디까지 볼 것인가에 대한 객관적인 기준은 없는 것 같습니다. 이 노트에서는 연산자의 범위를 대체로 '영단어가 아닌 문자' 중에서만 발췌합니다. 그리고 연산자 하나하나의 기능을 살펴보기보다는 그저 훑고 지나가는 수준으로만 정리합니다. 불성실한(?) 글 미리 죄송하다는 말씀드립니다. 😏 유명한 연산자들 굳이 설명이 필요 없을 것 같은 연산자들도 많은 것 같습니다. 왜냐하면 대부분의 언어에서 거의 동일하게 사용되기 때문이지요. 대표적으로 다음과 같은 산술 연산자들이 있습니다. + - * / 곱하기(*)와 나누기(/)는 교과과정의 산수나 수학에서 쓰이는 기호와는 좀 다른데, 오히려 프로그래밍 언어에서는 이 두 연산자가 더 유명하므로 굳이 설득(?) 하지 않아도 될 것 같습니다. 그리고 + 연산.. 2019. 8. 21.
electron-vue에서 process를 못 찾는 문제 Javascript랑 ES6 공부 겸 일렉트론(elecron)으로 앱을 한번 만들어보고자 했습니다. 거기다 기왕 하는 김에 회사에서 사용하는 vue도 같이 사용해보면 좋을 것 같았습니다. 그래서 찾아보니 electron-vue라는 프로젝트 보일러 플레이트 생성해 주는 프로젝트를 발견했습니다. 목적에 맞는 게 있으니 당장 써보면 좋겠지요. 우선 아래처럼 프로젝트를 만들어 봤습니다. $ npm i vue-cli -g $ npm i yarn $ vue init simulatedgreg/electron-vue my-project 이것저것 귀찮게 물어오네요. vue-cli 쓸 때랑 묻는 게 비슷한 걸로 봐서 vue를 쓰면 어쩔 수 없는 숙명 같은 것일까요? yarn은 이 단계에서 꼭 필요한 건 아니지만 미리 설채.. 2019. 8. 3.
타입(Types) | Javascript & ES6 공부 노트 #5 자바스크립트의 기본 타입과 ES6에서 추가된 타입에 대해 간단히 정리하는 글입니다. Boolean 논리식에서 가장 직접적으로 사용되는 데이터를 표현하는 단위인 Boolean 즉 이진 타입은 거의 모든 언어에서도 지원되는 유명한 타입입니다. 자바스크립트에서도 동일한 이름의 타입으로 지원됩니다. var trueCondition = true if (trueCondition) { console.log('This is true!') } 가질 수 있는 값은 true(참), false(거짓) 뿐입니다. 그리고 이 값은 if 등의 논리 구문에 그대로 활용됩니다. Number 숫자를 표현하는 타입입니다. 숫자를 보관하고 이 숫자들을 이용해 사칙연산, 즉 더하기(+), 빼기(-), 곱하기(*), 나누기(/)를 사용해 연산.. 2019. 7. 11.
변수와 상수 | Javascript & ES6 공부 노트 #4 언어를 공부할 때 가장 먼저 익혀야 할 개념은 변수(variable)라고 생각합니다. 데이터를 담을 수 있는 메모리 공간을 할당하고, 여기에 데이터를 넣고, 데이터를 바꾸어서 넣을 수 있다는 점은 논리적인 사고에서 가장 필수적으로 알아야 할 내용이니깐요. 그런 의미로 정말 기초적이지만 중요한 이 변수, 그리고 변수가 나오면 같이 등장하는 상수, 그리고 변수와 상수를 다루는데 필요한 연산자에 대해 간략히 알아보겠습니다. 동적 타이핑(Dynamic Typing) 우선 동적타이핑 개념을 알아야 할 것 같습니다. 자바스크립트는 동적 타이핑 변수 시스템(?)을 가지고 있는 언어입니다. 동적 타이핑은 타입이 유동적이다라는 의미이며, 쉽게 말해서 변수에 아무 타입의 데이터를 넣거나 비교해도 된다는 의미입니다. 예를 .. 2019. 4. 11.
주석과 세미콜론 | Javascript & ES6 공부 노트 #3 참 뜬금없는 주제이긴 합니다만, 이번 글에서는 주석(Comment)과 세미콜론(Semicolon)에 대해 이야기하고자 합니다. 다른 언어들에서도 상당히 공통적인 이슈이니 아마도 알고 있을 법한 내용일 가능성이 큽니다. 주석문 주석은 실행되지 않는 글자로 코드 자체에 아무런 영향을 끼치지 않는 기능입니다. 왜 이런 게 있는지 이해가 안 되시나요? 보통은 코드의 용도나 사용 방법 등을 주석으로 적습니다. 만약 혼자서 작업하는 게 아니거나 혹은 다른 사람도 이 코드를 쓸 수 있게 한다면 설명 없이는 여러분의 코드의 의도를 제대로 이해하기 어려울 수도 있습니다. 이럴 때 주석은 정말 큰 힘을 발휘합니다. 이 외에도 주석으로는 누가 만들었니, 간혹 잘 돌아가지만 뭔진 모르겠다거나(?) 농담을 적거나 혹은 개발자들.. 2019. 4. 11.
콘솔에 뭔가를 찍어보자 | Javascript & ES6 공부 노트 #2 프로그래밍 언어를 하나 이상 공부해 봤다면 샘플 코드가 항상 무엇으로 시작하는지 다들 알고 있을 것입니다. "Hello World"를 찍는 예제 코드 말이죠. 이 코드가 중요한 이유는 출력에 해당하는 가장 원초적이면서도 핵심적인 기능을 사용하기 때문입니다. ES6에서는 Javascript와 같이 console.log를 이용해 콘솔에 내용을 인쇄할 수 있습니다. console.log('Hello World!') Javascript와는 다르게 끝에 세미콜론이 없는데 이는 ES6의 특징입니다. ES6에서는 줄 끝의 세미콜론을 생략할 수 있습니다. 개인적으로 Swift를 좋아하기 때문에 이와 비슷하게 세미콜론을 안 써도 되는 점을 굉장히 좋아합니다. 하지만 생략해도 된다는 것뿐인지라 만약 팀에서 세미콜론을 사용.. 2019. 3. 31.
시작하기 위해 개발환경을 만들다 | Javascript & ES6 공부 노트 #1 ES6는 어떤 한 언어 이름의 약자와 버전이 합쳐진 이름입니다. 그리고 ES2015라 불리는 언어 스펙의 다른 이름이기도 합니다. 그리고 ES는 ECMAScript를 줄여서 부르는 이름이지요. 그냥 쉽게 말해서 ECMAScript 2015년 버전이 ES6입니다. 이 언어는 Javascript(자바스크립트)를 보완 혹은 대체하기 위해 나온 언어라고 볼 수 있습니다. ES는 Javascript와 비슷합니다. 하지만 같지는 않습니다. 하지만 아무리 ECMAScript와 Javascript가 다르다고 이야기해도, ES가 Javascript 토대에서 만들어진 것 같다는 느낌이 너무 강하게 들기 때문에 완전히 다르다고 하기에도 어렵다고 생각됩니다. 다만 이 글 타래는 Javascript와 ES6 모두를 공부하기 위.. 2019. 3. 28.
728x90
반응형