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를 잘 사용하지 않아 해당 내용을 작성하는데에 조금 헤맸습니다.

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

참고

이상입니다.

안녕하세요 상훈입니다.

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 입니다.

안녕하세요 상훈입니다.

Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.

BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.

html

<div id="loader">
    <div class="spinner-border text-info position-absolute top-50 start-50" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Css

#loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background: rgb(156, 154, 154);
    z-index: 99;
    text-align: center;
}

#loader>div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

Javascript

$(window).on('load', function () {
    $('#loader').hide();
})

 - 제이쿼리를 사용할 수 있게 해야합니다.

↓↓  제이쿼리 cdn 적용하는 법 ↓↓

↓↓  BootStrap cdn 적용하는 법 ↓↓

이상입니다.

안녕하세요 상훈입니다.

프론트엔드 부트스트랩 프레임워크를 사용하고 싶을때,

cdn으로 class와 id에 대한 javascript, css를 적용하는 방법을 포스팅하겠습니다.

아래의 링크를 복사하여 head 태그 안에 넣는 방법(1)

<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

이곳에 들어가 해당되는 태그들을 복사하여 head 태그 안에 넣는 방법(2)

이와 같이 head 태그 내에 넣는것이다.

안녕하세요 상훈입니다.

Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다.

1. data

2. template

1. data

import products from './assets/listData.js'
export default {
  name: 'App',
  data () {
    return {
      products: products,
      }
    }
  }

외부의 객체 배열을 products라는 변수로 import 하여 vue 내에서 products로 사용하겠다고 선언한 내용입니다.

아래는 export한 객체 배열 내용 예시입니다.

2. template

자, 이제 반복문과 그에 해당하는 문법을 작성해야겠죠?

for의 기본 문법입니다.

<div v-for="item in items" :key="item"></div>
<div v-for="(item, index) in items" :key="item"></div>

JavaScript 혹은 React 같은 경우 많이 작성하는 방식입니다.

첫 번째는 1개의 인자만 사용할 경우이고, 두 번째는 index를 주고 싶을 경우입니다.

저는 이 중 첫 번째만 사용해보도록하겠습니다.

 <div v-for="product in products" :key="product">
    <img src="{{ product.image }}" alt="이미지">
    <h4>{{ product.title }}</h4>
    <p>{{ product.price }}원</p>
  </div>

작성 방법은 받아온 객체의 key값을 기준으로 작성하면 value가 출력되어져 나오는 방식입니다.

laravel의 blade 문법이 생각나는군요

결과입니다. css를 제대로 적용시켜주지 않고, 이미지 url이 올바르게 작성되어있지 않아 이미지가 깨졌지만, 나머지는 정상적으로 반복되어 출력되었습니다.

이상입니다.

안녕하세요 상훈입니다.

Vue.js에서 Javascript의 onclick addEventListener와 같이 onclick 이벤트를 주는 방법을 설명하겠습니다.

뷰는 매우 간단하더군요.

0. 기본문법

<button v-on:click=""></button>
<button @click=""></button>

v-on:click 이 기본, 

그리고 @click이 축약 버전입니다. 입맛에 맞게 사용하시면 됩니다.

1. 익히 알고 있는 함수 호출하기

2. 간단한 연산 결과값 도출

1. 함수 호출하기

<button @click="LetsGoVue"></button>

<script>
export default {
  name: 'App',
  data() {},
  methods: {
  	LetsGoVue() {
    	console.log('hello')
    }
  }

</script>

2. 연산 결과값 도출 [ v-if, v-on:click ] 

예시) 모달창 팝업

버튼 클릭 시, 모달창이 뜨고 사라지게 하는 내용을 구현하겠습니다.

<div class="black-bg" v-if="modalStatus">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button class="modal-close" @click="modalStatus = 0 ">닫기</button>
    </div>
</div>

모달레이아웃 div 부분입니다. 

modalStatus라는 변수가 1일 때만 해당 내용이 존재하게 하는 조건문[ v-if ] 으로 구현하였습니다.

button을 클릭시 modalStatus라는 변수에 0을 대입하는 것으로 구현하였습니다.

script 내 data 내에 modalStatus 변수의 기본값을 0으로 설정하여 처음 렌더링 되었을 때, 보이지 않게 설정하였습니다.

안녕하세요 상훈입니다.

드림코딩 앨런님의 강의로 자바스크립트를 이용하여 짧고 간단한 쇼핑 웹앱을 구현하도록 해보겠습니다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="src/main.js" defer></script>
  <title>Document</title>
</head>
<body>
  <!--Logo-->
  <img src="img/logo.png" alt="Logo" class="logo">

  <!--Buttons-->
  <div class="buttons">
    <button class="btn">
      <img src="img/blue_t.png" alt="blue tshirts" class="imgBtn" data-key="type" data-value="tshirt" />
    </button>
    <button class="btn">
      <img src="img/blue_p.png" alt="blue pants" class="imgBtn" data-key="type" data-value="pants" />
    </button>
    <button class="btn">
      <img src="img/blue_s.png" alt="blue skirt" class="imgBtn" data-key="type" data-value="skirt" />
    </button>
    <button class="btn" class="btn colorBtn blue"  data-key="color" data-value="blue">Blue</button>
    <button class="btn" class="btn colorBtn yellow" data-key="color" data-value="yellow">Yellow</button>
    <button class="btn" class="btn colorBtn pink" data-key="color" data-value="pink">Pink</button>
  </div>
  <!--Items-->
  <ul class="items"></ul>
</body>
</html>

main.js

// Fetch the items from the JSON file
function loadItems() {
    return fetch('data/data.json')
    .then(response => response.json())
    .then(json => json.items)
}

// update the list with the given items
function displayItems(items) {
    const container = document.querySelector('.items')
    container.innerHTML = items.map(item => createHTMLString(item)).join('')
}

// Create html list item from the given data item
function createHTMLString (item) {
    return `
        <li class="item">
            <img src="img/${item.image}" alt="${item.type}" class="item__thumbnail">
            <span class="item__description">${item.gender}, ${item.size}</span>
        </li>
    `
}

function onButtonClick (event, items) {
    const dataset = event.target.dataset
    const key = dataset.key
    const value = dataset.value

    if(key == null || value == null){
        return ;
    }

    // updateItems(items, key, value)

    const filtered = items.filter(item => item[key] === value)
    displayItems(filtered)
}

function updateItems(items, key, value) {
    items.forEach(item => {
        if(item.dataset[key] === value) {
            item.classList.remove('invisiable')
        }else{
            item.classList.add('invisable')
        }
    });
}


function setEventListeners (items) {
    const logo = document.querySelector('.logo')
    const buttons = document.querySelector('.buttons')
    logo.addEventListener("click", () => displayItems(items) )
    buttons.addEventListener("click", event => onButtonClick(event, items))
}


// main
loadItems() 
    .then(items => {
        displayItems(items)
        setEventListeners(items)
    })
    .catch(console.log)

style.css

:root {
  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  --color-blue: #3b88c3;
  --color-yellow: #fbbe28;
  --color-pink: #fd7f84;
  --color-light-grey: #dfdfdf;

  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --size-border: 4px;
  --size-thumbnail: 50px;
  --font-size: 18px;

  /* animation */
  --animation-duration: 300ms;
}

body {
  height:100vh;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
}

.btn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
  margin-right: var(--base-space);
}

.btn:hover,
.logo:hover {
  transform: scale(1.1);
}

.buttons {
  display: flex;
  align-items: center;
}

.imgBtn {
  width: var(--size-button);
  height:var(--size-button);
}

.colorBtn {
  font-size: var(--font-size);
  padding: calc(var(--base-space) * 2);
  border-radius: var(--size-border);
}

.blue {
  background-color: var(--color-blue);
}

.yellow {
  background-color: var(--color-yellow);
}

.pink {
  background-color: var(--color-pink);
}

.items {
  width: 60%;
  height: 60%;
  list-style: none;
  padding-left:0;
  overflow-y: scroll;
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--base-space);
  margin-bottom: var(--base-space);
}

.item__thumbnail {
  width: var(--size-thumbnail);
  height: var(--size-thumbnail);
}

.item__description {
  margin-left: var(--base-space);
  font-size: var(--font-size);
}

디렉터리 구조는 다음과 같습니다. 강의 영상에서 제공한 project 자체를 import 시켰습니다.

이미지, json 등의 파일은 모두 구비되었습니다.

강의 진행이 되면서 간단하다 간단하다 하셨는데, 전혀 간단하게 느껴지지 않았습니다. ㅠㅠ

자바스크립트의 filter, map 등등 몇가지 라이브러리를 사용하셨었는데, 

저같은 웹린이한테는 어렵다고 느껴졌어요...

눈물..

나는 감자다! I'm annoied talking potatoooooooo!!!!