Engineering_S/W & H/W

프로그래밍의 효율성을 높이기 위해서 여러 툴들을 찾다가 재미있는 프로그램을 찾았다. Immersed Link   Immersed 소프트웨어이다. 해당 소프트웨어는 가상 혹은 증강현실에서 PC와 연결해서 작업을 할수 있게 해주고 있다. 사진1) 최대 5개 스크린 지원 사진2) 화면이용 사진3) 주변환경 변경1 사진4) 주변환경 변경2 사진5) 가상 카페 환경 공용 카페가 있는데 가끔 다른 사람들이 Immersed에 접속해서 작업하는 것을 볼수 있다. 드물지만 이야기 하는 경우도 있다. 사진6) 좌석 선택 위 두 영상을 보면 Immersed가 어떤 방식으로 동작하는지 알수 있습니다. VR을 이용해서 업무의 능률을 올릴수가 있습니다. 다만 VR이 무거워서(Meta3 사용중) 목의 힘이 많이 들어갑니다. 키보드와 마우스는 외부 카메라로 영역을 설정하면 VR을 벗지않고도 타이핑을 할수 있습니다. 공식 Immersed 링크

 먼저 ssh로 접속 가능한 PC가 있어야 합니다. 사진1) ssh으로 원격 컴퓨터에 접속 사진2) 원격 컴퓨터에 React 프로젝트 생성 사진1,2와 같이 실제 접속 가능한 서버와 해당 서버가 ssh접속이 가능해야 합니다. 해당 블로그에서는 예제로 React 코드를 작성하고 해당 코드를 원격으로 접속하도록 하겠습니다. 사진3) Visual Studio에 설치할 extension 사진3에 있는 확장 프로그램을 설치해서 Visual Studio에서도 원격서버의 코드를 작성할수 있게 도와줍니다. 사진4) Remote Explorer 열기 '+'를 눌러서 원격으로 접속할 PC의 IP를 입력합니다. 사진5) SSH 연결 정보를 입력 사진5에서는 사진1에서 입력한 ssh 터미널과 동일하게 입력합니다. 사진6) SSH 정보 저장 경로 사진7) SSH 옵션 생성 사진4,5,6 과정이 끝나면 사진 7처럼 SSH로 접속 가능한 옵션이 생성됩니다. 사진8) 원격 PC에 프로그래밍 할 프로젝트 선택 사진9) 원격 PC의 접속을 위해 비밀번호 입력 사진9에서는 사진1에서 입력한 비밀번호를 입력합니다. 사진10) 원격 PC의 프로젝트에 접근 사진10에서 접근할 프로젝트를 설정하고 'OK'를 하면 다시 사진9처럼 비밀번호 입력을 요구 받는다. 사진11) 원격 접속후 경고 사진11에서는 해당 프로젝트를 신뢰한다고 하고 진행한다. 사진12) 원격접속 완료 이제 사진 12처럼 나온다면 현재 PC에서 서버PC로 원격 접속한 다음에 실시간으로 코드를 수정할수 있습니다. 참고로 해당 윈도우에서 원격 서버의 terminal로도 제어가 가능합니다.

 안녕하세요. 이번에는 JavaScript의 구조분해할당(Destructuring assignment)에 대해서 알아보겠습니다. 개인적으로 매우 유용한 기능이라고 생각합니다.  구조분해할당은 해당 객체나 배열을 한번에 정의하기 위해서 만들어졌습니다. 위 그림에서 위쪽은 과일을 아래쪽은 수량을 적었습니다. 보통은 일일이 코딩을 해서 입력을 했지만 구조분해할당이 생기면서 상당히 코드를 작성하기 쉬워졌습니다. let apple , banana , cherry , melon ; [ apple , banana , cherry , melon ] = [ 10 , 5 , 3 , 4 ]; console . log ( "apple : " , apple ); console . log ( "banana : " , banana ); console . log ( "cherry : " , cherry ); console . log ( "melon : " , melon ); 코드로 구현하면 위와 같이 할수 있고 실행결과도 위와 같다. const obj = { "apple" : 10 , "banana" : 5 , "cherry" : 3 , "melon" : 4 } const { apple , banana , cherry , melon } = obj ; console . log ( "apple : " , apple ); console . log ( "banana : " , banana ); console . log ( "cherry : " , cherry ); console . log ( "melon : " , melon ); Object를 이용하여 구조분해할당을 위 코드처럼 구현할수 있습니다. 다만 이때는 obj의 키값과 동일해야...

 안녕하세요. 알렉스 입니다. 이번에는 forEach()함수에 대해서 사용할려고 합니다.  forEach()함수를 보면 제가 예전에 작성한 '.map/.filter/.reducer 순서도(JavaScript)' 와 비슷하다는 것을 알수있습니다. 정확히 말하자면 '.map'함수와 상당히 유사합니다. 위 그림에 나온 코드를 콘솔창에서 작동 시키면 'arr' 각 원소에 2를 더한 값을 'log'로 보여준다는 것을 알수 있습니다. 하지만 더 자세하게 설명 드리기 위해 다음 그림으로 넘어가도록 하겠습니다.  이전 사진과 동일한 'forEach'이지만 함수안에 3개의 전달인자(ele, idx, arrAll)가 있습니다.  ele : 배열의 원소 idx : ele 배열의 인덱스 arrAll : arr의 배열(전체) 위와 같이 3개의 전달인자가 무엇인지 확인하기 위해서 콘솔창으로 출력해 보았습니다. 하지만 Return값이 없다는 것을 알수 있습니다.  '.map'과 '.forEach'의 결정적인 차이점은 Return값의 유무입니다. '.forEach'값은 해당 배열에 변화를 가하지 않습니다. 물론 프로그래머가 변화를 가할수가 있습니다. 위 사진에서 'arr[idx] = ele +2;'를 추가하였습니다. 'console.log'에 출력되는 값들이 루프가 진행될수록 바뀌는 것을 알수 있습니다. 마지막에 Return값은 없지만 'arr'를 출력하면 모든 원소가 +2씩 된것을 알수 있습니다. 이는 '.forEach'문에서 직접 'arr'의 원소에 수정을 가했기 때문입니다.  '.forEach'와 비슷한 '.map'과 비교하고 싶다면 해당 링크 를 확인해 주시기 바랍니다. 

 안녕하세요. 알렉스입니다. 이번 순서도는 '.map, .filter, .reducer'입니다. 일단 '.map'먼저 보도록 하겠습니다. 그림1) .map 순서도 위 사진은 '.map'을 사용할시 진행되는 순서도 입니다. 그런데 순서도를 그리고 보니깐 'for 루프'와 상당히 유사하다는 것을 알게 되었습니다. 'for 루프'순서도는 링크 로 들어가서 확인하시면 됩니다. 그림2) .filter 순서도(전체) 위 사진은 '.filter'순서도를 나타냈습니다. 그림1의 '.map'과 매우 유사하지만 3번(처리)에서 조건이 들어가게 됩니다. 그림2의 경우는 'a>3'(a가 3보다 클경우)인 경우에만 a 원소를 리턴합니다. 3번에 대한 더 자세한 순서도는 아래(그림3)에서 확인할수 있습니다. 그림3) .filter의 조건 순서도 그림3에서 3번(처리)부분을 보면 조건을 확인하고 참이면 a원소를 리턴, 거짓이면 아무것도 리턴하지 않습니다.  그림4) .reducer 순서도(초기값 존재) 그림5) .reducer 순서도(초기값 없음) 그림4는 '.reducer'를 사용할때 초기값 0을 입력을했을때 동작되는 순서도 입니다. 중요한 사실은 이전의 '.map, .filter'처럼 배열을 반환하는 것이 아니라 누적 계산을 하여 최종적으로 a를 리턴합니다.  .reducer의 function(a,b,c); a(필요) : 누적 계산값을 입력한다. (초기값이 있을시 대입하고 없으면 배열의 0번째 인덱스를 넣는다.) b(필요) : 인덱스 0 ~ 마지막까지 순차적으로 출력한다. (a에 초기값이 있으면 b는 인덱스 0부터 시작하고 초기값이 없으면 인덱스 1부터 시작한다) c(선택) : b에 해당하는 인덱스를 출력한다. For,While Loop 순서도 링크 If Statement 순서도 링크

 안녕하세요. 알렉스 입니다. 이번에는 For문 안에 있는 if문 구조에 대해 순서도를 그려보도록 하겠습니다. 그림1) 전체 구조 프로그램 그림2) 순서도에 대응하는 코드 위치 위 그림1,2를 보시면 전체 코드에 대해서 구조를 확인할수 있습니다. 그림2에서는 각 순서도 기호에 대응하는 코드를 숫자로 연결해 놨습니다. 공간 부족으로 인해 '메인For루프'는 그림 3,4에 그려놨습니다. 그림3) 메인For루프 세부구조 그림4)메인For루프 - 순서도에 대응하는 코드 위치 메인For루프 내부의 순서도는 그림3,4에 그려져 있습니다. 순서도의 화살표를 따라 진행하면 전체적으로 프로그램이 어떻게 구성되어 있는지 알수 있습니다.  링크 : if문 관련 자료         For, While문 관련 자료

안녕하세요. 알렉스 입니다. 이번에는 간단히 if문에 대해서 순서도를 이용하여 알려드리도록 하겠습니다. 일단 간단히 if문의 조건이 참이나 거짓인지를 확인후 Yes 또는 No에 따라 프로그램을 수행합니다. 그림1) if구조   그림2) 그림1을 구동시 그림 1에서 if 와 else를 사용해도 되지만 조건을 추가하기 위하여 else if를 넣었습니다. 물론 수학적으로 num >= 3이면 거짓의 경우는 num<3이 자동으로 맞습니다. 하지만 사용자가 num값을 입력한다면 꼭 숫자만 들어온다는 보장이 없습니다.  그림3) num에 다른값을 넣을때 동작 그림4) 초기 num값이 4일때 구동시 그림 4까지 하고 if문에 대한 순서도는 마무리 짓도록 하겠습니다.

 안녕하세요. 알렉스 입니다. For,While루프를 JavaScript로 구현을 할때 이해하기 쉽도록 순서도를 만들어서 정리를 해 봤습니다. 일단 For Loop를 먼저 보도록 하겠습니다. 그림1) For Loop 구성  For루프를 이해할때 가장 단순한 형태부더 이해하는게 좋을것 같아서 그림1과 같이 간단한 순서도를 만들어 봤습니다.   For루프의 1,2,3,4번은 진행 순서를 나타냅니다. 1~4번은 모두 For Loop안에 들어가며 'Hello'가 출력되는 과정을 순차적으로 나타내도록 하겠습니다. 그림2) For Loop 진행 While Loop는 For Loop에서 초기값을 바깥으로 뺐다고 생각하시면 됩니다.  그림3) While Loop 구성 그림4) While Loop 진행  사실 For Loop나 While Loop사이에 큰 차이는 없어 보입니다. 유일한 차이는 While루프에 진입할때 초기값과 증감식이 빠져 있는 것입니다. 이는 For Loop에서도 While Loop와 동일하게 사용할수 있지만 그럴거면 While Loop를 쓰겠죠.