프론트엔드 (43) Javascript VS Typescript 🧐 Typescript 란?자바스크립트 대용품 같은 언어로, 자바스크립트 문법을 그대로 이용하지만 타입을 지정하여 쓸 수 있는 일종의 자바스크립트 업그레이드 버전이라 할 수 있다.JavascriptTypescript.js 확장자.ts 확장자동적타입 언어정적타입 언어인터프리터 언어컴파일 언어독립적으로 사용 가능자바스크립트에 의존적임좀 더 유연함좀 더 엄격함작고 간단한 프로젝트에 적합함복잡한 프로젝트, 협업에 적합함🫨 동적타입 언어👉🏽 예측불가능, 직관적이지 않음, 너무 관대함1 + true;function multiply( a, b ) { return a * b;}multiply();muliply(’hi’, true);👉🏽 즉, 개발자의 실수로부터 보호하지 못한다!👉🏽 너무 관대하고 자유.. Next.js 13 정적/동적 OpenGraph 만들기 🌈 동적 og tag imageNext.js 13버전 이후부터 opengraph-image.tsx라는 예약어 파일이 생겼다.공식문서 대로 잘 따라하면, og tag image를 손쉽게 생성할 수 있다.🎨opengraph-image 이렇게 하면, SNS같은 곳에 url을 전송할 경우에 페이지별로 각 다른 미리보기 이미지를 생성해서 보여줄 수 있게 된다.// 1. 동적 og tag image를 생성할 폴더 아래에 opengraph-image.tsx 파일을 생성한다.// src/app/detail/[id]/opengraph-image.tsx import { ImageResponse } from 'next/server'// 2. ImageResponse를 import한다.export default async.. Next.js 블로그 동적 사이트맵 만들기 Next.js 13버전 이후로 app디렉토리 내에 sitemap.ts라는 예약어 파일을 만들면, 빌드 시점에 미리 sitemap을 생성해준다.블로그처럼 게시글을 계속해서 올릴 경우, 사이트맵에 들어갈 내용이 많을 경우에 sitemap.ts파일 하나를 만들어두면 아주 손쉽게 sitemap.xml을 생성할 수 있으며 nextjs에서는 그 방법 또한 매우 간단하다.1. sitemap.ts 파일 생성app폴더 내에 sitemap.ts 파일을 만들고, sitemap에 들어가야할 리스트를 return한다.나의 경우 tag/ 이하 url과 detail/ 이하 url들을 동적으로 구현하였다.방법은 아래 코드를 보면 알겠지만, 아주 간단히도.. sitemap을 생성할 리스트를 받아와서 넣어주면 끝이다.import { P.. TUI Editor로 작성한 포스팅에 TOC 만들기 🐰 구현방법본 블로그 게시글은 ToastUI의 에디터로 작성을 하고 html로 변환하여 DB에 저장하고 있다.TOC를 구현하려면 heading요소를 파싱해서 목록을 만들고, 각 요소의 id값을 넣어줘서 해당 heading영역으로 이동하도록 해야하는데, ToastUI 에디터로 html을 변환할 때는 각 head에 id값을 넣어주기가 힘들어서 detail화면에서 html을 뿌리기 전에 헤딩요소만 파싱해서 적절한 id값을 넣어 주는 방식으로 구현하였다.1. heading Element에 id값 넣어주기jsdom으로 document를 받아와서 heading요소(나의 경우는 어차피 h3까지만 쓸 것 같아서 h1, h2, h3만 가져옴)를 파싱하여 순서대로 id값을 넣어주었다.// detail/page.tsxco.. [에디터2] TUI Editor에 이미지 업로드 시 firebase Storage 이용하기 ToastUI Editor 이미지 업로드toastUI에서 이미지를 추가하면, 아래와 같이 base64 인코딩된 문자열로 업로드되고, 스크롤을 보면 알겠지만 그 길이가 어마어마하며, 이상태로 DB에 저장되게 된다.나는 몽고디비 무료버전을 사용하고 있기 때문에 이미지를 별도의 서버에 저장하고, 경로만 받아오도록 작업했다.firebase는 이전에 개인 포트폴리오 작업 시에 사용해본 적이 있던터라, 파이어베이스 Storage를 이미지서버로 사용하였다.Firebase 스토리지에 이미지 업로드하기🔥 firebase 스토리지 생성 및 설정1. 🔥 Firebase 문서에 따라 신규 프로젝트를 생성하고, storage를 만든다.2. firebase 설치// yarn 설치yarn add firebase// npm 설치.. [에디터1] Next.js 블로그에 ToastUI Editor 장착하기 본 블로그를 처음 만들 때는 mdx파일로 포스팅을 하려하였으나, 이전 블로그 때 매번 편집기를 열어 작성하고 배포하는 것이 귀찮았어서 Editor를 달고자 마음먹었다.여러 에디터들을 비교해보았는데 UI가 제일 내스타일이어서(어차피 나만 볼 페이지지만) ToastUI의 에디터를 선택하였다.1. 설치🔗 toast-ui/react-editor// yarn 설치yarn add @toast-ui/editor @toast-ui/react-editor// npm 설치npm i --save @toast-ui/editor @toast-ui/react-editor2. 에디터 컴포넌트 생성1. toolbar 설정옵션은 아래와 같고, 이 중 쓸 것만 넣어주면 된다.toolbarItems: [ ['heading', 'b.. Nextjs블로그에 Utterances댓글 달고 다크모드 적용하기 블로그에 댓글기능을 추가하고 싶어서 알아보던 중, 깃헙의 utterances를 사용했다.이유는 깃헙에 로그인을 해야 댓글을 달 수 있고, 마크다운을 사용할 수 있고, 직접 구현하지 않고 삽입해서 바로 사용가능하기 때문이다.Create Repository & Install Utterances우선 댓글용 레포지터리를 새로 생성한 뒤,Install Utterances에서 앱을 설치하고 새로 생성한 레포지터리를 연결한다.그럼 아래 스크립트가 생성된다.Comment 컴포넌트 생성리액트는 xss보안 이슈 때문에 위 스크립트가 적용된 컴포넌트를 생성해줘야한다.import React, { useEffect } from "react"const COMMENTS_ID = 'comments-container';export d.. 1분만에 Nextjs에서 다크모드 구현하기 (next-themes + tailwindCSS) Nextjs에서 다크모드 구현하기본 블로그는 next-themes(next-themes) + tailwindCSS를 사용하여 다크모드가 구현되어 있고, 그 방법이 매우 간편하여 소개하고자 한다.next-themesnext-thems설치$ npm install next-themes or$ yarn add next-themesnext-themes 사용Nextjs의 layout 파일에서 'use client'를 사용하고 있을 경우, 공식문서 그대로 컴포넌트를 ThemeProvider로 감싸주면 된다.// layout.tsximport { ThemeProvider } from 'next-themes'function MyApp({ Component, pageProps }) { return ( .. 이전 1 2 3 4 5 6 다음
