Engineering_S/W & H/W

 "npx create-react-app ..."의 CRA의 개발이 중단됨에따라 다른 대안으로 React프로젝트를 생성해야 한다. 그중에 Vite가 있는데 CRA처럼 쉬고 간단하게 생성할수 있다. 1) 사전 준비 - 2025년 기준 Node.js 20+ 권장 (LTS). 버전 확인: $ node -v copy 2) 프로젝트 생성(이름: my-app ) 버전은 기본 최신(latest)으로 설정할 수 있으며 필요시 이전 버전으로 설정할 수 있다. (공식사이트의 Version참고 ) 대화형(템플릿 선택 프롬프트 표시): $ npm create vite@latest my-app copy 1) Window의 Git Bash로 생성 비대화형(바로 React + TS 템플릿): $ npm create vite@latest my-app -- --template react-ts copy pnpm / yarn 사용 시: $ pnpm create vite my-app --template react-ts copy $ yarn create vite my-app --template react-ts copy 3) 의존성 설치 & 실행 $ cd my-app copy $ npm install copy $ npm run dev copy 기본 개발 서버는 http://localhost:5173 에서 실행된다. 4) 생성 구조(요약) index.html : 진입 HTML src/main.tsx : React 엔트리 src/App.tsx : 샘플 컴포넌트 tsconfig.json : TypeScript 설정 vite.config.ts : Vite 설정 5) TypeScript 엄격 모드(선택) tsconfig.json 에서 "strict": true 권장. 6) 경로 별칭 설정(선택) vite.config.ts 예시: import { defineCo...

 테스트 프로젝트에 js파일을 생성합니다. (testing1.js) // simpleGetTest/testing1.js import http from 'k6/http' ; import { sleep } from 'k6' ; export default function () { http . get ( '[테스트 하기 위한 URL정보]' ); sleep ( 1 ); } 매우 간단한 테스트 입니다. 1회만 해당 URL에 GET요청을 하고 status코드가 200이 오는지 확인합니다. import { sleep } from "k6" import http from "k6/http" // 테스트 옵션 // 10명의 가상 유저들이 30초간 export const options = { vus : 10 , // 10명의 가상 유저 duration : "30s" , // 30초간 } export default function () { http . get ( "[테스트 하기 위한 URL정보]" ) sleep ( 1 ) } 다음 테스트는 옵션을 줘서 10명의 유저가 30초간 GET요청을 하는 테스트입니다. import { sleep } from "k6" import http from "k6/http" // 테스트 옵션 export const options = { stages : [ { duration : "30s" , target : 20 }, // 30초동안 20명의 유저가 점진적으로 늘어난다 { duration : "1m30s" , target : 10 }, // 1분30초동안 10명의 유저가 유지된다. { duration : "20s" , target...

서버 또는 웹을 개발하다 보면 해당 시스템이 얼마나 트래픽을 견딜수 있는지 확인할 필요가 있습니다. 하지만 1000명이 동시에 GET Request를 수동으로 구현하는 것은 쉽지가 않습니다. 피시방 여러군대를 매수해서 1000대의 PC에서 한 웹사이트에 GET요청을 해도 비용이 어마어마하게 나갈것이기 때문입니다.  확인을 하다가 오픈소스 툴인 K6를 추천받았습니다. Document를 읽으니 생각보다 사용하기 쉬워보여서 스터리를 진행하게 되었습니다. 일단 자세한 설치법은 공식 Document에도 나와있지만 저만의 글을 작성해서 설치법도 아래 적도록 하겠습니다. 공식문서 링크 : https://k6.io/docs/get-started/installation/#linux gpg를 이용하여 키 생성 $ sudo gpg --no-default-keyring --keyring /usr/share/keyrings/k6-archive-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69 copy gpg를 이용하여 키 생성중 에러발생시 참고 --------------------------------------------- 위 사진처럼 에러 발생시 대처 방법 에러 발생시 참고 공식문서 링크 : https://k6.io/docs/get-started/installation/troubleshooting/ sudo를 이용하여 gpg 루트 생성 $ sudo gcg -k copy 셋팅 완료 --------------------------------------------- deb설치 k6 $ echo "deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb s...

 안녕하세요. 이번에는 JavaScript에서 some이라는 메소드를 사용하기로 하겠습니다.  const  arr  =  [ 1 , 2 , 3 , 4 , 5 ] ; const   someTest   =   ( arr ,  num )   =>   {      return   arr . some ( ( ele ,   idx )   =>   {          console . log ( " idx:  " ,   idx ,   " / ele:  " ,   ele ,   " / num:  " ,   num ) ;          return   ele === num ;      } ) } console . log ( someTest (arr , 4 )) ; 위와 같이 코드를 작성하고 테스트를 하면 아래와 같은 콘솔 로그가 출력됩니다. 사진1) someTest출력 결과 some은 배열에 적용할수 있는 method이며 첫번째 인자에는 배열, 두번째 인자는 해당 index가 0번부터 순차적으로 출력되는 것을 알수 있습니다.  그림2) some method 순서도 그림2는 작성한 코드를 순서도로 나타냈습니다. some method를 이용하여 각 배열의 원소를 조건(ele is num?)과 맞는지 확인합니다. index내에 True를 확인하면 some method는 끝나며 True를 Return하게 됩니다. 하지만 마지막 index까지 조건이 계속 False이면 some method가 끝나면서 False를 출력하게 됩니...

 안녕하세요. 이번에는 JEST로 테스트 케이스를 만들때 일일이 저장하고 cli로 테스트를 돌려 확인하는 방법을 지금까지 하였습니다. 하지만 nodemon처럼 세이브 할때마다 테스트 케이스의 결과를 확인하는 방법이 있습니다. JEST의 테스트를 watch mode로 감시하기 cli : npm test -- --watchAll copy 위의 사진처럼 터미널에 'npm test'를 쳐서 수동으로 테스트 상황을 확인해야 합니다.  하지만 'npm start -- --watch' cli를 사용하면 세이브를 진행할때마다 해당 테스트 케이스가 다시 실행됩니다. 상황에 따라 하나의 테스트 케이스만 적용하고 싶을수 있습니다. 위 터미널에서 테스트 케이스가 2개가 있다. 이때 PASS한 테스트 케이스를 놔두고 FAIL만 watch모드로 감시하는 방법이 있다. JEST의 특정 테스트를 watch mode로 감시하기 cli : npm test -- --watch -- [테스트파일 제목] copy 위 터미널에서 'npm test -- --watch -- functions.test.js'을 입력하고 나온 결과이다. 이제 'functions.test.js'을 저장할때 해당 테스트 케이스가 실행되어 터미널에 결과가 출력이 된다.

 안녕하세요. 알렉스 입니다. 이번에는 테스트 코드를 작성하면서 유용한 정보를 포트스 하도록 하겠습니다.  JEST의 테스트 범위(coverage)를 확인하기 cli : npm test -- --coverage copy JS코드를 test.js코드로 테스트 할때 실제 어느정도 범위를 커버하고 있는지 나타내 줍니다. 위 사진에서 보면 현재 100% 범위로 테스트가 된것이 아니라는 것을 알수 있습니다. coverage를 실행하게 되면 프로젝트 폴더 안에 'coverage'라는 폴더가 생성이 됩니다. 이후 'lcov-report'폴더에 들어가서 'index.html'에 들어가면 JEST로 테스트한 범위에 대해서 자세하게 나와있습니다. JEST의 커버리지 상 JEST가 검사하지 못한부분(붉은색) 위 사진처럼 붉은색이 나온 부분은 JEST가 아직 검사를 하지 못한 부분이다. 테스트의 완성도를 높이기 위해서는 위와 같이 붉은색 부분을 순차적으로 제거해야 한다.  해당 붉은 부분의 테스트를 작성하고 coverage를 하면 위 사진과 같이 사라집니다. 

 안녕하세요. 알렉스 입니다. 이번에는 JavaScript의 코드를 구동하는데 수동으로 테스트 하는 것을 자동으로 테스트 할수 있도록 알려드리겠습니다. 여기서 사용하는 프레임워크는 Facebook사에서 개발한 Jest입니다. npm 환경에서 Jest를 'package.json'에 추가를 해야 합니다.  npm환경에서 jest를 추가하기 cli : npm install --save-dev jest copy 이제 2개의 폴더를 만듭니다. 각각 code, test폴더를 만들어서 code에는 실행할 javascript코드를, test는 code에 있는 javascript코드를 테스트할 코드를 저장합니다.   먼저 code안에 'print.js'파일을 생성하고 아래와 같이 코드를 작성합니다. // 받은 인자를 간단하게 return하는 값 function print ( str ) { return str ; } module . exports = print ; // print를 외부로 나가게 한다.  이제 해당 'print.js'파일을 검사할 'print.test.js'파일을 test폴더에 생성하고 아래와 같이 코드를 작성해 줍니다. const print = require ( '../code/print' ); // 테스트 코드를 받아온다 // Jest을 이용한 테스트 케이스 생성 test ( 'Hello World Test' , () => { // Hello World를 문자열 변수 str에 저장한다. const str = "Hello World!" ; // expect와 toBe가 동일한지 검사한다. expect ( print ( str )). toBe ( str ); }); 이제 test cli를 실행하기 위해 'package.json'에서 아래와 같은 'script...

 안녕하세요. 이번에는 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의 키값과 동일해야...

 안녕하세요. 저번 글에 이어서 실제로 세션을 이용하여 코드를 작성하도록 하겠습니다.  세션에 대한 개념적 설명을 링크 를 참고해 주시기 바랍니다. 먼저 npm init을 진행합니다. npm 초기화 방법은 링크 를 참고해 주시기 바랍니다. 4개의 npm 모듈을 설치합니다. express, express-session, cookie-parser, nodemon 이중 nodemon은 해당 링크 에서 설치 및 사용법이 나와 있습니다. 설치가 완료가 된 다음 위와 같이 index.js파일을 만들어줍니다. const express = require ( "express" ); const session = require ( "express-session" ); const cookieParser = require ( "cookie-parser" ); const app = express (); const PORT = 5000 ; // 서버 동작을 확인하기 위한 파트 app . get ( '/' , ( req , res ) => { res . status ( 200 ); res . send ( "<h1>Working Well</h1>" ) }) app . listen ( PORT , () => console . log ( `Server at ${ PORT } ` )); 위 코드와 같이 작성하고 테스트를 합니다.  위 2개 사진과 같이 서버도 정상 동작 되고 root url의 get 요청도 정상적으로 되었습니다. const express = require ( "express" ); const session = require ( "express-session" ); const cookieParser = require ( "cookie-pars...

 안녕하세요. 알렉스 입니다. 이번에는 Express를 이용해서 Client에서 들어온 request의 Body를 JSON형식으로 읽어보도록 하겠습니다. const express = require ( 'express' ) const app = express (); // POST app . post ( '/login' , ( req , res ) => { console . log ( req . body ) // body확인 가능 부분 res . status ( 201 ); res . send ({ message : "Login Successful" , body : req . body }) }) app . listen ( 3500 , () => { console . log ( "Server is working" ); }) 위 코드와 사진을 확인하면 실제 Postman에서 request한 body내용이 전혀 읽혀지지 않은것이 확인이 됩니다. 이렇한 원인은 통신에 있습니다. http통신의 body는 한번에 들어오는 것이 아닙니다. 부분(또는 chunk) 부분 들어오고 그것을 조합하고 나야 완전한 body가 되는 것입니다. app . use ( function ( req , res , next ) { let data = '' ; // chunk를 하나로 모음 req . on ( 'data' , function ( chunk ) { data += chunk ; console . log ( chunk ); }); // chunk를 모으는 것이 끝남 req . on ( 'end' , function () { // req.rawBody = data; console . log ( 'on end: ' , data ) if ( ...

 node js로 작업을 하다보면 항상 localhost:[포트번호] 로 진행하는 경우가 대다수이다. 물론 혼자서 작업을 한다면 상관이 없지만 협업을 하는 상황이면 Front-End와 Back-End 사이의 테스트를 진행해야 한다. AWS를 이용한 테스트는 복잡하고 시간이 걸리기 때문에 최종작업에서 시행하는게 낳다고 생각한다.  따라서 이번 글은 본인의 PC를 서버로 만들어 테스트 할수 있는 환경을 작성하도록 하겠다. const express = require ( 'express' ); // middleware const app = express (); const PORT = 5000 ; // 서버 체크 app . get ( '/' , ( req , res ) => { console . log ( "GET Request from Client" ); res . send ( '<h1>Server is Working</h1>' ) }) app . listen ( PORT , () => { console . log ( `Server is starting ${ PORT } ` ); }); 위는 매우 간단한 node js를 이용한 localhost서버를 만든 것이다.  포트는 5000번이며 GET요청을 할시 Client쪽에서는 'Server is Working'의 글자가 보이게 된다. 이제 현재 localhost:5000의 IP를 전세계 어디서나 접속할수 있는 웹으로 만들자. 먼저 Global로 localtunnel을 설치한다. - terminal: npm i -g localtunel localhost에서만 구동되는 5000포트를 전세계 web상으로 올린다.  'your url is : ' 이후에 나오는 웹 주소는 실제 전세계 어디서나 접속할수 있는 주소 이다. - terminal: lt --port 5000 처음 ...

  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...