※ Caution: This article was written not long after ChatGPT was released, so it may differ from the latest information.

I am a developer who develops ‘development tools.’ I am a person who lives surrounded by development on all sides. For me, the emergence of ChatGPT was a new technology and a new toy. The appearance of ChatGPT was like a Children’s Day gift, and as soon as I saw it, I was curious and tried using it in cooking and was impressed.

Before using it, I watched a video using ChatGPT, and the question arose: ‘How far can I develop with this?’ If ChatGPT develops it for me and shows me the perfect code, I… Am I losing my job? I felt depressed for a moment, but my curiosity took precedence. Does this technology that everyone praises really have infinite potential?

So I decided to try various things with ChatGPT myself. 

1. Let’s develop with ChatGPT

I decided to try various development projects with ChatGPT for just one day. ChatGPT was used from two perspectives: ① the accuracy of the code presented by ChatGPT and ② the operation of the code. If the code is wrong, it obviously won’t work, and if it’s a code that doesn’t work, I thought I couldn’t use the code suggested by ChatGPT.

1-1. [Wordpress] I created a blog

I think this is difficulty level 1. I tried changing a commonly used WordPress theme to ChatGPT. I selected WordPress from the software stack provided by default in goormIDE and created a container. 

Step ❶ Set up dark theme

I would like to set up the free and most popular dark theme among WordPress dark themes. Please tell me how.

It can be difficult to find the most popular dark themes that are free, but you can find popular free dark themes in WordPress.org’s theme directory. Here’s how to find and set up a dark theme:

1. Go to the WordPress dashboard: Log in to the WordPress administrator and go to the dashboard.
2. Add a theme: Click ‘Appearance’ in the left menu, then click ‘Themes’. Then click the ‘Add Theme’ button at the top.
3. Search for a theme: Search for a dark theme by typing ‘dark’ in the search bar at the top right. This will bring up the available dark themes in your WordPress directory.
4. Choose a theme: Choose from a selection of popular free dark themes. When you hover your mouse over a theme, a ‘Read More’ button will appear. Click this button to see additional information about the theme.
5. Installing and activating the theme: Once you’ve found the theme you want, click the ‘Install’ button on the theme card. Once installation is complete, an ‘Activate’ button will appear. Click this button to apply the new theme to your website.

You now have a free dark theme for your WordPress website. Check your website to see if the newly applied theme is working well.

ChatGPT first presented a method of setting a theme on the basic admin page in WordPress. The location of the button and the text are different depending on the version. I was curious if ChatGPT knew about this, so I inquired depending on the version and was informed. excellent! So, if I ask you how to change the theme directly with code, will you give me a good answer?

Please tell me how to set WordPress dark theme settings through code rather than through the admin page.

The way to set up a dark theme in WordPress without using the admin page is to create a child theme and apply the necessary style changes. This way you can apply your desired dark theme style.

Follow these steps to set up a dark theme with code:

• Create a child theme: A child theme is a theme that inherits the functionality and design of its parent theme, and allows you to add any changes you want. Create a child theme directory. For example, create a directory called wp-content/themes/your-child-theme.
• Create style.css file: Create a style.css file in your child theme directory and add the following comment. This annotation allows WordPress to recognize the child theme.

/*
Theme Name: Your Child
ThemeTemplate: parent-theme
*/

Change ‘Theme Name’ to the name you want, and change Template to the directory name of the parent theme.

• Create ‘functions.php’ file: Create a functions.php file in the child theme directory, and add the following code to import the parent theme’s styles.

<?php
function your_child_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
}
add_action('wp_enqueue_scripts', 'your_child_theme_enqueue_styles');

• Add dark style: Add the desired dark style to the style.css file. This will allow you to apply the dark theme style by changing the color, background color, text color, etc. of the desired elements.
• Activate child theme: In your WordPress admin dashboard, go to ‘Appearance’ > Go to ‘Themes’ and activate your newly created child theme.

Now your desired dark theme style has been applied to your website. You can still apply additional style changes using code.

It also shows you how to change the theme with code, but it stops at simply changing the font color and background color. I think the prompt needs to be more elaborate to allow for more diverse styling. 

Step ❷ Request a modern theme

This time, I tried more elaborate styling with ChatGPT.

I want to change the design of the blog’s main page. Please write the code to create a modern design.

To give your blog’s main page a modern design, you can use HTML and CSS to redefine the page layout and style. Of course, it is not compatible with all WordPress themes and requires some understanding of web development techniques.

Below provides HTML and CSS code for a simple modern blog design as an example. Just add or modify the code below to ‘header.php’, ‘index.php’, ‘footer.php’, and ‘style.css’ of your WordPress theme.

• ‘header.php’ file: Make sure to include your logo and menu in your website header.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="site-header">
        <div class="container">
            <h1 class="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <nav class="main-nav">
                <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
            </nav>
        </div>
    </header>

• ‘index.php’ file: Set it to cycle through blog posts and display the title, thumbnail, and summary of each post.

<main class="site-content">
    <div class="container">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article class="post">
                <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_post_thumbnail(); ?>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; endif; ?>
    </div>
</main>

• ‘footer.php’ file: Set your website footer to include copyright information and bottom menu.

<footer class="site-footer">
        <div class="container">
            <p class="copyright">© <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?></p>
            <nav class="footer-nav">
                <?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
            </nav>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

• ‘style.css’ file: Define CSS to apply a modern design.

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.container {
    width: 80%;
    margin: 0 auto;
}
.site-header, .site-footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0

The reason I expressed it as a modern design instead of a direct explanation was because I was curious whether ChatGPT would understand the specific keyword ‘modern’ and suggest an appropriate code. The following screenshot shows the code suggested by ChatGPT applied to WordPress.

ChatGPT worked hard to write code and gave an answer, but it was difficult to see because of its modern design. It seems that ChatGPT had few opportunities to collaborate with designers. To resolve this situation, I decided to at least center the text.

In the code that changes the above main page to a modern style, I want to center the contents and give them space on the left and right. Please write.

A way to center the content of your blog’s main page and provide left and right spacing is to slightly modify the CSS code. Below I provide the modified CSS code to add to the ‘style.css’ file:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px; /* 좌우 간격을 추가 */
}

.site-header, .site-footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center; /* 헤더와 푸터를 중앙 정렬 */
}

.main-nav, .footer-nav {
    list-style: none;
    padding: 0;
}

.main-nav li, .footer-nav li {
    display: inline;
    margin: 0 10px;
}

.post {
    margin-bottom: 40px;
    text-align: center; /* 포스트 콘텐츠를 중앙 정렬 */
}

.post-title {
    margin-bottom: 20px;
}

The code above centers the content of the main page, and centers the title and content of each post, as well as the text of the header and footer. Also add a padding property to the .container class to adjust the left and right spacing. You can adjust this value as you wish.

Caution: The above code is intended to apply to general WordPress themes, so it may not work depending on your specific theme. In this case, you need to check the CSS class or ID of your theme and make the necessary changes.

This time I received CSS code that works as intended, but there are still some areas that need fixing. 

In addition, I made several requests regarding design, but when the requests were unclear, abstract, and had individual differences in interpretation, I did not receive a satisfactory level of code. Like the previous request  Codes were given as intended only when requested through clear keywords such as ‘center alignment’ and ‘spacing’. In order to decorate the blog to a satisfactory level, it seems that countless interactions will be required.

For WordPress, where most functions can be modified or added on the basic admin page, ‘code development’ through ChatGPT was rather inconvenient. However, if you are not familiar with WordPress, you can easily manage your blog without a Google search using ChatGPT.

1-2. [Next.js] I created a company introduction page

Difficulty level 2. We developed a company introduction page using Next.js, a full-stack framework that is emerging these days.

Step ❶ Setting up the environment

We started with how to configure the environment based on Ubuntu 18.04 LTS version.

I want to create a company introduction page using the Next.js framework of the JavaScript language. For this purpose, please explain step by step how to configure a project in Ubuntu 18.04 LTS.

They answered the question starting with setting up the environment in 4 steps along with a detailed explanation that was too long to translate. Previously, I would have had to search for blogs or the official website, but I was able to easily find the answer by giving a prompt to ChatGPT. 

Step 1: Install Node.js and npm
Step 2: Create Next.js app
Step 3: Run Next.js app
Step 4: Create company introduction page

After configuring the environment using the method suggested by ChatGPT, I requested the code for the real company introduction page. It occurred to me that ‘glasmorphism’ design was a trend, so I requested that it be applied as an additional design.

Write the code for the about.js file to be created under the pages directory for the company introduction page. And write the code in the about.module.css file. I wish the page had a glasmorphism design.

I moved the code suggested by ChatGPT and was able to complete a page like the previous picture. However, although it is a page that has been designed in some way, I am not sure if this is ‘glasmorphism’. Instead, what is interesting is that they wrote a company introduction that was not requested. Although the content is not rich, I was satisfied that the content was presented first because it was judged necessary in the context. If something is lacking, you can request it again. 

Step ❷ Fill the page 

Now, we are going to add a header and sidebar to create a company introduction page-like format. I entered the following prompt into ChatGPT. 

The header of the page includes the company name ‘goorm’, and the left sidebar contains a page navigation tool. I wish there was a menu that could be used. In the menu, set ‘IDE’, ‘EDU’, and ‘DEVTH’ and write code.

I moved the suggested code, and the header and sidebar appeared as intended, as shown in the following image. 

It looked good, but there was something disappointing. I expected them to add a link to the sidebar and create code for a file to be located under the appropriate pages folder, just as they had written the company introduction, but that was not the case. We were able to confirm once again that most offer only what was requested.

However, if you request the page code for the IDE, EDU, and DEVTH menus in the sidebar, it will also respond with a similar structure.

Step ❸ Refactoring

Then what about refactoring? Two prompts were requested in succession. 

① Refactor the three files you created so that the components can be properly separated.
② edu. js and devth.js are also provided with code that reflects refactoring, and a CSS file for each component is also written separately.

If you follow the suggested code, the components will be divided well. Although the refactoring was not done all at once, I was able to receive the refactored code with less effort than doing it myself.

In addition, I asked about changes in the latest version of Next.js and about rendering optimization, and the answers were appropriate.

What was inconvenient was that the entire code was presented rather than the code to be modified for each request, so the longer the code, the longer I had to wait for a response. And the design was still unsatisfactory. Considering that ChatGPT cannot find and retrieve the image from the CDN on its own, it seems that the scope of ChatGPT’s answer is a little more focused on how to implement the function rather than the complete code that can be operated.

1-3. [Java Spring] I worked on a backend project

This time, I worked on a backend project using Java Spring, but I couldn’t come up with any ideas, so I wrote it after receiving a recommendation from GitHub. Below is a list of prompts I wrote. 

① I want to work on a backend project with Java Spring. Please recommend a good repository to start with as a boilerplate on GitHub. . The backend project can be any topic as long as it includes the Create, Read, Update, and Delete APIs.

② It provides detailed step-by-step instructions on how to set up the first repository so that you can work through the Ubuntu terminal. , Please tell me about 5 good features to add to this project.

③ Please recommend 5 good features to add from this project that I can learn from as a back-end engineer. Please explain each function in detail and explain what we can learn.

④ Please explain step by step what files need to be modified and how to apply paging in this project. The paging method allows you to choose the most common method and run it right away.

⑤ Now, I want to add a function that allows you to sort and search data. Please explain in detail step by step.

⑥ note Write the code for the CRUD API for other resources in the same format as the CRUD API. The resource I want to add is a resource that has ‘Like’ information about notes. This resource indicates which user ‘liked’ which note. Please explain the code in detail step by step.

⑦ Also write a SQL command statement that can set the schema so that the Like information can be saved in the mysql database.

⑧ Only authorized users can make API calls. I want to fix it so I can. Users must first be authenticated through Google OAuth to call the API. First, write code so that the user can receive Google OAuth authentication.

When I requested ①, some of the GitHub repository links provided by ChatGPT were not accessible, so I received another recommendation. I chose one of them and requested environment settings (②), and a detailed explanation and appropriate method were provided. 

When I asked them to explain what I should learn while adding features to the project idea (③), they recommended the following three back-end technologies. Although they were representative technologies, I was a little disappointed because they were too basic. 

1. pagination
2. Sorting
3. Authentication

We developed the three recommended processes (paging, sorting, and authentication) and added new functions (④ to ⑧), but the code presented by ChatGPT was generally at an appropriate level. There was some code that didn’t work right away, but it worked when I modified the pom.xml file, so there didn’t seem to be any major problems with the code itself.

I tried documenting the API after writing the code, but all failed. I expected to write an API document based on the conversation or project code so far, but ChatGPT only answered how to write an API document. It was a pity that it could not replace document work, which felt cumbersome for developers.

1.4 [PyQt] GUI programming

Lastly, I tried GUI programming in Python with ChatGPT. As with WordPress programming, I was able to skip the environment settings and proceed by using the software stack provided as standard in goormIDE.

① I want to create a menu bar with PyQt5. I want to have a design similar to the application menu bar in macOS, and the menu bar should have a total of 5 menus: File, Edit, View, Tools, and Help. Please write the code and explain it step by step.

② I want to add an exit button, zoom in/out button, and hide button to the menu bar similar to macOS. Please write the code.

③ Modify the buttons so that they appear above the menu bar, not inside the menu bar.

When the proposed code is implemented, the result is as follows.

Is the resulting design similar to that of macOS? well? Still, the menu bar was added well. However, the exit button and maximize/minimize buttons were not the desired results. I made several attempts to implement the desired design, but ultimately failed. So I gave up and tried adding another feature.

① I want to create a status bar at the bottom and display the current time within the status bar. However, the time must be displayed in seconds, and as time passes, the visible time must change.

② I want to set the background color of the status bar at the bottom a little darker.

The background color is a bit dark, but I was able to add a status bar at the bottom as requested. Next, I requested the calculator function.

① Now I want to add a calculator to the empty part in the center. Please write the code so that it works completely with the calculator application provided by the Windows operating system.

② I also want to add a scientific calculator function here. You can toggle between scientific calculator and general calculator through the View menu in the menu bar, and depending on the toggle type, the buttons in the center area alternate between scientific and general calculators. The scientific calculator is written using the same functions as the scientific calculator provided by Windows.

① When I entered the prompt, an unexpectedly accurate calculator function was implemented. Since both design and functionality were implemented as expected, this time I requested a slightly more complicated scientific calculator (②).

ChatGPT clearly understood what a scientific calculator was. The bar with the input value has disappeared, but I think it’s okay because ChatGPT took care of the most cumbersome task of implementing the calculator. Now I decided to add additional features.

① I want to allow the user to directly enter values ​​in the result bar. Please modify the code so that the function works only on the basic calculator.

② When the user enters a value in the result bar and presses Enter or clicks the [=] button, the result of the entered calculation formula appears.

③ Allows you to handle error situations when a calculation cannot be executed. If a calculation error occurs, a modal window containing the phrase “Cannot calculate” appears. When you click the OK button, the modal window closes and the calculator is visible again.

I entered three prompts and the result was successful. 

This may have been the result because it was a simple project, but I was satisfied because the development time was greatly reduced. In the GUI project using PyQt, I was able to receive the code at a satisfactory level.

• Initial prompt: I want to change the design of the blog main page. Please write the code to create a modern design.
• Last prompt: I want to create a menu bar with PyQt5. I want to have a design similar to the application menu bar in macOS, and the menu bar should have a total of 5 menus: File, Edit, View, Tools, and Help. Write the code and explain it step by step.

If the design was described as ‘modern’ in the initial prompt, it was later requested as ‘macOS application menu bar’, and this difference is the reason why the desired function was better implemented. And the reason I was able to write this prompt was because I learned to write the prompt more precisely and clearly through four tests.

2. After pair programming with ChatGPT 

A total of 4 projects were carried out with ChatGPT through pair programming. I still have a long way to go before I can find a ‘latte’, but AI technology has changed surprisingly rapidly, even for me. However, he did not have the skills to be recognized as a colleague in practice. Maybe my expectations were too high.

2-1. Advantages of ChatGPT 

Nevertheless, I think it can be a good guide for beginners. The three biggest advantages of ChatGPT that I felt while using it are as follows.

1. Boilerplate code can be generated and installation methods such as languages/packages are provided, so you can easily configure the development environment by shortening search time.
2. In most cases, the code is well written upon request and a basic explanation is provided, so it is helpful to learners.
3. ChatGPT can also perform the role of search, so using it for development can greatly reduce the effort of searching.

These advantages of ChatGPT are likely to be helpful in overcoming the development barriers felt by beginners and non-developers.

2-2. Limitations of ChatGPT

On the other hand, the limitations were also very clear.

1. Code quality varies depending on how the prompt is written. Therefore, an unskilled person must write the prompt several times before finally receiving the desired answer.
2. There is no guarantee that the code presented by ChatGPT will work. ChatGPT must solve the problem by debugging or rewriting the prompt, and in this process, more time can be spent writing the prompt than developing alone.
3. Design has a long way to go. Ultimately, CSS files must be written directly by the developer.
4. When writing code that interfaces with an external API or tool, complete code is not written.
5. Requesting ChatGPT with the current project code base requires a plug-in, and the languages ​​supported by the current plug-in are limited.
   Provided in [Manage] → [Extensions] → [ChatGPT – EasyCode] in VSCode. Language list. This extension was developed using the ChatGPT plugin. Most languages ​​are supported, but if you want to use other languages, you will need to develop a separate plugin.
6. If the code base is not set up, it may be difficult to continue working because the previous contents are lost when the session ends.
   • If the code base has been set up, the work done so far will be reflected in the code, so if you write a prompt, you will receive the response you expect.

2-3. My conclusion about ChatGPT, business, and development

These days, various new services using generative AI such as ChatGPT are being released, and since I am also leading the product team, I have also considered commercialization. There was also a lot of talk about ChatGPT replacing development, so there was concern about this. After using ChatGPT, my conclusions are as follows.

1. Prompt engineers’ expertise needs to be strengthened. The level of code presented by AI varies depending on the prompt you enter. The user experience may vary depending on the level of the user. Therefore, a process of processing question data is necessary so that the AI ​​can receive the correct answer, and expert users who are skilled in this are needed. Otherwise, the user’s writing of incorrect prompts will continue to CS.
2. Current ChatGPT does not replace development. ChatGPT may be meaningful as a tool to replace developers in non-development occupations, but developer involvement in developing and operating services is not yet required. It is at a necessary level. ChatGPT is not a replacement for all development tools. Another AI will appear in the future, but due to the nature of developers, development will not be postponed to tools, and ChatGPT, which only understands and presents local codes, has decided that there is still a long way to go before it can develop and commercialize services targeting humans. ; 
3. Business requires a specialized AI model that has learned the business field. ChatGPT is one of the products of generative AI. Naturally, this cannot be used in business as is, and an AI model specialized for that field must be trained and developed separately. There is no ‘Silver Bullet’ that can do everything. It may seem plausible, but there are certainly limitations. You will need to proceed with commercialization by creating a dataset for the field you want to introduce, training a model with this dataset, and creating and utilizing a generative AI model that suits your business.

One line comment using ChatGPT
“Not yet The line of food is strong”

🤗

작가 vecstock 출처 Freepik