Next.js app router 마이그레이션 전환하기

저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.

메이플 헬퍼 기능 기획

오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다.

Element previously highlighted

이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다.

Next.js Form 구성 요소

이번에 블로그를 Next.js로 마이그레이션 하면서 `Form`를 유용하게 사용해 사용방법을 공유하려 합니다.

2025년 블로그 리펙토링 회고록

## 목표

2025년 추가된 HTML, CSS 기능

2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다.

tsx파일을 리드미파일로 바꾸기

오늘은 개발 블로그를 리뉴얼 하는 과정에서 tsx파일을 리드미파일로 변환했던 작업이 있어 이 경험을 공유하려고 합니다.

메이플 헬퍼 SEO 개선하기

서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다.

Tailwind CSS 반응형 레이아웃 만들기

이전에 메이플 헬퍼 서비스에 Tailwind CSS를 이용해 반응형 레이아웃을 적용한 과정을 공유하려 합니다.

메이플 헬퍼 배포 회고

안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다.

메이플 헬퍼 - 3

메이플에는 제네시스 무기 해방이라는 엔드 컨텐츠가 있습니다.

코드 하이라이팅 highlight.js 적용하기

블로그 글을 작성하다 보면 코드 블록을 사용할 때가 있는데 코드 하이라이팅이 되는

Prototype 이해하기

자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다.

JavaScript의 reducer와 sort 직접 구현하며 배운 것들

최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며

자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유

문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까?

인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리

메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해

메이플 헬퍼 기획 - 2

비동기 작업 동시 요청

오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다.

메이플 헬퍼 기획 - 1

저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의

피그마 사용법

그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다.

require와 import의 차이점

라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩

클로저란 무엇인가?

오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다.

타입스크립트 정리 - 2

저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데

타입스크립트 정리

타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아

Tailwind CSS 사용법


next.js의 데이터 패칭

next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다.

next.js의 Hydration

Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다.

브라우저 렌더링 과정

저번주에는 웹의 동작방식에 대해 알아보았으니 오늘은 브라우저 렌더링 과정에 대해 알아보려 합니다.

웹의 동작 방식

오늘은 어렴풋이 알고 있었던 웹의 동작 방식에 대해 올바르게 알고 넘어가기 위해 글을 작성합니다.

서버리스 개념

요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중

2024 HTML 변경사항

이미 6월 말이 되어버렸지만 문뜩 2024년 HTML과 CSS 변경사항이 궁금해져 글을 작성해 보려 합니다.

마크다운 문법을 알아보자

자바스크립트의 값과 레퍼런스

오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다.

HTTP 응답 코드 종류

라이브 쳇 개발을 하며 HTTP 응답과 HTTP 응답 코드에 대해 궁금해져 이 글을 작성합니다.

데이터 시각화 차트 라이브러리 사용하기

라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다.

EC2 인스턴스 서버 환경 구성하기 - 2

이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다.

EC2 인스턴스 서버 환경 구성하기 - 1

이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다.

CORS란?

Express를 이용해 백엔드를 개발하던 중 CORS에러가 발생하게 되었습니다. cors 라이브러리를 이용해 문제를 해결했지만 이 cors가 무엇인지 또 어떻게 해결해야 하는지를 기록하려고 합니다. CORS를 알기 이전에 Same-Origin정책과 Cross-Origin에 대해서 알아야 하는데 Same-Origin은 웹 보안 모델에서 같은 Origin에서 제공됨을 의미합니다. 반대로 Cross-Origin는 서로 다른 출처임을 의미합니다.

Express란 무엇인가?

Express는 Node.js에서 가장 인기 있는 웹 애플리케이션 프레임워크로 HTTP 요청 및 응답을 처리하는데 필요한 많은 기능들을 이용해 추상화된 API를 제공할 수 있습니다.

Socket.io Namespace & Room 기능 이해하기

Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다.

Socket.io에 대해서

## Socket.io에 대해서

Socket통신

## Socket 통신

Next 앱 라우팅과 페이지 라우팅

React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다.

Next 이미지 최적화

Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다.

웹폰트 최적화

## 웹 폰트가 동작하는 방법

프론트엔드 성능 측정

## 웹 성능이란

백준 25206번 알고리즘 [node.js]

discord.js로 봇을 만들어보자 - 5

## CSR 웹 사이트 크롤링

discord.js로 봇을 만들어보자 - 4

얼마전에 메이플 공식 api가 업데이트 됐다고 해서 디스코드 봇을 업데이트하기로 했다. 그래서 메이플 공식 api사용법과 이번에 추가한 내용을 블로그에 담으려 한다.

node 버전관리 nvm

## NVM 모듈

discord.js로 봇을 만들어보자 - 3

## 디스코드 봇 호스팅하기

discord.js로 봇을 만들어보자 - 2

## 봇 개발

프론트엔드 기술면접 정리 - 2

## Http

프론트엔드 기술면접 정리 - 1

앞으로의 기술면접을 대비해 그동안 공부했던걸 한번 정리해보려 한다.

discord.js로 봇을 만들어보자

침플레닛 회고록

## 팀프로젝트 회고록

TypeScript 환경에서 createContext 사용하기

최근 타입스크립트 환경에서 creactContext를 사용하다 아래와 같은 에러가 발생해 createContext 사용방법과 해결방법을 정리해보려 한다.

타입스크립트 타입 추론

## 타입추론

코드 포멧팅 prettier

## 코드 포멧터 Prettier

react에서 addEventListener와 state

## 문제점

npm ERR! Cannot read properties of null (reading 'edgesOut')

최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다.

타입스크립트 제너릭

## 제너릭이란?

타입스크립트 커스텀 타입

## 커스텀 타입이란?

타입스크립트 인터페이스

타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다.

타입스크립트 타입 종류

타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다.

referrer 외부 링크 금지 이미지

팀프로젝트를 진행하던 도중 외부에서 불러온 이미지가 로드되지 않고 404를 반환하는 이슈가 있었다. 404를 반환한 이유를 알아보니 네이버에서 이미지를 가져올 때 보안에 관련된 이유로 404를 반환하는 것 이였다. 반환 하는 이유는 Referer 체크로 외부 링크를 금지하여 404를 반환 하는 것이다. 이를 해결 할 수 있는 방법으로는 이미지에 (referrerpolicy="no-referrer")속성을 추가해주면 된다.

무한 스크롤 구현하기 (Intersection observer API)

팀프로젝트를 진행하면서 무한스크롤을 이용해서 게시글들을 보여주기로 했다. 페이지네이션이 아닌 무한 스크롤을 선택한 이유는 모바일 환경 지원이 이유이기도 하다. 무한 스크롤을 만들어 본 적이 없어 어떻게 만들어야 하나 찾아보던 중 세 가지 방법으로 만들 수 있다고 했다. 첫번째는 스크롤 이벤트 헨들러를 이용한 방법이고 두번째는 Debounce 와 Throttle를 이용한 방법 마지막으로 Intersection Observer API를 이용하는 방법이다. 각각의 방법마다 장단점이 존재하지만 나는 Intersection Observer API를 이용해 구현하는 방법을 선택했다. 그 이유와 사용방법에 대해 기술하려 한다.

yaml파일 문법

## yaml이란?

React 커스텀 Hook 만들기

리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다.

자바스크립트 반복문

## 반복문의 종류

Symbol에 대해서

Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다.

package.json에 대해서

## package.json이란?

npm vs yarn

## npm

HTTP/HTTPS의 개념

## HTTP/HTTPS란?

Recoil에 대해 알아보자

개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다.

ci/cd에 대해 알아보자

## ci/cd에 대해 알아보자

7계층에 대해 알아보자

## 7계층이란?

팀프로젝트 기록 - 1

## 시작 계기

Jsdoc주석에 대해서 알아보자

JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다.

Axios를 배워보자

## Axios란?

RESTful이란?

## RESTful이란?

display Grid를 배워보자

gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.

react-router에 대해서 알아보자

## react-router란?

HTML Sementic Tag란?

## Sementic Tag란?

styled-component를 사용해보자

react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화로 유지보수가 쉬워지고 재사용성이 올라간다.

styled-component 전역 스타일링에 대해 알아보자

이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다.

클립보드를 이용하여 텍스트를 복사하기

텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다

백준 1712번 알고리즘 [node.js]

백준 2292번 알고리즘 [node.js]

백준 4344번 알고리즘 [node.js]

React-router 404 not found

## 문제발생

useEffect 무한루프

이 블로그를 만들면서 useEffect를 사용했는데 렌더링이 계속 일어나 사이트가 다운됐었다

Fragment를 알아보자

리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다.