본문 바로가기
반응형

분류 전체보기158

회사 점심시간을 이용하여 커피효과를 극대화 시키는 방법 개요 사람이 활동하는 동안 뇌에서는 아데노신이 축적된다, 아데노신은 중추신경을 억제하여 수면을 유도하고 피로를 느끼게 하는 물질이다. 잠을 자면 아데노신이 제거돼 피로가 풀린다. 커피를 마시면 커피에 든 카페인이 아데노신 대신 결합해, 졸음이 달아나게 한다, 그런데 낮잠만 자거나 커피만 마셨을 때보다, 커피를 마신 후 낮잠을 자면 더 효과적으로 졸음을 물리칠 수 있다. 카페인의 각성효과가 커피를 마신 지 약 20분 후 부터 나타나기 때문이다. 쪽잠을 통해서 아데노신 수치를 낮춰놓은 상태에서 카페인이 본격적으로 아데노신 수용체와 결합하면서 시너지 효과를 내는것이다. 연구결과 임상신경생리학지에서 발표된 연구에 따르면 커피 낮잠을 실시한 참가자들과 낮잠만 잔 참가자들에게 기억력 테스트를 시행했다. 그 결과, .. 2023. 3. 21.
Vue.js - 라이프 사이클 개념 인스턴스 라이프 사이클(Life Cycle) 개념 인스턴스 라이프 사이클이란? 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Hook)이라고 한다. beforeCreate Vue 인스턴스가 생성되고 나서 처음으로 실행되는 라이프 사이클 단계, data속성과 method 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없는 상태이다. created data속성과 method 속성이 정의 되어있는 단계 떄문에 this.data 또는 this.fetchData() 와 같은 로직을 이용해서 data속성과 method 속성에 정의된 값에 접근 가능 beforeMount tem.. 2023. 3. 21.
Vue.js && Spring - 게시글 조회 수 중복 방지 1. 개요 조회수 중복 방지는 웹사이트나 애플리케이션에서 매우 중요한 기능 중 하나입니다. 중복된 조회수를 제대로 처리하지 않으면, 신뢰성 있는 데이터를 제공할 수 없고, 광고 수익을 추적하는 등의 목적에도 문제가 생길 수 있습니다. 조회수 중복 방지를 위해서는 다음과 같은 방법을 사용할 수 있습니다. 2. 처리 방법 쿠키를 사용한 중복 방지 쿠키를 사용하여 중복된 조회수를 방지할 수 있습니다. 이 방법은 간단하게 사용자의 브라우저에 쿠키를 생성하여, 하루 동안의 중복 조회를 막을 수 있습니다. 이 방법의 단점은 사용자가 쿠키를 삭제하거나 다른 브라우저를 사용할 경우 중복 조회가 가능하다는 점입니다. IP 주소를 사용한 중복 방지 사용자의 IP 주소를 기록하여 중복 조회를 방지할 수 있습니다. 이 방법은.. 2023. 3. 13.
Vue.js - pagination(페이지네이션) 처리 방법 Vue.js를 사용하여 게시글 페이지네이션을 처리하는 방법 1. 데이터 가져오기 서버에서 게시글 데이터를 가져옵니다. 이때, 게시글의 총 개수와 한 페이지에 보여줄 게시글의 개수도 함께 가져옵니다. 2. 데이터 처리하기 가져온 게시글 데이터를 Vue 인스턴스의 data 객체에 저장합니다. 이때, 현재 페이지 번호와 총 페이지 수도 계산하여 data 객체에 저장합니다 3. 템플릿 작성하기 게시글 목록을 보여주는 템플릿을 작성합니다. v-for 디렉티브를 사용하여 게시글 목록을 출력합니다. 또한, v-if 디렉티브를 사용하여 현재 페이지에 해당하는 게시글만 출력하도록 처리합니다. 4. 페이지네이션 구현하기 v-for 디렉티브를 사용하여 페이지네이션을 구현합니다. 현재 페이지를 기준으로 이전 페이지와 다음 페.. 2023. 3. 6.
Vue.js 가장 많이 사용되는 Prettier 설정 Prettier란? Prettier는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 도와주는 도구 중 하나입니다. 이를 위해서는 Prettier 설정 파일인 .prettierrc 파일을 작성하여 사용할 수 있습니다. 가장 많이 사용되는 Prettier 설정은 다음과 같습니다. { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid", "endOfLine": "auto" } printWidth: 한 줄에 출력할 문자 수를 지정.. 2023. 3. 3.
Vue.js - axios 통신 JSON parse error 해결방안 axios 통신 JSON parse error 해결방안 백엔드로 넘겨주고 싶은 데이터 store - Send.js import axios from 'axios' const Send = { namespaced: true, state: {}, getters: {}, mutations: {}, actions: { SEND_SAVE(context, sendDate) { axios .post('/api/send/sendSave', sendDate) .then((response) => { if (response.status === 200) { console.log(response) } }) .catch((error) => { alert(error.response.data.message) console.log(err.. 2023. 3. 3.
Vue.js에서 두 개의 key-value 배열을 합치는 방법 Vue.js에서 두 개의 key-value 배열을 합치는 방법 JavaScript에서 제공하는 Object.assign() 메소드를 사용하면 된다. Object.assign() 메소드는 인자로 전달된 객체를 병합하여 새로운 객체를 반환합니다. 이를 이용하여 두 개의 배열을 병합할 수 있습니다. 예시 코드입니다. let obj1 = { a: 1, b: 2 }; let obj2 = { c: 3, d: 4 }; let merged = Object.assign({}, obj1, obj2); console.log(merged); // { a: 1, b: 2, c: 3, d: 4 } 위 예시에서 Object.assign() 메소드의 첫 번째 인자는 새로운 객체를 생성하기 위한 빈 객체 {}이며, 두 번째와 세 번째.. 2023. 3. 3.
Vue.js - Vue.js에서 배열을 문자열로 바꾸는 방법 Vue.js에서 배열을 문자열로 바꾸는 방법 Vue.js에서 배열을 문자열로 바꾸는 방법은 여러 가지가 있습니다. 이 중에서 가장 간단한 방법은 JavaScript의 join() 메소드를 사용하는 것입니다. join() 메소드는 배열의 각 요소를 문자열로 결합하여 하나의 문자열로 만들어 줍니다. 다음은 Vue.js에서 join() 메소드를 사용하여 배열을 문자열로 바꾸는 예시입니다. {{ items.join(", ") }} 위 코드에서 items 배열의 각 요소를 쉼표와 공백으로 구분하여 하나의 문자열로 결합하고 있습니다. join() 메소드를 사용하여 문자열을 만들고, 이를 Vue.js 템플릿에서 출력하고 있습니다. 만약 다른 구분자를 사용하고 싶다면, join() 메소드의 매개변수로 구분자를 전달하면.. 2023. 3. 2.
Vue.js - vuex - store - 상태관리법 등 개념/사용법 Vuex 란 ? 프로젝트의 규모가 커질수록 컴포넌트는 늘어날 수 밖에 없고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모 자식 관계는 점점 복집해질 수 밖에 없다. 그래서 Vue에서는 Vuex라는 상태 관리 패턴을 지원해주었는데 , Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. State 전역에서 공통으로 컴포넌트 간에 공유할 data를 말한다. 전역에서 참조, 사용할 수 있다. 일반적인 Vue컴포넌트의 watch처럼 $store.watch로 변화를 감지하고 핸들링할 수 있다. Mutations의 메서드에서 State 데이터값이 변이되기를 권장함 Mut.. 2023. 2. 24.
Vue.js - router-view(특정 Component 만 출력) 특정 컴포넌트 비활성화 방법 1. router /index.js 에서 등록한 라우터 // 메인 페이지 라우터 { path: '/main', name: 'main', component: Main, beforeEnter: (to, from, next) => { if (!localStorage.getItem('memId')) { next('') } next() } }, 해당 라우트 name 값이 " main " 인 라우터만 제외하고 TopMenu Component가 나타난다. template> 1. router /index.js 에서 등록한 특정 라우터만 출력 라우터 name 값이 main에 포함된 경우에만 TopMenu Component가 나타난다. visiableRouter: ['main'] 2023. 2. 24.
LIST

티스토리툴바