Juni_Front End

.env파일을 .gitignore에 선언을 해뒀음에도 git repository에 보이는 현상이 발생하는 경우가 있다. 이유는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다. git rm .env --cached 그리고 위에서 입력한 rm .env --cached 명령어를 통해서는 로컬에 있는 파일이 지워지지 않으니 걱정할 필요 없다. 캐시 지우고 > 커밋하고 > 푸시까지 완료해야 원격 저장소의 .env 파일이 제거 된다.

이미지로더(Image loader)에서의 캐시 전략은 이미지를 효율적으로 로드하고 표시하기 위한 전략을 말한다. 이미지 로딩과 관련된 주요 목표는 페이지 성능을 향상시키고 사용자 경험을 최적화하는 것이다. 1. 브라우저 캐싱 활용 브라우저는 이미지를 자동으로 캐시한다. 따라서 이미지를 다운로드하고 나중에 동일한 이미지를 요청할 때 다시 다운로드하지 않고 캐시된 이미지를 사용 한다. 이미지로더에서는 이 기본 브라우저 캐싱을 활용하여 이미지를 로드할 때 HTTP 캐시 헤더를 설정하고, 브라우저가 이미지를 캐시하도록 할 수 있다. 2. Lazy Loading Lazy loading은 페이지의 초기 로딩 시간을 최적화하기 위한 전략 중 하나다. Lazy loading을 사용하면 페이지의 이미지가 초기 로딩 때 ..

프론트엔드에서 캐싱은 웹 애플리케이션의 성능을 향상시키는 중요한 요소 중 하나다. 캐싱은 이전에 검색한 데이터나 리소스를 임시로 저장하고 다시 요청할 때 이 저장된 데이터를 사용하여 서버의 부하를 줄이고 응답 시간을 단축하는 데 사용된다. 프론트엔드에서 캐싱은 주로 브라우저 레벨에서 이루어지며, 다음과 같은 방식으로 구현할 수 있다. 1. 브라우저 캐시 브라우저는 이미지, 스타일시트, 자바스크립트 파일 및 기타 리소스를 캐시할 수 있다. 이를 이용하여 웹 페이지의 초기 로딩 속도를 향상시킬 수 있다. 브라우저 캐시를 사용하려면 리소스에 대한 HTTP 캐싱 헤더를 설정해야 한다. 위의 코드에서 styles.css 및 script.js 파일은 브라우저 캐시에 저장될 수 있다. 2. 서비스 워커( Servic..

토이 프로젝트를 하나 구현하는 도중 문제가 생겼다. 현재 시간을 각 국가에 따라 다르게 받아와서 시간을 timeapi.io라는 api에서 받아오는데, 서버 컴포넌트에서 캐시를 저장하고 있어서 캐시를 비워주지 않으면 계속해서 초기에 로딩하여 남아있는 시간을 받아왔다. 그래서 캐시 비우기 버튼을 만들었다. import { revalidateTag } from "next/cache"; import { NextRequest, NextResponse } from "next/server"; export async function POST(req: NextRequest) { const tag = req.nextUrl.searchParams.get('tag') if (!tag) throw new Error('태그는 필..

🌍 브라우저 저장소(Browser Storage) - 웹 브라우저에서 데이터를 임시 또는 영구적으로 저장하고 관리하는 데 사용되는 메커니즘이다. - 브라우저 저장소는 클라이언트 측 웹 애플리케이션에서 데이터를 저장하고 나중에 검색하거나 업데이트할 수 있도록 도와준다. * 브라우저 저장소는 주로 사용자 설정, 로그인 정보, 장바구니 내용 등을 클라이언트 측에서 관리할 때 유용합니다. * 또한 브라우저 저장소는 쿠키와 달리 서버로 데이터를 자동으로 보내지 않으므로 개인 정보 보호 측면에서 더 안전하다. * 다만, 로컬 스토리지와 세션 스토리지에 저장하는 데이터는 문자열 형태로 저장되기 때문에 복잡한 데이터 구조를 저장하려면 JSON 형식으로 직접 직렬화 및 역직렬화해야 한다. 주로 두 가지 유형의 브라우저 ..

✔ 이벤트 위임(Event Delegation) - 웹 개발에서 자주 사용되는 패턴 중 하나로, 동적으로 생성된 요소 또는 여러 요소에 대한 이벤트 처리를 효율적으로 관리하는 방법이다. - 이 패턴은 메모리 사용과 성능 개선에 도움을 줄 수 있으며, 이벤트 핸들러의 수를 최소화하여 코드를 더 간결하게 만들 수 있다. 🌈 이벤트 버블링과 캡쳐링 이벤트 위임을 알기 위해선 선수지식으로 이벤트 버블링과 캡쳐링의 동작방식을 알아야 한다. 이벤트 버블링 이란, 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식을 말한다. 이벤트 캡쳐링 이란, 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식을..

Flux는 리액트 애플리케이션의 상태 관리 패턴 중 하나로, 애플리케이션 데이터의 단방향 흐름을 유지하고 관리하기 위한 아키텍처다. Flux 패턴은 Facebook에서 개발되었고, 리액트 애플리케이션의 상태 관리를 더욱 예측 가능하고 효율적으로 만들어주는데 도움을 준다. 🔥 Flux 패턴의 주요 요소 1.액션(Action) 액션은 애플리케이션에서 어떤 변화가 일어났음을 설명하는 객체다. 액션은 주로 사용자의 입력 또는 네트워크 응답과 같은 이벤트에 의해 발생한다. 예를 들어, "사용자가 로그인 버튼을 클릭했다" 또는 "새로운 데이터가 서버에서 도착했다"와 같은 상황에서 액션을 생성한다. 2.디스패처(Dispatcher) 디스패처러는 액션을 받아서 등록된 모든 스토어에 액션을 전달하는 중앙 허브 역할을 한..

리액트에서 List와 Key는 중요한 개념이다. 리액트에서 배열 또는 리스트를 렌더링할 때 필요한 중요한 개념이다. ✔ List 1. List는 데이터의 배열 또는 컬렉션을 나타내며, 이를 화면에 표시하기 위해 사용된다. 예를 들어, 블로그 게시물 목록, 할 일 목록, 쇼핑 카트 항목 등을 나타낼 수 있다. 2. List는 주로 JavaScript 배열로 표현되며, 이 데이터를 렌더링하여 사용자에게 보여준다. 3. React에서 List를 렌더링할 때 map() 함수 또는 다른 반복문을 사용하여 각 항목을 컴포넌트로 변환하고 화면에 출력한다. ✔ Key (고유 식별자) 1. Key는 리액트에서 List 항목을 식별하는 데 사용되는 고유한 식별자다. 2. Key가 없으면 React는 각 항목을 식별하지 못..