Showing posts with label vscode. Show all posts
Showing posts with label vscode. Show all posts

Tuesday, September 26, 2023

VSCode 다운로드 방법과 활용 가이드

1장: Visual Studio Code란?

Visual Studio Code(VSCode)는 Microsoft에서 개발하고 배포하는 오픈 소스 기반의 코드 편집기입니다. 프로그래밍 언어에 관계 없이 다양한 개발 환경을 지원하며, 사용자 친화적인 인터페이스와 풍부한 기능들로 전 세계 개발자들 사이에서 널리 사용되고 있습니다.

VSCode는 빠른 실행 속도와 가벼운 메모리 사용량으로 매우 효율적인 개발 환경을 제공합니다. 또한, 다양한 언어 지원과 함께 Git과 같은 버전 관리 시스템을 내장하고 있어, 협업에 필요한 모든 도구를 갖추고 있습니다.

뿐만 아니라 VSCode는 수많은 확장 기능(Extensions)을 제공하여, 사용자가 필요에 따라 자신만의 최적화된 작업 환경을 구성할 수 있게 해줍니다. 이러한 이유로 많은 개발자들이 VSCode를 선호하는 주된 이유 중 하나입니다.

목차로 돌아가기

2장: 왜 Visual Studio Code를 사용해야 하는가?

Visual Studio Code는 그 자체로도 훌륭한 코드 편집기이지만, 그것만이 아닙니다. VSCode의 가장 큰 장점 중 하나는 확장성입니다. 다양한 확장 기능을 설치함으로써 사용자는 자신의 코딩 스타일과 작업 환경에 맞게 개발 도구를 맞춤 설정할 수 있습니다.

또한, VSCode는 Git과 같은 버전 관리 시스템을 내장하고 있어, 협업에 필요한 모든 도구를 갖추고 있습니다. 이로 인해 여러 사람들과 함께 프로젝트를 진행하는 데 필요한 모든 기능을 한 곳에서 사용할 수 있습니다.

마지막으로, VSCode는 거의 모든 주요 프로그래밍 언어를 지원합니다. JavaScript부터 Python, Java 등 다양한 언어에 대해 IntelliSense(코드 완성), 디버깅, 리팩토링 등 다양한 기능을 제공하므로 개발자가 보다 효율적으로 작업할 수 있습니다.

목차로 돌아가기

3장: Visual Studio Code 다운로드 방법

Visual Studio Code는 공식 웹사이트를 통해 무료로 다운로드 받을 수 있습니다. 아래의 단계에 따라 진행해보겠습니다.

  1. 먼저, Visual Studio Code 공식 웹사이트(https://code.visualstudio.com/download)에 접속합니다.
  2. 웹사이트에 접속하면 여러 버전의 Visual Studio Code가 나열되어 있는데, 여기서 사용하고 있는 운영체제에 맞는 버전을 선택하여 클릭합니다.
  3. 다운로드가 시작되며, 완료된 후 설치 파일을 실행하여 설치를 진행합니다.

위와 같은 간단한 단계를 통해 Visual Studio Code를 컴퓨터에 설치할 수 있습니다. 이제 VSCode의 기본적인 사용법과 활용 팁에 대해 알아보도록 하겠습니다.

목차로 돌아가기

4장: Visual Studio Code 기본 사용법

Visual Studio Code는 사용자 친화적인 인터페이스와 풍부한 기능을 제공하며, 이를 통해 개발자들은 더욱 생산적인 작업을 할 수 있습니다. 이번 장에서는 VSCode의 기본적인 사용법에 대해 알아보겠습니다.

1. 새 프로젝트 열기

VSCode를 실행한 후 '파일' 메뉴에서 '열기'를 선택하거나, 시작 화면에서 '폴더 열기'를 클릭하여 새 프로젝트를 시작할 수 있습니다.

2. 코드 편집

VSCode는 다양한 언어에 대해 코드 하이라이팅과 자동 완성 기능을 제공합니다. 따라서 코드 작성이 보다 쉽고 빠르게 진행됩니다.

<script>
        function helloWorld() {
            console.log('Hello, world!');
        }
        helloWorld();
    </script>

3. 디버깅

'디버그' 뷰를 열고 디버그 설정을 만든 후, '디버그 시작' 버튼을 클릭하면 디버깅을 시작할 수 있습니다.

   // Here is a sample code for debugging
   let x = 5;
   let y = x * 2; // Set a breakpoint here and start debugging
   console.log(y);
   
위와 같은 방식으로 VSCode의 기본적인 사용법들을 익혀보았습니다. 다음 장에서는 VSCode의 고급 활용 팁에 대해 알아보겠습니다.
목차로 돌아가기

5장: Visual Studio Code 활용 팁

Visual Studio Code는 그 자체로도 강력한 기능을 제공하지만, 몇 가지 추가적인 팁을 통해 더욱 효율적인 개발 환경을 만들 수 있습니다. 이번 장에서는 VSCode의 고급 활용 팁에 대해 알아보겠습니다.

1. 단축키 사용하기

VSCode는 다양한 단축키를 제공하여 개발 속도를 높여줍니다. 예를 들어, 'Ctrl + P'를 누르면 파일 탐색기가 열리고, 'Ctrl + /'로 주석 처리할 수 있으며, 'F12'를 누르면 함수 정의로 이동할 수 있습니다.

2. 확장 기능 설치하기

VSCode의 가장 큰 장점 중 하나는 다양한 확장 기능을 지원한다는 것입니다. 이러한 확장 기능들은 VSCode의 마켓플레이스에서 찾아 설치할 수 있으며, 필요에 따라 작업환경을 최적화하는데 도움이 됩니다.

3. 멀티 커서 기능 사용하기

<p>VSCode에서 Alt 키를 누른 채로 클릭하면 여러 위치에 커서를 생성할 수 있습니다.</pre>

   // For example,
   let x = 1;
   let y = 1;
   let z = 1;
   
   // You can change all the values at once using multi cursor.
   
위와 같은 방식으로 VSCode의 고급 사용법과 팁들을 익혀보았습니다. 이제 VSCode를 보다 효율적으로 사용하는 방법에 대해 알게 되었습니다.
목차로 돌아가기

How to Download and Utilize VSCode

Chapter 1: What is Visual Studio Code?

Visual Studio Code (VSCode) is an open-source code editor developed and distributed by Microsoft. It supports various development environments regardless of the programming language and is widely used by developers worldwide due to its user-friendly interface and rich features.

VSCode provides an efficient development environment with fast startup and low memory usage. It also includes built-in version control systems like Git, making it equipped for collaboration.

Furthermore, VSCode offers numerous extensions, allowing users to customize their optimized working environments according to their needs. This is one of the primary reasons why many developers prefer VSCode.

Return to Table of Contents

Chapter 2: Why Use Visual Studio Code?

Visual Studio Code is not only an excellent code editor in itself but also highly extensible. By installing various extensions, users can customize their development tools to fit their coding style and workspace.

Moreover, VSCode includes built-in version control systems like Git, providing all the necessary tools for collaboration. This means that all the features required for working on projects with multiple people are available in one place.

Finally, VSCode supports almost all major programming languages, offering features like IntelliSense, debugging, and refactoring for languages from JavaScript to Python and Java, making development more efficient.

Return to Table of Contents

Chapter 3: How to Download Visual Studio Code

You can download Visual Studio Code for free from the official website. Follow these steps:

  1. First, visit the Visual Studio Code official website (https://code.visualstudio.com/download).
  2. Once on the website, you will see various versions of Visual Studio Code listed. Choose the version that matches your operating system and click on it.
  3. The download will start, and after it's complete, run the installation file to proceed with the installation.

With these simple steps, you can install Visual Studio Code on your computer. Now, let's explore the basic usage and tips for using VSCode.

Return to Table of Contents

Chapter 4: Basic Usage of Visual Studio Code

Visual Studio Code provides a user-friendly interface and rich features, enabling developers to be more productive. In this chapter, we'll learn about the basic usage of VSCode.

1. Opening a New Project

After launching VSCode, you can open a new project by selecting "File" and then "Open" or by clicking "Open Folder" on the start screen.

2. Code Editing

VSCode offers code highlighting and auto-completion features for various languages, making coding easier and faster.

    <script>
        function helloWorld() {
            console.log('Hello, world!');
        }
        helloWorld();
    </script>
    

3. Debugging

Open the 'Debug' view, create a debug configuration, and click 'Start Debugging' to begin debugging.

    // Here is a sample code for debugging
    let x = 5;
    let y = x * 2; // Set a breakpoint here and start debugging
    console.log(y);
    
This concludes our explanation of the basic usage of VSCode. In the next chapter, we will explore advanced tips for using VSCode.
Return to Table of Contents

Chapter 5: Tips for Using Visual Studio Code

While Visual Studio Code is a powerful tool on its own, you can create an even more efficient development environment with a few additional tips. In this chapter, we'll explore advanced tips for using VSCode.

1. Using Keyboard Shortcuts

VSCode provides various keyboard shortcuts to boost your development speed. For example, pressing 'Ctrl + P' opens the file explorer, 'Ctrl + /' comments lines, and 'F12' takes you to the function definition.

2. Installing Extensions

One of the significant advantages of VSCode is its support for various extensions. You can find and install these extensions from the VSCode marketplace, allowing you to optimize your workspace as needed.

3. Using Multi-Cursor Feature

<p>By holding the Alt key in VSCode while clicking, you can create multiple cursors at different locations.</pre>

    // For example,
    let x = 1;
    let y = 1;
    let z = 1;
    // You can change all the values at once using multi-cursor.
    
This way, you've learned advanced usage and tips for VSCode. You now know how to use VSCode more efficiently.
Return to Table of Contents

VSCodeのダウンロード方法と活用ガイド

1章: Visual Studio Codeとは何か?

Visual Studio Code(VSCode)は、Microsoftが開発し配布するオープンソースのコードエディタです。プログラミング言語に関係なくさまざまな開発環境をサポートし、ユーザーフレンドリーなインターフェースと豊富な機能で、世界中の開発者に広く使用されています。

VSCodeは高速な起動と低メモリ使用量で効率的な開発環境を提供します。さらに、Gitなどのバージョン管理システムを組み込んでおり、共同作業に必要なツールを備えています。

さらに、VSCodeは多くの拡張機能を提供し、ユーザーが必要に応じて最適な作業環境をカスタマイズできるようにしています。これが多くの開発者がVSCodeを好む主要な理由の1つです。

目次に戻る

2章: Visual Studio Codeを使用する理由

Visual Studio Codeは単なる優れたコードエディタにとどまらず、高度に拡張可能です。さまざまな拡張機能をインストールすることで、ユーザーはコーディングスタイルとワークスペースに合わせて開発ツールをカスタマイズできます。

さらに、VSCodeにはGitなどのバージョン管理システムが組み込まれており、共同作業に必要なすべての機能が1つの場所で利用できます。

最後に、VSCodeはほぼすべての主要なプログラミング言語をサポートしており、JavaScriptからPython、Javaなどの言語に対して、IntelliSense(コード補完)、デバッグ、リファクタリングなどの機能を提供しており、開発者はより効率的に作業できます。

目次に戻る

3章: Visual Studio Codeのダウンロード方法

Visual Studio Codeは公式ウェブサイトから無料でダウンロードできます。以下の手順に従ってください。

  1. まず、Visual Studio Codeの公式ウェブサイト(https://code.visualstudio.com/download)にアクセスします。
  2. ウェブサイトにアクセスすると、さまざまなバージョンのVisual Studio Codeがリストされています。使用しているオペレーティングシステムに合ったバージョンを選択し、クリックします。
  3. ダウンロードが開始され、完了したらインストールファイルを実行してインストールを進めます。

これらの簡単な手順で、Visual Studio Codeをコンピュータにインストールできます。さて、VSCodeの基本的な使用法と使用のヒントを探索してみましょう。

目次に戻る

4章: Visual Studio Codeの基本的な使用法

Visual Studio Codeは使いやすいインターフェースと豊富な機能を提供し、開発者がより生産的に作業できるようにします。この章では、VSCodeの基本的な使用法について学びます。

1. 新しいプロジェクトの開始

VSCodeを起動した後、「ファイル」メニューから「開く」を選択するか、スタート画面から「フォルダを開く」をクリックして新しいプロジェクトを開始できます。

2. コードの編集

VSCodeはさまざまな言語に対してコードのハイライト表示や自動補完機能を提供し、コーディングをより簡単かつ迅速に行えるようにしています。

    <script>
        function helloWorld() {
            console.log('Hello, world!');
        }
        helloWorld();
    </script>
    

3. デバッグ

「デバッグ」ビューを開き、デバッグ構成を作成し、「デバッグを開始」ボタンをクリックしてデバッグを開始できます。

    // こちらはデバッグのサンプルコードです
    let x = 5;
    let y = x * 2; // ここにブレークポイントを設定してデバッグを開始します
    console.log(y);
    
これで、VSCodeの基本的な使用法の説明が終わりました。次の章では、VSCodeの高度なヒントを探求します。
目次に戻る

5章: Visual Studio Codeの活用のヒント

Visual Studio Codeはそのままでも強力なツールですが、いくつかの追加のヒントを使うことで、より効率的な開発環境を作成できます。この章では、VSCodeの高度なヒントを探求します。

1. キーボードショートカットの使用

VSCodeは開発スピードを向上させるためのさまざまなキーボードショートカットを提供します。たとえば、「Ctrl + P」を押すとファイルエクスプローラが開き、「Ctrl + /」で行をコメントアウトでき、F12を押すと関数の定義に移動できます。

2. 拡張機能のインストール

VSCodeの主要な利点の1つは、さまざまな拡張機能のサポートです。これらの拡張機能はVSCodeのマーケットプレイスから見つけてインストールでき、必要に応じてワークスペースを最適化するのに役立ちます。

3. マルチカーソル機能の使用

<p>VSCodeでAltキーを押しながらクリックすると、異なる位置に複数のカーソルを作成できます。</pre>

    // 例えば、
    let x = 1;
    let y = 1;
    let z = 1;
    // マルチカーソルを使用してすべての値を一度に変更できます。
    
これで、VSCodeの高度な使用方法とヒントを学びました。これで、VSCodeをより効率的に使用する方法を知ることができます。
目次に戻る

Tuesday, September 5, 2023

VSCode: Resolving Non-display of Spring Boot Projects

Switching from Front-end to Back-end with Spring Boot on macOS using Visual Studio Code (VSCode)

After focusing solely on Front-end for a while, I had the opportunity to work on Back-end again. When it came to choosing a server framework, I decided to go with Spring Boot, as it's something I'm more familiar with.

Back in the day (whenever that was), I would have probably used Eclipse for this, but with our beloved VSCode, I decided to set up the project here and share my experiences and solutions to some issues I encountered.

Actually, I had set up Spring Boot environment with VSCode before, but this time, something felt off.

Screenshot 1

There were two main issues in my case:

  • Java Version Conflict: Initially, I was using Java 8, but the "Language Support for Java(TM) by Red Hat" extension did not support Java versions below 11. Changing the Java version resolved this issue easily.
  • Spring Boot Dashboard: The bigger problem was with the Spring Boot Dashboard. The projects were supposed to appear in this tab, but they didn't show up at all.

When trying to run the project, I encountered notifications like this:

Screenshot 2

I tried various methods to find a solution but couldn't figure it out initially, so I almost gave up.

Later on, after some trial and error, I found a solution (which might not be the standard way).

First, I switched the mode to "Standard Mode" in the "java projects" on the left-hand side:

Screenshot 3

After confirming that the projects were displayed in this mode, I closed VSCode completely and restarted it. To my surprise, the projects were now visible on the Spring Boot Dashboard.

VSCodeでmacOSのSpring Bootプロジェクト表示問題の解決法

macOSでVisual Studio Code(VSCode)を使用してSpring Bootでフロントエンドからバックエンドへの切り替え

一段落フロントエンドに集中していた後、再びバックエンドでの作業の機会が訪れました。サーバーフレームワークを選ぶ際、私はSpring Bootを選ぶことに決めました。なぜなら、それが私がより馴染みのあるものだからです。

以前(いつだったかはわかりませんが)、この作業にはおそらくEclipseを使用していたでしょうが、私たちが愛するVSCodeがあるので、ここでプロジェクトを設定し、私の経験と遭遇したいくつかの問題への解決策を共有することにしました。

実際、以前にもVSCodeでSpring Boot環境を設定したことがありましたが、今回は何かがおかしいと感じました。

スクリーンショット1

私の場合、2つの主要な問題がありました:

  • Javaバージョンの競合: 最初はJava 8を使用していましたが、「Language Support for Java(TM) by Red Hat」拡張機能はJava 11未満のバージョンをサポートしていませんでした。Javaバージョンを変更することで、この問題は簡単に解決しました。
  • Spring Bootダッシュボード: より大きな問題はSpring Bootダッシュボードで発生しました。プロジェクトはこのタブに表示されるはずでしたが、全く表示されませんでした。

プロジェクトを実行しようとすると、次のような通知が表示されました:

スクリーンショット2

解決策を見つけるためにさまざまな方法を試しましたが、最初はそれを理解できなかったため、ほとんどあきらめました。

その後、いくつかの試行錯誤の後、解決策を見つけました(これが標準的な方法ではないかもしれません)。

最初に、左側の「java projects」で「標準モードに切り替える」を選択しました:

スクリーンショット3

プロジェクトがこのモードで表示されることを確認した後、VSCodeを完全に閉じて再起動しました。驚いたことに、プロジェクトは今やSpring Bootダッシュボードで表示されました。

Wednesday, August 9, 2023

VSCodeでCJKエンコーディングの問題を解決する方法

Spring BootとVisual Studio CodeでのAPI開発時の韓国語文字化け問題解決法

Spring BootでREST APIサーバーを開発しているとき、韓国語の文字が正しく表示されない問題が発生しました。以前はSpring Tool Suite(STS)では問題なく動作していましたが、Visual Studio Code(VS Code)に切り替えたところ、文字化けが発生しました。

エンコーディング問題の対処法

エンコーディングが原因ではないかと疑い、Googleを通じてさまざまな解決策を探しました。しかし、ほとんどの解決策が同じで、他の方法はあまり役立たないと感じました。最終的に、ユーザー(Eric)から提供された一つの解決策を見つけることができました。

VSCodeの設定を通じて問題解決

この解決策のキーは、Javaを実行するときに「-Dfile.encoding=utf-8」オプションを追加することでした。私はこのオプションをVisual Studio Codeのユーザー設定に追加しました。

結果の確認

設定を変更し、プロジェクトをテスト実行した後、文字化けしていた韓国語の文字の表示問題はすぐに解決しました。また、このオプションは、コンソールログの文字化けにも対応することができました。

これにより、プロジェクトの開発を再開し、Spring BootとVisual Studio Code環境のエンコーディング問題に対する対応策を共有できました。この投稿が皆さんのお役に立てれば幸いです。

VSCode CJK Encoding Issues: Adding Options Guide

While developing a REST API server using Spring Boot, I encountered difficulties due to garbled Korean characters.

Previously, Korean characters worked smoothly in the Spring Tool Suite (STS), but when I switched to Visual Studio Code (VS Code), the characters became garbled.

Solution to the encoding issue

Suspecting an encoding issue, I searched for various solutions through Google. However, most of the solutions were similar, and other methods did not provide much help for me. After searching all day, I finally found one solution. I discovered this solution from a user (Eric).

Solving through VSCode settings

The key to this solution was to add the '-Dfile.encoding=utf-8' option when running Java. I added this option to the user settings in Visual Studio Code.

After suspecting this issue to be an encoding problem, I searched for various solutions through Google. However, most solutions were similar, and other methods did not provide much help for me. I finally discovered one solution from a user (Eric).

vscode settings

Results verification

After modifying the settings and running the project for testing, the garbled Korean character output issue was immediately resolved, and the characters were displayed correctly. Additionally, this option also provided a fix for the garbled characters in console logs.

This enabled me to resume my project development and share a response strategy for encoding issues with Spring Boot and Visual Studio Code environments.

I hope this post has been helpful to you.

Monday, June 12, 2023

VSCodeのクリーン&リスタートでビルドエラーを解消する方法

VSCodeでのNoClassDefFoundErrorの解決方法

みなさん、こんにちは!今日は、予期せぬビルドエラーに対処する方法についてお話します。

NoClassDefFoundErrorが発生した経験

数か月前、問題なく実行されていたプロジェクトが突然NoClassDefFoundErrorというビルドエラーをスローし始めました。何の理由もないのに起こったように感じました。

一般的な解決策と疑問

解決策をGoogleで検索したところ、多くの人が.jar形式の対応するクラスファイルパッケージを追加するようにアドバイスされました。しかし、以前はパッケージを追加せずにプロジェクトを問題なく実行できていたのに、なぜ今そうなるのか疑問でした。

別の解決策:VSCode のリスタート機能

そこで、別の解決策を探すことにしました。以前Android向けに開発したときに似たような問題が発生し、クリーン&リスタート機能を使って解決したことを思い出しました。そこで、VSCodeで同様の機能を探しました。

VSCode Restart Function

VSCODE の再起動コマンド: ctrl(cmd)+shift+p

Error 解消結果及び助言

その結果、同様の機能を見つかり、試してみたところ、エラーがきれいに解消されました。この経験から、プロジェクトの問題が発生した場合、パッケージを追加する以外にも他の方法を検討する必要があることを皆さんに伝えたいと思います。各開発環境で提供されているクリーン&リスタートなどの同様の機能を使用して問題を解決することができます。

この記事が、予期せぬエラーに直面したときに役立つことを願っています。

How to Fix NoClassDefFoundError in Spring Boot with VSCode

How to Handle Unexpected Build Errors in Project Development

Hello everyone! Today, we will delve into how to tackle unexpected build errors that may occasionally occur during project development.

Encountering NoClassDefFoundError: A Personal Experience

A few months back, I faced a situation where a project, which was running smoothly, suddenly started throwing a NoClassDefFoundError and a build error. Interestingly, it seemed as if the problem had occurred without any apparent reason.

Seeking Solutions Online

In my quest for solutions, I turned to Google. Many responses suggested adding the corresponding class file package in .jar format. However, this advice was not convincing, as the project had been running fine without the need to add the package previously.

Exploring an Alternative Solution

I decided to look for another solution. During my Android development days, I had faced similar issues, and using the clean and restart functions often solved them. Consequently, I began looking for similar functions in VSCode.

VSCode command palette
ctrl(cmd)+shift+p

In VSCode, I found a function similar to clean and restart and decided to give it a try. To my surprise, this method neatly resolved the error!

A Helpful Tip for Troubleshooting Project Issues

This experience taught me that when encountering problems with your projects, do not just stick to one method, like adding packages. Try exploring other alternatives too! Functions such as clean and restart provided by various development environments can indeed be surprisingly effective.

I hope this article will be of help when you face unexpected errors in your projects.

VSCodeでFlutterアプリのビルド時に外部設定値を注入する方法

Flutterでビルド時に外部設定値を注入する方法

この記事では、Flutterプロジェクトにビルド時に外部設定値を注入する方法を詳しく解説します。これにより、開発者は動的な環境変数を簡単に管理することが可能になります。その中で最も一般的な手法は--dart-defineオプションの使用です。

Dart変数の定義と値の渡し方: --dart-defineオプション

--dart-defineオプションは、Dartコード内で使用される変数を定義し、その値を渡すために使用されます。以下の例では、versionというDart変数を定義し、現在の日付と時間情報をその値として渡します。

flutter build apk --profile --dart-define=version=`date +%d_%H:%M:%S`

Dartコード内で、String.fromEnvironment()関数を使用してこの値を参照する方法は以下の通りです:

String.fromEnvironment("version")

`launch.json`ファイルを使用した`--dart-define`オプションの自動化

`--dart-define`オプションに毎回手動で値を入力するのは面倒です。Visual Studio Codeの`launch.json`ファイルを使用すればこのプロセスを自動化できます。


{
    "version": "0.2.0",
    "configurations": [      
      {                	        
        "name": "Flutter build apk with version",                            
        "request": "launch",                            
        "type": "dart",                            
        "program": "..\\lib\\main.dart",                            
        "flutterMode":"profile",           	                    
        "toolArgs" : ["--dart-define=version=`date +%d_%H:%M:%S`"]
      }
    ]
}

`toolArgs`配列に`--dart-define=version=date +%d_%H:%M:%S`オプションを追加することで、ビルド時に自動的に値が入力されます。

Dartコードでビルド環境変数を使用する方法

Dartコード内では、`String.fromEnvironment()`関数を使用して、先ほど定義した`version`値を取得することができます:


static const version = String.fromEnvironment("version", defaultValue: '');

このように定義された`version`変数は、アプリ内で様々な用途に使用することができます。例えば、Aboutページでアプリのバージョン名を表示するために使用することができます。

How to Inject External Configuration Values when Building Flutter Apps in VSCode

Injecting External Configuration Values at Build Time in Flutter

This post will guide you on how to inject external configuration values at build time in Flutter. These methods are especially useful for managing dynamic environment variables. The most common method is using the --dart-define option.

Utilizing the --dart-define Option to Define Dart Variables

The --dart-define option helps define Dart variables and pass their values. The following example demonstrates how to define a Dart variable named version and assigns the current date and time as its value.

flutter build apk --profile --dart-define=version=`date +%d_%H:%M:%S`

Within your Dart code, you can reference this value using the String.fromEnvironment() function:

String.fromEnvironment("version")

Automating the `--dart-define` Option via `launch.json` File

Manually inputting values into the `--dart-define` option can be tedious. You can automate this process using the `launch.json` file in Visual Studio Code.


{
    "version": "0.2.0",
    "configurations": [      
      {                	        
        "name": "Flutter build apk with version",                            
        "request": "launch",                            
        "type": "dart",                            
        "program": "..\\lib\\main.dart",                            
        "flutterMode":"profile",           	                    
        "toolArgs" : ["--dart-define=version=`date +%d_%H:%M:%S`"]
      }
    ]
}

By adding the `--dart-define=version=date +%d_%H:%M:%S` option into the `toolArgs` array, the value is automatically entered at each build process.

Employing Build Environment Variables in Dart Code

In your Dart code, you can retrieve the `version` value defined earlier using the `String.fromEnvironment()` function:


static const version = String.fromEnvironment("version", defaultValue: '');

This `version` variable can be used for various purposes within your app. For instance, it could be displayed as the app version name on an About page.

VSCode에서 Flutter 앱 빌드 시 외부 설정값 주입하기

Flutter에서 빌드 시 외부 설정값 주입 방법

이 포스트에서는 Flutter에서 빌드 시 외부 설정값을 주입하는 방법을 설명합니다. 가장 보편적인 방법은 --dart-define 옵션을 사용하는 것입니다. 이 옵션은 Dart 변수를 정의하고 값을 할당하는 데 사용됩니다.

--dart-define 옵션의 활용

--dart-define 옵션은 Dart 변수를 정의하고 값을 전달하는 데 사용됩니다. 아래 예제에서는 version이라는 Dart 변수를 정의하고 현재 날짜와 시간 정보를 값으로 전달하는 과정을 보여줍니다.

flutter build apk --profile --dart-define=version=`date +%d_%H:%M:%S`

Dart 코드에서는 다음과 같이 String.fromEnvironment() 함수를 사용하여 해당 값을 참조할 수 있습니다:

String.fromEnvironment("version")

`launch.json` 파일을 이용한 자동화

`--dart-define` 옵션에 매번 값을 입력하는 것은 번거로울 수 있습니다. 이럴 때 Visual Studio Code의 `launch.json` 파일을 활용하면 이 과정을 자동화할 수 있습니다.


{
    "version": "0.2.0",
    "configurations": [
      {                	
        "name": "Flutter build apk with version",                    
        "request": "launch",                    
        "type": "dart",                    
        "program": "..\\lib\\main.dart",                    
        "flutterMode":"profile",           	            
        "toolArgs" : ["--dart-define=version=`date +%d_%H:%M:%S`"]
        }
    ]
}

`toolArgs` 배열에 `--dart-define=version=date +%d_%H:%M:%S` 옵션을 추가하면, 빌드 시마다 자동으로 값을 입력하게 됩니다.

Dart 코드에서 빌드 환경 변수 사용하기

Dart 코드에서는 `String.fromEnvironment()` 함수를 사용하여 앞서 정의한 `version` 값을 참조할 수 있습니다:


static const version = String.fromEnvironment("version", defaultValue: '');

이렇게 정의한 `version` 변수는 앱 내에서 다양하게 활용될 수 있습니다. 예를 들어, About 페이지에 앱 버전명을 표시하는 데 사용할 수 있습니다.

Friday, June 9, 2023

Visual Studio Codeで複数のJavaバージョンを設定する方法

Visual Studio Codeで複数バージョンのJavaを設定する方法

Visual Studio Codeで複数バージョンのJavaを利用するためには、settings.json ファイルを修正する必要があります。以下の手順に従って設定を変更してください:

  1. Visual Studio Codeを起動する: この行程はVisual Studio Codeを開始하는 첫 단계입니다.
  2. 設定メニューにアクセスする: 左サイドバーの歯車アイコンをクリックして設定メニューに入ります。これはユーザー設定에アクセス하는 데 필요한 단계입니다.
  3. User Settings を開く: 左パネルで "Command Palette" オプションをクリックし、"Open User Settings(JSON)" へ移動します。これはUser Settingsを開くための手順です.
  4. JDK 設定を追加する: settings.json ファイルに以下の設定値を追加します:
{
  "java.configuration.runtimes": [
  	{      
    	"name": "JavaSE-1.8",      
        "path": "[JDK_1.8_Path]"    
     },    
    {   "name": "JavaSE-11",      
    	"path": "[JDK_11_Path]"    
     },  
  ]
}

[JDK_1.8_Path]と[JDK_11_Path]はそれぞれJDK 1.8とJDK 11がインストールされているパスを表しています。これらのパスはシステムごとに異なるため、インストールされているJDKの実際のパスを見つけて入力する必要があります。

JDK 設定保存

変更保存: すべての設定が完了したら、変更内容を保存します。

これでVisual Studio Codeで複数バージョンのJavaが使用可能な状態になりました。プ로ジェクトで使用したいJavaのバージョンに応じて、適切なJDKを選択することができます。

How to Configure Multiple Versions of Java in Visual Studio Code

Setting Up Multiple Versions of Java in Visual Studio Code

To utilize multiple versions of Java in Visual Studio Code, you need to modify the settings.json file. Follow the step-by-step guidelines below to change your settings:

  1. Launch Visual Studio Code: This is the first step to start using Visual Studio Code.
  2. Access Settings Menu: Click on the gear icon on the left sidebar to enter the settings menu. This is a necessary step to access user settings.
  3. Open User Settings: In the left panel, click on the "Command Palette" option and navigate to "Open User Settings (JSON)". This is the procedure to open User Settings.
  4. Add JDK Configurations: Add the following configuration values into your settings.json file:
{
  "java.configuration.runtimes": [
  	{      
    	"name": "JavaSE-1.8",      
        "path": "[JDK_1.8_Path]"    
     },    
    {   "name": "JavaSE-11",      
    	"path": "[JDK_11_Path]"    
     },  
  ]
}

[JDK_1.8_Path] and [JDK_11_Path] represent the paths where JDK 1.8 and JDK 11 are installed, respectively. These paths vary by system, so you need to find and input the actual paths where your JDKs are installed.

Saving Your JDK Settings

Save Changes: Once all settings are completed, save the changes.

Now, you have set up multiple versions of Java for use in Visual Studio Code. Depending on the version of Java you want to use in your project, you can select an appropriate JDK.

Visual Studio Code에 여러 버전의 Java 설정하기

Visual Studio Code에서 다양한 Java 버전 설정하기

Visual Studio Code에서 여러 버전의 Java를 활용하려면, settings.json 파일을 수정해야 합니다. 아래의 단계별 가이드를 따라 설정을 변경해보세요:

  1. Visual Studio Code 실행하기: 이는 Visual Studio Code를 시작하는 첫 번째 단계입니다.
  2. 설정 메뉴 접근하기: 왼쪽 사이드바의 톱니바퀴 아이콘을 클릭하여 설정 메뉴로 들어갑니다. 이는 사용자 설정에 접근하는 데 필요한 단계입니다.
  3. User Settings 열기: 좌측 패널에서 "Commend Palette" 옵션을 클릭한 후, "Open User Settings(JSON)" 항목으로 이동합니다. 이는 User Settings를 열기 위한 절차입니다.
  4. JDK 설정 추가하기: settings.json 파일 안에 아래와 같은 설정 값을 추가합니다:
{
  "java.configuration.runtimes": [
  	{      
    	"name": "JavaSE-1.8",      
        "path": "[JDK_1.8_Path]"    
     },    
    {   "name": "JavaSE-11",      
    	"path": "[JDK_11_Path]"    
     },  
  ]
}

[JDK_1.8_경로]와 [JDK_11_경로]는 각각 JDK 1.8과 JDK 11이 설치된 경로를 나타냅니다. 이 경로들은 시스템에 따라 다르므로, 설치된 JDK의 실제 경로를 찾아서 입력해야 합니다.

JDK 설정 저장하기

설정 저장: 모든 설정이 완료되면, 변경 사항을 저장합니다.

이제 Visual Studio Code에서 여러 버전의 Java를 사용할 수 있도록 설정이 완료되었습니다. 프로젝트에서 사용하려는 Java 버전에 따라 적절한 JDK를 선택할 수 있습니다.

Tuesday, January 5, 2021

Flutter web에서 SVG 이미지 표시 문제 해결하기

Flutter에서 SVG 이미지 표시 문제 해결하기

개발을 진행하다 보면 예상치 못한 에러가 발생하는 경우가 있습니다. 이번에는 Flutter에서 잘 나오던 SVG 이미지들이 갑자기 표시되지 않는 문제를 겪었습니다. 사용 중인 SVG 패키지는 websafe_svg입니다.

이 문제는 특정 상황에서만 발생했습니다. `flutter run -d chrome`을 터미널로 실행하거나 `flutter build web`으로 생성하여 웹 서버에 올릴 때는 정상적으로 SVG 이미지가 나타났습니다. 그러나 VS Code에서 디버그를 실행할 때만 'ImageCodecException: Failed to decode image data.'라는 에러 메시지와 함께 SVG 이미지가 보이지 않았습니다.

문제 해결 방법 찾기

Flutter 공식 이슈 트래커에도 이 문제에 대한 정보가 없었고, 구글 검색을 해도 원인을 찾을 수 없었습니다. 그런데 우연히 Flutter Reddit에서 해결법을 발견했습니다.(참고: Reddit thread)

Solution: Renderer 선택하기

'canvaskit'과 'html' 중 renderer를 선택할 수 있다고 합니다. 그런데 VS Code에서 디버그를 실행할 때 'canvaskit' renderer를 사용하며, 아마 이 renderer가 SVG를 지원하지 않아서 생기는 문제 같습니다.

해결 방법 적용하기

실행 시 옵션을 주어 renderer를 변경하는 방법도 있지만, 더 간단한 방법은 /web/index.html 파일 내 script 섹션에 window.flutterWebRenderer = 'html'; // or 'canvaskit' 를 추가하는 것입니다. 이렇게 하면 해당 문제가 깔끔하게 해결됩니다.

Thursday, October 8, 2020

macOS에서 VSCode를 이용한 Spring Boot 환경 설정 가이드

VSCode를 이용한 macOS에서의 Spring Boot 환경 설정 가이드

프론트엔드 개발에만 초점을 맞추고 있던 저는, 다시 백엔드 작업에 참여하게 되었습니다. 이번 기회에 서버 프레임워크로 Spring Boot를 선택하였고, 그 과정을 VSCode에서 진행해보기로 결정했습니다.

과거라면 Eclipse를 사용하여 이러한 작업을 진행했겠지만, 현재는 우리 모두가 사랑하는 VSCode가 있습니다. 그래서 이 글에서는 VSCode에서 Spring Boot 프로젝트를 설정하는 방법과 그 과정에서 겪은 문제들, 그리고 해결책에 대해 공유하려 합니다.

VSCode와 Spring Boot: 초기 설정의 문제점

스크린샷 1

VSCode와 Spring Boot 환경을 처음 설정할 때 다음과 같은 두 가지 주요 문제가 발생하였습니다:

  • 자바 버전 충돌: "Language Support for Java(TM) by Red Hat" 확장이 Java 11 버전 아래를 지원하지 않았습니다. 처음에는 자바 8을 사용했으므로, 자바 버전 변경이 필요하였습니다.
  • Spring Boot 대시보드 오류: 더 큰 문제는 Spring Boot 대시보드에서 발생했습니다. 프로젝트가 대시보드 탭에 표시되어야 했지만 전혀 나타나지 않았습니다.

문제 해결: Spring Boot 대시보드에서 프로젝트 표시

위에서 언급한 문제들을 해결하기 위해 여러 방법을 시도하였습니다. 그 결과, 몇 번의 시행착오 끝에 아래와 같은 해결책을 찾아냈습니다.

"Java Projects" 탭에서 "표준 모드로 전환(Switch to Standard Mode)"를 선택하였습니다:

스크린샷 3

이 설정 변경 후 프로젝트가 정상적으로 표시되는지 확인하고, VSCode를 완전히 종료한 후 다시 시작하였습니다. 그 결과, Spring Boot 대시보드에서 프로젝트가 정상적으로 표시되었습니다.

Thursday, July 25, 2019

터미널에서 현재 폴더를 vscode로 1초만에 바로 여는 방법

보통 VSCode의 명성을 듣고 설치해서 활용해보는 사람들이 많을 것입니다. 기본적으로 설치 후 실행 방법에 대해서는 아이콘 클릭이나 path 설정을 통한 명령어로 VSCode를 열게 될 것입니다.

VSCode 간단 설치 및 실행 방법

하지만 복잡하게 따로 path 설정을 하지 않아도 아주 간단히 1초 만에 VSCode를 설치하고 실행하는 방법이 있습니다.

VSCode quick open menu screenshot

VSCode quick open menu

'code .' 명령어로 VSCode 간편 실행하기

맥북 기준으로 F1 혹은 cmd + shift + P 키를 눌러서 위와 같은 메뉴가 나오면, 이후부터는 터미널에서 프로젝트 폴더로 이동해서 'code .'라는 명령어만으로도 간편하게 VSCode를 열 수 있습니다.

의외로 이 기능을 모르는 사람들이 많은데, 생각보다 유용하고 방법도 어렵지 않으니 한번 사용해 보길 권장합니다.

Friday, November 16, 2018

vscode에서 Springboot 실행 시 NoClassDefFoundError가 나오면서 실행돼지 않을 때 .jar 추가가 아닌 다른 해결법

갑작스럽게 발생한 빌드 오류에 대처하는 방법

안녕하세요 여러분, 프로젝트를 진행하다 보면 예상치 못한 빌드 오류에 직면할 때가 있습니다. 이 글에서는 그러한 상황에 대처하는 방법을 공유하려 합니다.

NoClassDefFoundError 오류와의 만남

몇 달 전, 잘 실행되던 프로젝트가 갑자기 NoClassDefFoundError를 발생시키며 빌드 오류가 생기는 경험을 했습니다. 이 상황이 정말 아무 이유 없이 일어난 것처럼 느껴졌습니다.

문제 해결을 위한 구글 검색

저는 구글을 검색하여 해결 방법을 찾아봤고, 많은 분들이 .jar 형식의 해당 클래스 파일 패키지를 추가하라고 조언했습니다. 하지만, 뭔가 마음에 걸렸습니다. 왜냐하면 이전에 패키지를 추가하지 않아도 프로젝트가 잘 실행되었기 때문에 어느 순간부터 왜 이런 일이 생기는지 의문이었습니다.

다른 해결책 찾기

그 때문에 저는 다른 해결책을 찾기로 결심했습니다. 예전에 안드로이드 개발할 때 비슷한 문제가 생겼었고, 그 때 clean and restart 기능을 사용하여 해결한 기억이 있었습니다. 그래서 저는 VSCode에서도 이와 같은 기능을 찾아보았습니다.

VSCode command palette

ctrl(cmd)+shift+p

결과와 그 의미

결과적으로 비슷한 기능을 찾아 시도하니, 오류가 깔끔하게 해결되었습니다. 이 경험을 통해 여러분들에게 전하고 싶은 것은 프로젝트 문제가 발생했을 때, 반드시 패키지 추가를 하는 것 외에도 다른 방법을 고려해볼 필요가 있다는 것입니다. 각 개발 환경에서 제공하는 clean, restart와 같은 유사한 기능들을 활용하여 문제를 해결할 수 있으니 참고하시기 바랍니다.

Friday, July 6, 2018

아무리 찾아도 안나오는 스프링 부트와 VSCode에서의 한글(cjk언어) 깨짐 현상 해결

스프링 부트와 VSCode에서의 한글(cjk언어) 깨짐 현상 해결

스프링 부트를 사용해 REST API 서버를 개발하던 중, 한글 깨짐 현상으로 어려움을 겪었습니다. 이전에는 Spring Tool Suite(STS)에서 매끄럽게 작동하던 한글이 Visual Studio Code(VS Code)로 작업 환경을 변경하자 글자가 깨지기 시작했습니다.

인코딩 문제 해결 방법

이 문제를 인코딩 문제로 짐작하고 구글을 통해 다양한 해결책을 검색했습니다. 그러나 비슷한 해결책이 대부분이었고, 그 외의 방법들도 저에게 큰 도움이 되지 않았습니다. 하루 종일 검색 끝에 결국 한 가지 해결법을 발견했습니다.

VSCode 설정을 통한 해결 방안

VSCode 설정 화면

해당 해결책의 요지는 자바 실행 시 -Dfile.encoding=utf-8 옵션을 추가하는 것입니다. 이 옵션은 Visual Studio Code 사용자 설정에 추가할 수 있습니다.

VSCode 설정 결과 화면

결과 확인

수정한 설정 이후 프로젝트를 실행하여 테스트 한 결과, 깨진 한글 출력의 문제가 즉시 해결되어 정상적으로 출력되는 것을 확인하였습니다. 뿐만 아니라, 이 옵션은 콘솔 로그의 글자 깨짐 현상에 대해서도 수정을 제공해주었습니다.

마치며

이를 통해 프로젝트 개발에 이어질 수 있었으며, 스프링 부트와 Visual Studio Code 환경에서의 인코딩 문제에 대한 대응 방안을 공유하게 되었습니다.

이 글이 여러분에게 도움이 되었다면 기쁠 것입니다.