본문 바로가기

Coding/Etc120

The virtual environment was not created successfully because ensurepip is not available. 오류해결 가상 환경에서 작업을 하기 위해 아래와 같은 명령어로 가상환경을 생성하려했었다. python3 -m venv env 그런데 아래와 같은 오류가 발생했다. ---------------------------------------------------------------------------The virtual environment was not created successfully because ensurepip is notavailable. On Debian/Ubuntu systems, you need to install the python3-venvpackage using the following command. apt-get install python3-venv You may need to use s.. 2018. 2. 2.
HTML5 deatils태그 onToggle 속성 HTML5에 details태그가 추가되었다.간단하게 추가적인 정보를 표시할 때 상당히 유용하게 쓸 수 있을 것 같다.기본적인 틀은 아래와 같다. 제목 추가적인 내용 위와 같이 작성하면 아래와 아래와 같이 맨 왼쪽에 화살표가 추가된 형태로 나온다. 여기서 화살표를 눌러보면 추가적인 내용이라고 쓴 부분이 나온다. 다시 화살표를 누르면 없어진다.여기서 details태그의 속성으로 onToggle 속성을 줄 수 있다. 해당 속성은 화살표가 클릭될 때 마다 발생하는 이벤트를 지정해줄 수 있다. 제목 추가적인 내용 참고로 => 는 ES6부터 지원되는 화살표 함수(Arrow function) 이다. var test = () => {alert("toggle");} 위 함수를 ES5 스타일로 바꿔보면 아래와 같다. fu.. 2018. 1. 31.
React.js Redux로 컴포넌트 여러개 연결하는 방법 React Native로 코드를 작성하던 중 문제에 부딪혔다.기존에는 State를 따로 관리할 필요가 없었지만 컴포넌트들이 많아질수록 구조가 Nested해졌고계속 props로 넘겨주기엔 너무 귀찮았다.그러다가 Redux라는걸 발견했고 사용해보기로 했다.다 좋았는데 문제가 발생했다.connect해준 값을 export해주면 connect해준 컴포넌트에만 State가 전달됐다.나는 모든 컴포넌트에 State를 전달해주고 싶었지만 그렇게 동작하지 않았다.react redux multiple componentsredux connect every components등 수많은 검색어를 입력하고 찾아봤지만 방법을 찾지 못했다.튼 각설하고 구조부터 살펴보자면 다음과 같다. App.js -> LoginRouter.js -.. 2018. 1. 30.
[React.js] 구글 Firebase 연동하는 방법 오늘은 React.js와 구글 Firebase(파이어베이스) 연동하는 방법에 대해 포스팅하겠습니다.저는 요즘 리액트 네이티브를 이용하여 어플을 제작하고 있는데요.평소에는 모든 서버 작업을 AWS에서 진행했지만 Firebase라는 괜찮은 서비스가 있어서한번 사용해보려고 합니다.데이터베이스나, 백엔드, 사용자 인증 관련하여 Firebase를 사용하면 보다 쉽게서비스를 구성할 수 있을 것 같습니다.먼저 아래의 사이트로 들어갑니다. https://firebase.google.com/ 시작하기를 누릅니다. 새로운 프로젝트를 생성해야 합니다.프로젝트 추가를 누릅니다. 프로젝트의 이름과 국가/지역을 선택하고프로젝트 만들기를 누릅니다. 위와 같은 화면이 나온다면 성공적으로 프로젝트를 생성한겁니다.다음으로 yarn을 통.. 2018. 1. 27.
[React.js] react-native-elements 설치하는 방법 작업을 하다가 버튼이나 TextInput 같은 요소들을 직접 디자인 하기는 귀찮고웹 작업을 할때의 부트스트랩처럼 가져다 쓰기만 하면 되는게 따로 없을까 싶어서관련 정보들을 찾아보았다.그러다가 react-native-elements 라는걸 발견했다.나는 expo를 사용하고 있었고 아래의 명령어로 설치했다. yarn add react-native-elements 예를 들어 버튼을 사용하고 싶다면 최상단에 import { Button } from 'react-native-elements' 를 선언해주면 된다.버튼 말고도 사용할만한게 상당히 많다. 버튼만 하더라도 종류가 이렇게 많다. API목록을 확인해보면 상당히 많은 부분들을 지원하고 있으므로 확인 후 사용하면 된다. 더 자세한 정보는 아래의 사이트를 참고 .. 2018. 1. 26.
[React.js] Halogen으로 Loading Indicator 만들기 로딩 중 페이지에 표시를 어떻게 해줄까 생각하다가Loading Indicator들을 찾아보기 시작했다.다행히도 위와 같은 좋은 패키지를 찾아냈다. 실제 데모는 아래의 페이지에서 확인할 수 있다. http://madscript.com/halogen/ 설치는 아래와 같이 진행하면 된다.npm, yarn 둘 중 원하는 걸로 설치하면 됨 yarn install halogeniumnpm install halogenium --save 사용 방법은 아래와 같다. 그냥 단순히 상단에 import { PulseLoader } from 'halogenium'; 선언해주고 해주면 됨.PulseLoader 말고도 지원하는 목록은 아래 참고 2018. 1. 26.

티스토리툴바