본문 바로가기
반응형

IT314

Vue Data 학습정리 data 속성으로 설정한 변수만 웹브라우저에서 감시를 하고 변경사항을 적용시켜준다var vm1 = new Vue({ el : '#test1', data : { value1 : 100, obj1 : {} } }) vm1.value2 = 1000 value1 : {{value1}} value2 : {{value2}} value2value1 은 표시 되지만 value2 는 웹브라우저에 표시되지 않는다value2 는 button 을 클릭해서 action 을 주면 웹브라우저에 표시된다 data 속성으로 표시 하지 않는 변수를 웹브라우저가 감시하고 적용할 수 있게 하려면 Vue.set 을 사용해서 data 안에 넣어주는 방식으로 해결한다//vm1.value2 = 1000 Vue.set(vm1.obj1, 'value.. 2022. 8. 25.
imgur access key 생성 방법 imgur.com 에 이미지를 프로그램으로 올리려고 하는데 방법을 몰라서 한참 헤매다가 정리해놓습니다imgur api 를 참고했습니다Imgur APIimage](https://i.imgur.com/n744BL9.png) ## API Status Status for the API can be found at [status.imgur.com](http://status.imgur.com)! ## Getting Started Imgur's API exposes the entire Imgur infrastructure via a standardized programmatic interface. Using Imgur's API, you can do just about anything you can do on img.. 2022. 8. 25.
ESLint 규칙 규칙들여쓰기시 2칸 공백사용 을 사용합니다.eslint: indentfunction hello (name) { console.log('hi', name)}이스케이프를 피하기 위해 문자열에 작은 따옴표 를 사용합니다.eslint: quotesconsole.log('hello there')$("")사용하지 않는 변수를 정의하지 마세요.eslint: no-unused-varsfunction myFunction () { var result = something() // ✗ 피하세요}예약어 뒤에는 공백을 추가합니다.eslint: keyword-spacingif (condition) { ... } // ✓ 좋아요if(condition) { ... } // ✗ 피하세요함수 선언 괄호 앞에 공백을 추가합니다.eslin.. 2022. 8. 25.
vue.js 용량 줄이기 🌐vue.js 나 react 를 사용하다보면 여기저기 라이브러리들 설치하고 사용하니점점 사이즈가 커져버리고 있다 사이즈 줄이기 위한 노력은 지속적으로 하는 게 맞는 것 같다 1. 번들 현황 보고vue-cli 를 사용하여 번들 리포트 작성# package.json # script 추가한다 "build-report": "vue-cli-service build --report" # 위에서 만든 스크립트 실행 npm run build-report2. 번들 사이즈 줄이기echarts (stat size: 2.7mb, parsed: 814kb, gzipped: 270.7kb)bootstrap-vue (stat size: 772kb, parsed: 297kb, gzipped: 69kb) 더 작은 대체 라이브러리 찾기.. 2022. 8. 25.
zsh 꾸미기 for Mac 최신 macOS 에는 zsh 가 기본으로 설치되어 있습니다zsh 테마는 .zshrc 파일을 수정해서 변경할 수 있습니다 zsh 의 플러그인과 테마를 편리하게 사용할 수 있는 oh-my-zsh 를 설치합니다# oh-my-zsh 설치 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ohmyzsh/ohmyzsh🙃 A delightful community-driven (with 1500+ contributors) framework for managing your zsh configuration. Includes 200+ optional plugins (rails, git, OS.. 2022. 8. 23.
neovim 설치 for Mac neovim 은 24bit True Color 을 지원하고 더 가벼운 Terminal 용 editor # neovim 설치 brew install neovim~/.zshrc 에 vim 대신 neovim 이 실행되도록 alias 추가alias vim="nvim" alias vi="nvim" alias vimdiff="nvim -d" export EDITOR=/usr/local/bin/nvim Uploaded by N2T 2022. 8. 23.
화면 확대 for Mac Windows 에서 zoomit 프로그램으로 확대 기능을 사용했다면 Mac 에서는 자체 확대 기능을 활용하면 된다시스템 환경설정 > Accessibility > Use keyboard shortcuts to zoom : 체크단축키 : option + command + 8 : 전체 확대 (단계적 확대에서 설정한 비율로 토글 된다)단축키 : option + command + + - : 단계적 확대 단계적 축소Use scroll gesture with modifier keys to zoom : 체크컨트롤 키를 누른 상태에서 마우스 스크롤 : 확대 축소 Uploaded by N2T 2022. 8. 23.
osx keychain 설정 for Mac Git 을 사용하면서 Terminal 에서 CLI 로 작업하는 경우 인증을 요청하는 경우가 생긴다 Git 네트워크 프로토콜 Git 이 리모트 저장소와 통신을 할 때 3가지 프로토콜을 사용할 수 있다 Git : 인증 기능이 약해서 사용안함 SSH : HTTP 보안이 약해서 SSH 로 인증하는 방식으로 RSA 키를 등록해야 함 HTTP/S : 많이 사용하는 추세 (아이디 비밀번호로 인증) GitHub 에 접근할 때 HTTPS 를 사용하면서 비밀번호를 기억하게 하는 방법 첫번째.OSX 키체인을 이용해서 비밀번호를 저장하는 방법 # osxkeychain 키체인 헬퍼가 설치되어 있는 지 확인 git credential-osxkeychain # osxkeychain 헬퍼를 인증 처리에 사용하도록 설정 git con.. 2022. 8. 23.
스크린샷 찍기 for Mac 스크린샷 또는 키보드 단축키를 사용하여 Mac에서 화면의 사진(스크린샷이라고 함) 또는 기록을 찍을 수 있습니다. 스크린샷은 쉽게 스크린샷 및 화면 기록을 찍을 수 있는 캡처한 내용을 제어할 수 있는 옵션(예: 타이머 지연 또는 포인터나 클릭 포함하기)이 있는 도구 패널을 제공합니다.스크린샷을 사용하여 사진 또는 화면 기록 찍기Mac에서 Shift-Command-5를 누르거나 Launchpad를 사용하여 스크린샷을 열고 도구를 표시하십시오.사용할 도구를 클릭하여 캡처하거나 기록하려는 내용을 선택하십시오(또는 Touch Bar 사용).화면의 일부의 경우, 프레임을 드래그하여 재배치하거나 가장자리를 드래그하여 캡처하거나 기록하려는 영역의 크기를 조절하십시오.동작전체 화면 캡처하기윈도우 캡처하기화면의 일부 캡.. 2022. 8. 23.
iTerm2 설치 for Mac macOS 의 기본 Terminal 을 대체하는 터미널 에뮬레이터iTerm2 - macOS Terminal ReplacementiTerm2 is a replacement for Terminal and the successor to iTermhttps://www.iterm2.com/다운로드하기iterm2 홈페이지에서 다운로드 하고 실행합니다iterm2 테마변경mbadolato/iTerm2-Color-SchemesYou can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload t.. 2022. 8. 23.
OpenJDK 설치 for Mac Mac 에서 Homebrew 를 이용해서 OpenJDK 를 설치한다그냥 설치할 수는 없고 AdoptOpenJDK 를 이용해서 Homebrew 로 설치해야 한다AdoptOpenJDK/homebrew-openjdkbrew cask install adoptopenjdk brew tap AdoptOpenJDK/openjdk brew cask install Versions * Large heap: Use this if you need heap memory > 57GB, or > 25GB on Linux. It enables -Xnocompressedref ( doc). Use it along with -Xmx ( doc) which sets the max heap size.https://github.com/Ado.. 2022. 8. 23.
Homebrew 설치 macOS 패키지 관리자로 패키지 설치를 간편하게 하자HomebrewThe Missing Package Manager for macOS (or Linux).https://brew.sh/index_ko 설치하기/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"활용하기Apple 에서 제공하지 않는 패키지 관리자를 설치합니다 (거의 개발자를 위한 Tools)brew install wgetbrew 는 전용 디렉토리에 패키지를 설치하고 /usr/local 위치로 심볼릭 링크를 연결합니다패키지 검색하기Homebrew 의 패키지는 formula 라고 부르며 brew 웹사이트나 brew searc.. 2022. 8. 23.
Mac 기본설정 키보드 기호 설명 단축키 입력과 관련해서 기호를 사용합니다. 잘 기억해 둡니다.기호설명⌘Command⌥Option⌃Control⇧Shift+동시 입력,키를 떼고 다시 입력함시스템설정상단메뉴에서 시스템 환경설정 메뉴를 선택한다System PreferencesMisson Control미션 컨트롤 창 순서가 최근 사용 순으로 바뀌는 것을 방지한다Mission Control > Automatically rearrange Spaces based on most recent use : 체크 안함Language & Region메뉴를 한글로 표시하고 오류 메시지도 영문으로 나오게 한다English 를 추가하고 English 다음에 한국어가 나오도록 순서를 조절한다Security & Privacy화면 보호기가 켜지면 즉시.. 2022. 8. 23.
Mac 개발자를 위한 프로그램설정 개발 환경 구축을 위한 프로그램을 설치Homebrew : Mac용 패키지 매니저Git : 버전 관리 도구iTerm2 : Mac 의 기본 Terminal 대체용 터미널neovim : Mac 의 기본 editor vim 대체용 터미널용 에디터fzf : fuzzy finder 도구로 빠른 검색기능 제공fasd : 파일 또는 디렉토리 검색 도구tmux : 터미널 파일을 여러 개로 분할하는 도구tig : 텍스트모드 git 인터페이스 도구jq : JSON 결과를 이쁘게 보여주고 편집하는 도구ngrok : 로컬 서버를 외부로 터널링해서 오픈해주는 도구asciinema : 터미널을 텍스트로 녹화하는 프로그램neofetch : 시스템 상태를 보여주는 도구 참고사이트https://subicura.com/2017/11/22.. 2022. 8. 23.
APP 리뷰 수집 서비스 TDD 로 해보자언어 : javascript테스트프레임워크 : jestIDE : VSCode JEST Dochttps://jestjs.io/docs/getting-started Javscript TDD STEP 0. 환경구성# npm 초기화 npm init -y # jest 설치 npm i -D jest # appstore scraper 라이브러리 설치 npm i app-store-scraper # playstore scraper 라이브러리 설치 npm i google-play-scraper package.json 수정{ "scripts": { "test": "jest" }, }Generate a basic jest configuration file# npx jest --init The following.. 2022. 8. 23.
Python 설치 for Mac Homebrew 설치pyenv 설치nvm 이 node version 관리 였다면 python 에는 pyenv 가 있네요brew install pyenvpyenv 로 python 설치pyenv install -l #python 최신버전 3.10.6 설치 pyenv install 3.10.6 #설치된 python 리스트 확인 pyenv versions #현재 python 버전 확인 pyenv version global python 버전 설정pyenv global 3.10.6 #현재 python 버전 확인 pyenv version .zprofile 에 설정추가zsh 아닌 경우는 공식 문서 참고하세요 https://github.com/pyenv/pyenv#set-up-your-shell-environment-f.. 2022. 8. 23.
RN(ReactNative) ThemeProvider Jest 적용법 현상 테마 적용하겠다고 react native elements 를 설치해서 적용했더니 테스트가 전부 실패 원인 단위 테스트 할 경우에 ThemeProvider 가 적용되지 않아서 입니다 해결방법 jest 테스트 를 진행할 때 ThemeProvider 로 감싸 주도록 util 을 만들어서 사용합니다 //src > utils > test-utils.js import {render} from '@testing-library/react-native'; import { ThemeProvider, createTheme, lightColors, darkColors, } from '@rneui/themed'; const AllTheProviders = ({children}) => { const theme = creat.. 2022. 8. 22.
RN(ReactNative) SafeAreaProvider Jest 적용법 현상 SafeAreaProvider 를 적용했더니 Jest 의 테스트가 전부 실패 getByText 같은 간단한 것도 못 가져온다고 실패 원인 SafeAreaProvider 를 jest 로 테스트 할 경우에 못 읽어옴 import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context'; ...생략... return ( ); ... 해결방법 mocking 하면 됩니다. 공식문서에서는 jest 설정파일에 아래 두줄 추가 하라고 했는데 저는 해결이 안되어서 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; jest.mock('react-native-saf.. 2022. 8. 22.
RN(ReactNative) TDD TODO 앱 디버깅하기 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #8 RN(ReactNative) TDD TODO 앱 만들기 #8 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #7 RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들.. skyksit.tistory.com 이전에 만들어 둔 앱을 디버깅 하려고 합니다 성능 개선을 위해서는 먼저 성능이 어떤지 측정합니다 테스트 케이스 'Build a React Native app' 을 추가 합니다 .. 2022. 8. 16.
RN(ReactNative) 디버거 설정하기 ReactNative 는 웹이 아니라서 디버깅 하려면 다른 방법을 이용해야 합니다 react-native-debugger 라는 유용한 라이브러리가 벌써 있네요 PC 에 설치용 어플리케이션 입니다 설치 #homebrew 버전확인 brew --version #homebrew 2.6.0 이상 brew install --cask react-native-debugger React Native Debugger 설치 결과 React Native Debugger 를 실행하고 React Native 로 만든 앱을 애뮬레이터나 시뮬레이터로 실행하고 개발자 도구를 켜야 한다 2022. 8. 16.
RN(ReactNative) TDD TODO 앱 만들기 #8 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #7 RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들.. skyksit.tistory.com Task 수정기능 추가하기 수정기능이 가장 복잡하지만 일단 생각나는 테스트 케이스 추가 TaskItem-test.js 에 테스트 케이스 추가 describe('Edit Task.. 2022. 8. 12.
RN(ReactNative) TDD TODO 앱 만들기 #7 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #6 RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시.. skyksit.tistory.com coverage 한번 확인하고 시작합니다 HomeScreen-test 에 지난번에 만든 checkbox 확인용 테스트 케이스 추가 초기 데이터가 2개니 첫번째 체크박스 클릭하면 첫번째만 b.. 2022. 8. 12.
GIT commit message 규칙 Type feat : 새로운 기능 추가, 기존의 기능을 요구 사항에 맞추어 수정 fix : 기능에 대한 버그 수정 build : 빌드 관련 수정 chore : 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore ci : CI 관련 설정 수정 docs : 문서(주석) 수정 style : 코드 스타일, 포맷팅에 대한 수정 refactor : 기능의 변화가 아닌 코드 리팩터링 ex) 변수 이름 변경 test : 테스트 코드 추가/수정 release : 버전 릴리즈 일단 type 적고 : 내용 git log 로 commit message 확인 git log --oneline git log --pretty=oneline -5 git log --pretty=format: "%h : %s" 맘에 드는 .. 2022. 8. 12.
RN(ReactNative) TDD TODO 앱 만들기 #6 2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #5 RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시에 해당 Task 가 완료 되도록 기능 추가 합시다 TaskItem 에 체크박스 클릭 기능 추가 TaskItem-test.js 에.. skyksit.tistory.com Code Refactoring 일단 데이터를 지칭하는 것 부터 맞추려고 합니다. 개발새발 여기저기서 코드 참고하면서 개발하니 변수가 조금씩 달라서 보기 안좋네요. todo app 을 만드는 것이니 Task : 할일, 단수 Tas.. 2022. 8. 12.
RN(ReactNative) TDD TODO 앱 만들기 #5 2022.08.11 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #4 TaskList 에 있는 체크박스 클릭시에 해당 Task 가 완료 되도록 기능 추가 합시다 TaskItem 에 체크박스 클릭 기능 추가 TaskItem-test.js 에 체크박스 아이콘을 클릭하면 이벤트가 호출되는지 테스트 케이스를 추가합니다 //TaskItem-test.js ...생략... describe('TaskItem interaction', () => { beforeEach(() => { props = { key: '1', data: {id: '1', subject: 'Learn React Native', done: false}, onToggleCheckbox: jest.fn(), }; w.. 2022. 8. 12.
RN(ReactNative) TDD TODO 앱 만들기 #4 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #3 RN(ReactNative) TDD TODO 앱 만들기 #3 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #2 이전 테스트시에 한가지 Warning 이 보이는데 Warning: Each child.. skyksit.tistory.com 데이터에 unique 한 id 를 부여하기 이전에 초기 데이터의 id 를 1,2,3 이렇게 넣었는데 좀 더 고유한 id 를 넣기 위해서 shortid 라는 라이브러리를 사용합니다 const initia.. 2022. 8. 11.
RN(ReactNative) TDD TODO 앱 만들기 #3 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 2022.08.10 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #2 이전 테스트시에 한가지 Warning 이 보이는데 Warning: Each child in a list should have a unique "key" prop. TaskList 는 여러 개의 Task 가 쌓이면 스크롤이 생기도록 ScrollView 를 사용하고 있는데 ScrollView 내부의 리스트에 unique 한 key 를 prop 로 넣어달라는 것이다 TaskList 에 key 추가 TaskList-test.js 의 초기 데이터에 id 를 추가한다 //TaskList-test.js.. 2022. 8. 10.
RN(ReactNative) TDD TODO 앱 만들기 #2 2022.08.09 - [IT/React] - RN(ReactNative) TDD 설정 및 TODO 앱 만들기 Home 스크린 추가 App.js 에 작성된 것들을 HomeScreen.js 로 화면을 빼줍니다 화면은 screens 로 컴포넌트는 components 아래 만들어 줍니다 src > screens > HomeScreen.js 추가 import React from 'react'; import {Text, TextInput} from 'react-native'; export default function App() { return ( Todo TDD Learn React Native ); } 기존 text 와 textInput 을 HomeScreen.js 로 옮기고 App.js 를 레이아웃만 남깁.. 2022. 8. 10.
Javascript 객체 복사 (Object, Array) 객체의 복사 자바스크립트에서 변수에 객체 (객체, 배열)를 할당하는 방식은 참조를 만든다 let arr = [1,2,3]; let copy = arr; copy[0] = 'a'; console.log(arr); // ['a',2,3] console.log(copy); // ['a',2,3] console.log(arr === copy); //true 이런 방식은 copy 가 arr 의 값을 참조하기에 완전히 같은 것이다 객체(Object) 복사 참조하지 않게 복사하려면 assign 과 spread 연산자를 사용한다 //assign 을 이용한 객체 복사 let obj = {name:'kim'}; let copy = Object.assign({}, obj); console.log(obj === copy); .. 2022. 8. 10.
RN(ReactNative) 앱 이름 변경하기 change app name ReactNative 명칭 변경 app.json 명칭 변경 { "name": "reactNativeTodos", "displayName": "reactNativeTodos" } 안드로이드 명칭 변경 build.gradle 내의 applicationID 변경 프로젝트루트 > android > app > build.gradle android { ...생략... defaultConfig { applicationId "com.reactnativetodos" ...생략... 안드로이드 앱 이름 변경 프로젝트 루트 > android > app > src > main > res > values > strings.xml reactNativeTodos iOS APP 명칭 변경 Xcode 로 프로젝트 열어서 Display.. 2022. 8. 9.
반응형

티스토리툴바