[Next.js] 전역 객체, .env 타입 설정하기

😥발생한 문제? "use client"; import { useEffect } from "react"; const KakaoMap = () => { useEffect(() => { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API}&autoload=false`; document.body.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { const containe..

• format_list_bulleted Front End/Next
• · 2023. 10. 9.
• textsms

[개발 상식] 다국어가 포함된 페이지를 제공하는 방식

웹 사이트를 다국어 페이지로 제공하는 방식에는 다양한 방법이 있습니다. 😀1. 다국어 컨텐츠를 일일이 번역, 제공 각 언어별로 웹 페이지의 컨텐츠를 번역하여 제공하는 방식입니다. 각 페이지마다 해당 언어의 텍스트가 포함되는 방식으로 예를 들면 “kr” 폴더에는 한국어, “en”폴더에는 영어 버전의 웹 페이지 파일이 들어가 있습니다. 하지만 일일이 번역하기 때문에 비용과 시간이 많이 들고, 여러 언어로 된 컨텐츠를 일관성 있게 유지하기가 힘듭니다. 😀2. URL 언어 서브디렉터리 각 언어의 웹 페이지를 서브디렉터리에 저장하는 방식입니다. 각 언어별로 별도의 서브 디렉터리를 생성하고 해당 언어의 컨텐츠를 디렉터리에 배치합니다. 예를 들어“/en/”은 영어, “/kr/”은 한국어 디렉터리에 배치합니다. 이는 ..

• format_list_bulleted 개발 상식
• · 2023. 10. 8.
• textsms

[NEXT JS] 외부 JS파일 사용하기

이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다. 아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다. 위 코드의 script를 보면 다음과 같습니다. 이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다. 그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요? 😎NextJS에서 제공하는 Script를 이용한다 import Script from 'next/script' export default function Dashboard() { return ( ) } Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 J..

• format_list_bulleted Front End/Next
• · 2023. 9. 29.
• textsms

[개발 상식] XML과 XHTML

XML과 XHTML은 모두 마크업 언어의 종류로, 데이터를 구조화하고 표현하는데 사용되는 형식입니다. 🤔XML (Extensible Markup Language) XML은 데이터를 저장하고 전송하기 위한 언어로 설계되었습니다. 주로 다양한 응용 프로그램 간 데이터 교환을 위해 사용됩니다. John Doe 30 New York 🖊️XML은 다음과 같은 특징을 가지고 있습니다. 사용자가 자신만의 태그를 정의할 수 있어 확장성이 뛰어납니다. 문서의 구조를 정의하고 데이터를 계층 구조로 표현할 수 있습니다. 텍스트 데이터를 저장하기 위한 일반적인 형식입니다. 플랫폼 및 프로그래밍 언어에 독립적이며, 데이터 교환에 유용합니다. 불필요한 데이터 양이 발생할 수 있어 파일 크기가 커질 수 있습니다. 구문 검사 및 처..

• format_list_bulleted 개발 상식
• · 2023. 9. 25.
• textsms

Jest 자바스크립트 간단한 사용법

GitHub - lurgi/jestprac: Jest를 배워봅시다 Jest를 배워봅시다. Contribute to lurgi/jestprac development by creating an account on GitHub. github.com Jest Basic jest사용시 유용한 것 npm i @types/jest 타입 설치 가능 단일 파일 테스트 하는 법 pm i -g jest -cli jest 파일명 or jest 파일명.test.js 단일 테스트만 실행 test.only(description, callback)으로 실행 단일 테스트 스킵 test.skip(description, callback)으로 실행 테스트 전 후 작업 beforeEach() : 각 테스트(test()) 실행 이전 실행 af..

• format_list_bulleted Front End/etc
• · 2023. 9. 16.
• textsms

[개발상식] HTML의 doctype, 표준모드(standards mode)와 쿽스모드(quirks mode)

🤔Doctype이 무엇인가요? Doctype은 Document Type을 의미하는 것으로 HTML 파일의 상단에 선언할 수 있습니다. 위 코드는 html5을 나타내어 브라우저는 이에 맞는 동작을 하게 됩니다. 이를 통해 브라우저 모드를 설정할 수도 있습니다. 브라우저 모드에는 Quirks 모드와 Standards 모드가 있습니다. 🤔Quirks 모드 이 모드는 Doctype이 없거나 오래된 Doctype일 때 활성화 됩니다. 오래된 Doctype의 예시는 다음과 같습니다 오래된 Doctype의 경우 html5 표준과 다른 규칙을 따르기 때문에 이를 통해 이전 버전의 규칙을 따를 수 있게 됩니다. 🤔Standards 모드 표준 모드로 다음과 같이 선언합니다 최신 웹 개발 환경의 경우 스탠다드 모드를 활성화..

• format_list_bulleted 개발 상식
• · 2023. 9. 12.
• textsms