HwiDoorumi

퍼블리싱을 하다보면, input의 다양한 타입을 사용하게 된다.

'검색' 버튼을 커스텀 할 때 우리는

<input type="search" id="" name="" placeholder="" value="">

위와같이 넣게 되는데, 화면을 확인해 보면 아래 그림처럼 파란색 x버튼이 생기게 된다.

(기본 input은 너무 안이뻐서 x버튼을 제외하고 약간 커스텀을 했습니다.)

브라우저의 x버튼을 없애기 위해, css로 안보이게 처리를 해 주면 된다.

input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

위 스타일로 default x버튼을 안보이게 처리해주고, x버튼을 커스텀해 넣어준 모습이다.

[sass란?]

sass는 css의 전처리기, 즉 해석되어 css로 컴파일되는 스크립트 언어이다.

기존 우리가 사용하던 sass에서 많이들 들어봤을 mixin, function 등 여러 기능을 제공한다.

또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다.

sassScript는 4가지 자료형을 지원하는데, 수(int), 문자열(string), 컬러, 불린(boolean)을 지원한다.

[SCSS란?]

scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며,

css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다.

[sass와 SCSS의 구문 차이]

[sass의 문법]

ul.list
	overflow:hidden
	li
    	float:left
        width:200px
        padding: 20px 30px

[scss의 문법]

ul.list {
	overflow:hidden;
	li {
		float:left;
		width:200px;
		padding: 20px 30px;
	}
}

sass의 경우 '들여쓰기'로 구분하고, scss는 기존 css와 같이 { }로 범위를 구분한다.

가독성을 따져보자면 sass가 더 깔끔하고 간단하지만,

깔끔하고 간단한 sass를 선호하는 사람이 있는 반면, 기존 css 문법과 비슷한 scss를 선호하는 사람도 많다.

[vendor prefix?]

벤더 프리픽스(vendor prefix)란?

css3의 기능은 웹표준이 아니였다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다

원하는 화면을 출력하는데 제한적이다. 벤더 프리픽스는 새로운 기능을 모두 제공해야 할 때

변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다.

하지만 현대에 와서는 브라우저의 버전에 올라가면서, 많은 스타일시트의 속성들이

표준으로 정의되면서 vendor prefix를 사용하지 않아도 되지만,

구형 브라우저(하위 브라우저)를 맞춰주기 위해 아직까지도 vendor prefix가 사용된다.

[브라우저별 벤더 프리픽스 사용법]

일일이 prefix를 주기에는 신경쓸 속성이 너무 많다.

무분별한 사용은 브라우저의 성능에도 영향을 주기 때문에, 오픈소스 라이브러리인

Prefix Free 라이브러리를 사용하는것도 하나의 방법이다.

<script src="prefixfree.min.js"></script>

http://leaverou.github.io/prefixfree/ - prefix Free 사이트에서 라이브러리를 다운로드 하고,

html에 include 하지만 하면 벤더프리픽스 없이 모든 css를 사용할 수 있다.

https://caniuse.com/- 내가사용할 css가 어느 브라우저까지 지원하는지 확인할 수 있는 사이트다.

자신이 사용할 속성값을 쓰면, 어디까지 지원을 해 주는지 알 수 있다.

예를들어 border-radius:10px; 을 사용하려고 하면,

.className{
	
    -webkit-border-radius: 10px; /* safari, chrome */	
    -moz-border-radius:10px; /* firefox */
    -o-border-radius:10px; /* opera */
    -ms-border-radius:10px; /* IE */
    border-radius:10px; /* default css */
    
}

위와같이 사용하면 된다.

브라우저마자 자신이 사용할 수 있는 속성을 사용하고, 없을때 마지막에 default인 border-radius를 사용한다.

sass를 컴파일하여 css로 사용하는 방법엔 여러가지가 있다.

이 글에서는 vscode에서 간편하게 scss를 컴파일 하는 방법을 다루겠다.

[필요 extension]

- sass

- sass Lint

- live sass compiler

- live server

설치를 완료했다면, 페이지 하단에 Live Sass Compiler와 닮은 아이콘이 생긴것을 볼 수 있다.

이제 자신의 scss파일을 Watch Sass 를 이용해서 컴파일을 할 수 있게 되었다.

테스트로, reset.scss를 가져와 컴파일을 해보았다.

Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 reset.css와 reset.css.map 파일이 생성된 것을 확인할 수 있다.

실제로 확인해 보면 reset.css를 이쁘게 잘 컴파일 되어있고, 필요가 없는 map파일이 생성되었다.

* 틈새지식 - .map파일이란? 개발자들이 디버깅을 하기 위해 확인하고 분석하는 파일이다. 한마디로 아직 우리에게는

필요가 없다..

공부를 하며 vscode에서 .map파일이 생성되지 않게 구글링을 많이 해 보았는데, 찾기가 너무 힘들었다.

Live Sass Compiler 에서 세팅을 바꿔주면 되는 것이였다.

자 이제 세팅을 바꿔주러 가보자.

file > Preferences > Setting 을 들어가서, Setting.json을 찾아준다.

그냥 setting.json을 검색해서 들어가도 되지만, 이해가 편하게 Live sass Compile을 쳐서 setting.json을 열어주었다.

비어있는 setting.json 파일이 열리게 되고, 다음과 같이 입력해 준다.

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.excludeList": [ 
        "**/node_modules/**",
        ".vscode/**" 
    ],
    "liveSassCompile.settings.generateMap": 
      false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "editor.fontSize": 14,
    "editor.renderWhitespace": "all",
    "editor.wordWrap": "on",
    "emmet.triggerExpansionOnTab": true,
    "editor.tabCompletion": "on"
}

이제 세팅을 저장해 주고, 다시한번 reset.scss를 저장해주면, "savePath" 의 위치에 컴파일된 css파일과 .map 파일이 생성된다.

** .map 파일 없애는 설정 - 위 코드를 살펴보면, 

"liveSassCompile.settings.generateMap": 
      false,

이라고 되어있는 부분이 있다.

이 부분을 true로 하면 .map 파일이 생성되고, false로 하면 생성되지 않는다.

@charset 'UTF-8';

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: ''; content: none;
}
table {
    border-collapse: collapse; border-spacing: 0;
}

@출처 : https://meyerweb.com/eric/tools/css/reset/index.html

스타일시트 재설정을 하는 이유는 브라우저가 가지고 있는 기본적인 줄 높이, 여백 및

폰트크기와 설정등을 '초기화' 하는 것에 목표가 있다.

해당 링크의 내용에 따르면, 위 reset.css는 가장 노멀한 reset.css이다.

자신이 필요한 부분을 추가로 설정할 수 있고, 마음껏 커스터마이징 하여 브라우저의 특성을

초기화 하는것이 좋다.

예를들어 링크에 대한 설정과 색상 등을 추가해서 사용하면 편리하다. 

** 해당 reset.css는 2011년 1월 26일날 개정된 스타일이다.

[개발환경]

1. 에디터 : vscode

2. 운영체제 : windows 10

3. 사전설치 프로그램 : npm / node.js (https://nm817.tistory.com/34?category=816335 참고)

[vue.js 설치]

1. npm / node를 이용한 vue cli 전역으로 설치

-g 는 로컬 어디에서든 vue-cli를 요청할 수 있도록 해주는 명령어다.

설치하는데 약간의 시간이 걸리며, vue-cli를 통해 vue.js 응용 프로그램을 만들 수 있다.

cli란 해당 프레임워크의 명령어를 통해 컴퓨터가 입력받아 출력해주는 명령어 인터페이스다.

vue.js framework를 개발하면서 편한 기능들을 제공해준다.

2. cli를 이용한 vue.js 앱 만들기

cli 명령으롤 통해 my-app 이라는 vue framework를 설치하는 명령어다.

앵귤러의 경우 ng ~~ 라는 명령어로 실행하듯이, vue는 관련 cli명령들이 vue로 시작된다.

3. vscode extension 설치

vs code에서 vue.js 응용프로그램을 개발하기 위한 extension 들이 모여있는 pack extension이다.

주요 구성물

- Vetur : Vetur 확장 프로그램. vue.js 언어기능(구문 강조, InteliSense, Vue snippets, 서식) 등 제공

- npm Intellisense : npm module을 import 할 때 자동완성 기능을 제공

4. vue cli를 통한 vue.js 프로젝트 생성

vscode의 내장 터미널로 vue 프로젝트를 생성할 때 에러가 발생했다.. 일반 명령 프롬프트(cmd)로 하면 생성되는데, 원인을 모르겠다 ㅠㅠ 해결방법을 알면 알려주세요..

에러났던게 영 마음에 걸려서 알아봤는데, shell의 문제였다.

이유는 vscode에서는 ms사의 제품이라서, 기본적으로 터미널의 기본을 파웨셸(powerShell)로 한다는 것이다.

몽고DB를 할 때에는 powerShell을 많이 사용한다고 하는데, 당장 우리에게 필요한건 아니니 기본 터미널을 cmd로 바꿔주도록 하자.

방법은 vscode에서 Ctrl+Shift+P(팔레트 선택)을 누르게 되면 상단에 명령을 칠 수 있는 공란이 생기는데,

여기에 shell 이라고 입력하면 된다.

그럼 상단에 Select Default Shell 이라는 것을 선택해 주고, Commond Prompt를 선택한다.

이제 터미널의 default가 cmd가 된 것을 확인할 수 있다.

terminal에서 생성했을때는 에러를 뱉었는데, cmd에서는 정상적으로 패키지를 생성하였다.

명령어를 치게되면 우측 처럼 어떤 방식으로 설치할 것이냐고 물어보는데, 방향키를 이용하여

default (babel . eslint) 를 선택하여 생성해 준다.

Javascript를 브라우저 호환 ES5로 변환하고 ESLint 린터를 설치하여 코딩 오류를 감지해준다고

공홈에서 설명하니 얌전히 따라간다.

5. vue 프로젝트 실행

대망의 helloWorld 를 띄워볼 타이밍이 왔다.

설레는 마음으로 npm run serve 를 입력해준다.

명령어 npm run serve 를 치고 node module이 package.json을 참고하여 프로젝트를 실행한다.

잠시후, Complied successfully in ~~ Local http://localhost:8080/ 이라는 메세지가 뜬다.

이제 원하는 브라우저를 열어서, 해당 주소 (http://localhost:8080/) 를 입력해주면 다음과 같은 화면을 볼 수 있다!

이제 vue.js 를 개발하기 위한 환경이 완료되었다.

vue.js를 컴포넌트를 불러들이고 재사용하는 방식의 프론트엔드 프레임워크 이다.

이제 하나하나 뜯어보면서 시행착오 겪으면서 맨땅에 헤딩을 시작할 차례다..

필자도 만들어진 vue.js환경에서 html코딩을 하여 vue개발자들에게 전달하는 방식으로 작업을 했던지라,

처음하는거나 다름이 없다...ㅎㅎ 

[설치하기]

1. node.js 설치 (https://nodejs.org/en/download/)

windows 환경에서 node를 설치할 것이기 때문에, 빨간 박스의 내용을 설치했다.

LTS 버전과 Current 버전의 차이는, 안정성과 최신의 차이다.

안정된 버전의 LTS버전을 받는게 최선이고, 필자는 최신버전으로 설치하였다.

별다른 체크 없이, next next finish 해주면 설치가 완료된다.

설치가 완료되면 window - cmd 명령 프롬프트를 열어 node가 제대로 설치되어있는지 확인한다.

설치가 제대로 완료되었는지 확인하려면 node --version / npm --version 의 명령어를 입력하여

확인할 수 있다.

* 설치를 시작하기 전에

vue.js 를 공부하고자 마음먹고 설치 및 환경세팅을 하는중, 의문이 생겼다.

공식 홈페이지(https://kr.vuejs.org/) 에서 설치방법을 열심히 정독하였다.

vue.js란 무엇인가?

필자는 vue 환경에서 두번정도의 프로젝트를 진행하였다.

pa(project assistabt) 역활이라, 그저 시키는대로 프로젝트를 진행할 뿐이였지만,

vue.js 환경에서 작업을 했다는것은 vue를 공부하기에 충분한 매리트를 느낄 수 있었다.

공식홈페이지에 따르면 사용자 인터페이스를 만들기위한 프로그레시브 프레임워크 라고 한다.

실무에서 가장 많이 사용하는 프론트엔드 프레임워크 로는 대표적으로 react, vue, angular

정도라고 한다. 뭐가 더 좋다고 콕 찝어 말할 수는 없지만, 세 프레임워크 다 수박겉핥기 식으로

공부해본 결과, 전체적인 방식은 비슷하다는 점이다.

즉, 하나만 공부하면 나머지는 생각보다 수월하게 따라갈 수 있다는 뜻이 된다.

퍼블리셔가 접근하기에 진입장벽이 가장 쉽다는 vue.js 부터 공부하게 되었다.

vue.js의 가장 큰 장점으로는 현재 개발되어 있는 홈페이지를 vue 환경으로 변경하기가 쉽다는 점이였다.

vue.js는 두 가지 방법으로 공부를 할 수 있도록 되어있다.

1. cdn방식으로 import 하여 사용하는 방식

- 가장 단순한 방식이다. head 영역에 다음 코드를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

해당 방식은 그저 단순히 vue.js의 문법을 사용하기 위한 방식이다.

공식홈페이지에서도 '프로토 타이핑 또는 학습 목적'에 사용할때 기술하라고 나와있다.

2. vue framework 설치방식

해당 방식은 절차가 꽤나 복잡하다. node.js를 설치해야 하고, vue-cli를 통해

vue framework를 설치하는 방식이다. 1번 방식과는 달리, .html이 아닌 .vue를 작업/관리하게 된다.

필자는 vue.js를 다루면서 2번 방식으로 공부를 하려고 한다.

(설치방법 및 환경설정은 다음 글에서 다루도록 하겠다.)

주관적인 생각으로는, 1번방식(cdn import)이 vue framework를 사용하기 위해

'라이브러리 화' 하여 공부하는 방식이면, 2번방식(vue-cli / npm)이 vue framework를 실제로 공부하기에

적합하다고 생각한다.

로컬 개발서버를 사용한다는것, npm/node.js를 사용해 본다는것, 실제 실무에서 사용하듯

.vue로 진행한다는 이점이 있다.