하수도키의 성장일기

개발일기/Javascript

[Javascript] replace를 이용해 문자열을 치환하는 방법(How to replace a string in javascript)

JS - replace(regx) 오늘 포스팅할 주제는 자바스크립트를 이용해 문자열을 치환하는 방법이다.(How to replace a string in javascript) 우리는 코드를 작성하면서 일괄 수정할때 보통 CTRL + F로 찾은 다음 바꾸기를 하거나 일괄적으로 한번에 원하는 단어를 치환한다. 에디터에서 하는 기능을 자바스크립트에서는 어떻게 구현하는지 알아보자. replace 를 한국어로 치환한다고 정의해서 포스팅 글을 쓰겠다. 목차 1. replace 알아보기 2. replace 활용하기 전체 문자열 모두 치환하기 대소문자 구분하여 치환하기 전체 문자열 대소문자 구분없이 치환하기 replace 알아보기 replace 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로..

개발일기/Vue.js

[Vue.js] vue-router로 정적 라우트를 만들어보자.

이번에는 Vue Router로 라우트 활용 방법과 동적 라우트를 사용하는 방법에 대해 알아보자. 매번 Vue Cli로 하다 보니 Vue-Router가 자동 설정으로 사용하고 있었는데 이번에 codesandbox를 사용하면서 Vue-Router 처음 설정하는 법부터 살펴보겠다. 우선 codesandbox.io 에 들어가서 Vue2 로 설정해보자. 자세한 사용법은 구글 구글링으로 검색해보자. Vue-router 설치 저기 동그라미 친 부분에 vue-router를 검색해서 추가하자. npm install vue-router 라고 보면 된다. 또는 yarn add vue-router이다. 프로젝트 구조는 Home, Blog 페이지 2개로 예제를 살펴보겠다. views폴더에 Home, Blog 페이지를 만들고 A..

개발일기/Vue.js

[Vue.js] Vue에서 SVG 사용하는 방법(How to use svg in vue app)

Vue에서 .png,.jpg 등의 이미지 파일 대신 svg를 사용하는 방법을 살펴보자. medium.com/javascript-in-plain-english/how-to-use-svg-icons-in-your-vue-app-6e2c30865d7c 이 포스팅을 보고 의역을 하면서 여러 가지 참고 자료를 정리한 포스팅이다. 예전에는(그리고 현재까지) 웹사이트에 아이콘(이미지)를 삽입하려면 .png, .jpg 파일들을 저장해서 불러오는 방식이다. 만약 보여줘야 되는 아이콘들이 많아 질수록 많은 .png,.jpg 파일들이 필요하고 이걸 다 불러와야 된다. 운이 나쁘면, 즉 네트워크가 갑자기 느려질 경우 웹사이트에서 아이콘을 부분적으로 불러오면서 정상적으로 작동되지 않는 느낌을 받을 수 있다. 시간이 지나면서 이..

개발일기/Vue.js

[Vue.js] 모달 컴포넌트(Modal Component) 만들기

이번에는 Vue.js에서 모달 컴포넌트를 만드는 방법을 살펴보겠다. 항상 궁금했다. 모달 팝업, 모달 컴포넌트 등등 모달을 부르는 말을 듣고 대충 어떤건지 감이 오는데 정확히 어떤건지 몰라서 찾아봤다. 모달(Modal)이란? 간단하게 설명하면, 자식 윈도우에서 부모 윈도우로 돌아기전에 뜨는 창을 말한다. 예를 들면, '정말 종료하시겠습니다?','뒤로 가시겠습니까?' 이런 대화의 종류이다. 웹에서는 어떤 액션을 취한 뒤 알려주는 용도나, 긴급상황을 알려주는 용도 등으로 많이 사용 된다. 개요 App, Content, ModalView 컴포넌트를 생성하기 버튼 누르면 모달이 보여지고 컨텐츠 밖을 클릭하면 사라진다. App 컴포넌트 만들기 Content, ModalView 컴포넌트..

개발일기/Javascript

디버깅에 유용한 콘솔(Console) 사용법 알아보기

개발도중 브라우저에서 디버깅으로 주로 사용하는 명령어는 consoel.log이다.(데이터 값을 확인할때 주로 사용한다.) 브라우저에서는 console.log 말고 다른 명령어를 사용하여 더 효율적인 디버깅을 알아보자. console.dir() 이 명령어를 사용하기 위한 객체를 만들어 보자. const infomation = { name : 'doki', phone : 010-0000-1111, location : 'Seoul' } console.log(infomation) console.dir(infomation) Object 라고 명시적으로 표시를 해줘서 정확한 타입을 알 수 있다. console.table() 이 명령어는 서버 응답으로 받은 긴 데이터를 확인할때 유용하다. const infomatio..