안녕하세요! 프뚜(프로그래머 뚜)입니다! 다들 불금에 맛있는 음식 드셨나요 ? 저는 성수동 맛집 '전자방'을 다녀왔습니다. 넓은 창문이 인상적이여서 이쁘게 찍고 싶었으나... 많은 차와 사람들로 인해 잘 찍지 못 했습니다.. :( 메뉴를 밖에서 한 눈에 볼 수 있게 되있더라구요! 밖에서도 먹을 수 있게 비치가 되었습니다. 오늘은.. 너무 더웠기 때문에 당장 들어가고 싶은 마음 뿐!!! 문은 우측에 있었습니다. 빨리 들어가고 싶었어요..... 배고프고 덥고... 사람들이 많아서 다양하게 찍진 못 했지만 외국?에 온 기분이 났어요! 자리에 앉으면 기본 세팅이 나옵니다! 자세한 가격과 메뉴판은 하단을 열어보시면 됩니다! 더보기 처음 만나게 된 음식은... 육즙 탕수육이였어요!!! 맛있는 건 한 장 더 ㅎㅎㅎㅎ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 새로운 vue파일을 생성 후 서버를 실행시키는데.. Component name Main should always be multi-word vue/multi-word-component-names라는 에러를 만나게 되었습니다. VUE에서 컴포넌트의 이름을 항상 단일 단어가 아닌 두 개 이상의 단어를 조합하여 만드는 것을 추천한다고 합니다. HTML 요소와 혼동을 일으킬 수 있는 요소를 제거하기 위해 두 개의..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 1. npm 사이트로 이동하기(클릭) # npm 설치 npm i vue-router # yarn 설치 yarn add vue-router 2. router.js 생성하기 # 현재 router 폴더 생성 -> router.js 생성 ./src/router/router.js 3. 이동 할 vue를 작성하기 # pages, users 폴더 생성, Main.vue, Users.vue 생성 ./src/pages/..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 watch는 검색창에서 자주 사용됩니다. 검색창에 '프뚜의 개발 블로그'를 검색하려고 했을 때 실시간 입력으로 서버에 검색하게 된다면 불필요한 통신이 생기게 됩니다. 이때 setTimeout으로 실시간 검색을 좀 더 타이밍을 줘서 처리할 수 있는 방법이 있습니다. watch에 관한 내용은 여기를 클릭해주시면 됩니다. 1. watch를 통해 input text 내용 실시간 출력하기 실시간 검색으로 '프뚜'를 검색 시 42분 1초만에 2번의 ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue state 변수를 감지하여 실행하는 프로퍼티 watch에 대해 알아보도록 하겠습니다. ※ state(ref, reactive)로 선언된 변수가 아니면 watch를 사용할 수 없습니다. 1. watch 프로퍼티를 import 하기 import { ref, watch } from 'vue'; 2. watch 프로퍼티 사용하기 # watch(ref변수명, (현재 값, 이전 값) => { 구현체 }); watch(searchText, (c..

안녕하세요! 프뚜(프로그래머 뚜)입니다! 인생 첫 바디프로필 촬영을 하게 돼서 왁싱을 도전하게 되었습니다. (2021.7.17) 정보가 없어서 업체에 대한 많은 리뷰와 착한 가격을 기준으로 알아보게 되었습니다. 캐치업 왁싱 건대점을 이용하게 되었습니다. 비가 오는 날씨라 습했는데, 들어가자마자 에어컨이 바로 반겨줘서 기분이 좋았어요! 가장 궁금한 가격!! 정액권, 연회비 등 다양하게 준비 되어있더라구요! (※첫 시술은 50% 할인입니다.※) 상담이 끝나면 왁싱을 받기 전에 정보 동의서 및 왁싱에 대한 설명이 있는 태블릿을 받게 됩니다. (점점 가까워지는 프뚜) 프뚜는 다리, 겨드랑이 제모를 받기로 하고, 시술하는 곳에 입장했습니다. 하체를 받기 위해선 속옷만 착용해야하고, 겨드랑이를 받기 위해선 상의 탈..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue는 javascript언어로 javascript는 비동기입니다. 1. 비동기 확인하기 # 1~3 console.log 추가, 기대값 1. 유저 데이터 ==> {} 2. 유저 데이터 ==> db.json 3. 유저 데이터 ==> db.json log가 순서대로 출력되지 않음을 확인할 수 있습니다. 2. async / await를 사용하기 # async로 function 선언, 기다려야하는 작업에 await async setup() { ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 서버와 통신해야 할 때 많이 사용하는 함수는 axios입니다. 1. axios 설치하기 npm i axios --save 2. db.json에 값 비워놓기 (json-server 설치가 되어있지 않으면 링크를 통해 진행하기) users라는 데이터만 만들어 놓고 안에 값은 비어놓은 상태입니다. 3. axios를 사용해서 db.json에 값 추가하기 # axios import import axios from 'axios'; # axios는 g..