목차 PuTTY 설치 PuTTYgen사용하여 private key를 .ppk로 변환 Pageant 실행하여 Add key EditPlus 실행하여 FTP 설정 1. PuTTY 설치 www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 아래 4가지 유틸이 모두 설치된다. PuTTYgen : PuTTY Key Generator 비밀키 생성기 ( .pem 을 .ppk로 변환하는데에 사용할것이다 ) PSFTP : 파일전송 유틸 Pageant : SSH authentication agent. ssh key를 등록하면 Pageant 프로그램이 구동되는 동안 ssh 인증은 여기의 privatekey로 인증시켜준다. PuTTY : ssh, telnet, rlogin 이 가능..
POSTMAN 에서 POST Method로 body의 form-data 전송시 파일도 보낼 수 있는건 알고있는데 working directory 에러로 파일 전송이 되지 않아 공식홈에 가보면 설정에서 디렉토리 설정하라는데 도무지 어디서 설정하는지 찾을 수 가 없었다(내가 못찾은것 같긴하지만...) API 단위 안에서 설정도 있고 아래 그림처럼 파란색 톱니바퀴에서 계속 헤멧는데, 빨간색 렌치 아이콘이 정답이었다.. Settings > General > Working Directory 에서 아래와 같이 설정하면 파일 전송이 잘된다.. UX의 중요함을 다시한번 깨닫는다.
Microsoft Edge 크로미움으로 재탄생 2020년 1월 15일에 Edge가 크로미움 버전으로 릴리즈되었다. 크롬과 같이 개발자도구, 내부 앱 확장프로그램등 기능이 충실해졌고 무엇보다 세션이 다르므로 크롬과 동시에 켜서 테스트하기가 좋아졌다;;; 검색 공급자가 bing 으로 되어있는데 역시 불편.. 검색공급자를 바꾸기 전에 [ 더보기(...) > 도움말 및 피드백 > 정보 ] 에서 버전이 83.xxx 인지 확인하고 만약 버전이 다르면 인터페이스가 다를 수 있으므로 빠르게 다른 설정글을 검색해서 참조하기 바란다. 검색 공급자 변경하기 설정 개인 정보 및 서비스 마우스 스크롤 내려보면 "서비스" 항목 에서 "주소 표시줄" 선택 주소표시줄에서 검색 엔진에 Google(혹은 바꾸고 싶은 검색엔진)을 기본값..
Syntax 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. Internet Explorer 를 제외한 현재의 브라우저, 단말기에서 모두다 지원한다고 보면된다. 더보기 백틱(` `) Grave accent 로 사용하고, ${expression} 으로 표현식을 사용한다. 아래와 같이 여기까지는 보편적인 사용의 예이다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` Expression interpolation 표현식 삽입법 템플릿 리터럴안에 간단한 수식을 표현하려면 아래와 같다. var a = 5;..
nodemon Nodemon은 소스의 변경 사항을 모니터링하고 서버를 자동으로 다시 시작하는 유틸리티입니다. 개발버전과 테스트에 적합하며. 패키지매니저인 npm, yarn을 사용하여 설치가 가능합니다. nodemon을 구동하면 소스코드가 변경 될 때 프로세스가 자동으로 다시 시작됩니다. install npm $ npm install --save-dev nodemon yarn $ yarn add nodemon --dev Execution 기본 실행 $ nodmon [노드 앱] $ nodemon ./bin/www $ nodemon src/index.js 재실행 이미 nodemon이 실행중이라면 rs 로 프로세스를 다시 시작할 수 있다. ( nodemon 구동중 ... ) rs 여러 디렉토리 실행 기본적으로 ..
실무에서 작업 중, 반복된 패턴을 순회하며 [ 기존값에 현재값을 적재(acuumlator)] 하는 상황에서 reduce함수가 생각나서 사용해보았다. reduce reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 리듀서 함수는 네 개의 인자를 가집니다. 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기(어큐멀레이터)에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다. 객체를 합칠때는 ... 연산자를 이용해서 합칠수도 있지만 아래와 같이 FIXED_DATA라는 상수의 값(혹은 옵션)이 연속해서 추가되는 상황이라면 함수로 빼..
NodeJS의 nodemon 실행에서 "이미 사용중인 앱의 포트가 충돌 중"이라는 메세지가 자꾸 뜬다.. 이 고약한 메세지는 데몬은 띄워주는데 터미널에서 로그를 안보여준다ㅠㅠ 해결방법이 2가지가 있다 첫번째 솔루션 - kill 3000번 포트 사용중인 프로세스를 kill 하기 위해서 프로세스 아이디를 알아내야 한다. 알아내는 방법은 netstat, 포트를 알고있다면 lsof 를 사용하면 된다. netstat(network statistics)는 전송 제어 프로토콜, 라우팅 테이블, 수많은 네트워크 인터페이스 (네트워크 인터페이스 컨트롤러 또는 소프트웨어 정의 네트워크 인터페이스), 네트워크 프로토콜 통계를 위한 네트워크 연결을 보여주는 명령 줄 도구이다. $ netstat -ntpl lsof : list..
자바스크립트 사용시 console.log 숨쉬듯이 쓰기때문에 파일형태가 아니라 VSCode 프로그램에 내장되어있는 기본설정을 통해 고정적으로 입력시켜서 사용하면 편하다. 현재 [ cl + 탭키 ] 입력시 class 가 표기되는데 class 보다는 console.log 사용량이 압도적으로 많으므로 [ cl + 탭키 ] 입력시 console.log( 커서위치 ); 가 되도록 설정을 변경(추가) 해보겠다. 2020.07.10 - 내용추가 : alert, return false, return true 파일 > 기본 설정 > 사용자 코드 조각 javascript.json 파일을 찾아서 선택 아래의 코드를 붙여넣고 저장 { // Place your snippets for javascript here. Each sn..
마이크비트와 마퀸이라는 로봇을 조립하여 초음파 센서이용, 장애물 피하기를 구현해 보았다 마퀸을 이용한 여러가지 실습을 먼저 해보고 나서 중요한 포인트들을 차차 포스팅 하도록 하겠다 (....작성중....) Ultrasonic Obstacle-avoiding Effect: Ultrasonic detects the distance between the car and the obstacle in front of it. If the distance is less than 35cm, the car will randomly choose to turn left or right to avoid obstacles. Fittings: SR04 Ultrasonic Module x 1 or SR04-P Ultrasonic M..
Motor control Learning Target: Mastering the basic method of motor control. Effect: The car forward 1 second, right turn 1 second, left turn 1 second, back 1 second, back and right turn 1 second. 에디터 > 새프로젝트를 선택하여 에디터 활성화 https://makecode.microbit.org/#editor Microsoft MakeCode for micro:bit A Blocks / JavaScript code editor for the micro:bit powered by Microsoft MakeCode. makecode.microbit.org ..
USB로 PC와 연결 USB로 PC와 마이크로비트가 연결되면 MICROBIT (Drive:) 폴더에서 DETAILS.TXT 라는 파일이 보이는데 열어보면, # DAPLink Firmware - see https://mbed.com/daplink Unique ID: 9900000031634e4500624014000000320000000097969901 HIC ID: 97969901 Auto Reset: 1 Automation allowed: 0 Overflow detection: 0 Daplink Mode: Interface Interface Version: 0250 Git SHA: 682d8303e37355532402b8d93c4f240a3cec02a9 Local Mods: 0 USB Interfaces..
As name suggests it comes in middle of something and that is request and response cycle Middleware has access to request and response object Middleware has access to next function of request-response life cycle Middleware functions can perform the following tasks: Execute any code. Make changes to the request and the response objects. End the request-response cycle. Call the next middleware in t..
웹에서 쿠키와 세션를 이용한 회원 인증이 어떻게 이루어지는 지와 세션과 쿠키에 대한 개념, 용도 등에 대해서 알아본다. 쿠키(Cookie)와 세션(Session)을 사용하는 이유 HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)라는 특징이 있습니다. 모든 사용자의 요청마다 연결과 해제의 과정을 거치면서 연결 상태를 유지하지 않고 연결 해제 후에도 상태 정보를 저장하지 않기 때문에 서버의 자원을 크게 절약할 수 있습니다. 하지만 이로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있습니다. 하지만 우리가 사용하고 있는 웹사이트를 생각해보면 로그인을 한 번 하고나면 그 사이트에서는 다시 로그인할 필요 없이 여..
VSCode 마켓플레이스에서 ESLint와 Prettier 를 설치하고, npm에서 ESLint 설치한다. .prettierrc와 .jsconfig.json 작성(import할때 경로를 자동으로 추천해준다 ) 하고 ESLint-plugin-react-hook (hooks사용시 ESLint로 규칙을 도와줌) 을 설치할 것이다 마지막으로 .eslintrc.json 에서 Prettier 설정과, hook 설정을 적용할 것이다 # VSCode 마켓플레이스에서 Prettier - Code formatter ( 제작자 Esben Petersen ) 설치 수동사용법 : F1 > format 입력 엔터 자동사용법 : 파일 > 기본 설정 > 설정 > format on save 검색 >파일 저장할때마다 코드 자동 저장됨 ..
이전에도 좋은 내용을 많이 올리고 있었지만, Kent C. Dodds가 전업 교육자 선언을 한 이후 더 좋은 리액트 기본에 대한 글이 많이 올라오고 있다. 특히 Hook에 관해서. 이번에 When to useMemo and useCallback이라는 글을 올려 주었는데, 나도 실무에서 Hook을 점진적으로 적용하면서 두 훅을 쓸 때 공식 문서를 좀 보고 가볍게 원리를 파악해놓고 쭉 쓰고 있었다. 그래서 심층적인 이해를 한 상태로 ‘어느 타이밍에 사용하는 것이 옳은가?’ 라는 생각을 깊게 해 보지 않았다. 따라서 글을 읽고 요약을 하면서 어느 타이밍에 useMemo, useCallback 을 사용하고, 궁극적으로 이 글이 짚고자 하는 핵심에 대해 복습하고자 한다. 그냥 번역문이 아니라 본문을 읽으면서 요약..