things

목차더보기파일 설명sites ~auth_request$http_name 사용자 정의 헤더 값 /etc/nginx/nginx.conf: 글로벌 설정을 관리하는 메인 설정 파일./etc/nginx/conf.d/*.conf: 개별 서버 블록 설정 파일들이 위치하는 디렉토리./etc/nginx/sites-available/: 개별 사이트의 설정 파일들이 위치하는 디렉토리./etc/nginx/sites-enabled/: 활성화된 사이트의 설정 파일들이 위치하는 디렉토리./etc/nginx/mime.types: MIME 타입 설정 파일.sites-available, sites-enabled 에 대하여 ...해당 설정은 한 웹 서버에서 여러 다른 도메인으로 서비스를 띄울 때 유용하다.test1.comtests2.co..

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 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 ..

husky + lint-staged : 커밋 전 eslint, prettier 검사 husky + lint-staged를 이용해 eslint와 prettier가 적용 됐을 때만 커밋 가능하게 만들것이다~ 그전에 husky와 lint-staged를 알아보자 # Husky Automatically lint your commit messages,code, and run tests upon committing or pushing. baeritas.tistory.com Husky 2탄! 설치 방법은 위 글을 보면 되고 버전은 9! Husky는 git hook 기능을 편리하게 사용할 수 있도록 도와준다 Git Hooks란? 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 이번에 할 것은..

11.API 리팩터링 11.1 질의 함수와 변경 함수 분리하기 겉보기에 부수효과 없이 값을 반환해주는 함수를 추구해야함 -> 질의함수 (읽기함수, 연산을 통해 값을 계산하여 반환하는 함수)는 모두 부수효과가 없어야함 값을 반환하면서 부수 효과도 있다면 분리 하는게 좋음 절차 대상 함수를 복제하고 질의 목적에 충실한 이름을 짓기 새 질의 함수에서 부수효과를 모두 제거하기 정적 검사 원래 함수를 호출하는 곳을 모두 찾기. 호출하는 곳에서 질의 함수를 호출하도록 변경하고, 원래 함수 호출을 아래 줄에 추가하기. 하나 바꾸고 테스트 원래 함수에서 질의 관련 코드 제거 테스트 11.2 함수 매개변수화 하기 두 함수 로직이 비슷하고 리터럴 값만 다르다면, 그 값만 매개변수로 받고 함수 합치기 절차 비슷한 함수 중 ..

10. 조건부 로직 간소화 10.1 조건문 분해하기 복잡한 조건부 로직 - 읽기 어려움 코드 분해 후 함수 호출로 변경하여 의도 드러내기 절차 조건식과 그 조건식에 딸린 조건절 각각을 함수로 추출하기 if (!여름전 && !여름후) { // => 해당 조건을 isSummer()와 같이 변경 // 이 안에 있는 로직도 함수로 추출 charge = summerCharge(); } else { // 이 안에 로직도 함수로 추출 charge = regularCharge(); } // 혹은 3항연산자 charge = isSummer() ? summerCharge() : regularCharge(); 10.2 조건식 통합하기 비교 조건은 상이하나 수행 동작은 같을 때 통합하기 조건부 코드 통합 이유 나뉜 조건들을 ..

husky + lint-staged를 이용해 eslint와 prettier가 적용 됐을 때만 커밋 가능하게 만들것이다~ 그전에 husky와 lint-staged를 알아보자 # Husky Automatically lint your commit messages,code, and run tests upon committing or pushing. 커밋 메시지, 코드를 자동으로 린트하고 커밋 또는 푸시 시 테스트를 실행하세요. Husky는 git hook을 이용해 위와 같은 기능을 수행한다 Git Hooks란? 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 클라이언트 훅은 커밋이나 Merge 할 때 실행되고 서버 훅은 Push 할 때 서버에서 실행된다. (https://git-scm..

8장 8.1 함수 옮기기 메서드 이동 좋은 소프트웨어 설계 핵심 : 모듈성 절차 선택한 함수가 현재 컨텍스트 내에서 사용중인 모든 프로그램 요소 살펴보기. 함께 옮길 것들이 있는지 보기 함께 옮겨야할 함수가 있다면 그 함수부터 옮기는게 나음. 여러게 옮겨야하면 영향이 적은 함수부터 옮기기 하위 함수들의 호출자가 고수준 함수 하나면 하위 함수를 고수준함수에 인라인 하고, 고수준함수 옮기고 다시 개별함수로 추출 선택한 함수가 다형 메서드인지 확인 (js에서는 쓸 일 없을 것 같은?) 선택한 함수(소스 함수)를 타깃 컨텍스트로 복사한 후 다듬기 함수 본문에서 소스 컨텍스트의 요소 사용 시, 파라미터로 옮기거나 소스컨텍스트 자체를 참조로 넘기기 정적 분석 소스 컨텍스트에서 타깃 함수를 참조할 방법을 찾아 반영 ..

소나큐브 연동한다고 ci/cd 이것저것 테스트 하다가 다 실패해서 원복 하는 중에 마주한 There has been a missing dependency failure 이게 뭔데 .... 구글링 하니까 artifacts가 잘못됐다 어쩌구 저쩌구 settings ci/cd variables를 잘못 건든건가 했는데 원래 거기엔 암것두 없었구요 결론을 말하자면~ ci/cd 단계가 build - deploy 두 단계인데 수동으로 원복할 때 deploy만 하면 될 줄 알고 build는 안돌리고 deploy만 다시 돌려서 이런 오류가 났던 것이다 build 파일이 오래 돼서 날아가버린듯? artifacts의 문제였습니다 ~ 아님 내가 테스트한다고 다른 빌드 파일들 만들어서 그런가 정확한 이유는 모르겠지만 build..