전체 글

🌵 문제 상황사용자가 특정 유저를 클릭하면 'https://es-cape-codeit.vercel.app/user/616'와 같이 마지막에 유저 아이디가 포함된 url로 이동합니다.해당 페이지는 유저의 프로필을 볼 수 있는 페이지입니다. 현재 유저 페이지의 url에서 유저 아이디를 가져와 if문으로 아이디의 유효성을 검사한 뒤, 유효하지 않다면 에러를 띄워 홈 화면으로 돌아가도록 구현하려고 하였습니다. 따라서 생각의 흐름과 동일하게 페이지로 이동했을 때 바로 아이디의 유효성을 검사하도록 if문을 가장 위에 두고,이후에 컴포넌트 렌더링에 필요한 코드들을 배치했습니다.import { useEffect } from 'react'import { useRouter } from 'next/router'export..

취준 기간 동안 하루 일과 시작 전에 뇌를 말랑하게 할 겸, 알고리즘 문제를 최소 한 문제씩 꾸준히 풀어보기로 결심하였습니다.그동안은 문제를 띄엄띄엄 풀고 프로그래머스에만 코드를 제출했지만,동기부여를 위해 깃허브와 프로그래머스를 연결하여 자동으로 코드가 커밋되게 하고 프로필에 보이는 잔디를 관리해 볼 계획입니다. 🌱 설치 및 연동하기1) 크롬에서 확장 프로그램 설치크롬 웹 스토어에서 '백준허브(BaekjoonHub)'라는 이름의 확장 프로그램을 설치해줍니다. 2) 깃허브 레포지토리 생성내 깃허브에서 코드를 저장할 새로운 레포지토리를 자유롭게 생성해줍니다.저는 'Programmers_Problem_Solving'이라는 이름으로 생성하였습니다. 3) 깃허브 연동하기페이지 오른쪽 상단에 위치한 퍼즐 아이콘(..

🍀 사용 목적디바운싱과 쓰로틀링은 공통적으로사용자가 특정 이벤트를 연속적으로 발생시킬 때, 이를 제어하여 서버나 브라우저의 부하를 줄이는 목적을 가지고 있습니다.그러나 두 방법의 동작 방식과 사용되는 상황에서의 차이가 존재합니다.아래에서 자세히 살펴보겠습니다. 🍀 디바운싱(debouncing)디바운싱이란 빈번하게 발생하는 이벤트를 특정한 시점 이후에 한 번만 실행시키는 최적화 방법입니다.연이어 함수가 호출된다면 마지막(또는 처음)에 호출된 함수만 실행됩니다.따라서 마지막(또는 처음)에 실행되는 함수를 제외한 나머지 이벤트들은 무시합니다.디바운싱의 목적은 이벤트가 호출되는 빈도를 줄여 성능을 최적화시키는 것입니다. 사용자가 어떤 버튼을 연속적으로 클릭할 때 버튼을 클릭하는 모든 이벤트를 발생시키는 것이..

🔖 메타 데이터(metadata)란메타데이터(metadata)란 '데이터에 대한 데이터(정보)'라는 의미로, 어떤 데이터를 설명하고 관리하기 위해 사용됩니다.원본 데이터의 특성, 속성, 구조, 유형 등에 대한 정보를 담고 있습니다.- 출처 사이트메타 데이터에는 어떤 목적을 위한 정보가 포함되느냐에 따라 다양한 종류가 존재합니다.아래는 메타 데이터의 몇 가지 예시입니다.기술적 메타 데이터: 파일의 형식, 크기, 생성일 등관리 메타 데이터: 데이터 소유자, 접근 권한, 보안 설정 등서술적 메타 데이터: 데이터에 대한 내용인 제목, 설명, 키워드 등메타 데이터는 사용자가 아닌 검색 엔진에게 웹 페이지의 정보를 제공하기 위해 사용되는 데이터이므로검색 엔진이 해당 웹 페이지의 주제와 내용을 잘 파악하는 데 중요..

🌱 문제 상황마이페이지에서 내가 '리뷰 남긴 테마'와 '좋아요 누른 테마'로 구성된 탭을 눌렀을 때, 눌린 탭별로 테마 리스트가 업데이트되어야 합니다.그러나 테스트 도중, 아래의 움짤처럼 한쪽 탭에 아무 값도 존재하지 않을 때(아래는 리뷰 남긴 테마가 0개이고, 좋아요 누른 테마가 2개인 경우), 한쪽 탭에 해당하는 리스트 값이 다른 탭에 남아있는 오류를 발견하였습니다.기존에는 아래의 코드처럼 productMenuContents라는 배열로 메뉴 탭을 정의하고, 현재 선택된 메뉴 탭의 id값을 상태로 관리하였습니다.그리고 메뉴 탭을 나타내는 버튼()을 클릭할 때마다 onClick 이벤트로 탭 id 상태값을 변화시키고,useInfiniteQuery를 포함하는 파일에 쿼리키를 위한 파라미터로 메뉴 탭의 타입..

🪴 변수와 let변수(variable)란 데이터를 저장할 때 사용하는 '이름이 붙은 저장소'입니다. 변수로 선언된 값은 언제든지 변화할 수 있습니다.자바스크립트에서는 'let'이라는 키워드를 사용하여 변수를 선언합니다. - 출처 사이트자바스크립트에서 변수를 선언할 때 지켜야 할 몇 가지 제약사항이 존재합니다.변수명에는 [문자 | 숫자 | 기호 $, _]만 들어갈 수 있습니다.변수명의 첫 글자에는 숫자가 올 수 없습니다.자바스크립트에서 이미 사용 중인 예약어(reserved word)는 변수명으로 사용할 수 없습니다. 아래는 실제 프로젝트에서 변수를 사용했던 예시입니다.선택된 옵션값(selectedOption)에 따라 정렬 방식(orderBy)이 정해집니다.let orderBy = '';if (selec..