Vue-cli webpack4.0 version 에서 sass를 개별 설치하려고

$ npm i node-sass
$ npm i sass-loader

를 했는데 에러가 발생하였다.

node-sass는 정상적으로 설치가 완료되었지만, sass-loader를 설치하지 못했다.

 

그래서 개발자버전으로 다운로드 하려했지만 또 에러를 뱉어냈다.

 

$ npm i sass-loader -D

 

■ 해결방법

Vue-cli webpack 4.0의 버전은 그에 맞는 알맞은 버전의 sass를 다운로드 받아야한다고 명시되어져있다.

$ npm install -D sass-loader@10.0.5 node-sass

10.0 version을 다운받아도 무방하다.

 

 

 

npm install -D sass-loader node-sass Vue.js 2021

Hi issue is setting up SASS for Vue.js I run: Node.js - 15.7.0 Vue.js - @vue/cli 4.5.11 This is an error in the console I am having while running this command: npm install -D sass-loader node-sass ...

stackoverflow.com

 

반응형
저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Bootstrap - Vue , Vue에서 Bootstrap 설치하는 간단한 방법. npm , yarn, how to install bootstrap in vue cli project ...etc  (0) 2021.12.10
[ Vue.js ] 조건부 css 적용하기 :class 사용하기  (0) 2021.12.10
[ Vue.js ] 유튜브 강의 - 반응형 포트폴리오 만들기  (0) 2021.12.09
[ Vue.js ] methods , computed 안에서 함수 호출하는 방법  (0) 2021.11.22
CORS 에러 없애기  (0) 2021.11.22

 

 

■ 사용 기술

1. Vue.js 2
2. html
3. sass

전반적으로 아주 아주 아주 기초의 Vue.js 프로젝트였음

난이도 : ★☆☆☆☆
따라하기 쉬움

실용성 : ★★☆☆☆
본업에서 딱히 도움될만한 내용은 없음

sass 지식을 살짝 얻어감
(sass를 사용 안했었기 때문에)

 

 

대충 이런거 만듬(모바일 크기) <-> pc버전

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] 조건부 css 적용하기 :class 사용하기  (0) 2021.12.10
[ Vue.js ] 에러해결 : sass-loader 설치 오류 /  (0) 2021.12.09
[ Vue.js ] methods , computed 안에서 함수 호출하는 방법  (0) 2021.11.22
CORS 에러 없애기  (0) 2021.11.22
[ Vue.js ] daum 주소 api 사용하는 방법 (예제 example)  (0) 2021.11.18

 

 

부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중,

 

이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다.

child2 를 예시로 들어보면,

.child2 {
    flex: 1;
}

을 해주면 남은 영역이 모두 할당된다.

 

 

 

맨 위 사진의 코드 예시)

<style>
    .parent {
        width: 100%;
        height: 200px;
        background-color: chocolate;
        display: flex;
    }
    .child1 {
        background-color: darkcyan;
    }
    .child2 {
        background-color: thistle;
        flex:1;
    }
</style>
<body>
    <div class="parent">
        parent div
        <div class="child1">child1</div>
        <div class="child2">child2</div>
    </div>
</body>

 

 

이상

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > css' 카테고리의 다른 글

[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image  (0) 2022.02.17
[ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류  (0) 2022.02.15
[ Css ] Transition 트랜지션 사용하기  (0) 2021.10.26

 

querystring을 받아왔는데 JavaScript get 방식으로 값을 받아오는 방법

 

// Query String 데이터 출력
function searchParam(key) { // key를 매개변수로 받고, value를 리턴
		return new URLSearchParams(location.search).get(key)
}

함수로 생성해놓고 사용하는 것이 편합니다.

 // url =  www.example.com?page=12
 const page = searchParam('page')
 console.log(page)       // 12 출력

 

key: value 형태이다보니, key 값을 매개변수로 넘겨주어야 value가 출력됩니다.

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Chart.js ] 에러해결 ■ Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. / Canvas.js 에러  (1) 2021.12.21
[ JavaScript ] function - 목록 안의 요소들 없애기  (0) 2021.12.20
[ jQuery - BootStrap ] 에러해결 : bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6  (0) 2021.12.06
[ JavaScript ] Input 태그 내에서 엔터 이벤트 실행  (0) 2021.12.02
[ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript  (0) 2021.12.02

 

 

 

부트스트랩 cdn을 사용하던 와중 해당 에러가 지속적으로 발생하였다.

이 문제는 아주 단순한 내용이다.

스크립트의 순서 때문.

 

이런식으로 boostrap과 jquery cdn을 삽입하였는데, 순서를 바꿔주자

 

 

그렇다면 새로고침을 해주어 콘솔창을 확인하면 에러가 사라졌음을 알 수 있다.

jQuery가 먼저오고, bootstrap이 그 다음에 와야 해당 에러가 발생하지 않는다.

 

이상입니다.

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ JavaScript ] function - 목록 안의 요소들 없애기  (0) 2021.12.20
[ JavaScript ] js 에서 쿼리스트링 (query string, uri ) 받아오는 방법  (0) 2021.12.06
[ JavaScript ] Input 태그 내에서 엔터 이벤트 실행  (0) 2021.12.02
[ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript  (0) 2021.12.02
[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초. 화면의 크기 및 영역을 제어하기, how to control elements when resize the screen  (0) 2021.12.01

html <input> 태그 내에서 enter 를 입력 시 javascript로 원하는 이벤트를 발생시키는 방법

input 태그 내에

<input type="text" 
	onkeypress="if(window.event.keyCode==13){ function name() }"
    />

를 작성해주도록 한다.

 

enter = keyCode 13

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ JavaScript ] js 에서 쿼리스트링 (query string, uri ) 받아오는 방법  (0) 2021.12.06
[ jQuery - BootStrap ] 에러해결 : bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6  (0) 2021.12.06
[ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript  (0) 2021.12.02
[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초. 화면의 크기 및 영역을 제어하기, how to control elements when resize the screen  (0) 2021.12.01
[ Chart.js ] chart.js 차트 크기 지정 방법, how to resize canvas with chart.js?  (0) 2021.12.01

 

 

PHPMailer를 통해 이메일을 송신하곤 했는데,

불편하기도 하고 읽기 불편해서 찾아보게 된 EmailJS. 

자바스크립트 기반으로 이메일을 보낼 수 있다.

parameter 를 통해 원하는 내용을 전달할 수 있어서 더 좋다. (역시 js)

Google에 검색하면 1순위로 나오는 웹사이트 (광고 아님)

emailjs

 

Send email from Javascript - no server code required | EmailJS

Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!

www.emailjs.com

 

이곳에서 회원가입 -> dashboard로 진행하면 된다.

 

form

회원가입 폼도 간단하다. 본인 email, 비밀번호만 설정하면 된다.

로그인시, 바로 대쉬보드로 이동하게 되는데, 

 

■ 필요사항

1. 서비스 생성
2. 템플릿 생성 + 템플릿-id
3. integration (과거 installation) 에서 init-code

 

 

■ 1. 서비스 생성

Add New Service 클릭
원하는 항목 선택

 

원하는 이메일 서비스를 선택하면 되는데, 구글(Gmail)을 선택하였다.

 

Service ID는 원하는 아이디로 사용하는게 좋다. 회사명, 본인 이름 등..

Connect Account를 통해 Gmail과 연동 후 Create Service

 

Email Service 생성 완료

 

■ 2. 템플릿 생성 + 템플릿-id

이제 템플릿을 생성하도록 한다.

확인을 잘 해주시고 각각의 항목에 삽입한다. 내용을 모두 작성하였으면 Save

 

그리고 Template ID 도 챙겨가자.

 

마지막.

■ 3. integration (과거 installation) 에서 init-code

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("챙겨야할 init 코드");
})();
</script>

 

■ 실제 적용

저는 php로 데이터를 받아와 javascript로 이메일 송신하는 방식을 사용합니다.

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
</script>
<script type="text/javascript">
    // init code 사용
    emailjs.init("3. 사용자_init_code");
    
    // parameter 설정
    const templateParams = {
        to_email: '<?=$requestedEmail?>',
        message_html: 'you have changed your password.',
        new_password: <?=$newPassword?> ,
    };
    
    // email 송신 과정
    emailjs.send('1.사용자id', '2.템플릿 id', templateParams)
        .then(function(response) {
            console.log('SUCCESS!', response.status, response.text)	 //success
        }, function(error) {
            console.log('FAILED...', error)		//fail
        });
</script>

이런식으로 사용하면 됩니다. 

파라미터에 값을 잘못넣거나 공란이 되면 에러가 개발자도구-콘솔에 출력이 되니, 확인하시면서 조율하면 됩니다.

promise.then() 으로 결과 출력 확인 가능 

 

■ 결과

메일이 잘 도착하였습니다.

 

EmailJS - DashBoard - Email History 에서도 확인하실 수 있습니다.

 

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ jQuery - BootStrap ] 에러해결 : bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6  (0) 2021.12.06
[ JavaScript ] Input 태그 내에서 엔터 이벤트 실행  (0) 2021.12.02
[ JavaScript ] media query 사용하는 방법 , 반응형 웹 디자인의 기초. 화면의 크기 및 영역을 제어하기, how to control elements when resize the screen  (0) 2021.12.01
[ Chart.js ] chart.js 차트 크기 지정 방법, how to resize canvas with chart.js?  (0) 2021.12.01
[ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려내기 | how to draw two graph in one canvas?  (0) 2021.11.30

 

 

자바스크립트로 css 를 제어할 수 있습니다.

보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠. 

대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다.

css 로는 @media ( width: 1000px ) { }  이런 식으로 작성합니다.

JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다.

화면 크기에 맞춰 변경되는 결과

 

■ 기본

<script>
	// 화면인식 992px 사이즈 조절
	const mediaViewContent = window.matchMedia(`(max-width: 992px)`)	// 1
	console.log(mediaViewContent)
    
    const viewChangeHandler = (mediaViewContent) => {  					// 3
    	//이곳에 원하는 이벤트 설정
    }
    
    mediaViewContent.addEventListener("change", viewChangeHandler)		// 2
</script>

이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.

 

console.log(mediaViewContent)

콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다.

 

■ 응용

MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용하면 편하다.

992px 이상이 되면 false, 미만이 되면 true가 되는데, 이를 이용하도록 한다. 
[기준 이상: false, 기준 미만: true ]

<script>
	if(mediaViewContent.matches === true){
    	// 992px보다 작아질 때 
	} else {
    	// 992px 보다 커질 때 (원상복구)
	}
</script>

이런식으로 사용 하면 되는데,

각각의 내용 안에 id.style.any = '' 를 지정해주면 된다.

 

■ 응용 - 예시)

<script>
const mediaViewContent = window.matchMedia(`(max-width: 992px)`)

const viewChangeHandler = (mediaViewContent) => {
    const moveToQnA = document.querySelector('#moveToQnA')
    const flexControlPannel = document.querySelector('#flexControlPannel')
    const moveToStatisticsList = document.querySelector('#moveToStatisticsList')

    if(mediaViewContent.matches === true){
        console.log('shrink')
        moveToQnA.classList.remove("col-5")
        moveToQnA.classList.remove("ml-5")
        moveToQnA.classList.add("mb-5")
        moveToQnA.style.width="100%"
        flexControlPannel.classList.remove("d-flex")
        flexControlPannel.classList.remove("justify-content-between")
        flexControlPannel.style.height="100%"
        moveToStatisticsList.classList.remove("col-5")
        moveToStatisticsList.style.width="100%"

    } else {
        console.log('release')
        moveToQnA.classList.add("col-5")
        moveToQnA.classList.add("ml-5")
        moveToQnA.classList.remove("mb-5")
        moveToQnA.style.width="48%"
        flexControlPannel.classList.add("d-flex")
        flexControlPannel.classList.add("justify-content-between")
        flexControlPannel.style.height="400px"
        moveToStatisticsList.classList.add("col-5")

    }
    
}
mediaViewContent.addEventListener("change", viewChangeHandler)
</script>

 

결과

 

 

이상입니다.

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ JavaScript ] Input 태그 내에서 엔터 이벤트 실행  (0) 2021.12.02
[ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript  (0) 2021.12.02
[ Chart.js ] chart.js 차트 크기 지정 방법, how to resize canvas with chart.js?  (0) 2021.12.01
[ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려내기 | how to draw two graph in one canvas?  (0) 2021.11.30
[ JavaScript ] 배열에 앞에, 뒤에 데이터 삽입하는 방법  (0) 2021.11.30

+ Recent posts

티스토리툴바