반응형 분류 전체보기144 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. Elastic{ON} 서울 투어 2/22 Elasticon{ON} 서울투어(2/22) 행사에 참여했다.참여하게 된 계기는 회사 상사의 지목(?)이었고, 연구원 2명이서 그렇게 첫 IT컨퍼런스에 참석하게 되었다. 나는 이런 컨퍼런스 성격의 행사나 기술 세미나에 참가하는 것을 매 순간 학수고대 해왔을지도 모른다.이제 4년차 웹개발자로 어느정도 내가 가진 기술에 대한 자부심도 가진듯..는 아직 멀었지.저러한 신기술 관련 발표회나 다른 동료들이 공유하는 대세의 기술들은 접할 때 마다 부족함을 느낀다. 그러기에 다른 사람들이 경험해보고 실무에 적용해보는 것들은 수박 겉핡기식이라 할지라도 배우거나 학습하고 넘어가고 싶었다. 그리고 우연히 Elastic{ON} 행사를 참가 하게 되었다. Elastic{ON} 서울투어는 작년에도 진행 되었었으며, 무료로 참석.. 2019. 2. 22. NodeJS 인기있는 Logging 모듈 Winston Nodejs로 Express 서버를 만드는데 Debugging 용도로 console.log를 사용했었다. 그냥 이게 편하고 익숙해서...ㅎ 하지만 Project를 실제 수행하다보면 서버의 동작을 파악하거나 오류를 찾아야 할때 로그파일을 뒤져보는 것이 가장 1순위일 것이다. Nodejs로 Log를 남기고 관리하는 모듈은 많이 있다. morgan, winston 등등... 두가지를 함께 사용하는 것도 가능하다. 하지만 여기서는 가장 인기 있는 winston 라이브러리를 사용하는 방법을 간단하게 소개한다. 01. npm으로 설치하기아래 명령어로 설치 가능하다. 1npm install --save winstoncs 02. winston.js 작성로그를 관리하는 모듈을 따로 패키지 형태로 작성하려한다.우선 아래와.. 2019. 2. 20. Python_bson을 json으로 바꾸는 방법 bson이란 Binary JSON의 약어로 Binary로 인코딩 된 JSON을 뜻한다. MongoDB에서 document가 BSON 형태로 저장되고 (마찬가지로 pymongo 같은 라이브러리로 document를 조회해보면 BSON으로 반환 된다.) json으로 바꾸려면 bson.json_util을 사용하면 된다. 1234567891011121314151617181920212223242526272829303132333435from pymongo import MongoClientimport tracebackfrom bson.json_util import dumps host = 'localhost'port = 27017 def main(): try: client = MongoClient( host=host, .. 2019. 2. 14. Python_pymongo 간단 사용법 Python으로 Mongodb를 커넥션하여 사용할 때 가장 많이 사용하는 라이브러리가 바로 pymongo이다.mongodb 기능을 많이 사용 할 수 있고(Index, Aggregate, ClientSession과 Transaction 등등)문서도 잘 정리되어 있는 편이다. https://api.mongodb.com/python/current/ 01. pip 명령어로 pymongo 설치아래 명령어로 설치 할 수 있다.1python -m pip install pymongocs * 공식문서에 보면 bson 패키지 설치하지 말라고 한다. pymongo가 기본적으로 bson 패키지를 내포하고 있고, 만약 설치하게 되면 서드파티 모듈 의존성 문제가 생길수 있다고 한다. 02. 코드 작성간단하게 아래와 같은 코드를 .. 2019. 2. 12. 이전 1 ··· 6 7 8 9 10 11 12 다음 반응형
