# error) is defined but never used



jsx로 처리되는 변수들은 shadowing 돼서 eslint가 찾아내지 못한다.

그래서 다음과 같은 에러가 발생하기도 한다.


error 'todo' is defined but never used no-unused-vars



Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):

D:\vue\todo-project\src\App.vue
  33:21  error  'todo' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)



이럴 경우 간단하게 에러가 나는 줄 옆에 아래 주석을 달아서 해결할 수 있다.

 // eslint-disable-line no-unused-vars



저작자표시

# 티스토리에 code pen 불러오기




▶ code pen에 계정 생성 및 로그인 후 코드를 작성한다.

▶ 코드 작성 후 

1. save 하기

2. embed 클릭





▶   1. 테마 설정 가능

2. 사이즈 조절 가능

3. iframe을 클릭하여 나온 코드를 복사





▶ 티스토리(및 기타 블로그) 에디터의 외부컨텐츠(혹은 html)를 선택 후




▶ 위에서 복사한 소스를 붙여넣고 확인을 누른다.




▶ 간단하게 code pen의 소스를 불러올 수 있다. 끝




ex)


저작자표시

'Front-end dev > Etc.' 카테고리의 다른 글

vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

# box-shadow




box-shadow : 요소의 테두리를 감싼 그림자 효과

그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함, 확산 정도, 색상으로 이루어진다.

browser support : ie9 이상


offset-x : 위 아래

offset-y : 좌 우

blur-radius : 값이 클 수록 그림자가 흐려진다.

spread-radius : 양수- 그림자가 커지고 확산됨. 음수- 그림자가 줄어듬.

color : 그림자 색상

inset : 박스 내에 그림자


/* offset-x , offset-y , color */
box-shadow : 10px 10px black;

/* offset-x , offset-y , blur-radius , color */
box-shadow : 10px 10px 5px black;

/* offset-x , offset-y , blur-radius , spread-radius , color */
box-shadow : 10px 10px 5px 3px rgba(0,0,0,0.3);

/* inset , offset-x , offset-y , color */
box-shadow : inset 10px 10px black;




저작자표시

'Front-end dev > HTML || CSS' 카테고리의 다른 글

CSS 말줄임  (513) 2020.01.06
Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

# 정규식표현(패스워드)



정규식 표현 정리

(?=.*[a-zA-Z])                  // 영문
(?=.*?[A-Z])                    // 최소 한개의 대문자 영문
(?=.*?[a-z])                    // 최소 한개의 소문자 영문
(?=.*?[0-9])                   // 최소 한개의 숫자
(?=.*?[#?!@$%^&*-])      // 최소 한개의 특수 문자
.{8,}                             // 최소 8자 길이





최소 8자 + 최소 한개의 영문자 + 최소 한개의 숫자

 ^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$



최소 8자 + 최소 한개의 영문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$



최소 8자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$



최소 8자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$



최소 8자 + 최대 10자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$



저작자표시

'Front-end dev > JavaScript || jQuery' 카테고리의 다른 글

jQuery selector  (540) 2020.05.04
console.log 에 style 적용하기  (596) 2018.04.04

# jQuery selector



jQuery 기본적인 선택자


jQuery selector
선택자 설명
:button type이 button인 요소를 선택
:even 인덱스가 짝수인 요소를 모두 선택
:odd 인덱스가 홀수인 요소를 모두 선택
:eq(n) 인덱스가 n인 요소를 선택
:gt(n) 인덱스가 n보다 큰 요소를 모두 선택
:lt(n) 인덱스가 n보다 작은 요소를 모두 선택
:first 첫 번째 요소를 선택
:last 마지막 요소를 선택
:nth-child(an+b) 형제 요소 중 an+b번째 요소들을 선택
ex)
$('li:nth-child(3)')
$('li:nth-child(2n+1)')
:animated 애니메이션 효과가 실행 중인 요소를 모두 선택
:header h1 ~ h6 까지의 요소를 모두 선택
:contains(text) 지정한 문자열을 포함한 요소를 선택
ex)
$('p:contains("ara")')
:not(selector) 지정한 선택자를 제외한 모든 요소를 선택
:empty 내용이 없는(자식이 없는) 빈 요소를 선택
:has(selector) 지정한 요소를 포함하는 요소를 선택
ex)
$('p:has(span)')
$('div:has(.class)')
:parent 자식 요소를 가지고 있는 요소를 모두 선택


저작자표시

'Front-end dev > JavaScript || jQuery' 카테고리의 다른 글

정규식표현(패스워드)  (502) 2020.05.25
console.log 에 style 적용하기  (596) 2018.04.04

+ Recent posts

티스토리툴바