![]()
공부하면서 vue router 설치 후 index.vue를 하나 만들었는데 Component name "index" should always be multi-word. 이런 에러가 발생... 에러 읽어보니 컴포넌트 이름 index를 2개 단어를 사용해야 한다는데.. 그냥 index.vue가 깔끔한데 단어 하나 더 붙이라니.... 그래서 좀 찾아보니 1. 2단어를 해서 뭐 firstIndex.vue 이런 식으로 수정해도 되고 2. .eslintrc.js 파일의 rule 부분에 vue/multi-word-component-names 규칙을 off로 변경해 주면 된다고 해서 2번 방법을 선택! rules: { "vue/multi-word-component-names": "off"//eslint의 기본 규칙이 ..
![]()
개발 중에 json-server --watch db.json 위 명령어를 사용하여 json-server : 이 시스템에서 스크립트를 실행할 수 없으므로~~ 이런 에러가 발생했다... 그래서 찾아보니 작업표시줄에서 powershell 검색해서 관리자 권한으로 실행한 다음에 아래와 같이 명령어 입력 후 Y PS C:\WINDOWS\system32> executionpolicy Unrestricted PS C:\WINDOWS\system32> set-executionpolicy unrestricted 실행 규칙 변경 실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말 항목(https://go.microsoft.com/fwlin..
![]()
vue를 공부하던 도중에 The template root requires exactly one element. 위와 같은 오류가 발생하였다.. vue2에서는 root div 태그가 필수적이었는데, vue3 로 넘어오고나서 부터는 root div 태그를 사용하지 않아도 된다고 알고 있는데 왠 root element가 필요하다고 하는지... 그래서 알아보니 추가로 설치한 vuter에서 vue3를 여전히 vue2로 인식을 하고 있는것 같다는 글을 발견하여 vuter 를 삭제하고 voalr를 설치! Volar 를 설치하고 vscode를 재시작 하니 해당 에러는 발생안하고, root div 태그가 없어도 문제없이 코드가 동작하는 것을 확인하였습니다.
![]()
Vue.js를 공부해 보려고 프로젝트하나 만들어서 해보는데 맨 위에 Parsing error: No Babel config file detected for C:\vueJs\vue_project\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. 이런 에러가 발생한다... 발생 원인은 Babel config 파일이 탐지되지 않아서 파싱에러가 발생된 것으로 확인이 되는데.. 이걸 해결하려면 어떻게 해야할지 알아보니 root 경로에 .eslintrc.js 파일을 생성 후 module.exports = { root: tr..
![]()
cmd 창을 켜서 vueJS를 설치할 위치로 이동한 다음 vue cli 설치 1. vue cli 설치 install -g @vue/cli 를 입력해 줍니다. 위와 같이 설치가 완료되면 2. vue 설치버전 확인 vue --version 이렇게 입력해서 잘 설치가 되었는지 확인합니다. Vue 프로젝트 생성 1. vue 프로젝트 생성 프로젝트 생성할 위치로 가서 vue create 프로젝트명 이렇게 입력해 줍니다. 프로젝트 명에 대문자가 포함되어 있을 시에는 Warning: name can no longer contain capital letters 이런 에러가 발생하니 소문자로 해주시면 됩니다. 이런 식으로 preset을 선택하라고 나오는데 Default [Vue 3]로 선택을 해줬습니다. 그러면 아래와 ..
![]()
next.js를 알아볼 겸 세팅했는데 import에 위와 같이 파싱에러가 발생했다.. next에 바벨이라는 모듈을 찾을 수 없다고 하니 이걸 추가하는 방법을 알아보았습니다. 해결방법 프로젝트 루트 경로에 .babelrc 파일을 생성하여서 다음 코드를 작성해 줍니다. { "presets": ["next/babel"], "plugins": [] } 루트 경로에 .eslintrc.json 파일이 있을 텐데 기존에는 { "extends": "next/core-web-vitals" } 이렇게 되어 있던 것을 { "extends": ["next/babel","next/core-web-vitals"] } 이렇게 수정해 줍니다. 그러면 해당 에러는 사라진 것을 확인하실 수 있습니다.
![]()
이클립스 java 코드 쪽만 보다가 오랜만에 웹쪽 보게 되어서 javascript 쪽 소스코드를 보는데 이렇게 뭔가 다 주석된것마냥 흑백으로 되어 있다.... 그래서 좀 찾아보니 Window -> Preferences 로 들어가서 General -> Editors -> File Associations 에 . js를 추가해주라는 것이 많이 보여서 했는데 이렇게 추가해도 똑같이 흑백..... 그래도 안돼서 조금 더 찾아보니 Help -> Install New Software로 들어가서 http://download.eclipse.org/releases/photon/ 이거 입력후 검색! Web, XML, Java EE and OSGi Enterprise Development 선택 후 설치! 동의까지 해주면 우측..
![]()
new Date() 를 하면 Thu Sep 02 2021 16:15:57 GMT+0900 (한국 표준시) 이런 식으로 나와서 곤란해서 변경하는 방법에 대해서 정리해 보았습니다. var today = new Date(); undefined today Thu Sep 02 2021 16:28:02 GMT+0900 (한국 표준시) moment(today).format('yyyymmdd'); 'yyyy28Th' moment(today).format('yyyyMMdd'); 'yyyy09Th' moment(today).format('yyyyMMDD'); 'yyyy0902' moment(today).format('YYYYMMDD'); '20210902' moment(today).format('YYYYMMDD HH:mm..
Froala Editor License Key 셋팅방법! $('Selector').froalaEditor({ key : 'KEY Value' , ~~ }) 이렇게 발급받은 키값을 셋팅해주고 원하는 옵션들을 적용해주면 완료! 됍니다. ex) $('Selector').froalaEditor({ language : 'ko' , key : 'KEY Value' , height: 400 , zIndex: 5001 , quickInsertButtons: ['table', 'ul', 'ol', 'hr'] , toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontF..
option = { title : { text : '' , subtext : '' , x : 'center' } , tooltip : { trigger : 'item' , formatter : '{a} {b} : {c} ({d}%)' } , legend : { orient : 'vertical' , right : 'right' , data : [] , type : 'scroll' } , series : [{ name : 'IP' , type : 'pie' , cursor : 'default' , radius : '55%' , center : [ '50%', '50%' ] , data : [] , itemStyle : { emphasis : { shadowBlur : 10 , shadowOffsetX : ..
![]()
대문자 변환 toUpperCase() 사용 소문자 변환 toLowerCase() 사용
![]()
자바스크립트 이벤트 중에 클릭한 요소를 가져올때 event 객체의 target 과 currentTarget 프로퍼티가 있습니다. 이 둘의 차이점을 알아보기 위해 아래와 같은 라디오 버튼을 만들었습니다. 최근을 클릭해서 event.target을 확인해 보면 위와 같이 클릭된 요소를 반환 하는것을 볼수 있고 evnet.currentTarget을 확인해 보면 위와 같이 이벤트가 바인딩된 요소를 반환하는 것을 볼수 있습니다. 결론적으로 event.target 은 이벤트 버블링의 가장 마지막에 위치한 최하위 요소를 반환하는 것을 알 수 있고, evenet.currentTarget 은 이벤트가 바인딩된 요소를 반환하는 것을 알 수 있습니다.
![]()
string 형태를 json 으로 변경하는 방법은 JSON.parse()를 아래와 같이 사용하면 됍니다. 바뀐 json 파일을 다시 sting 으로 변환하려면 JSON.stringify()를 이용하면 됍니다.
![]()
button 태그 버튼1 버튼2 버튼3 위 코드는 으로 인해서 화면이 출력되자마자 '안녕!!!!!!!' 이라는 팝업창이 뜨고 버튼을 클릭 할때마다 onclick 옵션에 의해서 해당 버튼+숫자가 alert 창에 나타나는 코드 입니다.
![]()
HTML 에서 목록을 만들때는 ul 태그와 ol 태그를 사용 합니다. ul 순서 없는 목록을 나타낼떄 ul 요소를 사용합니다. 하나 두울 세엣 네엣 목록1 목록2 목록3 목록4 ol 순서 있는 목록을 나타낼때 ol을 사용한다. 목록1 목록2 목록3 목록4 목록1 목록2 목록3 목록4
![]()
HTML 에서의 글자 크기를 조절하는 태그는 h 태그 입니다. h 요소는 제목을 나타낼 때 사용합니다. h1 ~ h6 까지 있습니다. h1 ~ h6 까지 대제목, 중제목, 소제목, ... 순으로 표시하면 됩니다. h4 입니다. h5 입니다. h6 입니다. html에서 글자 크기는 위와 같이 h1 부터 h6 까지 존재합니다.
![]()
IMG 태그 img 태그는 이미지를 가져올수 있는데 src=이미지가 있는 경로 를 입력해 주면 아래와 같이 이미지가 뜨는것을 확인 할 수 있습니다. img 요소 사용하기 img 태그의 alt 속성은 Alternate(대체하다)의 줄임 말입니다. 이미지에 문제가 있어 이미지를 못 읽어 올 경우 alt 속성의 내용이 해당 이미지를 대체하여 나타납니다. img 태그의 title 속성은 마우스를 사진에 가져다 놨을때 위와 같이 뜨는 것을 지정 하는 옵션 입니다.
![]()
CSS 선택자 div1 div2 div3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eum, mollitia impedit laborum recusandae est architecto saepe fugiat sit nemo asperiores voluptates quidem debitis qui corporis distinctio voluptate similique adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat odit repellendus dicta adipisci illo veniam soluta molestiae consequuntur dolore..
HTML 주석 어쩌구... 저쩌구... HTML 영역에서 의 주석은 이렇게 사용 CSS 주석 paragraph (단락) 입니다. 어쩌구... 저쩌구... CSS 영역에서의 주석은 /* */ 이렇게 사용 JS 주석 paragraph (단락) 입니다. 어쩌구... 저쩌구... JS 영역에서의 주석은 한줄일 경우 -> // 여러줄일 경우 -> /* */
![]()
javascript 에서 특정문자를 제거할때 replace 함수를 사용하는데 sting.replace('-','') 이렇게 사용하면 맨처음에 있는 - 기호만 삭제되고 나머지는 삭제가 되지 않는다. -가 특수문자라서 이렇게 sting.replace(/\-/g,''); 정규식으로 특수문자 제거하는 방식으로 제거하면 된다.
