CodeHoon

안녕하세요 상훈입니다.

Simple-Book-App 강좌 완료 하였습니다. 실제 걸린 시간은 저것의 xN 하면 되고...

저는 아무것도 모르는 감자입니다!! 하하.

사용한 UI Format 은 BootStrap , 그리고 FontAwesome 입니다!

BackEnd 언어는 Laravel(PHP) 입니다.

원래는 Front Framework로 Vue.js를 넣으려고 했으나,

아직 그 단계는 아니고 Laravel에 Bootstrap, Fontawesome 정도만 얹어서 진행하게 되었습니다.

구성 내용으로는 기본적인 CRUD를 적용하였습니다.

추가, 수정, 삭제, 상세보기(를 안했네요). 상세히 볼게 이미지 말고는 없어서 딱히 할 것도 없습니다. ㅎㅎ

기존에 알고 있던 내용도 있었고, 처음 보는 내용도 있었습니다.
$message, route(' ', data), if를 이용한 기존 데이터 존재유무에 따른 UI 등등...

Bootstrap을 이용하여 NavBar를 구성하였고,

Font-Awesome을 이용하여 아이콘(icon)을 가져오기도 하였습니다. 

그런데, 이상하게도 이미지의 경로를 못잡아서 해당 내용이 제대로 뜨질 않고
alt 에 작성해놓은 내용만 표기가 되더라구요.. 왜그러는걸까.... ㅠㅠ

이부분은 조금 더 공부해봐야 할 것 같습니다. [ 화이팅..! 미래의 상훈! ]

안녕하세요 상훈입니다.

Laravel - validation 부분에서 Request를 이용하여 Controller에 아무것도 작성하지 않은 채로 유효성 조건을 작성할 수 있는 방법을 포스팅하겠습니다.

1. Request 생성, 작성
2. Controller에서 조건 작성

생각보다 짧고 간단합니다!

테이블을 먼저 소개하겠습니다. 

이 중에서 3가지, Name, Description, Category 만 유효성 검사를 하도록 하겠습니다.

$ php artisan make:Request 파일명

 - 말 그대로 Request를 생성하는 명령어 입니다.

App/Http/Requests/파일명.php

로 해당 내용이 생성되어졌을 것입니다. 확인해주세요!

이제 Request의 내용을 작성하도록 하겠습니다.

ex) name 이라는 컬럼은 '필수', '최소 2글자', '최대 120글자' 로 설정하였습니다. 

사용하시는 Controller로 돌아와서,

  - use로 해당 Request를 추가해주고,

원래 Form의 내용을 전송 받을 때 Request 사용하던 것을 Request파일명으로 변경합니다.

그럼 끝!!!
확인해볼까요?

title에 작성한 내용은 유효성 검사를 통과하여 danger 문구가 없지만,
나머지 값들은 작성하지 않았기에 danger가 출력되었습니다.

감사합니다.

혹시 Html 부분을 모르시겠다? 하시는 분들만 봐주세요

@if($errors->has('name'))
  <span class="text-danger">{{ $errors->first('name') }}</span><br>
@endif

has('name') 부분과 first('name') 부분만 태그의 이름과 동일하게 변경해주시면 됩니다.

이상입니다.

안녕하세요 상훈입니다.

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 태그 내에 넣는것이다.

안녕하세요 상훈입니다.

자바스크립트 - 제이쿼리의 cdn을 공유합니다.

해당 코드 한줄을 <head> </head> 내에 넣어줍니다.

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

안녕하세요 상훈입니다.

라라벨에도 역시나 1:1, 1:N, N:N 등의 관계가 있습니다.  (다형성이라고 하던가..)

바로 attach, detach, sync, syncwithOutDetaching 등으로 사용할 수 있는데요,

공부한 바로서는 attach, sync는 해당 값이 존재하지 않으면 새로 생성을 해주고,

detach 등은 해당 값을 제외한 모든 값을 삭제하는 역할을 합니다. 

[ 반박환영,, 아무것도 모르는 라린이입니다. ] 

항상 그렇듯이 대충 이해는 되는데 전체적으로는 무슨 소린지 잘 모르겠음..
자, 따라해봐~ 하면 이해되는데, 자! 해봐! 하면 못하겠어......

라라벨 공홈으로 들어가보니 해당 내용이 존재하였습니다. 차근차근 살펴보겠습니다.

역시나 제목은 다 : 다 였습니다. 다대다ㅋㅋㅋ
그리고 또 역시나 Eloquent 였구요, Eloquent 의 한부분을 조금 더 알아가는 계기가 되었네요.. ㅠ

사용하는 경우는 : "모델들을 합치는 중간 테이블에 기록을 추가" 하는 역할을 합니다. 

위에서 사용하였듯이 해당 값을 배열로도 사용할 수 있다고 합니다.

"detach" 메소드를 사용하여 N:N 관계를 삭제할 수 있습니다.

하지만, 두 모델은 모두 DB에 남을 것이라고 한다.

마지막으로 "sync, syncwithOutDetaching" 이다.
attach와 유사하게 사용이 가능하다.

이상으로,, 그만 알아봅시다.