전체 글

리액트의 조건부 렌더링 방식에는 여러가지가 있습니다.가장 많이 쓰이는 얼리 리턴, 삼항 연산자, 논리 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).getTi..

어느때부터 개발이 너무 편해졌다 싶었는데 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의 컴파일러 옵션..

이전에 팀원분들과 프로젝트 구조에 관해 논의하던 중 이런 이야기가 나왔습니다.백엔드: 그런데 사실 저는 프론트 서버가 왜 필요한지 모르겠습니다.어차피 백엔드 서버가 있는데 왜 프론트 서버가 따로 필요한건가요?프론트 서버를 거쳐서 백엔드 서버에 접근할 거라면 애초에 백엔드 서버에 접근하는게 더 빠르지 않나요?저는 당시 쉽사리 답변을 해드리지 못했습니다. 저 말만 놓고 보면 틀린 말이 아니니까요.그럼 결국 프론트엔드 서버는 필요 없는걸까요? 1. 전통적인 프론트엔드 개발 방식 (정적 배포)근본적으로 웹 프론트엔드는 HTML, JS, CSS의 세 가지 요소로 이루어져있습니다.브라우저는 위 요소만을 가지고 웹을 구성하게 되죠. 전통적인 프론트엔드의 배포 과정은 아래와 같습니다.리액트 등의 라이브러리, 프레임워크..

ES6에서 비동기 처리를 위한 패턴으로 프로미스를 도입한다.이는 전통적 콜백 패턴이 가진 단점을 보완, 비동기 처리 시점을 명확히 표현할 수 있다는 장점을 가진다.1. 비동기 처리를 위한 콜백 패턴의 단점전통적인 비동기 처리의 예시를 보자.const get = (url, successCallback, failureCallback) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // todos = JSON.parse(xhr.response); successCallback(JSON.parse(xhr.response)); } els..

JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.또한 싱글 스레드 방식으로 동작하기에, 처리에 시간이 걸리는 작업을 수행하는 경우 블로킹 현상이 발생한다.비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용한다.비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 저하시키고, 비동기 처리 중 발생한 예외가 곤란하며,여러 비동기를 한 번에 처리하는 데 한계가 있다. 이런 것들에 대해선 프로미스에서 살펴보자.1. 이벤트 루프와 태스크 큐JS의 동시성을 지원하는 것이 이벤트 루프이다. 브라우저 내장 기능 중 하나이다.구글 V8 엔진을 비롯한 대부분의 JS 엔진은 2개의 영역으로 구분 가능하다.콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행..