• 개요
  • 포스트
  • 시리즈
  • 소개
React Native Flexbox와 친해지기

React Native Flexbox와 친해지기

React Native에선 Flexbox라는 형식으로 레이아웃 개발을 진행한다. 최신 웹 브라우저에서도 이 레이아웃이 작동하여 CSS 최신 방법론으로 알려져 있다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 적용할 수 있다. 아래 내용은 대부분 공식문서인 "Layout with Flexbox #"을 인용하였다. Flex flex will define how your items are going to “fill” over the available …

2020년 5월 7일 · 8 min read

React Native 개발환경 구축

React Native 개발환경 구축

들어가며 난 무언가를 시작하기전에 이게 왜 필요한지 어디에 활용되는지 반드시 파악하고 진행하는 편이다. 몇몇 자료를 찾아봤지만 아래의 글에서 무엇인가 깊고 진한 전문가의 향기가 났다. 여하지간 아래 글을 참고하여 RN의 특성을 파악하였다. [RN] React-Native의 장단점은? Expo Web(React Native for web) 튜토리얼 내용을 정리해보면 RN의 장점은 다음과 같이 추려진다. React를 알고 있다면 …

2020년 5월 7일 · 3 min read

Electron : Icons

아이콘 설정시 기존 자료들이 하라는대로 시도했지만 원활히 동작하지 않았다. 우선 여기서 사용중인 Electron + React 리포의 구조를 살펴보면 public에 electron의 코드가 포함되어 있다는 것을 감안했어야 하는데 그렇지 않아서 겪은 문제다. - [D] public - [D] assets - [F] main.js - [F] favicon.png - [D] icons - [D] win - [F] …

2020년 4월 24일 · 1 min read

Electron : Build

필자가 사용하는 Electron React Example 리포에선 이미 빌드 명령어가 만들어져 있는 상태라 npm run build 명령어를 치면 dist에 빌드된 파일이 생성된다. 설치 파일까지 알아서 생성된다(이건 일렉트론에서 기본적으로 해주는 듯) x64 기반으로 빌드가 진행되는데 차후에 아키텍처 별로 빌드가 필요한 상황이 온다면 더욱 상세하게 내용을 알아보고 여기에 추가하도록 할 예정이다. 우선 기본 …

2020년 4월 24일 · 0 min read

Electron : Native Node Module

일렉트론에선 분명히 노드 모듈을 사용할 수 있다고 명시되어 있었는데 막상 패키지를 설치하여 실행해보니 아래와 같은 에러가 발생했다. 문서를 살펴보니 재빌드가 필요하다고 한다. https://www.electronjs.org/docs/tutorial/using-native-node-modules 필자는 가장 간단한 방법으로 보여지는 '모듈을 설치하고 Electron용으로 다시 빌드하기'를 선택하였다. 윈도우와 맥에서 각각의 선행 작업이 필요하다. Windows Visual Studio 설치 Python 설치 위 작업을 마무리하고 아래 …

2020년 4월 24일 · 1 min read

Electron : Shell

Electron에는 shell이라는 라이브러리가 있다. 이 shell을 이용해 OS에 설정된 브라우저로 특정 주소를 띄우거나 파일 탐색기로 특정 위치에서 실행할 수 있다. 사용 방법 // MAIN 에서 호출시 const { shell } = require('electron') // Renderer 에서 호출시 // const { shell } = require('electron').remote //폴더 이름 const FOLDER_PATH = 'temp' shell.openExternal(FOLDER_PATH) …

2020년 4월 20일 · 1 min read

JavaScript 기본 문법 정리

JavaScript 기본 문법 정리

이전에 노트에 기록했던 내용을 블로그로 옮겨놓으려고 한다. 매우 기본적인 문법만 들어있다. 1. 변수 자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 따라서 알아서 할당된다. var i; var x = 123; var y = "123"; var z = false; var w = null; 덧붙히자면 var의 …

2020년 3월 23일 · 15 min read

React : 상태 관리

데이터 추가하기 class App extends Component { id = 2 state = { information: [ { id: 0, name: '배진오', phone: '010-0000-0000' }, { id: 1, name: '홍길동', phone: '010-0000-0000' }, ] } handleCreate = (data) => { const { information } = this.state; this.setState({ information: information.concat({ id: this.id++, ...data, …

2020년 2월 18일 · 4 min read

React + Electron : 이벤트

Send const { ipcRenderer } = window.require("electron"); class App extends Component { ... btnClick = () => { ipcRenderer.send('button-click'); } render() { ... return ( <button onClick={this.btnClick}></button> ) ... } } Electron에서는 Electron : 이벤트와 마찬가지로 이벤트를 처리해주면 된다! On const { ipcRenderer } = window.require("electron"); class App extends Component …

2020년 2월 17일 · 2 min read

React + Electron : Example

이 프로젝트에선 yarn을 사용하고 있는데 npm을 사용할 수 있겠지만 그냥 다운받았다. https://yarnpkg.com/lang/en/ git clone https://github.com/kitze/react-electron-example cd react-electron-example yarn yarn start 위 명령어를 콘솔에 입력하면 다음과 같은 창을 만날 수 있다! 어떤 원리로 돌아가는가 보았더니 mainWindow.loadURL( isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}` ); 개발중에는 React와 마찬가지로 3000번 포트에 올려서 Electron도 그 …

2020년 2월 12일 · 0 min read