VSCODE SPRING BOOT 개발환경 세팅 - Spring Boot Extension in VS Code

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[Music] [Music] Yes, in this video, we will try to set up Spring Boot in vs code. Now, in order to install Spring Boot in vs code, vs code must first be installed, and a certain version of vs board or higher. The setting can be done, and the jdk Java Development Kit can be installed only if you use version 1.8 or higher. So, let's set up the development environment in Spring Boot vs Code. First, what we need to know is the jdk. In this case, you need to install version 1.8 or higher in advance. So, I will leave a link at the bottom of the video . There is a video of jdk installation before, so you can refer to that and install it first. Then , vs code. Please install version 1.19 or higher. So, in the video, we will start with the vs code and proceed with the installation. After the vs code is installed, we will proceed with installing the extensions. In order to use Spring Boot, we need to install the Spring Boot extension. If you proceed with installing the extension called the pack, the extension installation called Spring Initializer Java Support and Spring Boot Tools Spring Boat Dashboard will be installed all at once. Now, if you also install the extension called the Spring Boot Developer Extension Pack, You can install the Java Extension Pack Code Generator and Spring Boat Snippets, which also have extensions that have functions such as auto-completion of code collections and code fragments that write Spring Boot-related code. And in this lesson, we will simply We are going to practice creating a main screen using the Leaf Template Engine. Even then , if you install an extension called Thymeleaf during the extension installation, you can even try using an extension that automatically completes Thymeleaf code fragments . Let's learn how to create a script project next. Let 's start with vs Code and install it . First, go to Google. Search for vs Code on Google and install vs Code again. After searching for vs Code. If you go to the link at the top, it provides a download link according to your operating system. So, let 's click the Download 4 Windows button and download it. The download is complete. Let's click and run it right away. We will now proceed with the download. When you do this, a screen like this will appear. On the installation screen, click Agree, click Next, click Next in the default installation path, and then specify whether you want to create a folder or a shortcut in the market menu. It will appear. If you want to create a shortcut on the desktop, click the checkbox and do the following. Next, click Install to proceed. Now, the installation is complete and the checkbox called Run Visual Studio Code is checked. Click Close to run it. It will be completed. When the voice code is run, this screen appears and the UI is initially set to English. When you run it, the language used by the operating system is recognized and a pop-up window asks whether you want to install the Korean language or a language pack. appears. If you click on it, it will install the language pack and run it again. Click it to proceed in Korean. Now, the vs code screen will open. If there is a color theme you want, you can select the theme first and proceed. Now, let 's close the start screen and proceed with installing the extensions that we were planning to install. Now, the first extension to be installed is the Spring Boot Extension Pack. To install the extension, click the icon menu on the left. Let's select it and select the extension icon menu and search for it. Now, if you search for spring, various spring-related extension installations will appear. Among them, the icon in the shape of a gear wheel will install the example Spring Boot Extension Pack. Now, install this. If you do this, the installation will proceed together with the Spring Initializer Support, Spring Boot Tools, and the Dashboard. Yes, if you install one, you can see that the four extensions you see are being installed together. Now , this is during the installation process. We 'll search for and install an extension called [Music] Spring Boot Developer Extension Pack . If you search for Spring and come down a bit, it's here. Let's install the Spring Boot Developer Extension Pack. Now, and. Lastly, let's search for Time Leap again and proceed. If you search for Time Leap, it is the most downloaded at the top. Let's proceed with installing the extension. Now, here's how to write it within Time Leap, so you can easily write the Time Leap syntax briefly. If you are curious about the keywords later, you can go to the extension installation search and check the code snippet keywords. Now, it looks like the extension installation is complete. Now, go into the file explorer and use the default work folder . Let me select one. I have now created a folder called Spring Boot in my personal folder. Inside this, I will now create a project. Let me open the folder with this path. Copy the path and open the folder in the file. Click Open Folder in the file. Let me select the folder I just created. Select the folder . Then click the [Music] checkbox and trust the author. Now, we have progressed to this point . Let us now create a Spring Boot project within this. Creating a Spring Boot Project. To do this , you can install the Spring Boot project very easily by first entering the command palette and entering a command called spring initializer as shown on the screen. Command Palette If you enter the command palette or press the shortcut control shift p, you can run the command A palette will open. If you search for Spring Initializer, there is an option called Starter Add Starters and an option called Crate Grade Project. In this video, we will proceed with Create Grade Project. Now, if you go to the next screen, let's first check how it goes and then proceed further. If you go to the next screen, a screen to select the Spring Boot version will appear, and in this video, we will select version 2.7.9 and proceed. Go ahead and go again, and now you will see a screen for selecting the development language. Here, let's select the Java language . Now, it will ask you to enter the group ID. It will say com aloha, so let's try entering it. Com dot aloha, and then enter the artifact ID hello. Let's try this. The Xi Artifact ID is automatically assigned to the project name when the project is actually created . If you check that it has been created, we can tell. If you move on to the next step , we will now connect the group ID and artifact ID. Finally, you can see that the folder is automatically created as a package as the main package of Spring Boot. So, let's proceed with creating the project up to this point. Return to Jar vs. Code and select 2.7.9 as the ruler version. We will proceed in Java language , and the group ID will be com. We will proceed with Aloha. Next, enter hello and use the artifact ID to make the project name simply Hello Project. Now, it will ask you to proceed with the packaging type. This is what it is now. Since we are not distributing it right away, you can choose either Zar or Waru. Now, it will ask you to select the Java version. You can select it according to the jdk version you have installed. I have version 8 installed on my computer now, so I have version 8. Let 's select the version. Now, a screen called Dependency to select dependencies will appear. In this video, we will select Spring Boot Devil Tools, Lombok Spring Web, and Thymeleaf . You can scroll down and find Thymeleaf. Search here. If you search for Timeleaf in the window and then click check , you can see all the checked paths appear at the top like this. So, I made four choices of dependents: Debut Tools Lombok Spring Web, then Timeleaf, then press Enter. Or, you can proceed by clicking Selected 4 Dependencies at the top. Now, when you press Enter , the working folder that we are currently using will open in the folder selection pop-up window. Here, click the Generator Into This Folder button. In the path, we can now specify that we want to create a project. If you click and proceed, the project will be created. Then, you can see that the project has been created in the bottom right corner as Success Separated Generated. Now, Spring Initializer Java. If you press Open in the support extension, the screen will open with the created project. So, once you enter the created project, once the Spring Boot project is recognized, the Spring Boot dashboard icon will appear in the icon menu on the left . So, when you click on the Spring Boot dashboard, you go to this icon, and when the basic project is set, the recognized project appears here. You can run the project more easily and terminate it by pressing the Run Project button. The project now runs for about a minute. After about 2 minutes, all libraries and dependencies are downloaded and imported, and the overall project structure is completed. Afterwards, various pop-up windows appear, and the folder we actually work in is the source folder. In the source folder, the main folder is Java. Folder and resource folder You can now proceed with the work here. Let's proceed to this point and write some simple code to execute the project. Project creation has been completed and the project name has been set with the artifact ID. You can see that a main package called com dot aloha dot hello has been created under the main package Java folder. Now this is the part where we specified the group ID earlier, and the artifact ID behind it is created as a package at the bottom. You can see what's there . Now, the project has been created up to this point. So, let's go ahead and write the basic code, run the server, and run the project. Now, first, under the Java folder, select the controller, and then add the controller inside it . Let's create a home controller class and write simple code. Also, let's go to the resource template path for creating the view file, create an atml main file with an index point, and write simple codes for the screen. Now, first, it's called the home controller. Let's create a controller class , write a method called home in the controller annotation and get mapping onnotation , and map it so that when a request is made to the root path, the view file called index point html is now connected . When writing this , there is an installation that completes the code piece without having to write the whole thing, so even if we just write get mapping , we can auto-complete the code below in almost complete form . As you write, in the case of controller annotation, get mapping annotation, and model class, we need to import the package from outside. When importing all at once, in vs code, if you press alt shift letter o, you can press alt shift 5. You can import multiple items at once. Now, let's create an index point acml file as follows. Now, go into the main folder under the source folder and enter the main package called Java hello. Create a new folder and enter Hello. I'll create a new folder below, create a controller , and create a file called Home Controller. Now, the file has been created up to this point. Let's simply write the code in this. Now, let's make a setting. Now, let's write it again from here. If you write controller, you can control it. If you write it and then write Get Map, there is an auto-completion key at the bottom that says Method . When you press Method, the basic Get Mapping method is almost there. It is shown in a completed form. We will make the return type a string and a home method. Now, we will specify the return path as an index. Now, there are some things where the import is automatic, but if the import says that you have to do several things at the same time, You can import it at the same time by pressing Alt Shift 5 as a shortcut. Now, inside, let's simply write a model in the model and write " Hello " with the name "Test" in the add attribute. So, we write the home controller like this. So, we write the home controller like this. Now, by creating a template in index dot atml resocis, you can create [Music] index dot atml, put an exclamation point, and press enter to autocomplete the basic asml code. Now, let's simply write the title Hello here and write the rest of the code. I'll try to write H2 simply. If you type ZARA, you can use it by automatically completing the syntax used in Thymeleaf. So, let's specify the model attribute called test earlier and also create it in the th block inside . After writing the loop ph27 in the page block, If we use the number number utility object, we can start with the number we want and repeat it all the way through. Let 's create numbers from 1 to 5 of the number dot sequence method and create a list with the name number. Now, let's create a list with the name number. I've only completed the code briefly , and now I'll run the project and actually see the screen go up to the server and open the screen. Now, the way to run the project is to create a project using Spring Boot, and then select Spring Boot from the icon menu on the left. Because we installed an extension called Dashboard, the icon will now appear. When you click the icon, the Spring Boot projects currently in the working folder are listed as shown in the screen below . Select the project you want to run among them. So, here's the execution button. If you click the button that looks like playing, you can run my project. Now, the project will look like this in the terminal window , and you can see the log. Now, when you want to run the browser, you can run the The project is here. The icon that was previously a play button changes to a browser icon. If you click on my browser icon, you can now run it using the browser. Now, if you click the browser button and run the browser, the inside of the vs code The browser opens, but I want to open it with an external Chrome browser. If you want to set it as the default, go to the settings menu and search for Spring Dash Browser. In the Spring Boot Dashboard options, you can choose whether to open the browser in an internal window vs. to open it in code or to open it externally. If you give this option to external, you can open it directly in a browser outside of the Chrome browser. So, let's try running it like this. Now, let 's click on the Spring Boot dashboard icon and run the project . When you run it for the first time, A pop-up window asking for firewall access will appear in the security warning. Click Allow access to proceed. Now, if the terminal log shows Tomcat started on 808 8080 and Started Hello application as follows, the server is now running normally. That's it. Spring Boot Dashboard Here, the executed project is changed to a browser icon like this. When you click the browser icon, the browser is opened inside the vs code by default . It may not be easy to see here, so we put it in the upper right corner. If you look, there is a button to open in an external browser. If you click on it, you can try running it in the Chrome browser. If we want to open it directly in an external browser instead of the internal browser in the default settings, go to the default settings in the file menu. In the settings, now choose Spring Dash . If you search for board , there is an option at the bottom called Open Spring Dashboard wit. Let's use it briefly here. The Spring Port Dashboard will appear . Let's search for this option only. If you search the Spring Dash browser, the option Open Spring Dashboard and You can change it to external in the options . Change it to external and synchronize the settings. Now, the next time you open it, you can see it running right away in the Chrome browser. So, up to this point, we set up the Spring Boot development environment in vs code. I've seen it , and if you have any questions or materials related to it, you can proceed through the link on the right. Now, I'll see you in the next video. [Music] [Music]
Info
Channel: ALOHA CLASS
Views: 13,508
Rating: undefined out of 5
Keywords: ALOHA, Java, 자바, 프로그래밍, 코딩, HTML, CSS, JavaScript, 웹개발, 웹디자인, SpringBoot, Spring, SpringDashBoard, Thymeleaf, 스프링부트, 스프링, 개발환경
Id: ZNsEVrE9NW0
Channel Id: undefined
Length: 28min 16sec (1696 seconds)
Published: Thu Mar 23 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.