본문 바로가기
반응형

전체 글136

React 이미지 파일 업로드 하기 React로 파일을 업로드 방법을 정리하려고합니다. 간단한 방법은 아래와 같습니다. 클라이언트 앱(react) view 페이지에서 input[type=file] 요소를 적절한 위치에 추가. state 추가( state를 이용해서 파일을 업로드하려고합니다.) input[type=file] 이벤트 처리 추가 전송 버튼 클릭 시 axios 호출 코드 추가 서버 앱(express) multer 설치(aws s3에 업로드하려면 multer-s3 설치) fileupload 모듈 작성 route에서 upload 코드 추가 먼저 클라이언트앱을 작성해봅시다. 01. view 페이지에 input[type=file] 추가 ./src/App.js import React, { Component } from 'react' cla.. 2019. 6. 24.
리눅스 자주 쓰는 명령어2 * 자주 사용하는 명령어 2 dpkg --list : 설치된 패키지 리스트 apt-get --purge remove [삭제할 패키지] : 패키지 완전 삭제 apt-cache search [정규식] : 패키지 서칭 scp [파일명] [계정]@[IP주소]:[경로] : 파일 ssh로 전송 ex) scp -r /home/util user@111.222.333.444: chown [계정명]:[그룹명] text.txt : 파일 소유자 변경 cat /etc/issue : 리눅스 OS정보 확인 tput reset : clear랑 비슷 env : 환경변수 확인 lsof -i tcp:8080 : 8080번 포트 상태 확인 * 아래는 firewall 관련 명령어 firewall-cmd --state : 방화벽 실행 여부를 .. 2019. 6. 24.
초간단 Express + Mysql 환경 셋팅 Nodejs로 Mysql 연동 방법을 알아봅니다. Express 프레임워크를 사용해서 간단한 API 서버를 만들려고합니다. mysql이라는 라이브러리를 설치해 사용하면 됩니다. 01. mysql 라이브러리 설치 npm install --save mysql 02. config.js 파일 작성 ./config.js const config = { host : '***************.rds.amazonaws.com', user : 'username', password : 'password', port : 3306, database : 'dbname', connectionLimit : 10 }; module.exports = config; 위와 같이 config정보를 따로 파일로 관리하였습니다. (미리 구.. 2019. 5. 14.
React와 Express 서버 연동 시키기 React로 토이 플젝을 진행 중인데 서버 코드가 필요하고 Express 서버를 사용할까 합니다. 간단하게 Express로 서버를 만들고 React와 연동 시켜보겠습니다. 연동 방법은 create-react-app v2에서 새롭게 추가된 기능 중 하나인 proxy 설정 커스터 마이징을 이용하는 것이고 npm-run-all 모듈을 이용해서 명령어 하나로 client와 server를 동시에 띄워볼려고 합니다. create-react-app로 플젝이 생성 완료 됬다고 가정하고 진행하겠습니다. 01. server 작성 먼저 src와 같은 level에 server라는 폴더를 만들었습니다. 그리고 app.js를 아래와 같이 작성하였습니다. const express = require('express'); const .. 2019. 4. 28.
React에서 match와 props React에서 match와 props는 별로 연관성이 없습니다. 하지만 변수를 다른 컴포넌트로 넘겨 사용할 때 쓰는 건데, 헷갈릴때가 있더라구요..(나만 그럴수도..ㅎㅎ) match는 route -> component props는 component -> component 로 변수를 넘길 때 사용합니다. 간단한 예를 통해 사용법을 알아보도록 하겠습니다. 01. match React에서 route에서 component로 인자를 넘기고 싶을 때는 어떻게 해야할까요? 예를 들어 아래와 같은 url 패턴을 만들고 싶습니다. URL 내용 / 홈 /board 게시판 /contact 연락처 이 중 board, contact라는 값을 컴포넌트 단에서 값을 동적으로 받아 처리하고 싶다면? 먼저 App.js를 아래와 같이 .. 2019. 4. 27.
React용 UI 프레임워크 gestalt 사용해보기 gestalt는 react용 UI프레임워크의 한 종류입니다. https://github.com/pinterest/gestalt https://pinterest.github.io/gestalt/#/ Gestalt pinterest.github.io 웹 UI프레임워크 중 널리 알려져 있는 것 중 하나가 바로 bootstrap입니다. bootstrap은 jquery를 기반으로 동작하며, jquery와 해당 라이브러리를 참조하면 깔끔하게 디자인된 레이아웃, 폼, 버튼, 모달창 등을 사용할 수 있습니다. gestalt는 bootrap과 유사합니다. react에서 사용 가능하며, bootrap처럼 많은 UI 컴포넌트가 제공됩니다. (반응형도 갖춰져있습니다.) gestalt를 사용해서 간단하게 포트폴리오 사이트 레이.. 2019. 4. 22.
리눅스_명령어 kill, ps, grep, awk 함께 사용하기 회사에서 일을 하다 보면 반복 작업이 생깁니다. 예를 들어 아래와 같은 작업이 있다고 가정해봅시다. 특정 서비스(프로세스)를 강제로 내린다. 위 작업은 매우 간단합니다. 해당 프로세스의 PID를 찾아서 kill 명령어로 강제 종료합니다. PID는 매번 서비스를 올릴 때마다 바뀝니다. 그렇기에 보통은 아래와 같은 방식으로 위 작업을 수행합니다. (서비스가 nodejs로 구성 됬다면) jckang@jckang:~/nba_react/nba-app$ ps -ef | grep node jckang 3582 3581 0 22:01 pts/6 00:00:00 node /home/jckang/nba_react/nba-app/node_modules/.bin/react-scripts start jckang 3589 358.. 2019. 4. 18.
Selenium으로 웹브라우저 테스트 자동화 요즘 회사에서 일하다 보면 무언가 자동화 하고 싶은 작업들이 간간히 생깁니다. 특히 웹을 통한 단순 반복 작업(?)과 같은 것들은 따분하고 재미없어서 후딱후딱 해버리고 싶습니다. 자동화에 대해서 검색하던 중 Selenium이라는 것을 알게 되었습니다. 브라우저를 자동화하는 일종의 라이브러리입니다.. 주로 웹어플리케이션 테스트 자동화에 쓰이구요. 하지만 웹 기반 관리 작업을 자동화하는데도 사용 될 수 있다고 합니다. Selenium 어떻게 사용하는지 몇가지 케이스를 중심으로 소개해봅니다. 01. 준비(라이브러리 및 프로그램 설치)일단 파이썬으로 진행 할 것입니다. OS는 windows 10 입니다. 브라우저는 Chrome을 사용합니다.파이썬은 미리 설치를 했구요. 12PS C:\> python --vers.. 2019. 3. 16.
Shell script로 Backup 기능 작성 어떠한 웹 서비스를 운영하다보면 자동화 하고 싶은 정~~~말 단순한 업무가 생긴다.리눅스에 익숙치 않지만 간단한 쉘 스크립트를 만들어서 자동화 해보고 싶은 생각이 들었다. 아래는 단순한 작업의 예이다.운영중인 소스 백업새로운 소스 배포 재시작위의 작업 목록 중 첫번째와 두번째를 쉘 스크립트 대체 하기 위해 리눅스 쉘 프로그래밍을 대학졸업 이후 처음 작성해 보았다... 01. vim 편집기 사용굳이 vim편집기로 프로그래밍을 할 필요는 없지만, 손에 익힐 겸 vim 편집기로 스크립트를 작성한다. 아래는 많이 쓰는 기능이다.line number 표시 : ESC -> SHIFT + ; -> set number 입력찾기 : ESC -> / -> 찾을 단어 입력끝에서 찾기 : ESC -> ? -> 찾을 단어 입력.. 2019. 3. 15.
NodeJS 콜백을 사용한 비동기 제어 흐름 패턴 참고문헌 : NodeJS Design Pattern Second Edition 동기식 프로그래밍 스타일을 사용하다가 Node.js와 같은 비동기 api일반적으로 사용되는 플랫폼에 적응하는 것은 쉽지 않다.일반적인 실수 하나가 call back hell이다. 간단한 동작도 가독성이 떨어지게 하고, 관리하기 힘들게 한다. 아래와 같은 방법을 통해 비동기 코드를 얼마나 쉽고 간단하게 만드는지 알아본다. - 규칙과 패턴을 적용- Async같은 제어흐름라이브러리를 활용 01. 비동기 프로그래밍의 어려움불행히도 모듈화, 재사용성, 유지보수성과 같은 특성을 희생시키면 금방 콜백이 중첩되고 코드가 엉망이된다. 01-1. 간단한 웹 스파이더./index.js12345678910111213141516171819202122.. 2019. 3. 9.
OAuth2.0에 대해서 이것만은 알고 가자 OAuth2.0 이란 Open Authentication, Authorization의 약자로 인증/인가에 대한 표준프로토콜이다.흔히 웹브라우저를 통해서 쇼핑몰 사이트, 이벤트 사이트 등을 접속하여 어떤 작업을 하려고 하면 인증에 대한 요구에 직면하게 되고요즘 sns를 통해서 인증을 대체하기도 한다. 이미 기기에서 로그인을 한 상태라면 위의 그림에서 보이는 "xx로 로그인" 버튼 클릭만으로 인증을 받을 수 있다.저런걸 OAuth2.0라고 말하는건 아니다. 저건 단순히 특정 사이트에서 네이버, 페이스북, 구글 등의 Open API를 사용 한 것이고대부분의 Open API 제공 서비스는 OAuth2.0 형태로 인증서버와 리소스 서버를 따로 구성해서 제공할 것이다. 만약 네이버, 페이스북 등과 같이 api를 제.. 2019. 3. 4.
NodeJS 동작 방식과 개념 정리 01. NodeJS 란?NodeJS란 싱글 스레드 기반으로 동작하는 고성능 비동기 네트워크 서버이다.기반언어는 자바스크립트이다. NodeJS가 자바스크립트로 만들어졌다는게 아니라, 자바스크립트로 프로그램을 작성한다는 의미이다. NodeJS는 C++로 만들어졌으며, 비교하자면 JVM과 같은 런타임이다.(JVM의 특징과는 많은 차이가 있다.) 02. 웹브라우저 엔진(V8)과 NodeJS자바스크립트는 웹브라우저에서 동작하는 언어이다. NodeJS는 웹브라우저에서 사용하는 자바스크립트 엔진을 따로 구성시켜 자바스크립트로 프로그램을 돌린다는 것이다.NodeJS의 엔진구조를 검색해보면 다양한 이미지들이 나온다. 03. 싱글스레드와 비동기JVM에서 구동하는 애플리케이션은 스레드나 프로세스를 만들어 동작하는 방식이다... 2019. 3. 2.
반응형

티스토리툴바