어느 Github 저장소를 Fork하여 나의 repository로 옮긴 후 이 코드를 가지고 몇번의 commit & push 작업을 해왔다. 어느날 메인(Fork했던 대상 Repository) 저장소에서 그 동안 이루어진 수정내역을 나의 repository에 반영해줘야할 시기가 왔다. 이 때 vs code로 진행했던 작업과정을 순서대로 기록해보았다.

인텔리제이를 통한 Git 작업시 종종 겪을 수 있는 CRLF/LF 개행 변경 관련 문제와 그 해결법

Nuxt3에서 HTML 내용 일부를 PDF 파일로 추출하는 방법 📌 기능구현에 사용된 패키지 : “html2pdf” 패키지 설치 npm install --save html2pdf.js 위 명령을 입력하면 package.json 파일의 dependencies 안에 "html2pdf.js": "^0.10.1", 한줄 추가된 것을 확인할 수 있다. HTML to PDF Code PDF로 다운로드하고자 하는 특정 HTML 요소의 id를 html-to-pdf 라고 가정 // PDF 다운로드 버튼 추가 예시 <button type="button" @click="generatePdf"> PDF Download</button> PDF 다운로드 기능 js <script setup lang="ts"> import html2pdf from "html2pdf.js" const generatePdf = () => { let element = document.getElementById('html-to-pdf'); let opt = { margin: 0, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save(); } </script>

Source Push infinite loading

기존 코드 import 'package:flutter/material.dart'; import 'package:meals_clone/screens/categories.dart'; // import 'package:riverpod/riverpod.dart'; class TabScreen extends StatefulWidget { const TabScreen({super.key}); @override State<TabScreen> createState() => _TabScreenState(); } class _TabScreenState extends State<TabScreen> { int _selectedPageIndex = 0; Widget categoriesScreen = const CategoriesScreen(); Widget placeholder = const Placeholder(); Widget activePage = const CategoriesScreen(); void _selectPage(int index){ setState(() { _selectedPageIndex = index; }); if(_selectedPageIndex == 0){ activePage = categoriesScreen; } else if(_selectedPageIndex == 1){ activePage = placeholder; } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Categories'), centerTitle: true, ), // body: const CategoriesScreen(), body: activePage, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon( Icons.set_meal, size: 30, ), label: '카테고리'), BottomNavigationBarItem( icon: Icon( Icons.star, size: 30, ), label: '즐겨찾기') ], showSelectedLabels: false, // 선택된 레이블 숨기기 showUnselectedLabels: false, // 선택되지 않은 레이블 숨기기 currentIndex: _selectedPageIndex, onTap: _selectPage, ), ); } } 수정된 코드 import 'package:flutter/material.dart'; import 'package:meals_clone/screens/categories.dart'; // import 'package:riverpod/riverpod.dart'; class TabScreen extends StatefulWidget { const TabScreen({super.key}); @override State<TabScreen> createState() => _TabScreenState(); } class _TabScreenState extends State<TabScreen> { int _selectedPageIndex = 0; void _selectPage(int index) { setState(() { _selectedPageIndex = index; }); } @override Widget build(BuildContext context) { // 현재 선택된 페이지에 따라 적절한 위젯을 동적으로 선택합니다. Widget activePage = _selectedPageIndex == 0 ? const CategoriesScreen() : const Placeholder(); return Scaffold( appBar: AppBar( title: const Text('Categories'), centerTitle: true, ), body: activePage, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon( Icons.set_meal, size: 30, ), label: '카테고리'), BottomNavigationBarItem( icon: Icon( Icons.star, size: 30, ), label: '즐겨찾기') ], showSelectedLabels: false, // 선택된 레이블 숨기기 showUnselectedLabels: false, // 선택되지 않은 레이블 숨기기 currentIndex: _selectedPageIndex, onTap: _selectPage, ), ); } } 수정된 내용 불필요한 인스턴스화 제거: categoriesScreen과 placeholder 위젯을 미리 인스턴스화할 필요가 없다. 이들은 필요할 때 생성될 수 있으며, 위와 같이 수정하면 메모리 사용량을 줄이고 성능을 향상시킬 수 있다. ...

에러 발생 개발 중 다음과 같은 로그가 발생했다. MissingPluginException(No implementation found for method getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider) Hot Restart를 해도 동일하게 에러가 출력. 그러나 동작에는 문제가 없는 상황 . . . 해결 💢 단순히 IDE와 시뮬레이터 재부팅 혹은 flutter clean Flutter 공식 이슈이기도 한 문제 ⇒ https://github.com/flutter/flutter/issues/10912

본 내용과 관련해서는 더 간단하게 설명된 다른 블로그 글들이 많이 있다. 그러나 그 각각의 내용이 무엇인지, 그것들이 어떻게 동작되는지 궁금해서 이 기회에 이것저것 찾고 알게된 내용들을 정리해보았다. 목차 - 사전 지식 RSA 키 쌍의 의미와 사용 목적: RSA 키 쌍은 공개 키와 개인 키로 구성되며, 이들은 서로 수학적으로 연관되어 있다. 공개 키(public key): 이 키는 안전하게 공유될 수 있으며, Git 서버에 등록된다. 서버는 이 공개 키를 사용하여 사용자의 인증 정보를 확인한다. ...

Nuxt3에서는 vue 파일에 특별한 설정이 없다면 해당 페이지의 레이아웃은 “default” 레이아웃으로 설정된다. default 레이아웃 예시 <template> <div> <slot /> </div> </template> 실무에서 사용중인 레이아웃 예시 ~/layouts/ 경로에 default.vue 파일을 추가하여 설정할 수 있다. <template> <div id="page" class="page font--jakarta"> <HeaderLayout1 /> <slot /> <FooterLayout1 /> </div> </template> *default.vue * ※ 참고 slot 태그는 페이지를 렌더링하는 특수한 태그 해당 태그가 존재하지 않을 경우, 이상 동작할 수 있으므로 반드시 포함 필요 단, 페이지 영역을 숨겨할 경우는 v-show 등을 사용하여 제어해야 하며, v-show는 반드시 slot이 아닌 상위 Element에 위치해야 한다 ...

우선 fetch와 $fetch를 사용한 각각의 예시코드부터 확인해보자. fetch 사용 예시 import { useAsyncData } from 'nuxt3' export default { setup() { const { data, pending, error, refresh } = useAsyncData('user', () => fetch('http://localhost:8080/api/user/1') .then(response => response.json()) ) return { data, pending, error, refresh } } } $fetch 사용 예시 const { data, pending, error, refresh } = await useAsyncData( 'mountains', // key () => $fetch('https://api.nuxtjs.dev/mountains') ) fetch, $fetch 차이점 위의 코드를 살펴보면 둘 다 useAsyncData의 두 번째 매개변수로 함수를 전달하고 있다. 이 함수는 데이터를 가져오는 데 필요한 비동기 작업을 수행하며, 이 함수가 반환하는 Promise의 결과값이 useAsyncData의 data로 설정된다. 이 중 첫 번째 코드는 fetch 함수를 직접 사용하여 HTTP 요청을 보낸 후 .then 메서드를 사용하여 응답을 처리하는 내용이다. 그리고 응답값을 JSON 형식으로 파싱하기 위해 response.json()을 직접 호출하고있다. response.json()은 Fetch API에서 제공하는 메서드로, 응답값을 JSON 형식으로 파싱한다. 두 번째 코드에서 $fetch를 사용하면 이 메서드가 자동으로 적용된다. $fetch는 내부적으로 fetch를 사용하되, 추가적인 처리를 수행한다. 그 중 하나가 바로 응답을 자동으로 JSON 형식으로 파싱하는것이기 때문에 $fetch를 사용하면 response.json()을 호출하지 않아도 된다. ...

Nuxt3에서는 useAsyncData와 useFetch라는 훅을 지원한다. 이 둘은 코드 구성 형태가 비슷하기 때문에 차이점은 무엇인지 정리해보았다. useFetch useFetch는 created 단계 이후에 실행 (즉 ,새로운 Vue 인스턴스가 만들어진 후 데이터가 준비된 후에 실행) 이렇게 하면 useFetch가 실행되는 시점에는 컴포넌트의 데이터가 이미 준비되어 있으므로, 이 데이터를 기반으로 서버로부터 필요한 데이터를 요청하거나 필요한 작업을 수행할 수 있다. 이는 비동기적으로 데이터를 처리하는 웹 애플리케이션에서 매우 중요한 부분 useAsyncData useAsyncData는 created 단계 이전에 즉, 첫 렌더링이 시작되기 전에 실행 ...