MySQL 에서 데이터를 입력하는 CRUD에서 Create를 담당하는 부분
■ 기본 문구
INSERT INTO 'TABLE_NAME' VALUES ( ) ;
OR
INSERT INTO 'TABLE_NAME' ( column names ) VALUES ( datas ) ;
■ 예제)
INSERT INTO member_list VALUES (user_name='홍길동', age='25' ) ;
INSERT INTO member_list ( user_name, age ) VALUES ( '홍길동', '25' ) ;
| [ MySQL ] Like % 사용하기, 검색 기능 구현하기 (0) | 2021.12.03 |
|---|---|
| [ MySQL ] Limit 사용하기, offset 활용하기, pagination 활용하기 (0) | 2021.12.03 |
| [ MySql ] 계정 생성 / 데이터베이스 생성 / 권한 할당 (0) | 2021.09.27 |
● 바닐라 자바스크립트로
● 요소를 자식요소 맨 마지막에 추가를 한 뒤
● 3초 뒤에 자동으로 사라지게 하기 예제 입니다.
<html>
<div class="div">
<input type="text" />
<!-- 이곳에 생성할 예정 -->
</div>
</html>
<script>
function createErrorCodeElement () { // error-log 라는 클래스 생성 및 스타일 지정
let newP = document.createElement('p')
const tiv = document.querySelector('.div')
tiv.appendChild(newP)
newP.classList.add('error-log')
newP.innerHTML = '유효한 내용을 입력해주세요'
newP.style.color = 'red'
newP.style.fontSize = '12px'
RemoveErrorCodeElement() // 끝난 뒤 함수 호출
}
function RemoveErrorCodeElement () { // 3초 뒤 엘리먼트 삭제
setTimeout(function () { // 인스턴스 함수로 설정
let errorLogElement = document.querySelector('.error-log')
if ( errorLogElement )
errorLogElement.remove()
}, 3000) // 시간 설정
}
</script>
해석해보자면, p 태그를 div 태그 내에 특정 이벤트로 지정해놓고( onsubmit 의 조건 같은 걸로 ),
해당 이벤트 함수가 호출되었다면 CreateErrorCodeElement가 실행되어 요소를 생성한 뒤,
RemoveErrorCodeElement가 호출되어 3초로 설정된 setTimeout() 를 통해 인스턴스 함수로 생성한 요소를 제거 하는 겁니다.
☆ 저는 이 방법이 무한하게 반복 될 줄 알았건만, 안되더군요.
그래서 할 수 없이 미리 style을 지정해놓고 조건에 따라 className을 변경하는 것으로 변경하려고 합니다.
| [ JavaScript ] Chart.js 사용 예시 (0) | 2021.11.29 |
|---|---|
| [ JavaScript, PHP ] JavaScript에서 php의 json 데이터 비동기 통신으로 출력하는 방법 (0) | 2021.11.29 |
| [ JavaScript ] 오늘 날짜 출력하기 (0) | 2021.11.22 |
| 에러해결 : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (0) | 2021.11.01 |
| [ HTML, JAVASCRIPT ] Form - input - file (0) | 2021.11.01 |
$letter = "ABCDEFGCDE";
$result = str_replace ( "CD", "ZZ", $letter ) ;
echo $result; // 결과 : ABZZEFGZZE이렇게 "해당"문자열만을 변경할 수 있는 방법이 있고,
$letter = "ABCDEFGCDE";
$result = str_replace ( "CD", "ZZ", $letter, $count ) ;
echo $result; // 결과 : ABZZEFGZZE
echo $count; // 결과 : 2해당 문자열을 몇 번 교체했는지 알 수 있다.
$letter = "ABCDEFGCDE";
$result = substr_replace ( $letter, "ZZ", 3 ) ;
echo $result; // 결과 : ABCZZ
해당 인덱스부터 끝까지의 문자 모두 대체된 것을 확인할 수 있다.
이를 응용하여, 출력한 글자의 길이가 몇글자를 넘어가면 나머지를 "..."으로 대체하는 방법이 있다.
$letter = "ABCDEFGCDE";
$result = substr_replace ( $letter, "ZZ", 3, 0) ;
echo $result; // 결과 : ABCZZDEFGCDE
3번째 인덱스를 가진 문자열에 "ZZ"를 넣을 수 있다.
뒤의 숫자는 ZZ를 넣으면서 대체할 문자열의 개수라고 생각하면 된다.
(0으로 설정했으니까 0개가 대체된다. 2개를 대체했다면, DE가 대체된다.
이상입니다.
다양한 오늘의 날짜를 출력하는 방법 중에서
20211122 의 포맷을 출력하는 방법
함수로 선언하기
function getTodayDate () {
const todayDate = new Date()
const year = todayDate.getFullYear()
const months = todayDate.getMonth()+1
const days = todayDate.getDate()
const resultDate = year + '' + months + '' + days
return resultDate
}
// resultDate의 값이 반환됩니다.
getTodayDate()
그냥 선언하기
const todayDate = new Date()
const year = todayDate.getFullYear()
const months = todayDate.getMonth()+1
const days = todayDate.getDate()
const resultDate = year + '' + months + '' + days
//아래 결과 : 20211122
console.log(resultDate)
Vue.js 의 methods: { }, computed: { } 등에서 같은 scope에 있는 function(함수) 를 호출하려고 할 때 그냥 호출시 안되는 경우가 있다.
"error 'function' is not defined"
이렇게 해당 function(함수)가 선언되지 않았다 라고 에러가 출력되기도 한다.
분명히 같은 methods: { } 안에 해당 내용을 출력했는데도 왜 안될까?
이는 Vue가 객체로 처리되기 때문이다.
그렇기 때문에 모두가 알고 있는, 'this.' 을 통해 함수를 호출해야한다.
이제 잘 출력되는 것을 볼 수 있다.
이상입니다.
| [ Vue.js ] 에러해결 : sass-loader 설치 오류 / (0) | 2021.12.09 |
|---|---|
| [ Vue.js ] 유튜브 강의 - 반응형 포트폴리오 만들기 (0) | 2021.12.09 |
| CORS 에러 없애기 (0) | 2021.11.22 |
| [ Vue.js ] daum 주소 api 사용하는 방법 (예제 example) (0) | 2021.11.18 |
| [ Vue.js ] Axios - PHP, 200 response를 Error로 보내는 방법 (0) | 2021.11.18 |
로컬 호스트(localhost) 에서 REST API를 이용, Axios 를 이용, Ajax를 이용하는데에 있어서 CORS 에러가 자주 발생한다.
이 방법은 localhost 에서 발생하는 CORS 오류를 막는 것이다.
(만약 PUBLIC 으로 배포하였을 때에는 해당되지 않는다.)
Moesif Origin & CORS Changer
This plugin allows you to send cross-domain requests. You can also override Request Origin and CORS headers.
chrome.google.com
구글 크롬 extension의 CORS Changer를 사용하면 단번에 해결이 된다.
[ 다운로드 - 확장 - 새로고침 ]
이 세 단계로 모두 해결된다.
REST API - AXIOS 를 사용하는데에 자꾸 localhost에서만 해당 api를 가져올 수 없다고, CORS 에러가 발생하길래 어쩔 수 없이 사용하였다.
해당 내용처럼 잘 출력된다. 하지만 로컬에서는 안됐다는 점..
Access to XMLHttpRequest at 'request url' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
| [ Vue.js ] 유튜브 강의 - 반응형 포트폴리오 만들기 (0) | 2021.12.09 |
|---|---|
| [ Vue.js ] methods , computed 안에서 함수 호출하는 방법 (0) | 2021.11.22 |
| [ Vue.js ] daum 주소 api 사용하는 방법 (예제 example) (0) | 2021.11.18 |
| [ Vue.js ] Axios - PHP, 200 response를 Error로 보내는 방법 (0) | 2021.11.18 |
| [ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른 포트 번호 에서 데이터 송수신 (1) | 2021.11.12 |
[ 사용 환경 : Vue.js, tailwind css ]
Vue.js 에서 daum address api (kakkao map) 를 사용하는 방법을 포스팅 하겠습니다.
기존 html css js 에서 사용하는 것과 달리 조금은 번거로운 작업이 존재합니다.
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
위 링크를 통해 실제 예제가 존재합니다. 이를 변형하여 vue에 맞게 제작하겠습니다.
팝업(pop up)을 이용한 웹 (Web application) 전용으로 제작하도록 하겠습니다.
1. index.html
2. component 생성
3. component import
위의 내용을 복사해서 <head></head> 에 작성해주세요.
이제 해당 내용을 작성할 컴포넌트를 생성하도록 하겠습니다.
src/views/Account/Address.vue 파일을 생성하였습니다.
Address.vue
<template>
<div class="text-md my-5">
<label class="text-xs px-2" for="company_name">회사주소</label><br>
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2 mb-3 mr-10"
type="text" id="sample4_postcode" name="post_number" placeholder="우편번호">
<button class="border-2 border-gray-400 rounded bg-gray-100 p-1 inline-block"
type="button" @click="addressApi">우편번호 찾기</button><br>
<input class="mr-10 focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2 mb-3"
type="text" id="sample4_roadAddress" name="address1" placeholder="도로명주소">
<span id="guide" style="color:#999;display:none"></span>
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2"
type="text" id="sample4_extraAddress" name="address3" placeholder="참고항목">
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2"
type="text" id="sample4_detailAddress" name="address4" placeholder="상세주소">
</div>
</template>
<script>
export default {
methods: {
addressApi() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample4_postcode').value = data.zonecode;
document.getElementById("sample4_roadAddress").value = roadAddr;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("sample4_extraAddress").value = extraRoadAddr;
} else {
document.getElementById("sample4_extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
}
}
</script>
<style>
.address-layout{
display:none;
position:fixed;
overflow:hidden;
z-index:1;
-webkit-overflow-scrolling:touch;
}
</style>
본래 사용할 component에 Address.vue 를 import 하도록 합니다.
<template>
<Address />
</template>
<script>
import Address from './Address'
export default {
components: {
Address,
},
</script>
이제 우편번호 찾기를 클릭하면 정상적 출력 됨을 확인하실 수 있습니다.
■ 후기
사실 완전히 Vue.js style로 변형한건 아닙니다.
그냥 js 기반의 언어기 때문에 혼용이 될 뿐입니다.
$emit 을 이용한다던가, data () {} 를 작성하여 값을 모니터링 한 것도 아닙니다.
쓰면 좋겠지만, 렌더링 속도나 구현 속도 등을 고려했을 때 굳이 안바꿔도 된다 생각하여 제멋대로 변형해보았습니다.
| [ Vue.js ] methods , computed 안에서 함수 호출하는 방법 (0) | 2021.11.22 |
|---|---|
| CORS 에러 없애기 (0) | 2021.11.22 |
| [ Vue.js ] Axios - PHP, 200 response를 Error로 보내는 방법 (0) | 2021.11.18 |
| [ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른 포트 번호 에서 데이터 송수신 (1) | 2021.11.12 |
| [ Axios ] Axios 사용하기 / url에 관한 짧은 정보 / where is root path of Axios(url) ? / 예시 / example (0) | 2021.11.11 |
Vue.js 에서 회원 로그인 정보를 php 로 axios를 통해 보내고 200 success response를 받았다.
하지만 그 내용을 오류로 넘기고 싶을 때 처리하는 방법
.then((response) => {
if( response.data == false ) {
throw new Error('no data from server');
} else {
console.log('success');
}
})
.catch((error) => {
console.log(error);
this.errors.push("회원정보가 존재하지 않습니다.");
});
then() 내에서 new Error로 넘겨주면,
아래 catch(error) 에서 해당 에러를 출력해준다.
그리고 this.errors.push 를 통해 error라는 id 를 가진 html 태그에 에러 내용을 출력해준다.
throw를 통해 새로운 에러 객체를 생성하는 작업.
이 작업을 통해 catch가 에러를 인식하고 해당 내용을 출력한다.
Arrow function의 인스턴스 함수의 기능을 이용하여,
에러 함수 내에서 전역변수( this. )를 사용할 수 있게 한다.
| CORS 에러 없애기 (0) | 2021.11.22 |
|---|---|
| [ Vue.js ] daum 주소 api 사용하는 방법 (예제 example) (0) | 2021.11.18 |
| [ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른 포트 번호 에서 데이터 송수신 (1) | 2021.11.12 |
| [ Axios ] Axios 사용하기 / url에 관한 짧은 정보 / where is root path of Axios(url) ? / 예시 / example (0) | 2021.11.11 |
| [ Vue.js ] Component 등록의 2가지 방법(전역/지역) 과 번외 (0) | 2021.11.10 |