캐시 버스팅(Cache Busting) 이란? 사용 예시 리액트 해결 방법

배포 이후에 기존 페이지의 파일이 그대로 캐시에 남아 있어서 배포된 파일이 적용이 되지 않는 경우가 있습니다. 캐시로 인해서 업데이트 이전 파일이 그대로 있어서 입니다. 캐시와 캐시 버스팅이 무엇인지 알아보고, 위와 같은 문제를 해결하기 위해서는 어떻게 해야 하는지 알아보겠습니다. 캐시란? 데이터 값을 임시로 복사해놓은 장소를 말합니다. 웹 캐시는 웹 페이지를 띄우기 위해서 js, css 파일과 같은 파일을 로드합니다. 해당 파일들을 다음에 페이지를 띄울 때, 새로 요청하지 않고 기존에 저장해 놓은 파일을 가져옵니다. 웹 캐시를 이용해서 화면을 여는 경우에 다시 파일을 받아오지 않아서 빠르게 화면을 열 수 있는 장점이 있습니다. 캐시 버스팅이란? 캐시 버스팅은 이러한 캐시에 저장된 파일을 가져오는 것이 ..

• format_list_bulleted Develop
• · 2023. 4. 15.
• textsms

Vue 프로젝트 만들기 npm init vue

Vue 프로젝트 세팅 하고 실행하는 방법입니다. 설치에 앞서 Node.js를 16 버전 이상으로 설치해야 합니다. 아래 사이트에서 설치하시면 됩니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vue 프로젝트 만들기 npm init vue create-vue 패키지가 설치가 안되어있으면 아래 버전을 설치하겠냐고 물어봅니다. y를 입력하고 엔터를 입력합니다. PS C:\Users\power\WebstormProjects> npm init vue Vue.js - The Progressive JavaScript Framework √ Project na..

• format_list_bulleted Develop/Vue
• · 2023. 4. 13.
• textsms

Vue.js란? 간단 정리 특징 장점

Vue란? 웹 화면을 만들기 위한 프론트엔드 라이브러리이자 점진적 프레임워크이다. 컴포넌트 기반, 라우터, 상태 관리등 점진적으로 결합이 가능하다. 배우기 쉽게 만들어졌다. Vue 장점 배우기 쉽다. 성능이 우수하고 빠르다. 앵귤러 보다 가볍고 리액트의 가상 돔 기반의 장점을 가지고 있다. Vue 특징 UI 화면을 그리는 라이브러리 컴포넌트 기반 양방향 데이터바인딩 & 단방향 데이터 흐름 모두 가능하다. 가상 돔 (Virtual DOM) - 빠른 렌더링 가능 Angular.js의 양방향 데이터 바인딩의 장점과 react의 가상 돔 기반의 빠른 렌더링의 장점만을 모았다. 배우기 쉽다는 장점과 다른 프레임워크의 장점만을 모아서 많은 곳에서 사용되고 있다. React vs Vue 장단점 비교 어떤 것을 사용해..

• format_list_bulleted Develop/Vue
• · 2023. 4. 12.
• textsms

포케 뜻 / 슬로우캘리 송리단점 리뷰

이번에 송리단길을 방문해서 포케를 먹어보았습니다. 포케를 먹다가 포케의 뜻과 어디 음식이 궁금하였는데 포케 뜻 포케는 하와이어로 자르다는 뜻을 가지고 있어서 익히지 않은 생선회를 잘라서 밥, 다른 채소 등과 비벼 먹는 하와이 전통 음식이라고 합니다. 우리나라로 치면 회 덮밥 이런 느낌입니다. 뉴요커들 사이에 간단하게 한 끼로 먹는 것이 인기가 되었다고 하고 우리나라에서는 건강한 다이어트 식단으로도 자주 먹는 듯합니다. 슬로우캘리 송리단점 슬로우 캘리 송리단 점은 잠실역, 석촌역, 송파나루역 사이에 위치하고 있습니다. 저는 잠실역 1번 출구에서 석촌 호수길을 따라서 걸어갔습니다. (약 20분) 입구에 메뉴판이 있어서 미리 보고 들어갈 수 있습니다. 자리를 잡고 카운터에서 주문을 하는 방식입니다. 메뉴는 연..

• format_list_bulleted 일상/맛집
• · 2023. 4. 11.
• textsms

원룸 싱크대 교체 가격 및 후기(ft. 도시가스 철거/연결 비용)

안녕하세요 이번에 일주일 정도 쉬는 시간이 있어서 싱크대 수리를 하였습니다. 싱크대 공사는 2일 정도 걸렸고, 상부장 하부장 대리석 상판 씽크볼 수전 가스레인지 주방후드 교체하는 올수리 진행하였습니다. 처음에는 사각볼과 거위목 수전을 꼭 하고 싶었었는데, 사각볼과 거위목 수전 공사를 하려면 상부장 길이가 지금 보다 짧아져야 하고 그렇게 되면 타일을 붙여하는 공정이 추가가 돼서 그냥 포기하고 일반 씽크볼과 수전으로 진행하였습니다. before 교체 이전의 싱크대입니다. 소형 씽크볼과 라이프 스타일에 맞지 않는 큰 가스레인지 상부장의 반투명 수납장, 너무 큰 주방후드 등이 눈에 거슬렸네요. 저는 코로나 시작 이후로 식기세척기를 사용하고 있는데요. 이번 싱크대 공사 이후에도 식기세척기를 꼭 사용하고 싶어서 하..

• format_list_bulleted 일상/리뷰
• · 2023. 4. 10.
• textsms

원룸 화장실 교체 올 수리 가격 및 후기

안녕하세요 서울 서초구에 4년째 자취하고 있습니다. 저는 지어진지 한 20년 정도 된 건물에 분리형 원룸에서 거주하고 있습니다. 처음 입주할 때는 화장실이 그나마 괜찮았는데 점점 사용하다 보니 수리에 필요성이 느껴지더라고요 화장실 수납장도 자꾸 물을 먹고, 청소를 해도 금방 금방 더러워지고 그래서 DIY로 수납장 수리를 하려다가 깔끔하게 포기하고 업체를 통해 올 수리를 진행하였습니다. 인테리어 업체 선정 저는 숨고 어플 통해서 인테리어 업체를 선정했습니다. 제가 원하는 화장실 이미지를 찾고 업체에 견적을 요청했습니다. 타일 덧방 유리 파티션 샤워 수전 교체 세면대 / 수전 교체 변기 젠다이 간접조명 전등 환풍기 천장 이런 것들을 교체하고 싶었습니다. 결국 젠다이와 간접조명은 추가하지 않았습니다. 젠다이는..

• format_list_bulleted 일상/리뷰
• · 2023. 4. 7.
• textsms

React - useState vs useReducer state 관리 Hooks 비교

리액트에서 상태 관리할 수 있는 훅이 useState, useReducer 두가지가 있습니다. 각각의 훅을 언제 사용하면 좋을까요? 프로그래밍에는 맞고 틀림이 없습니다. 아래 내용을 참고하여 상황에 맞게 적절할게 사용하시면 됩니다. useState vs useReducer 비교 useState useReducer 리액트 메인 상태관리 방법 더욱 강력한 상태 관리 방법 개별 및 간단한 상태 관리할 때 사용 각각의 상태나 데이들이 연관되어 있을때 상태 변경이 쉽거나, 업데이트가 몇 개일 때 사용 상태 변경이 복잡할때 useReducer로 처리 가능한 것이 useState로 처리 가능합니다. 정답은 없으니 본인에게 필요한 훅을 잘 사용하시길 바랍니다.

• format_list_bulleted Develop/React
• · 2023. 4. 7.
• textsms

주문진 막국수 맛집 대동면옥

주문진에 있는 막국수 맛집 대동면옥을 다녀왔습니다. 지인의 지인이 너무 맛있다고 극찬을 해서 방문하였습니다. 가게에 방문하니 태블릿이 있는 자리에 앉으라고 안내해줍니다. 태블릿을 이용해서 주문합니다. 물/비빔 냉면과 막국수가 있고, 수육이 있습니다. 저는 커플세트를 주문하였습니다. 커플세트의 수육(소)입니다. 지방부위와 담백한 살코기 두 가지 종류가 있습니다. 수육은 가자미회무침과 백김치를 곁들여 드시거나 상추에 쌈장을 곁들여 먹어라고 추천해 줍니다. 회비빔 막국수입니다. 냉육수를 적당히 붓고 식초, 겨자, 설탕을 넣고 비벼 먹었습니다. 이번에는 극찬했던 맛은 아니라고 하더군요. 극찬할만한 맛은 아니더라도 수육과 막국수는 맛있게 먹었습니다. 이상 내돈내산 대동면옥 후기였습니다. 감사합니다.

• format_list_bulleted 일상/맛집
• · 2023. 4. 6.
• textsms

React - 복잡하고 다양한 state 변경에 사용하는 Hooks useReducer

useReducer 리액트 훅 useRedcuer입니다. useState와 같이 useRedcuer는 상태를 업데이트할 때 사용됩니다. useRedcuer 언제 사용하는 것이 좋을까요? 다양한 state를 이용하거나, 복잡할때 다른 state 기반으로 state를 업데이트 할때 useReducer 사용법 const [state, dispatch] = useReducer(reducer, initialArg, init?) reducer 컴포넌트 외부에서 state 관리할 reducer 함수 initialArg state 초기 값입니다. init 초기 상태를 반환하는 함수입니다. 1. 컴포넌트 내에 useReducer 선언 const [state, dispatch] = React.useReducer(reduc..

• format_list_bulleted Develop/React
• · 2023. 4. 6.
• textsms

강릉 짬뽕 순두부 맛집 초당본가

3월 31일부터 4월 5일까지 강릉에서 경포 벚꽃 축제가 열리고 있습니다. 벚꽃 축제 때문인지 사람이 정말 많았습니다. 초당 순두부마을에서 짬뽕순두부를 먹으려고 했는데 웨이팅이 많았습니다. 초당본가에서 비교적 여유 있게 식사할 수 있었습니다. 초당동 주민센터 옆에 있고 가게가 커서 쉽게 찾을 수 있습니다. 주차 공간도 넉넉합니다. 짬뽕 순두부, 순두부 백반이 있습니다. 모두부와 짬뽕 순두부를 시켰습니다. 모두부입니다. 짬뽕순두부에 밥입니다. 모두부는 담백했고 짬뽕은 얼큰하였습니다. 이상 짬뽕 순두부 맛집 초당본가 후기였습니다.

• format_list_bulleted 일상/맛집
• · 2023. 4. 5.
• textsms