things

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..

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

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

# send() - express 프레임워크에만 있음 - content-type header 자동설정 - utf-8 자동설정 - JSON, HTML 등 다양한 데이터 형식으로 전송 가능 - 한 fetch에 대해 한번만 호출 가능 - 일반적으로 많이 사용 - write + end의 느낌 # write() - end() 호출 전 까지 여러번 호출하여 데이터 조각 보내기 가능 - 백엔드에서 단계별 응답을 프론트에 보여주기 용이 (로딩바 21/100, 62/100, 83/100, ... 과 같이) - 스트리밍데이터, 대용량 파일처리에 유리 (데이터가 크면 알아서 조각내서 보냄 -> 클라이언트에서 조각 합치는 로직 필요) - string 형식으로 전송 가능 - client에 Unit8Array 형식으로 받음, d..

. ├── README.md ├── node_modules ├── package-lock.json ├── package.json ├── src │ ├── app.js │ ├── controllers │ │ └── index.js │ ├── routes │ │ └── index.js │ └── views │ ├── error.ejs │ └── index.ejs └── yarn.lock 폴더구조 // app.js const express = require("express"); const logger = require("morgan"); const cors = require("cors"); const path = require("path"); const createError = require("http-err..

일단 데이터는 아래와 같이 생김 chains: { chain1: { request: { text: "체인1", }, children: { "chain1-1": { request: { text: "체인1-1", }, children: { "chain1-1-1": { request: { text: "체인1-1-1", }, }, "chain1-1-2": { request: { text: "체인1-1-2", }, }, }, }, "chain1-2": { request: { text: "체인1-2", }, }, }, }, 체인2: { request: { text: "chain2", }, children: { "체인2-1": { request: { text: "chain2-1", }, children: { "체인2..

2020년 글 백업 ㅎㅎ 장고 이후로 한~번도 안 써봄 하 내가 백엔드를 했어야했는데~ Django는 MVC 가 아니라 MTV 이번에 내가 한 건 db가 필요 없어서 model은 없고 template이랑 view만 썼다 view가 spring의 controller 같은 느낌 [home.html] {% csrf_token %} 비동기 통신으로 element 갖다 붙히려고 jQuery 씀 [view.py] from django.http import HttpResponse from django.views.decorators.csrf import csrf_exempt from django.template import loader import json @csrf_exempt def main(request): if..

내 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로 디코딩 하면 된다..

2020년도 회사 입사전 사이드 프로젝트 진행했을 때 썼던 글 팀원이 나한테 백엔드 왜 알아요? 하는데 .. 아무래도 싸피에서는 백엔드만 했었으니 .. AWS 배포를 했더니 시간이 계속 9시간 전으로 떠서 이거 해결한다고 DB도 날리고 .. 아주 혼자서 눈물의 쇼를 했다 먼저 Maria DB 시간부터 서울로 지정 SET GLOBAL time_zone='Asia/Seoul'; SET time_zone = 'Asia/Seoul'; select @@global.time_zone, @@session.time_zone; 이렇게 나오면 됨 난 이것만 맞으면 서버에 잘 뜰거라 생각했쥐 하지만 아니었다 EC2 시간 설정 date 치면 ec2에서 설정된 시간이 뜨는데 난 지금 서울로 설정해서 kst가 뜬다 하지만 기본 ..

지금 하는 플젝이 약간 구조가 복잡해서 백을 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'}를 ..