Programming

HTML에서 이미지 파일 넣기 HTML은, base64 인코딩 방식으로 이미지를 넣을 수 있다. React Native에서 이미지 파일 넣기 const img = require('./bg.jpg'); Node.js API인 require는, 파일이 이미지라면, base64로 인코딩해준다.

react-native-paper란? React native에서, UI 색상을 쉽고 세련되게 꾸밀 수 있도록 도와주는 Node.js 패키지 React Native Paper React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases. reactnativepaper.com react-native-paper 설치 npm i react-native-paper react-native-paper 사용하기 Colors 객체에서, 색상 정보를 꺼내 사용한다. ( 파란색 - Colors.blue500 ) 500 : 주색상 200 : 주색상의 연한 버전 70..

React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 justify-content : center Yoga엔진 justifyContent : center React Native에서 컴포넌트 꾸미기 (스타일링) 1. 뷰 컴포넌트 이름에 View가 들어간 컴포넌트는, backgroundColor 속성을 사용해 배경색을 지정할 수 있다. 2. 텍스트 컴포넌트 Text 컴포넌트는, color 속성을 사용해 글자색을 지정할 수 있지만, 배경색은 지정할 수 없다 인라인 스타일로 꾸미기 인라인 : 컴포넌트의 기본속성인 style을 이용해, 컴포넌..

Pyscript란? HTML에서 python을 사용할 수 있도록 해주는 라이브러리 Pyscript.net Run Python code in your HTML. pyscript.net Pyscript의 원리 Pyodide - CPython의 포트, WebAssembly로 컴파일된 인터프리터 WebAssembly - 바이너리 포맷의 웹이 이해할 수 있는 기계어

ws란? 클라이언트와 서버사이의 Websocket 통신을 하게 해주는 Node.js 패키지 ws 설치 npm i ws express와 합치기 ( http + websocket ) import http from 'http' import {WebSocket} from 'ws' /* import express from 'express' const app = express() const server = http.createServer(app); */ const server = http.createServer(); // http 서버 만들기 const wss = new WebSocket.Server({ server }); // 웹소켓 서버 만들기 function handleConnection(socket) { c..

WebSocket이란? HTTP와 같은 데이터 송수신 규칙(프로토콜) WebSocket의 특징 첫 요청과 응답 이후로는, server가 user에게 데이터를 보낼 수 있다. ( HTTP는 사용자의 요청없이, 데이터를 받아올 수 없다. ) WSS ( Secure Web Socket ) WebSocket 작동방식 브라우저가 서버로 웹소켓 요청을 보냄 서버가 웹소켓 요청을 승낙 or 거절하여 응답 요청과 응답이 한번 성립되면, 연결이 성립(establish) 된다. ( 유저정보 기억 ) 브라우저의 요청없이, 서버가 브라우저로 데이터를 보낼 수 있다.

React의 API란? JSX 구문에서 사용되지않고, OS의 javascript엔진에서 사용하는 모든 기능 React Native API Alert 대화 상자를 보여주는 API import {Alert} from 'react-native' // API 불러오기 Alert.alert("제목", "메시지") // React Native에서 함수형식으로 사용 StyleSheet API [React.js] React와 CSS React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 just defineall.tistory.com Platform ..

속성이란? 클래스의 멤버변수 ( 클래스 내부 다양한 타입의 변수 ) React 컴포넌트의 속성 컴포넌트는, UI를 구성하는 "클래스" 이므로, 속성을 가질 수 있다. 리액트는 컴포넌트의 속성이 바뀌면, 즉시 화면에 반영한다. ( 재렌더링 ) JSX는 XML이므로, 모든 속성(attribute)는 따옴표 혹은, 중괄호로 감싸져야 한다. 속성값이 객체일때는 중괄호를 하나 더 사용해, 새로운 객체를 만들 수 있다. 기본 속성 React와 React Native의 컴포넌트는 key, children, ref 등의 속성을 기본적으로 가진다. key 속성 React가 컴포넌트의 렌더링 속도를 최적화하기 위한 속성 style 속성 React가 컴포넌트의 스타일을 지정하기 위한 속성 ( 객체를 설정해야한다. ) ref..

👉 객체란? (Object) 프로그램을 구성하는 코드를 역할과 의미에 맞게 분리하여, 그에 맞는 여러가지 형태의 변수와 ( variable ) 그 변수들을 다룰 함수( function )를 한 군데 묶어서 저장해 놓은 묶음 이때 객체에 담은 변수를 "멤버변수"( property ) 라고 부르고, 객체에 담은 함수를 "메서드"( method ) 라고 부른다. 👉 클래스란? 같은 의미를 가진 객체를, 여러개 만들기 위한 설계도 클래스 만들기 // 동물 객체 틀(클래스) 만들기 class Animal { // 생성자 - 새로운 객체를 만들때, 그 객체의 상태를 설정하는 함수 // 클래스 실행시, 인자를 받고 처음 1번 실행된다. constructor(name, live) { console.log("constr..