본문 바로가기

IT 천국

 (127)
[Vue.js] watch 사용하기 (primitive, object ...) 대부분 Computed 변수로 사용이 가능하지만 가끔 특정 data의 값이 변하는 시점에 무언가 해주고 싶을때가 있다. 예를 들어 팝업을 띄워준다던가... 백그라운드로 데이터를 변경해야 할 때 등이다.. 이런 경우 vue의 watch 기능이 편리하다. 우선 일반 primitive 변수 들에 대해서는 아래와 같이 watch 선언을 한다. import LeftMenu from './LeftMenu'; import RightSearchBar from './RightSearchBar'; import {mapActions, mapGetters} from 'vuex'; export default { name: 'Header', components: {RightSearchBar, LeftMenu}, data() { ..
[Vue.js] 자식 component height 알아내기, method 호출하기 Vue를 개발할때 가끔 해당 컴포넌트의 의 화면상 높이 값 (clientHeight)이나 자식 컴포넌트의 높이값을 알아야 할때가 있다. 그럴때는 vue의 ref 기능을 이용해서 자식 컴포넌트 내부 접근을 할 수 있다. 잠시 ref 사용 예를 알아보면 다음과 같다. 접근을 원하는 component나 html element에 ref="링크명"을 붙여주고 this.$refs.xxxx 로 접근을 하면 된다. ref 사용예시 => 접근울 원하는 component에 ref변수를 붙여준다. handleResize(event) { // this.refs 변수를 살펴보면 위에서 지정한 ref 링크가 적제되어 있고 component의 경우 $el 변수가 적재된다. this.contentHeight = window.inne..
[Webpack] webpack dev server로 CORS 문제 해결하기 Vue나 React로 SPA 화면 개발시 UI에서 다른 서버의 API를 바로 요청하면 아래와 같이 CORS 에러를 만나게 된다. Access to fetch at ‘http://localhost:8000’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. CORS는 Cross-Origi..
[HTML] Viewport 개념 모바일용 반응형 웹을 개발할때 필수적으로 알아야 하는 개념이 viewport이다. 안드로이드 등 단말에서 실제 표현되는 화면 크기를 viewport라고 하는데 쉽게 와닿지가 않아서 밑바닥부터 살펴보았다. 해상도 우리가 모바일에서 보는 해상도는 일반적으로 FHD, FHD+, QHD 등등 어마무시하게 큰 사이즈들이다. 갤럭시 S10+의 경우 3040 * 1440라는 어마어마한 크기를 보여줍니다. 우리가 일반적으로 PC에서 사용되는 해상도가 1920 * 1080 ( FHD ) 이라는 것을 생각해 본다면 작은 화면에 엄청난 해상도가 들어가 있음을 알 수 있다. 보통 피씨 디바이스는 화면이 모바일 기기보다 훨씬 크다. 만일 두가지 디바이스의 해상도가 같다면 디스플레이에 표시되는 내용도 같을 것이고 아래와 같이 화..
[HTTrack] httrack 실행시 Mirror error 해결 방법 Url을 입력하고 httrack을 실행하면 바로 Mirror error 에러가 나고 종료될때가 있다 그럴때는 advanced option에서 Brower id -> identity -> None으로 설정 Ftp proxy disable 위 설정 후 다시 덤프해보면 start가 된다.
[Vue.js] vue-router hash 모드 vs history 모드 Vue-router를 사용하면 기본적으로 hash 모드로 router가 동작을 한다. hash모드로 동작할 경우 url에 아래와 같이 # 이 붙는다. http://localhost:9090/#/user 그러면 위 #을 url에서 없애려면 어떻게 해야 할까? router 설정에서 history 모드로 설정을 해주면 된다. import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ mode: 'history', // mode에 history 값을 설정하여 history모드로 변경한다. routes: [ { ..
[Vue.js] webpack.config.js 분석 Vue.js 빌드 환경 구축 시 기본적으로 webpack 빌드를 사용하고 webpack.config.js 설정이 필요하다. 기본적인 모습은 다음과 같다. module.exports = { mode: 'development', resolve: { extensions: ['.js', '.vue'] }, module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' }, { test: /\.js?$/, loader: 'babel-loader' } ] }, resolve: { extensions: ['.js', '.vue'], alias: { '@': path.resolve(__dirname, 'src/'), } }, plugins: [ new VueLoaderPlug..
[Spring boot] OAuth2 login(Google, Facebook, Naver, Kakao) 소셜 OAuth2 서비스 등록 구글(Google) 구글 OAuth2 서비스를 등록하기위해서는 아래 Google console로 가서 프로젝트 및 클라이언트 ID를 등록해야 한다. 아래 사이트로 가서 본인의 Google 계정으로 로그인을 한다. https://console.cloud.google.com/apis 로그인을 하면 아래 대시보드 메뉴로 가서 우측 프로젝트 만들기를 클릭한다. 프로젝트 이름을 입력하고 만들기를 누른다. 상단 "API 및 서비스 사용 설정" 을 클릭한다. OAuth 동의 화면 -> 외부 선택 후 만들기 클릭 앱이름을 입력한다. 나머지는 부가 정보이고 현재 테스트 서버에서 작업중이므로 승인된 도메인은 입력하지 않고 Pass. 개발자 이메일 정보 정도 입력하고 "저장 후 계속" 을 클릭..

티스토리툴바