개발일지

시간 복잡도와 공간 복잡도복잡도란?알고리즘의 성능과 효율성을 나타내는 척도로 시간 복잡도와 공간 복잡도로 나뉜다알고리즘이 주어진 크기의 입력을 기준으로 수행시간과 사용공간이 얼마나 되는지 객관적으로 비교할 수 있는 기준을 제시한다복잡도를 나타내는 방법은 점근 표기법으로 O(빅오), Ω(오메가), Θ(세타) 등이 있고, 주로 빅오와 세타 표기법이 많이 사용된다.정리하면 복잡도란 알고리즘의 효율성을 판단하는 척도이다 시간 복잡도연산에 걸리는 시간이 아닌 연산의 횟수를 나타낸다왜 시간이 아닌 횟수를 측정하는가? 환경에 따라 결과가 다르게 나오기 때문단순히 특정 입력에 대해 실행되는 연산의 횟수만 보는 게 아닌, 입력의 크기가 증가함에 따라 실행되는 연산의 횟수가 얼마나 증가하는지를 나타낸 것.시간복잡도를 표기..

var , let , constthis클로저Rest APIRest  Ful APIAxios, Fetch, Promise, TanStack Query(React Query)Axios,  React Query 차이브라우저 렌더링 과정주소창에 naver.com입력 시 어떤 일이 일어나는가쿠키랑 세션 차이토큰이란쓰로틀링 디바운싱var , let , constvarvar는 es6 이전 버전에서 변수 선언 시 사용되었다전역 또는 함수 스코프를 가지며 TDZ(Temporal Dead Zone)의 영향을 받지 않는다함수 내부에 선언된 var는 함수 스코프(지역변수)를 가지기 때문에 함수 내부에서만 사용 가능하지만 if, for 내부에 선언된 변수는 블록을 무시하고 함수 또는 전역 스코프를 가지게 된다외부에 선언된 변수..

root에 DockerFile 생성// Dockerfile# 1. 베이스 이미지 설정 (Node.js 18 사용)FROM node:18-alpine# 2. 작업 디렉토리를 설정WORKDIR /app# 3. 의존성 파일을 복사하고 설치COPY package.json yarn.lock ./RUN yarn# 4. 환경 변수 파일을 복사 or env를 compose로 했을 경우는 제외COPY .env.local .env.local# 4. 나머지 프로젝트 파일을 복사COPY . .# 5. start.sh 파일 복사 및 실행 권한 부여COPY start.sh /app/start.shRUN chmod +x /app/start.sh# 6. 빌드RUN yarn build# 7. 포트 설정EXPOSE 3000 4000# ..

서버 요청 api// 내역 추가export const PostHistory = async (newHistory: History) => { try { const { data } = await axiosApi.post("/history", newHistory); return data; } catch (error) { console.error(error); throw error; }};타입리스트는 리스트 타입을 사용하고등록은 등록타입을 사용하는데뮤테이트로 갱신하는 건 리스트니까 리스트 타입을 받아야 한다export type HistoryList = { id: number; name: string; price: number; phone_number: string; descri..

모달 스토어import { create } from "zustand";type ModalStore = { isModal: boolean; // 모달의 열림/닫힘 상태 text: string; // 모달에 표시할 텍스트 confirmButtonText: string; // 확인 버튼에 표시할 텍스트 cancelButtonText: string; // 취소 버튼에 표시할 텍스트 (선택 사항) path?: string; // (선택 사항) 모달과 관련된 경로 isConfirm: boolean; // 확인이 필요한 경우(버튼 2개일 때) onConfirmCallback?: () => void; // 초기화 openModal: ( text: string, confirmButtonText:..

export const onTimeFormatHandler = (time: string): string => { if (!time) return ""; // 시간과 분을 분리 const [hoursStr, minutes] = time.split(":"); // 문자열을 숫자로 변환 const hours = Number(hoursStr); // 오후/오전 구분 및 12시간 형식으로 변환 const period = hours >= 12 ? "오후" : "오전"; const adjustedHours = hours % 12 || 12; // 0을 12로 변환 // 포맷된 시간 문자열 반환 return `${period} ${adjustedHours}:${minutes}`;};1. split 메..

e.target.showPicker()} // Focus 시 달력 표시 className="w-40 cursor-pointer text-base font-light" {...register("end_date")}/> onFocus={(e) => e.target.showPicker()}onFocus 입력필드가 포커스될때 호출된다showPicker 달력팝업(선택기)가 활성화되는 html API객체 https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker HTMLInputElement: showPicker() method - Web APIs | MDNThe HTMLInputElement.showPicker() method di..

각 토큰의 역할access token실제 유저가 로그인되어 있는지 확인하는 용도마이페이지 > 닉네임 변경처럼 ‘인가’가 필요할 때, 헤더에 포함시켜서 백엔드에 ‘내가 누군지’를 알려주는 용도refresh tokenaccess token을 재발급받아야 하는 상황에서 쓰이는 용도순서[FE] 홈페이지에 유저가 접속 ( 로그인상태가 아닌 경우)[FE] 유저가 로그인 페이지로 이동[FE] 이메일, 비밀번호 → 로그인 → 백엔드에 로그인 요청[BE] 이메일, 비밀번호를 request body에서 찾아서 DB를 검색[BE] 처리유저정보 존재 : 정상 return응답값으로 access token을 준다.쿠키에 httponly, secure 세팅을 해서 refresh token을 세팅한다.유저정보 없음 : 오류 retu..

쥬스탄드에 값을 저장하기 위해 함수 가져오는 방법 두 가지 차이점 const { loginTokenHandler } = useAuthStore(); 첫 번째 방식useAuthStore에서 loginTokenHandler을 구조분해 할당을 통해 가져온다loginTokenHandler 함수를 다 가져오는 것. 이 방식은 전체 객체와 상태 업데이트 함수가 필요할 때 유용하다. const { loginTokenHandler } = useAuthStore( (state) => state.loginTokenHandler, )두 번째 방식useAuthStore에서 특정 상태나 상태 업데이트 함수를 선택적으로 가져온다state 인자는 useAuthStore에 의해 관리되는 전체 상태 객체이고 여기서 필요한..

인턴 투입되기 전 온보딩으로 간단한 회원가입과 로그인, todoList 과제를 해야 한다백엔드가 따로 없기 때문에  json을 사용하기로 했다1. 설치json-server 버전은 꼭 0.17.4를 사용할 것 json-server , json-server-auth  한 번에 설치하는 명령어   yarn add json-server@0.17.4 json-server-authnpm install json-server @0.17.4 json-server-auth  참고용 package.json 파일스크립트 부분에 "json": "json-server-auth --watch db.json --port 8000" 넣어주기{  "name": "login-project",  "private": true,  "vers..