CodeHoon

안녕하세요 상훈입니다.

이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다.

해당 과정은  [  select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력  ]  합니다.

Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고,
담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다.

1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] )
2. php

HTML

<select id="name" onchange="selectItem()" name="name">
   <option value="" selected>아이템 리스트들</option>
   <option value="item01" >아이템 리스트1</option>
   <option value="item02" >아이템 리스트2</option>
   <option value="item03" >아이템 리스트3</option>
</select>
<select id="item_name">
   <option value="">선택해주세요</option>
</select>

이러한 html 요소들이 존재합니다.

onchange() 기능을 이용해 js에서 감지할 수 있도록 함수로 선언해주었습니다.

리스트 요소 중 하나를 선택하면 해당되는 2번째 select-box에 값을 출력해줍니다. [ 데이터베이스 이용 ]

JAVASCRIPT  -  아래에서 상세히 설명

<script>
  function selectItem(value){
      any_name = document.querySelector('#name').value
      
      $.ajax({
        url: "getItemList.php",
        method: "POST",
        data: { any_name: any_name }
      })
      .done(
      	(result) => {
      		if(result === ''){
      			const item_name = document.querySelector('#item_name')
      			while(item_name.hasChildNodes() ){
      				item_name.removeChild(item_name.firstChild)
      			}
      			$('#item_name').append('<option value="">' + '선택해주세요 ' + '</option>');	
      		}else{
      			const item_name = jQuery.parseJSON(result)
      			i = 0
      			$.each(item_name, function(){
      				$('#item_name').append('<option value="' + item_name[i] + '">' + item_name[i] + '</option>');
      				i++
      			});
      		}
      	}
      )
      .fail( () => { alert('다시 시도해주세요.') })
  }
</script>

ajax 기본 틀

PHP [getItemList.php]

<?php
// 
if($any_name = $_POST['any_name'] ){
    
    //database 연동
    include '../db.php'; 
    
    //sql 작성
    $sql = "select item_name from 테이블 where 컬럼명 = '$any_name' ";
    $result = mysqli_query($conn, $sql);
    
	// 빈 배열 $array[]에 $row['item_name'] 넣어주기
    while($row = mysqli_fetch_assoc($result)){
        $array[] = $row['item_name'];
    }

	// json 객체로 변환하여 echo
    echo json_encode($array, JSON_UNESCAPED_UNICODE);

    
}else{
    echo ""; // 만약 선택하지 않았을 때 반환하는 값 : null
}

처음부터 보자면, 

1. name 이라는 id 를 가진 요소의 값을 가져온다. ( 첫번째 select-box에서 선택한 요소 )

2. ajax를 이용하여 데이터를 송신한다. 

  [ 목적지 : url, 
    방식 : method(get, post) , 
    송신할 요소 (parameter) : data  ] 

3. php 에서 데이터를 출력하고 json 객체로 출력해주기
   -> 주석으로 충분히 설명을 했다고 생각합니다.

4. javascript 에서 .done 부분

if영역(return null) 과 else영역(return json)은 각기 다른 결과를 나타냅니다. 

else영역(return json)부터 보자면, 
1. item_name이라는 상수에 JSON을 파싱한 결과값(result)을 담습니다.
2. jQuery의 each함수를 사용하여, item_name을 반복해줍니다.
3. 각각 가지고 있는 item_name의 개수에 따라 결과에 추가될 리스트의 개수가 달라집니다.

if영역(return null) 에서는 추가했던 option을 제거해주는 역할을 합니다.
 (혹은 이 내용을 기본값으로 하는 것도 좋을것같군요. 기본적으로 속을 비워주고, option을 채워주는 방식으로요.)

평소 ajax를 잘 사용하지 않아 해당 내용을 작성하는데에 조금 헤맸습니다.

이번 기회로인해 공부 잘하고 갑니다. ㅎㅎ

참고

이상입니다.

안녕하세요 상훈입니다.

$.ajax({
   url: ' ' ,
   method: ' ' ,
   data: {   },
   erorr: (  ) => {  },
   success: (  ) => {  }
})

이랬던 ajax가 변경되었습니다.

$.ajax({
   url: ' ' ,
   method: ' ' ,
   data: {  } ,
})
.done (  )
.fail (  )

참고 바랍니다.

안녕하세요 상훈입니다. 

금일은 Vue.js - Tailwind.css 를 이용하여 간단한(나는 안간단함ㅠ) 예제를 구현해보려고합니다.

프로젝트 설치방법은 Tailwind.css에서 git clone(클릭시 이동) 방식으로 진행하여
npm install, build를 통해 npm module들을 다운로드 받고,
vue.js는 cdn으로 연동하였습니다.

다음번에는 vue-cli를 통해 진행하는것도 좋을 것 같습니다.

사용한 vue.js 항목으로는 
v-if, v-for, v-on, v-model, v-show, v-binding 등이고, tailwind.css 의 클래스를 입력하는 것들이 생각보다 빡셌습니다. 후...

많은 조건문을 넣느라 토하는줄 

해당 내용은 컴포넌트의 분리 없이 한개의 html로 모두 구성이 되었습니다.

componenets를 다루지 않은게 조금 아쉽네요.

강의

전체 프로젝트

감사합니다.

안녕하세요 상훈입니다.

Vue.js + Tailwind.css 를 처음이용하여 클론코딩을 해보았는데, 결과를 포스팅하겠습니다.

핀터레스트(pinterest)를 클론코딩(clone coding) 했고, 해당 UI의 가장 기본적인 요소만 Vue.js로 코딩하였습니다.

기본적인 Vue.js의 지식을 갖고 있었기 때문에 vue 자체의 난이도는 적당하였고, 도움이 잘 되었습니다.

그러나 왜인지 모르게 자꾸 image의 경로가 안잡혔고, 결과적으로도 잡지 못하였습니다. (아예 width, height 없음)

따로 <img src="./assets/1.jpg"> 이렇게 주었을 때는 또 잘 작동하더라구요. 왜냐고.

아래의 모든 항목이 Component를 통해 참조는 되었는데, class가 적용이 안된건지 이해를 못하겠군요..

해당 컴포넌트는 아래와 같이 mouseover, mouseleave에 해당하는 경우의 값을 주었는데 말이죠.

@mouseover="hover = true" @mouseleave="hover = false"

tailwind 해보니까 클래스명이 직관적이어서 좋았습니다. 

부트스트랩의 클래스명보다 좀 더 좋다고 느껴졌어요. 다만,,, 적용하는 과정이 조금 까다로웠어요.

cdn으로 하면 편했을텐데 해당 cdn 없이 설치로 진행하였습니다.

tailwind.css cdn.

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">.

강의

참고

안녕하세요 상훈입니다.

해당 에러에 대해 말씀드리겠습니다.

바인드를 하려는 대상에 key 가 설정되지 않았기에 해당 에러가 발생하였습니다.

그러니 :key를 추가하면 됩니다.

예시)

이렇게 button을 data-binding으로 v-for를 사용하려고할 때, key를 정해주지 않아 발생하는 에러입니다.

위처럼 key 값을 정해주면 해결됩니다.

이상입니다.

안녕하세요 상훈입니다.

Vue.js - Tailwind.css 를 적용하려고 하는데 에러가 발생하였습니다.

This relative module was not found: * ./assets/index.css?vue&type=style&index=0&lang=css in ./src/App.vue

This relative module was not found: * ./routes/index.js in ./src/main.js

자세히 보니 경로가 잘못되었더군요

그래서 본래 

였던 것을 

로 변경하였습니다.

그리고 다시 

npm run serve를 통해 vue-cli를 실행시켜주니, 에러가 해결되었습니다.

만약 이런 사소한 경로 잡는 문제로 해결이 안된다면, 아래의 해당 블로그를 참조 바랍니다.

이상입니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js 에서 Axios를 사용하여 화면에 출력하는 예제를 작성해보도록 하겠습니다.

비동기 통신 방법으로는 Axios와 Ajax 등이 있는데, 이 중 Axios를 사용하도록 하겠습니다.

생각보다 아주 간단합니다!

1. script로 head 태그 내에 작성해주세요.

2. mounted api 속에 작성합니다.

let app = new Vue({
            el: '#app',
            data: {
                posts: [],
            }, 
            mounted () {
                axios.get('https://jsonplaceholder.typicode.com/users/').then((response) => {
                    this.posts = response.data
                })
            }
        })

이렇게 되면, 비어있던 posts 배열에 위에서 response 받은 json 객체가 posts에 담겨져 사용할 수 있게 됩니다.

3. html에 작성

<div id="app">
        <div v-for="post in posts">
            <h1>{{ post.name }}</h1>
            <p>{{ post.email }}</p>
        </div>
    </div>

v-for 문을 이용한 해당 내용 출력입니다.

여러 가지 key 값이 존재하는데 그 중, 저는 name과 email을 가져와 표기하도록 하겠습니다.

이상입니다.

이곳에 전체적으로 요약과 예시가 다 존재합니다! 따라서 해주세요.

안녕하세요 상훈입니다.

vue.js 에서도 역시나 모든 언어들이 그러하듯 Life Cycle이 존재합니다.

Vue.js 3 에서 지원하는 LifeCycle Api's 입니다. 

코드 먼저 살펴보겠습니다.

 let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                taskCompleted: false,
            },
            beforeCreate() {    // 1 
                alert('before create')
            },
            created() {         // 2
                alert('created')
            },
            beforeMount() {     // 3
                alert('before mount')
            },
            mounted() {         // 4
                alert('after mounted')
            },
            
        })

1~4 까지의 순서를 표현해보았는데요, 

beforeCreate -> created -> beforeMount -> mounted 순서대로 진행되는 것을 보실 수 있습니다.

이렇게 작성한다면, 해당 내용은 

'before create'  ->  'created'  ->  'before mount'  ->  'after mounted'  순서대로 렌더링이 되어 출력됩니다. 
물론 가장 마지막은 app => message 와 taskCompleted 입니다.