CodeHoon

안녕하세요 상훈입니다.

Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다.

필요요소 : 부모컴포넌트, 자식컴포넌트

소스 확인(링크를 통해 작성한 내용 확인이 가능합니다)

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  <CustomInput v-model:message="message"/>
</template>

ref 로 message 를 선언 후
v-model 과 연동하여 자식 컴포넌트에 값을 내려준다.

2. 자식컴포넌트

<script setup>
  const props = defineProps({
    message: String,
  })
  const emits = defineEmits(['update:message'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
  /> 
</template>

props: defineProps 로 message 값을 받아온다고 선언
emit:  props로 받아온 message 를 키 값으로 update:message 로 상신할 것을 선언

method: updateInputs 에서 받아온 event 를 기준으로 value 를 emit 시켜주는 것을 확인 할 수 있다.

업무 중에 이전 소스에서 emit('update:input') 이라고 선언되어있길래 처음 보고, 이해가 안되어 공식문서를 찬찬히 살펴보게 되었다.

v-model 관련하여 문서를 찾아보게 되었고, component v-model 이라는 곳에서 확인할 수 있었다.

내용은 제대로 익히기 위해 playground에서 작성하였다.

안녕하세요 상훈입니다.

카카오톡에 프로젝트 링크를 보내었는데, 볼품없는 링크만 뜨고 변경한 링크가 뜨지 않을 때 할 수 있는 방법입니다.

1. 카카오톡 개발자 웹사이트에 접속합니다.

2. 도구 > 초기화 도구 > OG 캐시 탭에 들어갑니다.

3. URL 부분에 본인의 웹사이트 주소를 입력하고 초기화 합니다.

카카오톡은 메신저 내부에서 캐시 처리를 합니다. 

그래서 한 번 올렸던 링크에 대해서는 이미 있는 자료를 보내었기 때문에 썸네일이 출력되지않을 수 있습니다.

위의 초기화 버튼을 클릭하면, 본인의 사이트에 대해서 캐싱처리를 전부 삭제할 수 있습니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

사용환경 : Window10 (pro)

리눅스같은 os에서는 바로 실행하면 되지만 윈도우는 직접 그 디렉터리 내로 들어가 실행해야 한다.

/c/ProgramData/ComposerSetup/bin

특정한 조작없이 Composer의 기본 경로는 위와 같다. 

이제 이 위치에서 update를 해주면 된다.

$ composer self-update

Administrator의 권한이 필요하다고 나오는데, y 를 입력해주면 된다.

버전 롤백은

composer self-update --rollback 을 작성해준다.

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14
    at assertSupportedNodeVersion

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14 at assertSupportedNodeVersion

그래서 업데이트를 진행하였는데 추가적인 에러가발생하여 node 자체를 지우고 재설치를 하게되었다.

1. node.js 제거 과정 (디렉터리와 bash 내용을 전부 삭제)

sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node /opt/local/include/node /opt/local/lib/node_modules 

sudo rm -rf /usr/local/lib/node* ; sudo rm -rf /usr/local/include/node* ; sudo rm -rf /usr/local/bin/node*

sudo apt-get purge nodejs npm

2. node.js 설치과정

sudo apt install nodejs

sudo apt install npm

// cache 제거. 안해주시면 에러 발생가능성이 있습니다.
sudo npm cache clean -f 

// 전역에서 사용가능하게 npm을 n이라는 이름으로 다운로드
sudo npm install -g n

// 안정화 버전을 설치
sudo n stable

3. 확인

node -v
v16.13.0

npm -v
8.1.0

자꾸 오류 나고 그래서 삭제만 8번 넘게 진행한 것 같네요.

억울하고 분통터져

원래 뭘 진행하려고 했는지도 머리속에서 증발하게 되었습니다. ㅎㅎ 
다시 무엇을 하려고했는지 떠나요~

참고

기타 등등..

안녕하세요 상훈입니다.

테이블 데이터를 업데이트 하는 2가지 방법을 포스팅하겠습니다.

// Router : web.php
Route::get('/posts/update/{id}', 'PostController@update');

// Controller
PostController

//table 
posts

//column 
title, body

1. save() 메서드 사용하는 방법

 - 정공법이지만, 불필요하고 깔끔하지 않습니다. 2번을 추천합니다. 

  PostController

public function update ($id) {
        $post = Post::find($id);
        $post->title = "updated title";
        $post->body = "updated body";
        $post->save();
    }

입니다. $id 값을 라우팅으로 받아오면, 해당하는 id를 가진 데이터를 조회하고, 직접 하나씩 바꿔주는 겁니다.

그리고 마지막에는 저장까지. 아주 정공법이죠. 비효율적이기도 하구요.

2번으로 넘어가겠습니다.

2. update() 메서드 사용하는 방법

Post::where('id', $id)->update([
            'title'=>'updated title2',
            'body'=>'updated body2'
        ]);

update 엘로퀀트(Eloquent)를 사용하여 해당 테이블의 컬럼의 id를 조회하고 업데이트하는 과정입니다.

자동으로 save.

이제 저장해주시고, uri를 통해 접속해주시면, table에 데이터가 변경되었음을 확인하실 수 있습니다.

이상입니다.