Frontend 8

[Frontend] Redux Toolkit

store data 저장소, reducer를 받아야함, subscribe로 변화 감지 action 어떻게 수정할 건지 Object (ex. { type: "ADD" }) 넘겨줌, store.dispatch로 실행 reducer state랑 action 받아서 state 수정하는 함수 -> action.type 별로 스위치 해서 state변경 수행, state 직접 수정 (mutate) 불가 const reducer = () => {}; const store = createStore(reducer); store.dispatch(action); // dispatch를 써서 action을 reducer로 전달 store.getState() store.subscribe(()=>{~~~}); createSlice..

Web 2024.04.01

[Frontend] Cache의 간단한 이해

캐시의 종류 개발자도구 네트워크 탭을 보면 메모리캐시와 디스크캐시가 있다 메모리캐시는 캐시 메모리에 캐시를 저장하고 디스크캐시는 RAM에 캐시를 저장하고 메모리캐시가 더 빠르고 용량이 적다. 어떤 캐시를 어느 메모리에서 사용할지는 브라우저가 정한다 Cache-Control 헤더 옵션 - no-cache : 서버에서 해당 캐시를 사용할 수 있는지 (만료되지 않았는지, 변경되지 않았는지 등) 검사 후 사용 결정 - no-store : 캐시 미사용 - private : 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 - public : 모든 환경에서 캐시 사용 - max-age : 캐시의 유효기간 설정 (no-cache를 max-age=0으로 표현 가능) 저 옵션은 백엔드에서 설정해준다. 그래..

Web 2024.03.07

[Frontend] 이미지 최적화

프론트엔드 이미지 최적화 방법 1. 뷰포트 밖의 이미지는 나중에 로드하기 2. webp 이미지 형식 사용하기 1. 뷰포트 밖의 이미지는 나중에 로드하기 당장 화면에 먼저 보이는 이미지만 먼저 로드하고 스크롤 아래 이미지는 이미지 영역이 화면에 등장하는 시점에 이미지를 로드하는 방법!! scroll 할 때마다 이미지 영역이 화면에 들어오는지 체크하는 건 너무 이벤트 호출이 잦기 때문에 IntersectionObserver를 사용할 것이다 IntersectionObserver - Web API | MDN Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 ..

Web 2024.03.06

[Frontend] axios/fetch headers utf8 한글 오류

내 2020년 글 백업 ・・・ Vue (js)로 Axios 통신을 하면서 Multipart File을 Body에 넘겨줘야했음. 그래서 다른 json 정보들은 Header에 담아보내주려고함.. 근데 Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString 이런 에러가 뜨는 것 아닌가?..!@!!? 일단 나는 'XMLHttpRequest'를 선언한 적도 없는데 이런 오류가 뜨니 뭔가 싶었다 구글링해보면 다 Ajax 관련 해결법,, 이래저래 찾아보다가 알게된 사실은 헤더에는 utf8 적용이 안 된다는 것 --> 한글이 안보내짐 그래서 base64로 변환해서 보낸 후, 백에서 다시 utf8로 디코딩 하면 된다..

Web 2023.10.13

[Backend] node.js + next.js API Routes 기초

지금 하는 플젝이 약간 구조가 복잡해서 백을 nodejs, spring boot 둘 다 사용해야한다 그리고 nodejs 쪽 개발을 내가 맡게 되었. 풀스택 개발자 오히려 조하 Routing: API Routes | Next.js Using Pages Router Features available in /pages nextjs.org next.js의 API Routes를 이용해 프론트코드에서 백엔드까지 작성이 가능하다 src/pages/api 아래에 node 코드를 작성하면 작동한다 프론트에서 호출할 때는 await fetch('/api/audits/info').then(~~).catch(~~).finally(~~) 간단한 테스트 페이지를 만들어봤다 api test 1은 {error : 'error'}를 ..

Web 2023.10.11

[Frontend] JWT

JWT : Json Web Token - Access Token, Refresh Token으로 이뤄져 있음 Access Token을 axios 헤더로 설정해 인증된 사용자임을 서버에 알려 api 통신함 (로컬 스토리지에 저장하지 않음) 만료 시간이 있기 때문에 만료 시, Refresh Token을 이용해 Access Token을 다시 발급 받음. 클라이언트(프론트)가 보낸 Refresh Token과 DB에 있는 Refresh Token 일치 시, 새 Access Token과 Refresh Token이 발급 됨 Access Token은 로컬스토리지, 쿠키 등에 저장하지 않았으므로 새로고침, 브라우저 종료 시 사라짐 Refresh Token은 로컬 스토리지/쿠키에 저장 (새로고침, 브라우저 종료 시에도 남아..

Web 2023.10.04

[Frontend] Node.js, Babel, Webpack

프론트엔드 프로젝트를 하다보면 자꾸 마주치는 것들 하지만 정확히는 모르던 것들 정리@! Node.js : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경 왜 쓰는지? 1. JS를 브라우저 외의 환경에서도 실행할 수 있도록 해줌 - 기존의 JS는 브라우저에서 작동 --> OS 기능 사용 불가 (ex. 카메라, 파일 I/O, 네트워크 통신 등) 2. npm 제공 - node.js 에서 사용할 수 있는 모듈 패키지 제공 (ex. 웹팩, 바벨) Babel : Javascript Compiler 트랜스파일러 : 모던자바스크립트 (ES6+) -> 구 표준 코드 (ES5) 변환 - 구형 브라우저에서도 모던자바스크립트가 작동하도록 해줌 폴리필 : 기능을 지원하지 않는 웹브라우저 상..

Web 2023.05.19

[React] setState, props

지금까지 Vue.js 프로젝트만 해오다 React 프로젝트에 투입되어서 리액트 실습! React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 | VELOPERT.LOG 이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다. 서론 리액트를 사용하신다면, Immutability 라는 velopert.com 윗 글에 나온 예시 코드를 활용했다 모든 변수명이 users인게 헷갈려서 변수명을 임의로변경했다 import React, { Component } from 'react'; import UserList from..

Web 2021.08.31