본문 바로가기

분류 전체보기154

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.
WebStrom - 메모리 늘리기 WebStorm을 사용하다 보면 메모리가 부족할 때가 많습니다. Node를 개발할 때 terminal로 node server를 돌린다던지, npm으로 webpack-dev-server를 띄운다던지, 전체 코드에서 특정 문자열을 검색한다던지 이러한 무거운 작업을 수행할 때, WebStorm이 버벅거리면서 심지어 멈추거나 재실행을 해야 할 때도 있습니다. 결국 CPU가 WebStorm에 대한 작업 스레드를 처리할 때 시간이 오래 걸린다던지, 아니면 웹스톰에서 메모리를 많이 점유한다던지 하는 이유로 WebStorm이 느려지는데요, 보통 제 생각에는 메모리 문제가 많았던 것 같습니다. 그래서 웹스톰에 대한 메모리를 어떻게 늘리는지 찾아보니 간단하게 WebStrom의 메모리를 늘릴 수 있다는 것을 알게 되었습니다.. 2020. 12. 14.
GIT - Commit한 메세지 문구 수정하기 (Commit 메세지 오타 수정) GIT을 사용하다 보면 커밋을 메시지에 오타가 들어가거나 커밋 메시지를 바꾸고 싶을 때가 있습니다. 이럴 때 저는 예전에는 git reset HEAD^ 를 사용해서 Commit을 취소하고 메시지 수정 후에 다시 Commit을 했는데 찾아보니 더 간단한 방법이 있는 것 같아서 정리해보려고 합니다. 커밋 메시지를 잘못 입력했을 때 보통 어떤 식으로 수정해야 하는지 한번 알아보겠습니다. 1. 마지막 Commit 메시지 수정하기 마지막 커밋 메세지를 수정하는 것은 비교적 간단합니다. git에서 제공하는 --ammend 옵션을 통해 간단하게 Commit 메시지를 수정할 수 있습니다. 형식은 다음과 같습니다. git commit --amend -m "바꿀 메시지" 아래는 실제로 실습해본 내용입니다. 또는 git c.. 2020. 12. 6.
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.
GIT - 커밋이나 ADD를 취소하기 (실수로 Commit 이나 Add를 잘못했을 때) 보통 GIT을 이용하여 개발을 하다보면, 나도 모르게 습관적으로 commit이나 ADD를 하고 아차, 할때가 있습니다. 예를 들어, 어떤 기능을 만들고 테스트를 제대로 안해보고 commit을 했는데 실제로 돌려보니 기능에 문제가 있거나, 오탈자가 났거나 할때입니다. 제가 처음에 GIT을 사용했을때 이러한 경우 참 난감했는데, 결국에는 다 방법이 있더라구요. GIT에서 마지막 COMMIT을 취소하고 수정하는 방법을 알아보겠습니다. GIT ADD 취소하기 $ git reset HEAD // 해당 파일만 add 취소 $ git reset HEAD // 모든 파일 add 취소 보통 ADD는 Commit하기전 파일에 대한 변경사항을 Staging area로 추가하기 위해 사용합니다. 즉 변경된 파일들중에 COMM.. 2020. 11. 8.
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.
도커 : docker logs의 --tail을 이용하여 컨테이너 로그 확인하기 도커의 컨테이너에서 발생하는 로그들을 확인해야할 때가 종종있다. 이럴때 docker exec로 들어가서 로그를 확인하는것도 방법일 수 있지만 host os에서 간단히 컨테이너의 로그를 확인할 수 있는 방법도 있다 (하하) 아래 명령어를 이용하면 host os에서 명령어 한줄로 쉽게 컨테이너에서 발생하는 로그를 확인 할 수 있다. sudo docker logs --tail 10 -f 6fef3c2e0f4b 위 명령어는 발생한 로그중에 아래 10줄을 보여주는 명령어이다. -f 옵션을 주면 터미널에서 foregrond로 (터미널의 프로세스로) 동작하기 때문에 실시간으로 들어오는 로그들을 눈으로 확인할 수 있다. 2020. 6. 16.
도커란? 서버 관리 ? 일반적으로 서버를 관리한다는건 복잡하고 어려우며 고급 개발자들의 섬세한 작업이 필요합니다. 서버를 관리하게 되면 보통 ./configure 와 make && make install를 사용해서 세팅을 하게 되고, 어느정도 익숙해지더라도 리눅스 배포판이 바뀌거나 환경이 달라지면 꼭 문제가 생기곤 했습니다. 하나의 서버에 여러개의 프로그램을 설치하는 것도 문제였는데 , 서로 사용하는 라이브러리의 버전이 다르거나 동일한 포트를 사용하는 경우는 설치가 굉장히 까다로웠습니다. 차라리 다른 서버에 설치하는게 나았고 그렇게 PC의 갯수가 늘어나고 자원이 낭비됩니다. centos에 익숙해지면 ubuntu, aws에 익숙해지면 azure을 써야하는 일이 생깁니다. Devops의 등장으로 배포가 더 자주 이루.. 2020. 6. 16.