바닐라 자바스크립트에서 DOM을 조작해야하는 상황에선 getElementbyId, querySelector 같은 selector함수를 사용해서 DOM 을 선택한다. Vue.js 에서는 html 태그 속성안에 ref="title" 적고 스크립트 부분에서 this.$refs.title로 DOM 에 접근이 가능하다. 그렇다면 React에서는 어떤 방법으로 접근할까?? 1. useRef Hook 함수 사용 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다. import React, { useRef, useState } from "react"; cons..

1. state가 변수일 때 import {useState} from 'react'; const DiaryEditor = () => { let [author, setAuthor] = useState(""); let [content, setContent] = useState(""); return ( 오늘의 일기 { setAuthor(e.target.value) }}/> { setContent(e.target.value) }}> ) }; export default DiaryEditor import {useState} from 'react'; const DiaryEditor = () => { const [author, setAuthor] = useState(""); const handleAuthor = (e)..

첨부파일 {{ item }} X 1. 파일업로드 경우의 수 1. 파일을 선택X 2. 파일을 선택O 삭제X 3. 파일을 선택O 삭제O 1번의 경우 파일을 선택하지 않았으므로, formData로 값을 전달해 줄 필요가 없다. 2번의 경우 파일을 삭제 하지 않았을 때 undefined로 판단해주어서, if문 안으로 들어오게 하였다. this.dataTransfer.files === undefined 3번의 경우 this.file은 로 담긴 파일배열이고, this.dataTransfer은 삭제한 파일이 있을 때, this.file로 다시 할당시켜준다. (dataTransfer가 비교의 대상이 되는셈) 2. DataTransfer DataTransfer개체는 드래그 앤 드롭 작업 중에 드래그되는 데이터를 유지하는..

보호되어 있는 글입니다.

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다. Class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등등을 해결하기 위해 등장함 1. useState 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에 useState 라는 함수가 있는데, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다. 이 코드는 리액트 패키지에서 useState 라는 함수를 불러와준다. useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어..

1. React란? 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리 2. 사용하는 이유 컴포넌트 기반의 화면 구성 : 리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나누어서 관리할 수 있다. 대규모 웹 애플리케이션에서 컴포넌트의 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 공통적인 부분으로 분리하여 재사용성을 높여준다. Virtual Dom : 기존에는 DOM(Document Object Model)을 조작해서 브라우저에 화면을 나타내는 형식이었다. 자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 html, css, js파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다. 그래서 리액트는 가..

보호되어 있는 글입니다.

데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생한다. (당연히 에러가 뜨고요.) 이는 자바스크립트가 비동기적으로 작동되는 원리 때문이다. nextTick이라는 함수는 이를 기다려주어 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 의미한다. 1번이 진행되고 2번이 순차적으로 다 진행된 후 4번과 5번이 진행되면 너무 좋겠지만, 문제는 1번이 다 진행되기도 전에 즉 UI가 다 변경되기도 전에 DOM에 접근하려는 시도가 있었기 때문에 에러가 뜨게 된다. 이런식으로 nextTick()을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면 UI가 변경되거나 데이터가 업데이트 된 후 순차적으..

vueJS의 가장 큰 특징은 양방향 바인딩이라 생각된다. 하지만 그 양방향 바인딩의 특징이 VueJS를 사용하면서 객체 데이터나 배열 데이터를 사용하게 되면 새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다. 여기서 "값이 갱신되었다." 라고 요청을 하는 메서드인 Vue.set / $set 와 Vue.delete / $delete 가 존재한다. 1. 배열 this.$set(arr, index, value) 2. 객체 this.$set(obj, key, value) this.$delete(obj, key) new Vue({ el: '#app', data: { obj : {a : 'a'}, arr : [0, 1, 2] }, methods : { changeData (){ ..

보호되어 있는 글입니다.

1. 부모 컴포넌트 부모 modal 2. Modal 모달창 v-model, statChange 2개로 true, fasle 전달

1. 컴포넌트 만들기 부모 컴포넌트 : @src/views/Todo.vue 자식 컴포넌트 : @src/components/List.vue 자식 컴포넌트 : @src/components/ListAdd.vue 2. 부모 컴포넌트에 자식 컴포넌트들 import하기 3. memo를 적으면 보여지게 하기 ListAdd.vue 에서 메모값을 부모로 $emit 시키기 부모에서는 받은 데이터를 다시 List.vue로 props 전달하기 // ListAdd.vue (자식 컴포넌트) 할일 추가 v-model="memo" 할일 추가 버튼을 누를 때 textarea의 value를 (즉, this.memo) 부모로 전달한다. textarea안의 memo는 다시 초기화 시켜주기 위해 null 로 바꿔준다. // List.vue ..

1. DNS란? 인터넷에서 목적지를 찾아가기 위한 주소에 해당된다 네트워크에서 도메인이나 호스트 이름을 숫자로 된 IP 주소로 해석해주는 TCP/IP 네트워크 서비스이다. IP주소는 복잡하고 외우기 쉽지 않기 때문에 이를 쉬운 도메인으로 변경한 것이다. 더보기 도메인: www.naver.com IP: 223.130.195.200 내 컴퓨터에서 www.naver.com에 접속하려고 한다고 가정해보자. 그런데, 현재 내 브라우저는 네이버의 IP주소를 모른다. 그래서, 브라우저는 먼저 PC에 설정된 로컬 DNS 서버에 해당 도메인의 호스트명과 IP를 가지고 있는지 물어본다. 이 로컬 DNS 서버는 보통 통신사마다 지정된 곳이 있는데, 사용자가 다른 곳으로 바꿀 수도 있다. 로컬 DNS 서버에는 이 주소가 이미..

보호되어 있는 글입니다.

1. 로그인 Kakao Developers 셋팅 로그인 > 내 애플리케이션 > 애플리케이션 추가하기로 앱 추가 요약 정보 > JavaScript 키 기록 플랫폼 > 사이트 도메인 등록(http://localhost 가능) 카카오 로그인 > 활성화 설정 ON 변경 동의항목 > 닉네임 필수 동의 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 로그아웃 kakaoLogout() { window.Kakao.API.request({ url: '/v1/user/unlink', }) .then(function(response) { console.log(..

로그인 api 해보다가 버튼까지 직접 만들어서 하면 더 좋을 것 같아서 이참에 fontawesome도 설치 해보자! 해서 다해보는 중이다. npm 쓰는거 쫌 재밌네... 1. package.json "dependencies": { "@fortawesome/vue-fontawesome": "^2.0.6", "axios": "^0.27.0", "bootstrap": "^4.6.1", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, dependecies안에 "@fortawesome/vue-fontawesome": "^2.0.6" 를 추가한다. 2. main.js..

1. 부모 Modal.vue Modal Button 2. 자식 ModalCompo.vue header × 내용 확인 취소 숨김 watch가 있는이유! 4번째 줄에서 v-model로 modalShow를 default: false로 선언했으니깐, watch로 한번더 감지해서 true로 바꿔줘야한다. 만약에 default를 true로 바꾸면 watch를 지워줘도 된다 3. 이미지 참고 https://bootstrap-vue.org/docs/components/modal BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org