앱을 만들다 보면 복잡도가 증가하게 되어있는데, 이때 이벤트 관리 또한 유지보수가 힘든 부분 중 하나이다.이런 상황에서 이벤트 디스패처 패턴이 도움이 될 수 있다.Event Dispatcher 패턴이벤트 디스패처 패턴은 Publisher-Subscriber 구조를 기반으로 발행자와 구독자 사이에 Dispatcher를 두어 둘을 완전히 분리하는 설계 패턴을 말한다.Publisher: 이벤트를 발생시키는 주체Event Dispatcher: 이벤트를 수신하고, 등록된 리스너 목록을 보고 해당 이벤트를 전달Subscriber: 특정 이벤트를 구독하고, 해당 이벤트가 오면 콜백을 실행왜 사용하는건가?직접 A → B로 호출하는 경우 A, B 둘이 강하게 결합된다. 하지만 이벤트 디스패처 패턴을 활용하면 Publis..
Frontend
들어가기에 앞서.. 패키지 매니저란?개발에서 외부 라이브러리, 프레임워크 및 도구를 관리하는 도구다.의존성 관리, 버전 관리, 패키지 업데이트 등을 수행한다.1. npm(Node Package Manager)Node.js의 기본 패키지 매니저다. 가장 오래되었고 널리 쓰인다.package.json 파일을 통해 의존성을 관리한다. node_modules 폴더에 중첩 구조로 의존성을 설치한다.설치 속도가 yarn, pnpm에 비해 느리다. 이는 중첩 구조로 인한 중복 패키지 설치 때문이다.중첩 구조로 설치한다는 것이 단점인데, 중첩 구조란?각 패키지가 자신의 의존성을 자신의 node_modules 폴더 내에 설치하는 방식이다. 예를 들어,프로젝트/├── node_modules/│ ├── A/│ │ ..
들어가기에 앞서, 프론트엔드에 많은 양의 이미지를 저장하는 것은 유지보수가 어렵고, 권장되지 않습니다.많은 이미지를 수반한다면 CDN 서비스를 사용하는 것이 좋습니다.이 포스팅은 프론트엔드 서버를 사용하지 않는 정적 배포를 기준으로 작성합니다 !!1. 이미지 파일을 어떻게 관리할까?NextJS 환경에서 이미지 저장 경로는 크게 2종류로 나눌 수 있습니다.public 폴더src 폴더 하위 경로You can store static files, like images and fonts, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the b..
리액트의 조건부 렌더링 방식에는 여러가지가 있습니다.가장 많이 쓰이는 얼리 리턴, 삼항 연산자, 논리 AND 연산자(&&) 패턴을 정리했습니다.얼리 리턴 (Early Return)조건에 만족하면 즉시 컴포넌트를 반환합니다.export default function SingleSeat({ clusterUser, seatNumber,}: { clusterUser?: ActiveClusterUser; seatNumber: number;}) { const { user } = useUserStore(); if (!clusterUser) // 해당 Seat 컴포넌트에 전달받은 유저가 없다면 빈 자리를 리턴합니다. return ( {seatNumber} ..
JWT, access token, refresh token에 대한 설명은 생략합니다.평소처럼 비동기 API 콜을 사용하여 데이터를 받아오고 있었습니다.액세스 토큰이 손상, 만료될 경우를 대비해 axios 인터셉터에 만료 로직을 추가하여 관리하고 있는 상황이었는데..기존의 재발급 처리 방식axios.interceptors.response.use( async (response) => response, async (error) => { // API 요청 중 401 unauthorized 에러가 발생한 경우 (토큰 만료 등) if (error.response && error.response.status === 401) { try { // reissue 요청을 하고 실패한 요..
리액트의 useMemo 훅은 결과값을 저장해놓고 디펜던시 배열에 있는 값이 바뀌지 않는 한 재연산을 하지 않아도 되는, 캐싱 역할을 합니다. 실제로 useMemo를 프로덕션에 적용하여 볼까요?export default function AnnouncementItem({ announcementType, title, date, currDate, isLast,}: { announcementType: string; title: string; date: string; currDate: Date; isLast?: boolean;}) { // useMemo를 쓰지 않을 때 const diffTime = currDate.getTime() - new Date(date).getTime(); const ..
어느때부터 개발이 너무 편해졌다 싶었는데 ESLint가 적용되지 않고 있었습니다.다시 환경설정을 해보자 싶어 또 무한 구글링에 돌입하여 ESLint 공식 문서도 열심히 읽고, 블로그도 조사하였으나.. 아무것도 문제를 해결해주지 않았습니다. 크아아악~~제 문제는 다음과 같았습니다.터미널에서 lint를 실행했을 때는 잘 되지만, vscode에서만 적용되지 않음. (빨간 줄로 경고가 나타나지 않음)이 경우는 vscode만의 문제라고 보면 되니, 이 안에서 해결해야 합니다.워크 스페이스 설정, eslintrc 등을 고쳐보았지만 전혀 진전이 없던 찰나 vscode 하단의 OUTPUT 탭을 확인하여 ESLint의 출력을 볼 수가 있었는데, 다음과 같은 출력이 나오고 있었습니다.the language client r..
import MyComponent from "../../../../../components/MyComponent";import ADifferentFile from "../../../some/other/dir/ADifferentFile";import PageMeta from "@components/PageMeta";import RecentPostList from "@components/RecentPostList";import SocialCards from "@components/SocialCards";1. tsconfig 설정{ "compilerOptions": { ... "paths": { "@/*": ["./src/*"] }, ... }}tsconfig의 컴파일러 옵션..
