프로그래밍+DB

WSL에 Vue 개발 환경 구축: 오늘 도움 받은 링크

WSL에 Vue 개발환경 설정하는 법 WSL을 사용하여 Windows에 Linux 설치 Windows 또는 Linux용 Windows 하위 시스템 중 어디에 설치해야 하나요? Linux용 Windows 하위 시스템에 Vue.js 설치 WSL2(Ubuntu)でGitHubを使用する WSL 속에서 SSH형식으로 git clone하기 위해 위 링크를 참고하여 ssh key를 등록하고, github의 리포지토리 클론 주소의 SSH를 복사. 잘 되었다! 참고로 ssh 키를 만들 때 passphrase를 입력하면 매번 해당 내용을 입력해야 해서 불편하니, …

더 읽기 »

드래곤 볼 × UT 컬렉션: 소년편, 사이어인편 구매

2023년 5월 1일부터 유니클로(Uniqlo)에서 판매중인 드래곤볼 티셔츠를 두 장 구매. 아내에게도 흰색 티셔츠를 한 장 선물했다. 한 장에 1500엔. 999엔이면 더 기뻤을 듯. 드래곤 볼 × UT 컬렉션: 공식 사이트https://www.uniqlo.com/jp/ja/special-feature/ut/dragon-ball 내가 구매한 티셔츠는 01.손오공 소년편(흰색), 03.사이어인편(파란색)이다. 2017년부터 유니클로의 UT를 가끔 구매하는데 마리오가 가장 많았고 귀멸의 칼날 등의 애니메이션 작품을 사기도 한다. 결혼하고 나서 패션(?)에도 신경을 써주는 아내 덕분에 신상품 정보를 …

더 읽기 »

Vue.JS: 감시자(watcher) 활용

2023-04-01 학습 재개 watch는 연산(computed) 및 메서드와 같이 객체를 취한다. 정확히 말하면, 데이터 프로퍼티나 연산 프로퍼티에서 사용한 이름을 감시자에서 이름으로 사용할 수 있음. 위의 경우, name이 변경될 때마다 감시자 메서드가 재실행됨. this.name이라고 참조할 필요도 없으며, 아래처럼(value) 적어도 동일. watch 프로퍼티의 마지막 값을 인수로 가져오기 때문. watch: {   name(newValue, oldValue) {...} } 위와 같이 두 번째 인수(watch 프로퍼티의 이전 값)를 …

더 읽기 »

Vue.JS: 양방향 바인딩(two-way binding)

v-model: v-bind:value와 v-on:input의 축약어. v-model은 양방향 바인딩. 데이터 바인딩과 이벤트 처리의 결합. html내에 메소드를 넣어서 직접 실행시키는 것은 좋지 않다. 다른 행동(관계 없는 버튼 클릭 등)을 하더라도 매번 해당 메소드를 재시작하게 됨. HTML 코드 내에 직접 메소드의 내용을 써버리면 매번 실행하지 않게 되지만, HTML 코드 내에 로직을 넣는 것은 좋지 않음. HTML은 웹 페이지의 구조와 콘텐츠를 정의하기 위한 마크업 언어입니다. …

더 읽기 »

All In One WP Migration With Import: 워드프레스 마이그레이션(복원) 오류 발생 시 활용해보세요!

All In One WP Migration에서 복원 오류 발생 시 아래 깃허브 프로젝트를 zip다운로드해서 워드프레스의 플러그인 추가하고, 복원해보면 정상적으로 처리됐다! GitHub – d0n601/All-In-One-WP-Migration-With-Import: All In One WP Migration With Import, forked from version 6.77 with the file upload size limitation increased to 32GB. 참고로 백업 파일은 최신 버전의 All In One WP Migration에서 Export한 파일을 그대로 사용함. 참고한 유튜브: How To …

더 읽기 »

Marp: 마크다운으로 프레젠테이션 만들기

web: https://marp.app/via: https://www.youtube.com/watch?v=Q2PCO0mKEaU 먼저 Visual Studio Code에 Marp for VS Code를 설치. Marp for VS Code 아래 내용을 .md 파일로 저장하여, ‘측면에서 미리 보기 열기(Ctrl + K V)’를 열면 OK! Hello Marp! 이미지도 자유자재! --- marp: true # theme: gaia # class: invert # paginate: true # header: Awesome Header! # footer: Copyright 2023. **Archmond** All right reserved. --- # …

더 읽기 »

Flutter: 이전 화면에 데이터 반환하기(Return data from a screen)

Navigator.push로 보낸 정보를 final result에 저장하여 해당 result를 snackbar에 표시하는 예제. /// 선택된 정보를 홈 화면의 snackbar에 보여줍니다. /// 선택 창을 띄우고 결과를 기다리고 있습니다. 이제 결과 값을 갖고 무언가 할 차례입니다. /// 이 예제에서는 결과 값을 보여줄 수 있도록 Snackbar를 띄우겠습니다. /// 이 작업을 하기 위해 SelectionButton의 _navigateAndDisplaySelection 메서드를 수정할 것입니다. // SelectionScreen을 띄우고 navigator.pop으로부터 결과를 기다리는 메서드 void …

더 읽기 »

Flutter: 새로운 화면으로 데이터 보내기(Send data to a new screen)

새 화면으로 이동하며 데이터를 넘겨줘야 할 때. 플러터 쿡북에서 단서를 찾았다. 기억하세요: 화면은 단지 위젯입니다.https://flutter-ko.dev/docs/cookbook/navigation/passing-data 위젯에 데이터를 넘겨주기 위해 필요한 것은 파라미터! Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(todo: todos[index]), ), ); Reference: https://flutter-ko.dev/docs/cookbook/navigation/passing-data import 'package:flutter/material.dart'; /// Todo를 표현하기 위한 간단한 정보가 필요합니다. /// 이 예제에서는 두 가지의 데이터를 갖고 있는 클래스를 정의할 것입니다: 제목과 상세 설명 class Todo { …

더 읽기 »

Flutter: 인터넷에서 데이터 가져오기(fetch data)

플러터 소스코드를 작성하던 중, HTTP Status 200 OK 이외의 상황에서, 에러 메시지를 어떻게 표시하는지 궁금해졌다. 이에 대한 좋은 예제가 flutter-ko.dev에 있었다. import 'dart:async'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; Future<Post> fetchPost() async { /// http.get() 메서드를 사용하여 JSONPlaceholder 으로부터 샘플 Post를 가져올 것입니다 /// http.get() 메서드는 Response를 포함하고 있는 Future를 반환합니다. /// Future는 비동기 연산에 사용되는 Dart의 핵심 …

더 읽기 »

Flutter: Checkbox, Switch, Radio

Checkbox와 Switch 체크박스와 스위치는 사용법이 동일. var isChecked = false; Checkbox(value: isChecked, onChanged: (value) { setState(() { isChecked = value!; }); }), Switch(value: isChecked, onChanged: (value) { setState(() { isChecked = value!; }); }), RadioListTile로 라디오버튼과 텍스트를 함께 선택하도록 하기 enum Answer { yes, no } class _MyHomePageState extends State<MyHomePage> { Map<int, Answer?> answerVal = {}; @override Widget build(BuildContext context) …

더 읽기 »