Overview: Development Summary

In this project, we integrated the Korean Dictionary API into our application. Using the fetch function, we were able to pull word translations and definitions by sending requests to the API. To handle the XML response from the API, we utilized the parseStringPromise function from the xml2js library to convert XML data to JSON format. Here's the example code:

import { parseStringPromise } from "xml2js";

export const searchDictionary = async (word) => {
    const url = process.env.REACT_APP_DICT_URL;
    const key = process.env.REACT_APP_DICT_KEY;
    const q = word;
    const translated = "y";
    const trans_lang = "1";
    const response = await fetch(`${url}?key=${key}&q=${q}&translated=${translated}&trans_lang=${trans_lang}`);
    const text = await response.text();
    const json = await parseStringPromise(text);
    console.log("Dictionary result: ", json);
    const wordObj = json.channel.item?.[0].sense?.[0];
    if (!wordObj) {
        return null;
    } else {
        const koreanWord = word;
        const koreanDefinition = wordObj.definition[0];
        const englishWord = wordObj.translation?.[0].trans_word[0];
        const englishDefinition = wordObj.translation?.[0].trans_dfn[0];

        return { koreanWord, koreanDefinition, englishWord, englishDefinition }
    }
};

This function retrieves word translations from the Korean Dictionary API, and we were able to use this in Definition.js (the definition popup modal) for our karaoke feature. Additionally, this enabled us to create a dictionary page where users can search for Korean words. This seamless integration was facilitated by the knowledge and experience we gained from previous lessons on the fetch API.

One of the exciting functionalities we added to the dictionary page is a bookmark feature. Users can now save words they want to review later by clicking on the "add to bookmark" button. Upon clicking, the user is redirected to a bookmark page where all saved words are displayed. We plan to further extend the bookmark feature for a more personalized and interactive learning experience.

Korean Dictionary API

The Korean Dictionary API is an open API that allows us to retrieve Korean words and their translations.

• Sign up to create a free API key: In order to use the API, you need to sign up and generate an API key. This key will be used in every request to authenticate your application.
• The API base URL: The base URL for this API is https://krdict.korean.go.kr/api/search.
• Request parameters: There are certain parameters that you need to pass in your API request:
  • key (API key): This is the key you received when you signed up.
  • q (query word): This is the Korean word that you want to search.
  • translated, trans_lang: These parameters define the language you want to translate the Korean word to.
• Return format: The response from the API comes in XML format. We'll need to convert this to JSON to use in our application (more on this later).
• CORS issue: During development, fetching information from our localhost was problematic due to CORS policy. This required us to download a Chrome extension called Allow CORS.

CORS

CORS, or Cross-Origin Resource Sharing, is a mechanism that allows resources on a webpage to be requested from another domain outside the domain from which the resource originated. It's a browser security feature that prevents a web page from making requests to a different domain than the one that served the web page.

The CORS issue often arises in development, and in our case, fetching data from the Korean Dictionary API to our localhost was problematic. We used the Allow CORS Chrome extension as a workaround for this issue during development.

What is XML

XML, or Extensible Markup Language, is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It's often used in web development and APIs to structure and transport data.

XML to JSON using an NPM library

As JSON is more easily consumed in a JavaScript application, we need to convert the XML data we get from the API into JSON. There are several NPM libraries that can help us with this, such as xml2js.