안녕하세요 상훈입니다. Javascript 에서 window.location 을 이용하여 개발/테스트/운영을 구분하기 위해서 쓸 수 있는 간단한 스크립트를 소개합니다. 물론 제약사항이 존재합니다. 예를 들어 devURL, tstURL, URL 이런식으로 접두 주소를 가지고 있어야합니다. 바로 보시죠 window.location 이용하기 //개발모드 확인하기 window.location.hostname.startsWith('dev') //테스트모드 확인하기 window.location.hostname.startsWith('tst') 이런식으로 사용할 수 있네요. return 되는 결과는 boolean 입니다 ( true / false ) window.location.hostname.startsWith() ..

FrontEnd/JavaScript 2023. 12. 20. 18:48

Reactivity API: Core | Vue.js vuejs.org

FrontEnd/Vue.js 2023. 6. 20. 10:22

안녕하세요 상훈입니다. 지난 포스팅에서 부모 -> 자식 v-model 값을 전달할 수 있게 코딩하는 것을 언급하였었는데, 오늘은 여러 개의 v-model 을 props 로 내려주는 내용을 포스팅 하려고 합니다. 2023.06.12 - [FrontEnd/Vue.js] - [ Vue.js ] Component 에 v-model 값 적용하기 1(이전포스팅) [ Vue.js ] Component 에 v-model 값 적용하기 1 안녕하세요 상훈입니다. Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다. 필요요소 : 부모컴포넌트, 자식컴포넌트 소스 확인(링크를 통해 작성 code-hoon.tistory.com 필요요소: 부모컴포넌트, ..

FrontEnd/Vue.js 2023. 6. 13. 14:35

안녕하세요 상훈입니다. Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다. 필요요소 : 부모컴포넌트, 자식컴포넌트 소스 확인(링크를 통해 작성한 내용 확인이 가능합니다) Vue SFC Playground play.vuejs.org 1. 부모컴포넌트 메시지: {{ message }} ref 로 message 를 선언 후 v-model 과 연동하여 자식 컴포넌트에 값을 내려준다. 2. 자식컴포넌트 props: defineProps 로 message 값을 받아온다고 선언 emit: props로 받아온 message 를 키 값으로 update:message 로 상신할 것을 선언 method: updateInputs 에서 받아온 eve..

FrontEnd/Vue.js 2023. 6. 12. 11:19

Vue.js 공식 문서를 보고 작성한 내용입니다. 그간 slot 의 존재는 알고 있었지만, 컴포넌트에 대한 이해력 부족으로 + 알아보기 귀찮음으로 학습을 하지 않고 미뤄왔던 내용 중 하나였다. Slot 슬롯 | Vue.js ko.vuejs.org 1. 간단하게 생각해서 버튼 내에 작성할 내용을 대체할 수 있다고 생각하면 편하다. 2. 좀 더 나아가서, 특정 태그 내에 특정 컴포넌트 등을 삽입할 수 있다. 1. 버튼에 slot 적용해보기 // 1. slot 을 작성한 버튼 컴포넌트 this is replace context // 2. 위에서 작성한 컴포넌트를 활용 저장할겁니다 2. 컴포넌트도 slot 내부에 넣을 수 있다. // 또 다른 컴포넌트 생성 두 번째 컴포넌트입니다. // 위에서 생성한 컴포넌트..

FrontEnd/Vue.js 2023. 6. 9. 11:23

html 관련 img, pictrue tag 에 대해 간략 서술하기 1. 로딩 속도를 지연시켜, 사용자가 바라보고 있는 화면에만 img 를 로딩시킨다. -> 초기 로딩속도를 높여준다. 2. 태그를 사용하는 것 니꼴라스의 "웹사이트 로딩이 더 빨라지는 매직? 🍯 꿀팁 공유 10분컷!" 영상 강의를 보고 작성한 글 https://www.youtube.com/watch?v=8EWwyAcqR6o

FrontEnd 2023. 5. 29. 18:04

"한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 안녕하세요 상훈입니다. 이번 달 한빛미디어-나는리뷰어다 에서 제공 받은 도서는 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 입니다. 리액트에 대한 관심과 공부 시간이 어느 정도 들어간만큼 기초적인 리액트에 대한 개념은 안 상태로 이 도서를 전자책으로 얻게 되어, 작성하였습니다. 🙄 어느 정도 수준의 책인가요? 책 소개에서도 언급이 되었지만, 이 도서는 초급 수준의 리액트 네이티브 개발을 한다고, 말해주고 있습니다. 그러나, 찬찬히 살펴면 어느 정도 개발을 하셨던 분들도 보시면 중간중간에 도움이 될 만한 내용들이 많이 있는 것 같습니다. 추천드려요! 🎆 목차 간략한 목차부터 말씀드리자면, 이 책은 1. Expo, React-Native, ..

FrontEnd/React.js 2023. 3. 27. 18:05

안녕하세요 상훈입니다. ChatGPT OpenAI 의 API 를 사용하려고 하는데, 위와같은 에러가 발생하였습니다. 이와 같은 경우, 기준치 사용량을 초과했다는 뜻입니다. 제 경우에는 반대로 billing 설정을 안해서 이렇게 되었더군요.. ㅎㅎ 그래서 Free Trial 에서 Upgrade 해주었습니다. 이상입니다. ChatGPT가 활성화가 되면서 블로그의 값어치가 뚝 떨어졌다는 것이 느껴졌습니다. 기존에 10개의 글을 검색했을 때는 여러 블로그를 살펴보았지만, 지금은 저로서도 ChatGPT 를 사용하고 블로그를 들어가지 않게 되네요. 또한 Bing 의 AI 도 웹 서칭엔진 등을 이용하여 웹 스크래핑하기에 무척 뛰어나더군요. 그래서 있던 광고들을 모두 내렸습니다. 수익성이 거의 전무하다보니 그냥 내려버..

FrontEnd/JavaScript 2023. 3. 22. 11:03