kohigowild

SPA (Single Page Application) 한 개의 페이지로 구성된 웹 애플리케이션 일반적으로 초기 로딩 시에 필요한 모든 리소스를 로드하고, 이후에는 동적으로 콘텐츠를 변경하거나 업데이트하는 방식으로 동작한다. 기존의 웹 애플리케이션(MPA)은 새로운 페이지를 로드할 때마다 전체 페이지를 서버에서 다시 가져와야 한다. 이는 사용자 경험과 성능에 부정적인 영향을 끼칠 수 있다. 📡 MPA (Multi Page Application) 여러 개의 페이지로 구성된 전통적인 웹 애플리케이션으로, 각 페이지는 서버에서 새로운 HTML 문서를 로드하여 표시하며, 사용자의 상호 작용에 따라 페이지가 전환된다. 장점 1. 각 페이지가 별개의 HTML 문서로 구성되어 있기 때문에 검색 엔진에서 더 잘 인덱싱될..

웹 브라우저는 인터넷 상에서 웹 페이지를 검색하고, 표시해주는 소프트웨어다. 웹 브라우저는 HTML, CSS, JavaScript 등의 웹 기술을 이용하여 웹 페이지를 렌더링하고, 사용자와 상호작용을 가능하게 한다. 📎 브라우저 구성 요소 사용자 인터페이스(User Interface) 사용자 인터페이스는 브라우저에서 웹 페이지를 검색하고, 표시하는데 필요한 모든 요소를 포함한다. 대표적인 예로는 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크, 즐겨찾기 등이 있다. 렌더링 엔진(Rendering Engine) 렌더링 엔진은 HTML, CSS 및 JavaScript 코드를 해석하고, 페이지를 렌더링하여 화면에 표시한다. 대표적인 렌더링 엔진으로는 Gecko(파이어폭스), WebKit(사파리), Blink(크..

📡 동기와 비동기 동기(synchronous)란, 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식을 의미한다. 즉, 작업이 완료될 때까지 다음 코드의 실행을 멈추고 기다리는 것이다. 이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다. 비동기(asynchronous)란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 즉, 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다. 이러한 방식은 작업이 오래 걸리는 경우 시간을 절약하고, 병렬적인 작업 처리가 가능하다. 동기 방식으로 파일을 읽는다면 파일을 읽기 시작한 이후에 다음 코드를 실행하지 않고 파일이 읽혀지기를 기다린다. 반면에 비동기 방..

📡 REST Representational State Transfer - 자원 (Resource) : URI - 행위 (Verb) : HTTP Method - 표현 (Representations) : Server 응답 HTTP URI를 통해 자원을 명시하고 HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. 즉, REST는 자원 기반의 구조 설계의 중심에 Resource가 있고, HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍처를 의미한다. 영화를 검색하는 사이트가 있다고 가정했을 때 /createMovie /seeMovie /getMovie/inception /deleteMovie/ince..

🌼 페이지 진입 시 불러올 첫 번째 쿼리문 작성 export const getExploreDoc = async (setKey: any) => { const fristQ = query(collection(db, 'feed'), orderBy('createAt', 'desc'), limit(4)); const querySnapshot = await getDocs(fristQ); const data = querySnapshot.docs.map((doc) => ({ ...doc.data(), })); setKey(querySnapshot.docs[querySnapshot.docs.length - 1]); return data; }; limit : 4개의 게시물을 불러온다. 불러온 데이터 중 가장 마지막 값을 s..

🌼 현재 파이어스토어에서는 전체 텍스트 검색을 지원하지 않는다. 파이어베이스를 사용하면서 검색을 구현하기 위해서는 쿼리문을 변형해서 사용하거나 타사 솔루션인 Algolia나 Elastic 같은 검색 엔진 API를 사용해야 한다. 파이어베이스에서 제공하는 기능으로만 키워드 검색을 구현하기 위해 쿼리문을 사용해 보자. 🗒️ 기존 코드의 문제점 const q = query(collection(db, 'feed'), where('address', '>=', keyword), where('address', '

문제 상황 강조되고 반복되는 CORS 에러가 주경이를 불안하게 함 CORS (Cross Origin Resource Sharing) CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다. CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다. Proxy CORS를 해결하기 위해서는 서버 측에서 Origin Allow 속성에 클라이언트에서 보내는 출처를 추가하고, 배포하는 곳에서도(AWS 같은 거) 따로 설정해 줘야 한다. 우리 프로젝..

처리 내용 1. 유저 로그인 시 액세스 토큰과 리프레시 토큰을 발급한다. 액세스 토큰은 클라이언트에서 store 변수에 담아 관리하고 리프레시 토큰은 서버에서 httpOnly 쿠키에 저장하도록 처리한다. 2. API 요청 시 액세스 토큰을 검증한다. 3. 액세스 토큰이 만료된 경우 401 error ▶ token refresh 요청 ▶ 액세스 토큰 발급 4. 새로 발급된 토큰으로 재요청한다. axios interceptors axios interceptors는 then이나 catch로 처리되기 전에 요청(request)나 응답(response)을 가로채 어떠한 작업을 수행할 수 있게 한다. // 요청 쌔벼서 가공 customAxios.interceptors.request.use( (config) => {..