웹 프론트70 자바스크립트 : 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. React Native : 버튼, TextInput 등에 box-shadow 주는 방법 React Native에서 box-shadow주기 react-native에서 버튼등에 box-shadow를 주고싶을 때가 있습니다. 그럴때는 RN에서 shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation 속성을 사용하여 box-shadow를 주면 됩니다. 아래 사이트를 이용하면 좀 더 편리하게 box-shadow 스타일링을 할 수 있습니다. :) https://ethercreative.github.io/react-native-shadow-generator/ 다음은 제가 textInput을 box-shadow로 만든 예제입니다. { setInputText(text); }} onSubmitEditing={Keyboard.dismiss} ref .. 2020. 7. 21. React-Native : qrcode 스캐너 이용하기 React-Native로 QR코드 인식 카메라 구현해보기 React-Native로 개발하던중 qrcode를 사용할 일이있어서, 해당 react-native-qrcode-scanner라는 라이브러리를 찾게 되었습니다.. 외국문서는 많이 있지만 한글로 된 문서는 많이 없는것 같아서 구현하고 테스트하는데 시간이 생각보다 걸리더라구요.. 아래 방법으로 구현하면 실제로 예제는 구동시킬수 있는것 같아서 간단하게 메모를 해보았습니다. ~ 1. react-native-qrcode-scanner 라이브러리 설치 및 의존성 라이브러리 설치 npm install react-native-camera npm install react-native-qrcode-scanner npm install react-native-permis.. 2020. 7. 19. Vue.js [강좌 3-1강정리] 웹펙의 사용이유 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 웹펙의 사용이유 웹펙 관리의 어려움보다 스크립트 관리의 어려움이 커질때 웹펙이 필요하다. 웹펙을 사용하려면 노드를 사용해야하는데, node 홈페이지에서 LTS node버전을 받는 것을 추천한다. 노드를 설치하면 npm을 사용할 수 있는데, 이는 남이 작성한 자바스크립트 라이브러리를 사용할 수 있도록 도와준다. npm init을 하면 package.json파일이 생기는데 이는 내가 사용한 남의 자바스크립.. 2020. 2. 4. Vue.js - 전역 component / template / vue data / props / [강좌 2강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# (2-1강) Vue 컴포넌트의 사용 이유 컴포넌트 사용은 데이터가 중복되는 것을 피하고 동일한 내용을 반복하고자 할때 사용한다. 컴포넌트를 사용하지 않게 되면, 코드가 지저분하고 중복이 되게 된다. 반복되는 부분을 Component로 만든다. Vue 컴포넌트는 다음과 같이 작성한다. (파스칼 케이스나 케밥케이스를 사용) Vue.component(‘word-replay’); Vue 에서 알아두면 좋은 변.. 2019. 12. 17. 이전 1 2 3 4 5 6 7 다음
