Next13 작년 10월에 Next13이 업데이트 될 때, 다들 '다시 배워야한다.' '맨날 업데이트 된다.' 이랬던 것 같은데 미루고 미루다가 Next 13 베타를 써보고 느낀 점을 기록해보고자 작성하게 되었다. (근데 tailwind를 곁들인...) [only for IntelliJ] tailwind defaultStyle 버그 IntelliJ 에디터에서 tailwindcss의 autocomplete가 적용되지 않는 버그이다. 물론 자동완성이 되지 않더라도 스타일은 적용되지만, margin, padding, text 등에 대한 spacing도 다르기도 하고, 자동완성이 안되는 것 때문에 매번 공식문서를 방문하는 것도 쉽지않다. 구글링을 해도 마땅한 이유가 나오지 않다가 몇 번의 셀프 테스트케이스를 만..

실제 사용을 위한 서비스들은 대부분 swr이나 react-query와 함께 비동기 통신을 묶어서 쓰는데 그 이유가 뭘까? 먼저 첫번째는 비동기 처리 상태에 따른 상태처리가 용이하다는 점이다. const Component = () => { const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState({}); const [dataError, setDataError] = useState('404'); //... } 일반적인 비동기 통신 처리 이후에는 사이드 이펙트 처리를 통해 무려 3개의 상태를 만들면서 성공했을 시의 데이터, 패칭이 끝났는지 확인, 에러가 났다면 에러의 종류 등을 각각 관리해줘야한다. 데이터 패칭 도구 ..

말로만 듣던 EC2에 프로젝트를 Next 프로젝트를 배포하는 여정을 기록해보려고 합니다. 제 프로젝트는 의도치 않게 모노레포로 구성이 되어있었기 때문에 추후 포스팅할 Jenkins를 사용한 배포 자동화에 대한 고민이나, EC2 인스턴스에서 프로젝트를 세팅하는 과정에서 경로와 관련된 처리가 필요하답니다! Next 프로젝트를 배포해보는 건 이번이 처음이었는데요. 배포에 앞서서 로컬에서 빌드했을 때 무슨 차이가 있는지 비교해보는 과정부터 시작해보겠습니다. 1. Next의 build 파일에는 index.html이 없다. Next 빌드 결과 webpack 빌드 결과물 Next가 SSR을 지원하기에 요청이 들어오면 그때서 html을 만들어 보낸다는 건 개념적으로 알았지만, 결국 엔트리포인트를 어디로 잡아야할까에 대..

mp3나 mp4같은 파일을 정적으로 넣어두고 사용할 때, output 경로를 잘 설정해줘야한다. 이런 설정은 기본적으로 next.config.js에서 해줘야하는데 일반 React와는 다른 점이 있어서 공유해보려고 한다. module과 webpack 관련 설정 내용이므로 custom.d.ts와 next.config.js를 수정하면서 대응할 수 있다. 1. 태그 사용법 먼저, DOM에서 음성파일을 사용하려면 audio 태그를 사용하면 된다. const MusicPlayer = () => { const audioRef = useRef(null); return ( ); } export default MusicPlayer; audio의 src 안에 정적 경로를 넣어주면 되는데, 상태로 관리하지 않고 ref를 사용..

릴리즈 목적의 프로젝트를 진행하다보면 검색 엔진 등 이점을 받아보기 위해 SSR을 도입하고 싶고, 그 중에서도 Next로 마이그레이션을 하고 싶어할 것 같다. 미루고 미루고 미루다가 이제야 Next로 마이그레이션 하면서 고민했던 프로세스를 공유해보려고 한다. 내 경우에는 CRA로 생성한 프로젝트가 아니라 웹팩으로 한땀한땀 바벨로 폴리필 해줬던 프로젝트여서 더 힘들었던 것 같은데 이 글이 나와 같이 막막한 사람들에게 도움이 되었으면 좋겠다는 마음이다. 0. react-dom 프로젝트 구성 먼저 마이그레이션 전 스택과 폴더 구조를 설명해야할 것 같다. 가장 신경써야할 부분이 번들러 관련된 부분일 것 같다. - 번들러: webpack - 상태관리: react-redux, reduxjs/toolkit - 비동기..

HOC를 사용할 때 가장 어려운 점은 HOC로 부터 내려받는 props가 아니라, 다른 로직을 위한 props를 받는 경우이다. (사실 HOC보다는 제네릭 사용으로 인해 생긴다고 생각한다.) 먼저, HOC를 위해 구현한 withLatestVersion.tsx를 보면서 어떻게 이 함수가 랩핑할 컴포넌트의 props를 추출하는 지 살펴보아야한다. // withLatestVersion.tsx import React, { useEffect, useState } from 'react'; import { DataState, LtsVersionType } from '../type/type'; import { useQuery } from '@apollo/client'; import { LOL_PATCH_VERSIONS..