전체 글 (441) 썸네일형 리스트형 [119일차] 블록체인 네트워크 웹소켓 http ws 웹서버 구축 P2P (Peer to Peer) 구현 방법 -> WebSocket -> socket.io = 웹소켓으로 웹으로 구성할 때 필수적인 구성을 미리 만들어 놓은 패키지 이전 node.js chatting을 만들 때 사용함 기본 기능 외 여러가지 기능이 많다. 처음 사용하는 사람이 사용하기 편하다 -> ws (web socket 약자) 접속에 대한 것만 ex) broadcast, to 블록체인은 두 개의 port가 필요 1) 서버 - 클라이언트 2) 노드끼리 통신 오늘 웹서버 구축의 기초작업 / setting 예정 ! 1) server - client http 서버 먼저 만들기 with express express 설치 **** 터미널 경로 src 에서 npm i express src > server.js 파.. [118일차 복습] 블록체인 새 블록 추가, 연결하고 검증하기 src > block.js 1. AddBlock 새로운 block 추가하는 함수 // 새로운 block을 간단히 추가하는 함수 function addBlock(){ const newBlock = nextBlock(data); if(isValieNewBlock(newBlock, getLastBlock())){ Blocks.push(newBlock); return true; } return false; } 2. newBlock 새로운 블록을 생성하는 함수 // 다음 블럭(nextBlock)의 header와 body를 만들어주는 함수 function nextBlock(data){ // 이전 block 가져오기 const prevBlock = getLastBlock(); // Header const versio.. [118일차] 블록체인 새 블록 추가, 연결하고 검증하기 1. Adding block // 요 아이가 다음 블럭의 header와 body를 만들어주는 함수 function nextBlock(){ } // 얘는 단순히 Push만 할 것 ! function addBlock() { // new header 만들어서 => new block(header, body) // 마지막 block 가져오기 } 새로운 블록을 생성할 때 필요한 이전 블록의 정보들 : index, previousHash 및 현재 블록의 정보들 function createGenesisBlock() { // header 만들기 - 5개의 인자값이 필요해! version, index, hash, time, merkle.. const version = getVersion(); const time = get.. [117일차 복습] 블록체인 제네시스 블록 만들기 with JavaScript 블록체인 블록 만들기 첫 블록, = Genesis block 은 개발자가 하드코딩을 해야함 블록의 구성 요소 A block is composed of a header and a body, where a header contains the hash of previous block, a timestamp, Nonce and the Merkle root. The Merkle root is the root hash of a Merkle tree which is stored in the block body. 제네시스 블록, Genesis Block 만들기 1. 기본 세팅 사용할 폴더 안에서 * 경로 주의 (이제 만들 src 폴더의 상위 폴더에 들어가서 npm 실행 ) npm init - src 폴더 생성 > bl.. [116일차 복습] 리눅스/셸Shell script if문, for문, 반복문, break, continue 조건문 if 1. 꼭 숫자 연산이 아니라 명령어도 가능! cd ~ mkdir new // "new" 라는 폴더 새로 생성 cd new // new 폴더에 입장 vi practice1.sh // 파일 생성 아래 코드 작성 sh practice1.sh // 파일 실행 -> ls -l 의 결과물이 있으면 출력됨 2. 숫자 연산 꺽쇠 대신 아래와 같이 쓴다 연산 6가지 == -eq != -ne = -ge 위의 6가지 다 사용해보기 3. if 문으로 폴더를 찾아보기 ! -> 없으면 만들기 * home / new 폴더 안에 log 폴더 현재 없는 상태 현재 경로 : ~/new vi practice3.sh 아래 코드 작성 sh practice3.sh => new / log 가 새로 생김 if 파일 / 폴더.. [117일차] 블록체인 제네시스 블록 만들기 with JavaScript 블롴체인 개념 설명 - 네트워크 (http, socket..) - 분산원장 (데이터를 저장하는 코드) - hash sha 256 -> JWT - 단반향 암호화 ( 자리수는 고정되어 있다.) - 머클 (Merkle) - 작업증명 (pow) = 마이닝 Merkle 사용 이유 : 너무 많은 노드(블록)들을 찾기에 리소스의 낭비가 크고 효율성이 떨어짐 (완전탐색) => merkle 사용으로 연결된 데이터 중 찾고자하는 데이터를 효율적으로 찾을 수 있음. 이제 위의 내용대로 하나하나 만들어보기 1) version 가져오기 src 폴더 생성 src 폴더 cd 들어가기 전, (src의 상위 폴더 경로에서) 아래 명령어 실행 npm init src > block.js 생성 package.json 파일을 불러와서 con.. [React Native] 채팅창 스크롤 뷰 아래에 위치하도록 만들기 kepping a ScrollView scrolled to the bottom React Native Expo 채팅장 스크롤 뷰 아래에 고정시키기 React Native Expo 로 chatting 구현을 매 채팅이 보내질 때마다 rerender 를 했다. 채팅이 많아지니 render 할 때마다 계속 위 (가장 처음 메세지) 로 올라간다 처음에는 style 로 옮겨보려다가 실패 ! stackOverFlow에서 찾은 방법은 useRef 를 사용해서 ScrollView에다가 아래의 옵션값을 설정해 주었다. ref={scrollViewRef} onContentSizeChange={()=>scrollViewRef.current.scrollToEnd({animated:true})}> => 이렇게 하니까 채팅을 계속 써내려가도 screen이 위로 올라가지않고 맨 아래 (가장 최근에 보낸 메세.. [React Native Expo] Visual Studio 비쥬얼 스튜디오에서 expo android version 버전 업그레이드 시키기 (ERROR: 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요.) React Native Expo 앱 배포 후 업그레이드 시, 버전 업 하기 (with Visual Studio) 첫 어플을 안드로이드에 배포 후, 서버 fetch의 구문 오류로 다시 재 업그레이드를 하는 중이다. 배포할 때처럼 아래 명령어로 apk 생성 -> 폰으로 해당 어플 확인 -> app bundle 만들어 구글 플레이 콘솔에 버전 업그레이드를 하려니 에러가 났다 ! expo build:android ERROR : 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. 구글 플레이 콘솔에 업데이트 할 때, app bundle을 만들기 전 configure app.json 파일에서 아래 "android": { "versionCode":1 (또는 2 - 숫자가 매번 커져야함 ) } 으로 설.. [116일차] SHELL SCRIPT on Linux 기본 구문 if , for문 / blockChain 개념 조건문 if - js 보다 조금 더 어려울 수도 ! : 직관적이지가 않다. - 조건 비교연산자 : 숫자일 때와, 문자열일 때가 다르다. windowsd terminal 옵흔 cd ~ cd scripts //어제 만든 폴더 vi practice7.sh // 새 파일 열기 아래 코드 입력 , 저장 sh practice7.sh // -> ls -l의 내용이 쭉 나옴 숫자 비교 연산 6가지 == -eq != -ne = -ge -> 요 것들로 연습해보기 => 참 / 거짓 폴더 찾기 조건 걸어보기 vi practice9.sh -d (directory) ~ (home) /scripts/log 'log'라는 폴더가 있는지 확인 log 폴더를 만들어주기 (현재 scripts에 log 폴더 없음 ) 파일 찾기 조건 걸기 .. [115일차 복습] 리눅스 기초 Ubuntu 입/출력 및 기타 기본 명령어 공부 환경변수란? 우리가 컴퓨터로 특정 OS (운영체계) 안에서 실행하는 게임, 인터넷 서핑, 제어판, 그림판, 메모장 등은 모두 os 프로그램에 의해 실행되는 자식 프로세스이다. 이 때, 해당 프로세스를 실행시키기위해 참조하는 변수가 = 환경변수이다. - os에서 자식프로세스들을 생성할 때 참조하는 '변수들' - 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 ex. Path 라는 변수 - os가 어떤 프로세스를 실행시킬 때, 경로를 찾는데 이용 - 즉, 환경의 조건을 정하는 것 - 리눅스 환경에서 export 를 붙여서 변수를 지정 = 환경변수를 절대적으로 정하기 * export 는 변수 생성 + 수정 함께 쓰임 ex) 변수 앞에는 $를 붙인다. ↘↘ 전역변수 만드는 법 bash 에.. [115일차] 리눅스 ubuntu 입/출력 windows terminal 로 들어가기 ! (여러 창 띄우기 가능) 환경 변수란 ? Path OS에는 환경변수가 기본적으로 존재 윈도우 - 시스템환경변수 검색 리눅스 - env 입력 -> 환경변수 내용이 쭉 나옴 ! port 쓸 때 환경변수 사용했음! server > server.js 들어가서 아래처럼 변경함 export NODE_ENV=8080 node라는 애는 컴퓨터에 있는 내용을 가져올 수 있구나! node.js != 웹서버 node.js = JS로 컴퓨터를 조작할 뿐.. 진짜 웹서버를 만드는 것은 = express process는 무엇을 가지고 있는지 쳌 (OS에 따라 내용 다를 것) process: 운영체제별로 내가 운영한 ~ 결과물 return vi test console.log(proce.. [114일차] Next Redux - 동적라우팅, infinite스크롤이벤트 1. 기본 npm npm init npm i react react-dom next 2. pages 폴더 - index.jsx import Raact from 'react' const Idex =()=>{ return ( NEXT ! ) } export default Index 3. packages json { "name": "next0827", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"next dev", "build":"next build", "start":"next start" }, "author": "",.. [Sequelize - timezone] 한국 local time으로 입출력하기 Sequelize에 Date를 default로 넣어주게 되면 (timestamps) 저장하는 기준시간이 UTC 기준으로 되어버린다! 한국의 local time은 UTC + 09:00 이어서 요 설정값을 config에 넣어주면 된다. 그리고 중요한 점 ** db에 한국시간으로 잘 저장이 되어있어도 꺼내올 때 다시 UTC 00:00 기준으로 가져오게 된다. 이 때는 string값으로 시간을 가져오면 변동없이 잘 가져올 수 있다. config 1. timezone 부터 define까지 추가하기 { "development": { "username": "root", "password": "", "database": "byd", "host": "127.0.0.1", "dialect": "mysql", "timezo.. [React Native] 이전 스크린으로 돌아가서 Refresh 안될 때 / useIsFocused 비동기 통신 axios / fetch로 backend에서 데이터받아와서 뿌려줘도 한발짝 늦고 계속 undefined or 새로 추가한 채팅방 목록이 안나왔다, 찾아보니 나와 같은 문제가 발생하는 사람들이 많은 것 같았다 https://stackoverflow.com/questions/46504660/refresh-previous-screen-on-goback Refresh previous screen on goBack() I am new to React Native. How can we refresh/reload previous screen when returning to it by calling goBack()? Lets say we have 3 screens A, B, C: A -> B -> C Wh.. 리눅스 터미널 꾸미기 Oh My Zsh / 테마 설정 / 명령어 줄이기 1. Microsoft Store - Windows Powershell 다운 및 설치 -> 화살표 옵션에서 Ubuntu 클릭 (Ubuntu 미리 다운 必 ) 2. 현재 나의 SHELL 종류 확인해보기 echo or env | grep SHELL bash -> 기본 디폴트 shell 로 설정되어 있음 3. 아래 github 주소에서 압출파일 다운 -> 압축 풀기 https://github.com/naver/d2codingfont/releases Releases · naver/d2codingfont D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 설명 글 https://m.. [112-3일차 복습] 운영체제, 커널, 리눅스, 쉘 (Shell)이란? OS, 운영체제란? - 컴퓨터에서 일어나는 모든 동작을 제어 - 다양한 소프트웨어 및 하드웨어와 같은 컴퓨터의 모든 *자원 관리 - 운영체제 : 컴퓨터 내에 있는 시스템 소프트웨어 프로그램의 집합 => 컴퓨터 시스템의 자원들을 효율적으로 관리하여, 사용자가 컴퓨터를 편리하고 효과적으로 사용할 수 있도록 환경을 제공하는 여러 프로그램의 묶음 - 컴퓨터 사용자와 컴퓨터 하드웨어 간의 인터페이스로서 동작하는 시스템 소프트웨어의 일종 - 다른 응용프로그램이 유용한 작업을 할 수 있도록 환경을 제공 - 하드웨어 기능으로는 : 입/출력 및 메모리 공간 할당 - 운영체제 프로그램은 : 응용프로그램과 하드웨어 사이의 중개자 역할 / 일반적으로 하드웨어에 의해 직접 실행되기도 - An Operating System (O.. [113일차] Linux 리눅스/ 커널/ Shell Script 쉘 스크립트 커스터마이징 SHELL 쉘이 커널을 실행시켜 준다 ls , cp, ln, rn, 등등... 쉘로 프로그래밍도 가능하다. => Shell script 종류 : Bash - 화살표 ↑ 누르면 이전 명령어 나오기 / Tab키 누르면 자동완성 기능 등등을 먼저 함 리눅스를 처음 다운하면 Bash로 깔려 있다! Zsh - Apple 커널 : 컴퓨터의 본체와 소프트웨어를 연결하는 1) 메모리 관리 2) 프로세스 관리 3) 장치 드라이브 (마우스, 모니터, 스피커, 등등 호환) 4) 호출 (스피커 소리, 모니터 화면 출력..) SHELL의 종류 확인하는 명령어 echo // console.log같은 env | grep SHELL $ 가 붙으면 변수를 의미 (SHELL 이라는 변수) Microsoft Store - Windows .. [112일차] 리눅스 명령어 mv(파일명 변경), cat, |, htop, netstat, 방화벽 풀어 Server 열기 - 웹서버 운영체제 (OS, Operating System) - window - Linux - Unix - Mac (Unix 기반) - CLI (Command Line Interface), 명령 줄 인터페이스 = 명령어 인터페이스 : 웬만하면 요 CLI 터미널을 사용하는 것이 컴퓨터의 성능을 최대치로 사용 할 수 있다. - GUI (Graphic User Interface) : 유저에게 보일 UI 을 구성하는데 컴퓨터 공간을 많이 차지함 리눅스란 ? Linux - 무료 오픈소스 운영체제(OS) - 리눅스 커널을 사용하는 운영체제 - 리누스 토르발스가 미닉스에서 발전시키면서 리눅스 탄생 - 역사상 가장 많은 참여자가 관여하고 있는 오픈 소스 프로젝트 정리본 ↓↓↓ https://blckchainetc.tistory... [111일차] 그동안 배운 내용 개념 정리 (웹통신, 비동기) Before you die 프로젝트 관련 질문 : 채팅 내용 db 에 담기 ? 그리고 ex) 100개 이상은 자동삭제되게 !? - 메모리 어떻게 쓰는건지 1교시 : 모듈 vs 패키지 vs 라이브러리 vs 프레임워크 https://blckchainetc.tistory.com/313 모듈 vs 패키지 vs 라이브러리 vs 프레임워크 모듈 - 프로그램을 구성하는 소스코드가 들어 있음 (ex. function) - 한 번 잘 만들어 놓은 모듈은 불러와서 재사용이 가능 (by import) - 즉, import ~~~ 요렇게 가져오는 파일들은 모두 모듈 EX) 구구단 2단 blckchainetc.tistory.com 2 교시 : 웹통신 같은 언어를 사용해도 구동하는 곳에 따라 결과물이 다름 ex. node.js .. 모듈 vs 패키지 vs 라이브러리 vs 프레임워크 모듈 - 프로그램을 구성하는 소스코드가 들어 있음 (ex. function) - 한 번 잘 만들어 놓은 모듈은 불러와서 재사용이 가능 (by import) - 즉, import ~~~ 요렇게 가져오는 파일들은 모두 모듈 EX) 구구단 2단을 출력하는 소스코드가 들어 있는 한 파일 = 모듈 패키지(Package) - 여러 모듈의 묶음이다. - 특정 기능과 관련된 여러 모듈을 하나의 상위 폴더에 넣은 것 - "외부 패키지"란 외부 라이브러리에 있는 패키지를 의미 EX) - 구구단 2~9단을 출력하는 소스코드가 각각 들어 있는 8개의 파일(모듈)을 묶어 놓은 => 패키지 - node.js 에서 npm 받아서 사용함 (npm = node package manager) - Linux에서 apt (ex. apt-g.. [React Native Expo] KeyboardAvoidingView + useHeaderHeight로 키보드 아래로 내려가게 만들기 왼쪽 그림의 키보드가 둥둥 떠있는걸 height와 맞춰주기 ! stack over flow에서 찾은 아래의 방법으로 했더니 오류 메세지에 해당 Header는 이제 곧 사라진다고 useHeaderHeight을 쓰라고 적혀있다! import { Header } from 'react-navigation-stack'; 해결 : ↓↓ 요렇게 useHeaderHeight 가져와서 import { useHeaderHeight } from '@react-navigation/elements'; KeyboardAvoidingView와 함께 사용하기 전체 코드 const sendMessage = () => { Keyboard.dismiss(); } return ( {/* Chat goes here */} setInput(t.. [호스팅] aws 탄력적 고정 ip 만들기 / 도메인 주소 연결 / http https 변환 (back end server - nginx) 1) 탄력적 고정 ip 만들기 1. aws - 탄력적ip -> 할당 클릭 - >할당 - > 이름 변경 => 할당된 IPv4 주소 나옴 2. 할당된 내용 -> 주소 연결 -> 인스턴스 선택 -> 프라이빗 ip 선택 (자동으로 뜸) -> 확인 => 탄력적 ip 보기에 보면 인스턴스ID, 연결ID 등등이 생김 할당된 IPv4주소 가 나온다 2) 도메인 주소 연결 * aws route53 에서 도메인을 사면 편리하게 도메인 연결 / SSL 인증서 발급할 수 있다! 1. 가비아 도메인 산 곳 들어가서 -> 해당 도메인 관리 -> 네임서버 설정 2. router53 들어감 3. 호스팅 생성 -> 도메인 / info 입력 -> 레코드 생성 -> 레코드 유형 : A-IPv4 / 값에 back or front 고정ip .. [Mysql] Error: connect ECONNREFUSED 127.0.0.1:3306 Error: connect ECONNREFUSED 127.0.0.1:3306 mysql 이 실행되지 않을 때, 연결되지 않아서 발생하는 오류 mysql을 제대로 설치하고 실행까지 잘 완료했는지 확인 필요 변수로 빼봄 > 안됨 const mysql = require('mysql') const connection = mysql.createConnection({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_DATABASE }) connection.connect(); 다시 mysql 삭제 -> https://velog.io/@moorekwon/MySQL-.. [Error] MySql: Access denied for user 'root'@'localhost' mysql 비밀번호가 초기화 되지 않아서 생기는 문제 로그인 시 권한 정보를 확인하는 테이블을 일시적으로 스킵하여 로그인할 수 있게 만든 후, DB정보를 바꾸고 다시 재시작해야한다. 1. mysql 종료 sudo /etc/init.d/mysql stop 2. mysql 데몬 직접 실행 sudo /usr/sbin/mysqld --skip-grant-tables --skip-networking & 3. mysql 접속 ( 비밀번호 없이 접속하기) mysql -u root 4. 'mysql' 입장 use mysql; 5. 비밀번호 변경 UPDATE user SET authentication_string=PASSWORD('바꿀 비번 ') where USER='root'; flush privileges; 끝! [React Native Expo] Font 전체 컴포넌트 폰트 변경 / default font 1. 폰트 다운 https://www.woowahan.com/#/ 우아한형제들 좋은 음식을 먹고 싶은 곳에서~! 우아한 사람들이 모여 우와하게 일하는 '우아한형제들'입니다. www.woowahan.com 2. expo-font 설치 npm install expo-font 3. assets 폴더 > fonts 폴더 > 에 다운 받은 폰트 넣기 4. config.json 추가 수정 "rnpm": { "assets": [ "./assets/fonts" ] }, 5. Text 에 폰트를 담아 return 할 component 생성 'use strict' import React, { useEffect, useState } from 'react'; import { Text } from 'react-native' i.. [React Native] Stack 사용 시 백그라운그 컬러 바꾸기 자세히 보니 어플 뒷 배경이 조금 그레이 색! -> 하얗게 or 다른 색으로 바꿔주기 const HomeScreenOptions = { headerStyle: { backgroundColor: 'lavender' }, headerTitleStyle: { color: 'black', justifyContent: 'center' }, headerTintColor: 'white', headerMode:'screen', cardStyle:{backgroundColor:'#ffffff'} } screenOptions 에 아래 두 코드 넣어주면 어플 배경이 디폴트 값 옅은 그레이에서 하얗게 된다 ! headerMode:'screen', cardStyle:{backgroundColor:'#ffffff'} stact .. [React Native Expo] Image 사진 올리기 / ImagePicker API import React, { useState } from 'react'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View,Image, Text, TextInput, TouchableOpacity, } from 'react-native'; import { Formik } from 'formik'; //formik import { Octicons, Ionicons } from '@expo/vector-icons' //icons //keyboardavoiding view import KeyboardAvoidingWrapper from './../components/KeyboardAvoidingWrapper' // for image .. [TypeScript] 타입스크립트 설치 및 환경설정 (tsc-watch) 1. Visual Studio Code 새 폴더 열기 2. npm init하기 npm init -> package.json 파일 생김 3. TypeScript 설치 npm install -g typescript https://www.npmjs.com/package/typescript typescript TypeScript is a language for application scale JavaScript development www.npmjs.com 4. index.ts 파일 생성 , tsconfig.json 파일 생성 tsconfig.json 에 환경설정 코드 추가 { "compilerOptions": { "module":"commonjs", // node.js를 평범하게 사용하고 다양한import /.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음
