[Vue] Composition API

Vue3 에서 달라진 점 https://v3.ko.vuejs.org/guide/migration/introduction.html#주목할-만한-새로운-기능들 시작하기 | Vue.js 시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 v3.ko.vuejs.org https://composition-api.nuxtjs.org/ Nuxt Composition API Vue 3 Composition API in Nuxt composition-api.nuxtjs.org Composition API 탄생 배경 1. Options..
카테고리 없음 2022. 3. 21. 14:57

[Typescript] 타입스크립트 성능 고려하기 - 컴파일하기 쉬운 코드 작성

1. 타입간 merge 가 필요할 때는 type 보다 interface 를 사용하자. - 객체 사용 시 type 과 interface 는 다음과 같이 유사하게 사용 되고 있다. interface Foo { prop: string }; type Bar = { prop: string }; - 그러나 타입간 merge 가 필요할 때는 interface 의 extends 를 사용하는 것이 성능상으로 유리하다. interface 는 단순히 객체에 대한 모양으로 표현하기 때문에 여러개가 올 경우 단순히 merge 만 하면 되지만, type 은 객체 뿐만 아니라 원시타입도 올 수 있기 때문에 재귀적으로 속성을 merge 하고 그로인해 때로는 naver 가 나오면서 제대로 merge 가 안되는 경우도 있다. - 또한 ..
Helloworld!/Typescript 2022. 3. 21. 14:40

[Vue.js] "이 사이트에서 나가시겠습니까?" 구현하기

form 형식에 페이지에서 input 에 입력한 정보들을 저장하지 않고 페이지를 새로고침 하려하거나 다른 페이지로 나가려 할 때 "이 사이트에서 나가시겠습니까?" 라는 window 경고창을 본 적이 있을 것이다. 이를 구현하기 위해서는 window 에서 지원하는 beforeunload 라는 이벤트를 사용하면 된다. 우선 변경사항이 있는지 확인하는 플래그 변수는 isLeaveSite라고 하자 (ture이면 사이트를 종료하겠다는 것) 그리고 mounted 와 beforeUnmount 안에 다음과 같이 beforeunload 이벤트를 등록, 해지하는 코드를 입력한다. mounted() { window.addEventListener('beforeunload', this.unLoadEvent); }, before..
Helloworld!/Vue.js 2021. 12. 2. 18:48

[Javascript] ios App 에서는 window.open 동작 하지 않는다.

ios App 에서는 window.open 이 동작하지 않는다. window.open('/'); window.location.href 으로 대체해서 사용하자. function loadlink() { if (typeof (window.open) == "function") { window.open("http://www.stackoverflow.com"); } else { window.location.href = "http://www.stackoverflow.com"; } } https://stackoverflow.com/questions/11816380/window-open-does-not-work-on-ios-app-using-phone-gap
Helloworld!/Javascript & jQuery 2020. 1. 8. 14:55

X-Forwarded-For(XFF) 란?

XFF는 HTTP Header 중 하나로 HTTP Server에 요청한 Client의 IP를 식별하기 위한 표준이다. (XFF 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더이다.) 웹 서버나 WAS 앞에 L4 같은 Load balancers 나 Proxy server, caching server 등의 장비가 있을 경우 웹서버는 Proxy server 나 장비IP에서 접속한 것으로 인식한다. 그렇기 때문에 웹서버는 실제 클라이언트 IP가 아닌 앞단에 있는 Proxy서버 IP를 요청한 IP로 인식하고, Proxy장비 IP 로 웹로그를 남기게 된다. 즉, 클라이언트 IP ⟶ Proxy 서버 및 장비 ⟶ 웹 서버 이 때 웹프로그램에서는 ..
카테고리 없음 2019. 8. 14. 14:45

[Vue.js] Event Handling

1. v-on 디렉티브를 사용하여 DOM 이벤트를 실행할 때 사용 한다. Add 1 v-on 을 대체해서 @을 사용할 수 있다. Add 1 2. 이벤트 전파 이벤트 전파로 원하는 이벤트 외에 다른 이벤트까지 발생하는 상황 발생할 경우 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이고, event.preventDefault() : 기본 이벤트의 자동 실행을 중지시킴 event.stopPropagation() : 이벤트의 전파를 막음 Vue 에서는 다음과 같이 이용되고 있다. Add 1 prevent 외에 다른 수식어는 다음과 같다. @click.stop : 이벤트 전파 중단시킴 @click.capture :..
카테고리 없음 2019. 7. 11. 17:57

[GIT] commit 취소 : git reset

방금 local stage 에서 commit 을 했는데 취소하고 싶다면 reset 을 하면 된다. 특히, reset 중 다음과 같이 네종류가 있는데 commit 하기전 상태는 유지하면서 commit 명령어를 친 것만 취소하고 싶다면 soft나 mixed 를 사용하면된다. soft 는 해당 파일들은 staged 상태로 워킹 디렉토리에 보존하고 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존), mixed 는 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존한다 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존). 또한, hard 는 commit 뿐만 아니라 해당 파일들 모두 삭제. 즉, 모두 취소(reset)을 해버린다. 참고 사이트 : https://gmlwjd..
Helloworld!/GIT 2019. 7. 3. 18:59