개발일지

자바스크립트 없이 포트폴리오를 만들기로 했다 컨셉은 레트로 오락기! keyframes을 활용해 글씨 먹는 팩맨 완성두 개의 keyframes을 엮는 게 css만으로 하기 힘들었지만 나름 자연스럽게 된 거 같아 뿌듯하다세밀한 조정을 원할경우 js를 추가하는 것을 권장한다 속도와 위치 조정이 핵심이기 때문에 시간을 꽤 많이 뺏겨버렸다@keyframescss문법 중 하나로 동작을 단계별로 정의할 수 있고 간단하게 애니메이션을 구현할 수 있다 from to ( 0% 시작 => 100% 끝 )to로만 쓸 수도 있다 (100% 일 때) Animation 속성 animation-name : @keyframes 이름 animation-duration : 애니메이션 시작부터 마지막까지 지속시간animation-timin..

SCSS를 사용하려는 경우, SASS를 설치해야 한다 SCSS 파일은 브라우저에서 직접 사용할 수 없기 때문에, SCSS를 CSS로 컴파일하는 도구가 필요하다 SASS는 SCSS 파일을 CSS로 변환하는 컴파일러 역할을 하고 아래 기능들을 제공해 준다중첩 규칙: CSS에서는 지원하지 않는 규칙의 중첩 허용변수 사용: CSS 코드에서 변수 사용믹스인(Mixin): 재사용 가능한 스타일 조각 생성.확장 및 상속: 기존 클래스의 스타일을 다른 클래스에 상속 1. 프로젝트에 sass 설치하기npmyarnnpm install sass --save-devyarn add sass --dev2. SCSS 파일 생성, 작성하기컴파일할 내용이 있어야 하기 때문에 필수 파일이 생성만 되어 있는 상태에서는 컴파일을 수행할 S..

시간 복잡도와 공간 복잡도복잡도란?알고리즘의 성능과 효율성을 나타내는 척도로 시간 복잡도와 공간 복잡도로 나뉜다알고리즘이 주어진 크기의 입력을 기준으로 수행시간과 사용공간이 얼마나 되는지 객관적으로 비교할 수 있는 기준을 제시한다복잡도를 나타내는 방법은 점근 표기법으로 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..