본문 바로가기

전체 글

[Node] Babel Preset, Babelrc 리액트를 공부하는 도중에 설치된 Babel 은 리액트 프로젝트를 이용할 때 자연스럽게 라이브러리가 추가되었습니다. 이 라이브러리가 무엇인지 부터 파악하는 것이 급했었던 저는 Babel은 es6 버전을 사용하는 리액트의 경우 브라우저 별로 지원하지 않는 함수들이 존재하기 때문 에 Babel을 사용한다고 파악하였습니다. 그러면 Babel을 적용하는 방법 이 궁금했었습니다. 그래서 간단하게 Babel을 파악하고 리액트에서 사용했던 Babel-preset-env와 babelrc에 대해 간략하게 소개하도록 하겠습니다. 본 문서는 웹팩을 이용한 Babel 사용법을 나타내고 있습니다. # Contents 바벨 적용 Babel-preset-env 및 babelrc # 바벨 적용 바벨을 웹팩으로 적용시키는 방법은 아주 .. 더보기
[Node] React 프로젝트를 직접 만들어보기 with Babel, Webpack 리액트는 Facebook에서 만들고 유지 관리하는 인기있는 JavaScript 라이브러리 입니다. 리액트는 웹 애플리케이션에서 뷰 레이어를 만들기 위한 포괄적인 도구들을 제공하는데 중점 을 둡니다. 리액트는 컴포넌트 개념에 초점을 맞추어 뷰의 추상화를 제공합니다. 컴포넌트는 버튼, 입력 폼, HTML div 와 같은 간단한 컨테이너 혹은 사용자 인터페이스의 다른 요소 일 수 있습니다. 개념은 특정 책임이 있는 재사용성이 높은 컴포넌트를 정의하고 구성하여 애플리케이션의 사용자 인터페이스를 구성할 수 있어야 한다는 것입니다. 이러한 리액트를 사용하기 위해서는 프로젝트를 생성하는 것이 당연지사입니다. 맨 처음 리액트 프로젝트를 생성할 때 많은 사람들은 아래의 명령어를 입력하여 간단하게 프로젝트를 생성하곤 합니.. 더보기
[Node] Webpack 쓸만한 Plugins 웹팩에서 쓸만한 플러그인을 정리해보았습니다. 웹팩을 사용하는 방법을 이해하고, config 파일을 수정하는 방법에 대한 이해가 필요합니다. 현 문서는 플러그인의 종류와 사용방법에만 알려드릴 뿐 웹팩에 사용법을 정의하지 않았습니다. 웹팩에 사용법은 다른 문서를 참고해주시기 바랍니다. 이 문서는 항시 업데이트 할 수 있음을 알려드립니다. # Contents 변수 정의 및 사용 - DefinePlugin 환경변수 정의 및 사용 - EnvironmentPlugin 최적화 - TerserPlugin # 변수 정의 및 사용 웹팩에서의 변수를 선언하여 선언된 변수를 의존된 자바스크립트 코드 에서 사용할 수 있습니다. 웹팩에서 제공하는 DefinePlugin 은 모든 자바스크립트 코드에서 접근 가능한 변수 를 선언하기.. 더보기
[Node] Webpack 설치 및 사용법 JavaScript는 웹 개발자에게 브라우저에서 직접 코드를 실행하고 동적인 대화형 웹 사이트를 구축할 수 있는 능력을 제공한다는 목표 로 탄생하였습니다. 지금까지 JavaScript는 많은 성장을 하였습니다. 처음 JavaScript가 매우 간단하고 제한된 언어 였다면 오늘날에는 거의 모든 종류의 애플리케이션을 빌드하기 위해 브라우저 외부에서도 사용할 수 있는 완전한 범용 언어 로 간주될 수 있습니다. 실제로 JavaScript는 이제 프론트엔드 애플리케이션, 엡 서버 및 모바일 애플리케이션은 물론 웨어러블 장치, 온도 조절기, 비행드론과 같은 임베디드 장치를 지원하고 있습니다. 새로운 추세에 JavaScript 개발자들은 동일한 프로젝트의 여러 환경에서 코드를 재사용하고 단순화 시킬 필요 가 있다고 .. 더보기
[Node] PM2 설치 및 사용법 PM2 또는 Process Manager 2는 개발자와 Devops가 프로덕션 환경에서 Node.js 애플리케이션을 관리하는 데 도움 이 되는 오픈 소스 프로덕션 Node.js 프로세스 관리자입니다. Supervisord, Forever, Systemd 와 같은 다른 프로세스 관리자와 비교하여 PM2의 일부 주요 기능은 자동 애플리케이션 로드 밸런싱, 선언적 애플리케이션 구성, 배포 시스템 및 모니터링 입니다. 기존에 클러스터 모드 및 오류로 인한 프로세스 종료 현상 등 개발자가 인지하지 못한 상황에서 간단한 설정으로 이러한 문제들을 해결할 수 있는 Node 의 인기 라이브러리 중 하나입니다. 그러면 실무에서 필요로 하는 최소한의 정보들을 알아보고 적용해보도록 합시다. # Contents PM2 설치 P.. 더보기
[Node] Audio Raw PCM data 에서 amplitude 추출 Audio PCM 데이터에서 정상적인 데이터가 맞는 지, 구간 마다 어느정도의 파장크기를 확인 하는 방법을 본 문서에서 정의하고 있습니다. 개발을 하다가 음성 발화 인식을 위해 해당 코드를 작성하게 되었으며 16bit little endian mono 채널에서만을 기준으로 작성되었습니다. 사진을 보게 되면 파장이 -1.0 부터 1.0 까지 구성되어 있습니다. 이러한 로직을 처리하는 부분입니다. # Contents 예제 코드 # 예제 코드 코드는 아주 간단합니다. 매번 2바이트를 처리하는데, little endian이므로 8비트를 왼쪽 시프트하고, 부호처리를 하게 되면 0-1사이의 값 이 나오게 됩니다. 해당 코드는 값이 들어오는 구간 마다 데이터의 max 값을 찾는 코드였습니다. 해당 코드를 응용하여 사.. 더보기
[Node] Express 서버에서 Form을 이용하여 여러 개 데이터 전송 Express를 이용하여 서버 쪽에서 파일을 공유 하는 방법입니다. 보통은 클라이언트 단에서 서버 쪽으로 폼 데이터를 전송하여 메시지를 요청하는데, 어느 서버에서는 클라이언트가 처리하도록 서버에서 폼 데이터를 전송하는 그러한 자료를 본 적이 있습니다. 물론 이러한 방식은 여러 파일을 한꺼번에 처리하게 되어 서버 측 입장에서는 아주 간단하고 편리 하지만, 클라이언트 측 입장에서는 바운더리 처리와 더불어 로직을 새로 짜야하는 상황이 존재하기 때문에 혹시 이러한 상황이 발생하시더라도 기본적인 틀을 이용하여 코드를 작성하면 도움이 되지 않을까 해서 작성하게 되었습니다. # Contents 서버 클라이언트 # 서버 서버 쪽 코드는 아주 간단합니다. 해당 라우터에 get 메소드를 통하여 폼 데이터 를 전송하면 끝이.. 더보기
[Node] Express 404 Not Found 처리 Express를 사용하면 웹 서버를 구동하기가 아주 편리해집니다. 또한 Express는 미들웨어 프레임워크 를 적용하여 사용하기 때문에 웹 서버 개발의 아주 많은 도움이 되는데요. 웹 서버에 등록되지 않은 페이지 혹은 URI 로 들어가면 아래와 같은 오류 명령어 가 뜨는 경우가 대다수 있었을 것입니다. 이런 경우 Express에서는 어떻게 처리하면 내가 원하는 페이지 혹은 문자열이 나오게 할 수 있는지 에 대해 알아보도록 하겠습니다. # Contents 오류 핸들러 작성 오류 핸들러 라이브러리 사용 # 오류 핸들러 작성 라우터 미들웨어의 경우에는 등록된 라우터 순으로 처리되어집니다. 라우터가 등록된 코드 끝까지 확인 한 후에 등록되지 않은 패스일 경우에 오류 메시지를 뿌려주는 것 이죠. 그러면 라우터 마.. 더보기

티스토리툴바