티스토리

개발자 워니

검색하기

블로그 홈

개발자 워니

jwkim4.tistory.com/m

개발자를 꿈꾸는 워니 입니다!

구독자: 0

방명록 방문하기

주요 글 목록

[Vue.js] 빌드 & 배포파일 생성 빌드 & 배포파일 생성 Vue로 작성한 코드를 빌드를 하고 싶은 경우에는 npm run build 명령어를 통해서 빌드를 할 수 있습니다. dist폴더가 생성이 되고 js, css파일이 생성이 됩니다. 즉, 최종적으로 서버에는 dist폴더 하나만 업로드하면 됩니다. dist/js router에서 설정한 webpackChunkName들이 File에 파일명으로써 묶여서 js파일이 만들어지는 것을 볼 수 있습니다. webpackChunkName을 설정하지 않은 router들은 app.js로 들어가게 됩니다. dist/css vue 파일 내부에 style 태그로 css를 추가한 경우에 따로 css파일을 만들어줍니다. 공감수 0 댓글수 0 2022. 8. 15.
[Vue.js] Vuex Vuex Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리 입니다. 모든 컴포넌트를 위한 중앙 집중식 저장소를 제공해 줍니다. 그렇기 때문에 중앙 저장소에 저장된 데이터는 쉽게 바꿀 수 있는게 아니고, 특정 함수(mutations, actions)를 통해서만 데이터 변경이 가능하게하고 변경 상태를 관리할 수 있습니다. Vuex 사용법 state, getter, mutations, actions, modules로 상태를 관리합니다. state : vue에서의 data영역과 같은 역할을 합니다. getter : vue에서의 computed영역과 같은 역할을 합니다. mutations : state의 데이터를 바꿀수 있는 유일한 역할을 합니다. actions : mutations 하고 .. 공감수 0 댓글수 0 2022. 8. 13.
[Vue.js] 플러그인 플러그인(Plugin) 플러그인은 일반적으로 전역 수준 기능을 Vue에 추가합니다. 플러그인에는 엄격하게 정의된 범위는 없습니다. 일반적으로 작성할 수있는 플러그인에는 여러 유형이 있습니다. 뒤에 나오는 예제는 다국어를 처리하는 예제입니다. 폴더구조 project |--src |--i18n ||--ko.js ||--en.js |--plugins ||--i18n.js |--views ||--advanced | |--PluginView.vue |--main.js ko.js const i18nEN = { hi: '안녕하세요', search: '조회', save: '저장', } export default i18nEN en.js const i18nEN = { hi: 'Hello', search: 'Search',.. 공감수 0 댓글수 0 2022. 8. 10.
[Vue.js] Mixin Mixin(믹스인) Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. 폴더구조 project |--src |--mixins ||--formatter.js |--views ||--advanced | |--MixinView.vue 작동방식 일반적이 .vue파일은 script태그 안에 javascript코드를 별도로 만듭니다. 예를들어 script안의 코드가 다른 파일에도 쓰여 재사용을 많이 해야하는 경우에 Mixin의 사용이 고려됩니다. 사용 방법은 js파일을 만들어 script태그안에 들어가야했을 코드를 작성하고.. 공감수 0 댓글수 0 2022. 7. 29.
[Vue.js] Custom Directive Custom Directive 기본 Directive 세트( v-model또는 와 같은 v-show) 외에도 Vue를 사용하면 고유한 사용자 지정 Directive를 등록할 수 있습니다. Directive Hooks Directive 정의 개체는 여러 후크 기능을 제공할 수 있습니다(모두 선택 사항). const myDirective = { // called before bound element's attributes // or event listeners are applied created(el, binding, vnode, prevVnode) { // see below for details on arguments }, // called right before the element is inserted.. 공감수 0 댓글수 0 2022. 7. 27.
[Vue.js] provide & inject provide & inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다. 이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사용합니다. 폴더구조.. 공감수 0 댓글수 0 2022. 7. 25.
[Vue.js] 레이아웃 컴포넌트 레이아웃 컴포넌트 일반적인 웹사이트를 보면 고정적인 영역을 가지는 레이아웃을 가지고 있습니다. 이를 재사용 컴포넌트로써 만들어 보겠습니다. project |--src |--component | |--layouts ||--HeaderLayout.vue ||--FooterLayout.vue |--App.vue |--main.js 작동 순서 App.vue는 main.js에 import 되어 있으므로 App.vue에 레이아웃 컴포넌트를 배치를 하면 됩니다. App.vue에서 레이아웃 컴포넌트를 import를 한 이후에 해당 태그를 template안에 배치하여 레이아웃을 만들수 있습니다. App.vue HeaderLayout.vue router-link to="경로" 테그를 통해서 router에 정의한 path로.. 공감수 0 댓글수 0 2022. 7. 24.
[Vue.js] Slot 알아보기 Slot 재사용 컴포넌트를 만드는 방법중 하나입니다. bootstrap의 modal기능을 가진 코드를 Slot을 이용하여 사용 방법을 알아보겠습니다. 앞 포스팅에서 나온 재사용컴포넌트는 화면 구성요소를 정의하고 데이터를 부모에서 자식 또는 자식에서 부모로 전달해가면서 데이터를 사용하는 재사용컴포넌트입니다. 하지만 slot은 부모에서 자식컴포넌트의 특정 부분만 HTML요소를 재정의 하여 사용할수 있습니다. 참고 modal기능은 재사용성이 좋고 modal안의 내용만 바뀌면 다양한곳에 사용이 가능하므로 재사용컴포넌트로 만든 것입니다. 즉, 데이터만 주고받는게 아니라 HTML UI자체가 바뀌는 것은 slot으로 만들면 좋습니다. 예제 폴더구조 project |--src |--component | |--fragm.. 공감수 0 댓글수 0 2022. 7. 22.
[Vue.js] Vue에서 Bootstrap 사용하기 Vue에서 부트스트랩 사용하기 터미널에 다음의 명령어를 실행하여 bootstrap을 설치하고 main.js에 아래 두줄의 코드를 import 합니다. 이후 모든 화면에서 bootstrap을 사용을 할 수 있게 됩니다. npm install bootstrap 폴더구조 project |--src |--main.js main.js import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' 공감수 0 댓글수 0 2022. 7. 20.
[Vue.js] 재사용 컴포넌트 재사용 컴포넌트 Vue에서는 다양한 재사용 컴포넌트를 미리 만들어 놓으면 가져다 쓰는 방식으로 생산성을 높일 수 있습니다. 주의 component들은 무조건 2단어 이상으로 .vue를 만들어야 합니다. 폴더구조 project |--src |--component | |--fragments ||--PageTitle.vue |--views ||--reuse ||--PageView.vue |--main.js component 에서 vue파일 가져와서 사용하기 부모로 부터 데이터를 가져온 경우에 props에 위치합니다. title: String, 이렇게 해도 되지만 type, default값을 넣는게 좋습니다. 제목을 "고객목록"을 해야한다 가정하면 모든화면의 제목은 동일한 UI,UX를 가져야 합니다. 그러나 개.. 공감수 0 댓글수 0 2022. 7. 16.
[Vue.js] Lifecycle Hook 라이프 사이클(Lifecycle Hook) vue에서 생성되는 각 단계에 해당하는 특정 이벤트가 일어나는데 그 이벤트 훅마다 지정되어 있는 함수가 있다. 어느시점에 만들어지고 사용되는지 알아본다. 완벽하게 이해할 필요는 없다. 하지만 어느정도는 알고있어야한다. beforeCreate 인스턴스가 초기화 된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출됩니다. 인스턴스가 초기화되면 props 설정을 처리한 후 data() 또는 computed 같은 다른 옵션을 처리하기 직전에 호출됩니다. created 인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의.. 공감수 0 댓글수 0 2022. 7. 15.
[Vue.js] computed, watch computed 템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 데이터의 특정 키, 변수 값을가지고 표현을 해줘야 하는경우 새로운 함수명으로 computed에서 구현하면 됩니다. 함수로 만들었지만 data영역에 선언한 변수처럼 사용이 가능합니다. 또한 실시간으로 데이터의 변경을 감지하고 data변경시 바로 반영을 합니다. {{ title }} {{ firstName }}, {{ lastName }} {{ fullName }} 당신의 나이는? {{ age >= 20 ? '성인' : '미성년자' }} {{ isAdult }} 코드설명 더보기 서버에서 firstName, lastName,.. 공감수 0 댓글수 0 2022. 7. 13.
[Vue.js] 렌더링 조건(v-if,v-show) 렌더링조건(v-if,v-show) Randering If v-if / v-else-if / v-else 는 if문과 같이 조건문을 HTML테그에 바로 걸수 있습니다. 또한 v-if문의 조건에는 ||(or)조건과 &&(and) 조건을 사용할수 있습니다. 조회 생성 삭제 조회 생성 조회 Rendering Show v-show 사용법 + v-if 차이점 v-show : 사용자가 화면에서 선택을 자주할 경우에 사용하고 개발자 도구에서 코드를 보면 style="display: none"으로 잡혀있다. 즉, 렌더링될때 코드가 같이 딸려온다. v-if : 조건 만족시에 서버에서 코드를 가져오고 개발자 도구에서 코드를 보면 v-if라는 문구가 주석처리 되어 코드가 렌더링된다. 즉, 렌더링 될때는 코드가 .. 공감수 0 댓글수 0 2022. 7. 11.
[Vue.js] 이벤트 Vue.js 이벤트 기본적으로 JavaScript의 이벤트를 다루는 문법에서 @를 앞에 on대신에 사용하여 이벤트를 사용할 수 있습니다. Click이벤트 @click 을 이용하여 onclick과 같은 효과를 낼 수 있습니다. Add 1 {{ counter }} Change이벤트 @change로 변화가 일어날때 코드를 실행합니다. @change와 v-on:change는 같습니다. 가장 많이 사용되는 태그는 select, input type checkbox, input type radio에서 사용이 됩니다. input type text도 사용이 가능하긴 합니다. 이벤트를 변수에 받아서 함수에 넘겨주고 싶은 경우에는 $event를 통해서 event를 넘겨줄 수 있습니다. ==도시선택== {{ city.titl.. 공감수 0 댓글수 0 2022. 7. 10.
[Vue.js] 데이터 바인딩 데이터 바인딩 폴더 구조 Views폴더에서는 화면 전체를 구성하는 컴포넌트를 다룹니다. 또한 이름의 마지막에 View를 붙이는 룰이 있습니다. components폴더에서는 화면의 특정 영역이나 다른 여러 곳에 사용이 되어 재사용이 가능한 컴포넌트를 다룹니다. 데이터 바인딩 string Vue에서는 모든 데이터는 data() 함수에 정의하고 아래의 코드는 {{}} 중괄호 2개를 통해서 string 값을 단방향 데이터 바인딩을 하였습니다. 일반 바닐라 자바스크립트로 서버로부터 가져온 데이터를 바인딩하여 출력을 하려면 해당 태그에 id값을 할당하고 Document.getElementById()를 통해서 DOM에 접근하여. innerText 또는. innerHTML을 통해서 값을 바꿔야 한다. Hello {{ .. 공감수 0 댓글수 0 2022. 7. 9.
[Vue.js] 라우터 이해하기 Vue 라우터란? 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 라우팅이란? 웹 페이지의 이동 방법을 말합니다. 라우팅은 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용되고 화면 간의 전환을 매끄럽게 진행시킬 수 있습니다. Vue 라우터에 사용되는 태그 아래의 예제에서는 App.vue 파일에서 사용이 됩니다. 페이지 이동 태그, 화면에선 a 태그로 치환 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역 폴더 구조 project |--public | |--index.html |--src |--router | |--index.js |--App.vue |--main.. 공감수 0 댓글수 0 2022. 7. 7.
[Vue.js] Vue 프로젝트 생성 Vue 프로젝트 Vue 프로젝트 생성 Vue 프로젝트를 생성할 루트 폴더 만들기 : 윈도우 탐색기에서 폴더 생성 (폴더명을 'vue-project'라고 함) Visual Studio Code 열기 File > Open 에서 1번에서 생성한 폴더 열기 -> cd vue와같이 폴더 이동 메뉴에서 View(보기) > 터미널 열기 Vue 프로젝트 생성 명령어 입력 : vue create 프로젝트명 manually select features 선택 선택 항목 중 Router, Vuex 추가 선택 (선택할 항목에서 '스페이스바' 키 입력) 3.x 버전 선택 history mode는 y 입력 ESLint + Standard config 선택 Lint on save 선택 In package.json 선택 Preset:.. 공감수 0 댓글수 0 2022. 6. 28.
[Vue.js] Vue CLI & 기본 구조 이해하기 Vue CLI 란? vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야 되는지 webpack 설정은 어떻게 해야 되는지에 대한 고민을 덜을 수 있습니다. 구조 살펴보기 package.json { "name": "project01", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3... 공감수 0 댓글수 0 2022. 6. 27.
[Vue.js] Vue.js란? Vue.js란? Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. 다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. 한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용 가능하다. 여기서 프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발 된 것을 뜻한다. 주요 특징 SPA (Single Page Application) 싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지.. 공감수 0 댓글수 0 2022. 6. 26.
[Bootstrap] Utilities 살펴보기 Utilities API 유틸리티 API는 유틸리티 클래스를 생성하기 위한 Sass 기반 도구입니다. Background background-color를 통해 의미를 전달하고 그라디언트로 꾸밈을 추가합니다. Borders 테두리 유틸리티를 사용하여 요소의 테두리 및 테두리 반경 스타일을 빠르게 지정합니다. 이미지, 버튼 또는 기타 요소에 적합합니다. Colors 색상 유틸리티 클래스를 사용하여 color (색상)을 통해 의미를 전달합니다. 호버 상태의 링크 스타일링에 대한 지원도 포함합니다. Display 디스플레이 유틸리티를 사용하여 구성 요소의 표시 여부 등을 빠르고 신속하게 전환할 수 있습니다. 인쇄 시 표시를 제어하기 위한 일부 추가 기능뿐만 아니라 더 일반적인 값에 대한 지원도 포함됩니다. 코드.. 공감수 0 댓글수 0 2022. 6. 23.
[Bootstrap] Helpers 살펴보기 Helpers Clearfix CSS에서 float를 사용을 할 때 clearfix 유틸리티를 추가하여 컨테이너 내에서 floating 된 콘텐츠를 빠르고 쉽게 정합니다. Clearfix란? 버그라고 알려져 있고, CSS를 사용할 때 수없이 사용되는 필수 학습해야 하는 코드입니다. HTML 문서에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게 되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 이때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드.. 공감수 0 댓글수 0 2022. 6. 21.
[Bootstrap] Content, Forms, Components 살펴보기 Content Typography, Images, Table 등을 다룰 수 있는 클래스들이 있습니다. Typography 글자크기, 정렬 등에 대한 클래스를 모아놓은 영역입니다. Images 이미지 크기 제어, 정렬 등에 대한 클래스를 다룹니다. Tables 표의 색상, 디자인, hover, border, 표 내부에서의 정렬 등의 클래스를 다룹니다. Figures 이미지에 대한 부가 설명을 넣는 클래스를 제공합니다. Forms 사용자로부터 입력받는 다양한 form요소를 컨트롤 하는 클래스를 다룹니다 Form control label 태그에서는 class 값을 form-label을 주어야 하고 input 태그에서는 form-control을 주어야 합니다. Email address Components Com.. 공감수 0 댓글수 0 2022. 6. 18.
[Bootstrap] Layout 살펴보기 Layout Layout 파트는 반응형 웹 처리를 위한 레이아웃 클래스가 있다고 생각할수 있다. 부트스트랩의 핵심입니다. 반응형 웹 즉, 사용자의 다양한 디바이스 크기에 따라서 레이아웃을 변경시키는 것을 다룹니다. 주요 목차만 살펴보겠습니다. Breakpoints 6개의 포인트를 제공하고 너비에따라 클래스가 적용이되게 컨트롤 한다. 미디어 쿼리를 6개 만들었다고 생각하면 된다. Containers 부트스트랩의 가장 기본적인 레이아웃 요소입니다. container 적용시 화면이 가운데로 배치가 됩니다. 화면을 줄이면 너비가 줄어들면서 비율을 유지하다가 일정수준 이상 줄이면 너비를 max로 유지합니다. 아래 그림을 보면 기본 클래스를 container를 줬다고 가정을 하면 화면의 너비가 꽉찬 아래그림은 너비가 공감수 0 댓글수 0 2022. 6. 15.
[Bootstrap] 부트스트랩이란? 부트스트랩이란? 반응형 프런트 엔드 툴킷. Sass를 사용하여 구축 및 커스터마이징하고, 사전 구축된 그리드 시스템과 구성 요소를 활용하고, 강력한 JavaScript 플러그인을 통해 프로젝트를 수행할 수 있습니다. 데스크탑 모바일 테블릿에 자동으로 최적화된 레이아웃으로 구성이된다는 장점이있다. 또한, 부트스트렙 테마시장이 잘 구성 되어있어 이미 잘 만들어진 테마를 다운로드하여 사용할수 있습니다. 테마 사이트 : 참고 부트스트랩 Doc의 구성 부트스트랩은 공식문서에 들어가 어떠한 디자인의 코드가 있는지 알아보고 본인의 코드에 적용해가면서 사용을 하는 것입니다. 클래스이름을 하나하나 외울 필요는 없습니다. 사이트 : 참고 부트스트랩 예제 공식사이트에서 사용하라고 미리 만들어 놓은 예제를 구성해 놓았습니다... 공감수 0 댓글수 0 2022. 6. 10.
[JavaScript] Validity 유효성 검증 Validity 로그인 정보의 유효성 검증을 해보기 위하여 아래 3가지 방법을 수행하여 본다. 1. form 테그를 이용하여 로그인화면 구현 2. form 테그를 이용하면서 SPA와 같이 서버로 전송이 일어나지 않게 로그인화면 구현 3. form 테그를 쓰지 않고 SPA와 같이 서버로 전송이 일어나지 않게 로그인 화면 구현 form 테그를 이용하여 로그인화면 구현 화면 전환이 일어나기에 요즘 개발추세에는 맞지 않는 방법입니다. required 속성을 통하여 유효성 검증 이메일 비밀번호 로그인 태그의 required 속성 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시합니다. required 속성이 제대로 동작하는 요소의 type 속성값은 다음과 같습니다.-.. 공감수 0 댓글수 0 2022. 6. 8.
[JavaScript] DOM 요소를 변경하는 방법 DOM요소를 변경하는 방법 Element.innerHTML 특정 DOM 요소 안에 HTML을 전부 새로운 HTML로 변경하고 싶을 때 서버로 부터 정보를 가져왔을때 그 정보를 이용하여 화면에 보여주는 코드 출신 지역은? Element.innerText 특정 DOM 요소 안에 TEXT를 전부 새로운 TEXT로 변경하고 싶을 때 Element.remove() Element.remove()메서드는 DOM에서 요소를 제거합니다 참고 기본 타이틀입니다. 2초후 변경됩니다. Element.insertAdjacentHTML() Element지정된 텍스트를 HTML 또는 XML로 구문 분석하고 결과 노드를 지정된 위치의 DOM 트리에 삽입합니다. insertAdjacentHTML(position, text) posit.. 공감수 0 댓글수 0 2022. 6. 5.
[JavaScript] DOM 이벤트 다루기 DOM 이벤트 Event 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 inline 이벤트 핸들러는 mdn에서 사용하지 마세요 라고 나옵니다. 참고 EventTarget.addEventListener() EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다. addEventListener(type, listener); // 다른타입은 참고자료 참고하기 addEventListener(type, listener, options); addEventListener(type, listener, useCapture); type 수신할 이벤트 유형을 나타내.. 공감수 0 댓글수 0 2022. 6. 4.
[JavaScript] DOM 이벤트 버블링 DOM 이벤트 버블링(event bubbling) 이벤트가 발생한 노드에서 최상위 노으로 이벤트가 순차적으로 전파되는 것을 이벤트 버블링이라고 합니다. stopPropagation() 이벤트 버블링을 중지시키는 함수입니다. CSS HTML p태그를 클릭해도 상위 div에 할당된 이벤트가 실행됩니다. 이것을 버블링이라고 합니다. parentParentFunction() 함수 실행 parentFunction() 함수 실행 childFunction()함수 실행 공감수 0 댓글수 0 2022. 6. 4.
[JavaScript] DOM DOM 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM요소 접근하기 HTML 사용자 ID HTML CSS JavaScript 저장 저장2 Id 값을 이용해서 DOM 요소 찾기 태그명을 이용해서 DOM 요소 찾기 클래스명을 이용해서 DOM 요소 찾기 name 속성 값을 이용해서 DOM 요소 찾기 CSS 선택자를 이용해서 DOM 요소 찾기 JavsScript DOM 속성(attribute) H.. 공감수 0 댓글수 0 2022. 6. 2.
[JavaScript] 정규 표현식(Regular Expression) 정규 표현식(Regular Expression) 정규 표현식(regular expression)은 문자 검색과 교체에 사용되는 패턴으로 강력한 기능을 제공합니다. 자바스크립트에선 RegExp 객체와 문자열 메서드를 조합해 정규표현식을 사용할 수 있습니다. 정규 표현식(‘regexp’ 또는 'reg’라고 줄여서 사용)은 패턴(pattern) 과 선택적으로 사용할 수 있는 플래그(flag) 로 구성됩니다. 정규식 객체를 만들 땐 두 가지 문법이 사용됩니다. ‘긴’ 문법은 다음과 같습니다. regexp = new RegExp("pattern", "flags"); ‘짧은’ 문법은 슬래시(빗금) "/"를 사용합니다. regexp = /pattern/; // 플래그가 없음 regexp = /pattern/gmi; .. 공감수 0 댓글수 0 2022. 6. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.