캐시 버스팅(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

React - useState vs useReducer state 관리 Hooks 비교

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

• format_list_bulleted Develop/React
• · 2023. 4. 7.
• 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

React - 특정 작업들을 실행 시키는 훅 useEffect

리액트에서 가장 중요한 Hook useEffect입니다. useEffect는 언제 사용해야 할까? 리액트의 역할은 UI화면을 렌더링 해서 화면에 가져오는 역할을 합니다. state와 props 변경 시에 dom을 변경하기도 합니다. Side Effect란? 리액트에서 제공하는 역할 외 작업들을 사이드 이펙트라고 합니다. 예를 들면 백엔드 서버에서 http 리퀘스트를 보내거나, 브라우저 저장소에 무언가를 저장하거나 하는 행위들입니다. 이러한 Side Effect를 실행할 때, 매번 컴포넌트가 렌더링 될 때마다 실행하게 되면 너무 많은 http 리퀘스트를 요청하거나, http 리퀘스트 이후에 state 변경을 해서 무한 루프에 빠지게 될 수 있습니다. 이러한 작업들을 useEffect를 이용해서 사용하시면 ..

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

리액트 - createPortal() 사용해서 원하는 위치에 렌더링 하기

리액트 API 중에 createPortal이 있습니다. createPortal createPortal은 원하는 위치에 렌더링 할 수 있습니다. 부모 밖의 위치에 렌더링 할 수 있습니다. 문법 createPortal(children, domNode) 사용법 function App() { return (ReactDOM.createPortal(Hello React, document.body)) } 결과 위와 같이 사용하게 되면 documnet.body 아래에 렌더링 되게 됩니다. Hello React 모달 만들기 샘플 createPortal를 이용하여 모달 샘플입니다. 해당 컴포넌트가 아닌 body 레벨에 모달 컴포넌트가 렌더링 되었습니다. const root = ReactDOM.createRoot(docum..

• format_list_bulleted Develop/React
• · 2023. 3. 22.
• textsms

React - JSX elements must be wrapped in an enclosing tag 해결 방법

리액트 개발하다 보면 아래 오류를 만나게 됩니다. 오류 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 원인 function App() { return ( Hello React I'm superman ); } 위 오류는 위 같이 h2 태그와 p태그를 하나의 태그에 묶지 않아서 발생하게 됩니다. 이것이 왜 문제가 될까요? return ( React.createElement('h2', {}, 'Hello React'); React.createElement('p', {}, 'superman'); ) 위와 같이 하나의 return 값에 두 가지가 들어가 있어서 오류를 나타나게 됩니다. 해결방법 1..

• format_list_bulleted Develop/React
• · 2023. 3. 21.
• textsms

연봉 인상률 인상액 실수령액 계산기

실수령액 계산기 실수령액 계산기 이동하기 2023년 실수령액 계산기 입니다. 연봉 인상률 계산기 연봉 인상률 계산기 이동하기 직전 연봉과 현재 연봉을 입력하고 인상률 계산 버튼을 누르면 인상률이 나옵니다. 연봉인상률 = (현재 연봉 - 직전 연봉) / 직전 연봉 * 100 연봉 인상액 계산기 연봉 인상액 계산기 이동하기 현재 연봉에서 인상률을 입력하면 인상된 연봉을 구할 수 있습니다. 인상 연봉 = 현재 연봉 + (현재 연봉 * 인상률 / 100 )

• format_list_bulleted Develop/Made by powerku
• · 2023. 3. 7.
• textsms

웹스톰 한글 설정하기 Korean Language Pack

자바스크립트 개발하면서 웹스톰을 처음 사용하기 시작하였는데 어느덧 5년째 사용하고 있네요 이제 vsCode를 사용하라고 하면 손에 안 익어서 도저히 못 사용하겠네요 저는 웹스톰 사용하면서 설정이나 이런거를 하나하나 눌러보는 걸 좋아하는데요. 한글로 설정해놓으면 눈에도 잘 익고 무슨 설정인지 알 수도 있어서 한글로 설정해서 사용합니다. 한글로 설정하는 방법에 대해서 설명드리겠습니다. 웹스톰에서 1. File -> Setting -> Plugins로 들어갑니다. 2. Korean Language Pack / 한국어 언어 팩을 검색하고 설치합니다. install를 눌러서 설치합니다. 3. 설치 후 재시작을 하면 한글로 설정이 됩니다.

• format_list_bulleted Develop
• · 2023. 3. 3.
• textsms