본문 바로가기

웹 프론트엔드59

JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 마우스 오른쪽 클릭을 눌렀을 때 나오는 메뉴를 contextmenu라고 합니다. 모바일에서는 보통 `LongClick` 시에 해당 메뉴가 나오게 되는데, 때에 따라 해당 부분때문에 모바일 웹앱을 만들때 방해가 될 수 있습니다. 이럴때는 하단 태그에 다음과 같은 JS 파일을 삽입해주면 문제가 해결됩니다. // context 메뉴 출력시 호출되는 event handler window.oncontextmenu = function(event) { event.preventDefault(); // 기본 태그 기능 막기 event.stopPropagation(); // 이벤트 전달 막기 return false; }; 2021. 7. 21.
자바스크립트 : 깊은 복사 vs 얕은 복사 깊은 복사 깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다. 즉 원본의 값만을 복사하여 반환 합니다. // 일반변수의 깊은복사 let a = 2; let b = a; console.log (a, b) // 2, 2 b = 3; console.log (a, b) // 2, 3 // 배열의 깊은복사 const a = [1, 2, 3, 4]; const b = [...a]; b[3] = 3 console.log(a) // 1, 2, 3, 4 console.log(b) // 1, 2, 3, 3 얕은 복사 반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다. .. 2021. 6. 15.
React-Native : toast 메세지 구현하기 (react-native-easy-toast) React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다. Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요 React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다. react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다. react-native-easy-toast 설치 아래와 같이 설치합니다. npm i --save react-native-easy-toast react-native-easy-toast 사용법 사용법은 무척 간단합니다. 요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다. 먼저 Toast에 대한 값.. 2021. 6. 14.
React Native : splash 화면 적용하기 React Native에서 데모 앱을 만드는데 Splash를 구현해야 할 일이 생겼습니다. React Native에서 splash를 적용하는 방법에 대해 알아보겠습니다. 1-1) Splash 구현을 위한 준비 단계 (Android) React Native에서 Splash를 구현하기 위해서는 react-native-splash-screen 라는 npm 라이브러리를 사용하는 것이 편리합니다. 1. react-native-splash-screen 라이브러리 설치 (공통) npm i react-native-splash-screen --save 2. android/app/src/main/ 맨 하단에 있는 MainActivity.java 파일 수정하기 (Android) package com.lottoproject;.. 2021. 5. 25.
자바스크립트 : Slice vs Splice 차이점 비교 (깊은 복사, 얕은 복사) Javascript에서 배열의 slice 메서드에 대해 알아보겠습니다. 보통 Splice와 Slice는 배열의 일부분을 잘라내어 새로운 배열을 만들고 싶을때 보통 사용하는데요, 저도 Splice와 Slice의 차이점을 알지못하고 썼는데, 잘 알고 쓰면 좋을것 같아서 정리를 하게 되었습니다. Slice 사용법 (깊은 복사) slice는 원본 배열을 바꾸지 않습니다. slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 깊은 복사의 방법입니다. 즉 원본 배열의 값만을 복사해서.. 2021. 4. 20.
개발 용어 : 캐리지 리턴(CR), 라인 피드 (LF) 알아보기 캐리지 리턴(CR)과 라인 피드(LF)란? 프로그래밍을 하다보면 \n으로 되어있는 문자를 만나게 됩니다. 보통 줄내림이라는 뜻인데 윈도우에서 이것저것 하다보면 \n이 아닌 \r\n도 만날 때가 있습니다. 각각의 의미를 살펴보겠습니다. \r Carriage Return(CR) 라는 의미를 가지며 일반적으로는 맨앞으로 이동하라는 뜻입니다. \n Line Feed(LF) 라는 의미를 가지며 일반적으로는 New Line, 즉 새로운 라인이라는 뜻입니다. 캐리지 리턴(CR)과 라인 피드(LF)의 어원 살펴보기 캐리지 리턴은 아래와 같은 타자기(typewriter)에서 따온 단어입니다. https://youtu.be/FkUXn5bOwzk 캐리지 리턴의 영문 뜻은 다음과 같습니다. Carrage: 운반, 또는 수송이.. 2021. 3. 23.
Vue.js : vue-loader / webpack watch/ webpack-dev-server/ style scoped /data와 computed : [강좌 4강 정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. 4-1) Vue-loader webpack config 설정 webpack.config.js파일에 있는 module의 Loader를 통해 빌드시 JS파일이 아닌 파일(ex .vue)파일을 Javascript 파일로 변환해 줄 수 있다. module의 Loader는 꼭 Javasc.. 2021. 1. 18.
Vue.js : Webpack 설정하기 : [강좌 3-3강 정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. NPM 패키지 모듈 설정하기 webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install을 진행합니다. package.json을 보면 다음과 같습니다. 추가적으로 vue-template.. 2020. 12. 20.
Vue.js - template, script, style 알아보기 [강좌 3-2강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 뷰 인스턴스 코드를 npm으로 수행하기 cdn으로 사용할때는 아래와 같이 Vue 인스턴스를 실행한다. const app = new Vue({ el: '#root', }) npm을 이용하여 설치를 한 이후에는 다음과 같이 Vue 인스턴스를 실행한다. import Vue from 'vue'; import NumberBaseball from './NumberBaseball.vue'; // 숫자야구 vue 컴.. 2020. 11. 23.
React Native : AsyncStorage 쉽게 사용해보기. 앱 개발을 할때 데이터를 저장할때 저장소에 대해서 고민을 많이 합니다. 보통 Component 내부의 State에 저장을 하거나 Component의 데이터의 State를 중앙집중적으로 관리하기 위해서 Redux를 사용하기도 하죠 ㅎㅎ 하지만 React-Native에서는 Screen의 Component의 State등에 데이터를 담아서 저장하면 문제점이 조금 있습니다. State는 앱이 꺼지거나, Screen의 이동이 일어나면 값이 보장되지 않고 사라질수 있기 때문입니다. 따라서 앱이 꺼져도 써야하는 데이터의 경우 Local 데이터베이스에 저장하여야하는데요, 보통 유저정보를 저장한다거나, JWT토큰저장, 유저가 기록한 메모를 저장 하는데에 사용했었습니다. React Native에서 Local Database.. 2020. 8. 23.