분류 전체보기53 리액트 / webpack / jsx 란? 오늘은 리액트, webpack, jsx 란 어떤 내용인지 간단하게 개념을 정리해 보도록 하겠습니다. 리액트 소개 페이스북에서 개발 보급하는 오픈소스 프론트엔드 개발 자바스크립트 라이브러리 입니다. 앵귤러 프레임워크 보다는 빠르게 배우고 개발할 수 있지만 뷰보다는 러닝 커브가 높습니다. 리액트를 사용하는 회사들 넷플릭스 에어비엔비 드롭박스 트위터 에버노트 우버 리액트 주요특징 Component 기반 개발구조 컴포넌트란 화면을 구성하는 개별 뷰 단위 레고블록처럼 컴포넌트를 조합하여 페이지 구성 컴포넌트는 별도 어플 또는 동일 어플내에서 재사용이 용이 합니다. 성능보다는 유지보수 편리성 제고 측면 고려 JSX 문법 구조로 화면 표시 UI 표현 기술 리액트 기반 UI 표현 자바스크립트 신규 표현 문법 페이스북 .. 2023. 12. 5. node.js 로 여러가지 프로젝트 버전 관리하기 with NVM 오늘은 node.js 를 사용하여 벡엔드 작업 진행시 로컬 컴퓨터(시스템)에 여러개의 node.js 버전을 설치하고 여러개의 버전을 쉽게 전환하여 사용할수 있도록 도와주는 node.js 버전 매니저인 nvm(Node Version Manager)을 같이 알아보도록 하겠습니다. 1) NVM(Node Version Manager) 설치 윈도우 설치 진행 nvm-windows nvm-windows는 MIT 라이센스의 오픈 소스로 Windows 환경에서 nvm-windows를 동작시키기 위해서는 먼저 nvm-windows를 설치해야합니다. (nvm-windows) https://github.com/coreybutler/nvm-windows/releases nvm-setup.zip 다운로드 후 압축해제 설치 MA.. 2023. 12. 5. 리액트 개발 환경을 더욱 편하게 해 주는 Tool 소개 프론트엔드 개발 시 리액트를 많이 사용하실 텐데요! 리액트 개발 시 조금 더 편하게 개발을 도와주는 툴들을 소개하려고 합니다. 이번에 다루게 되는 도구들은 모두 VS Code와 연동해서 사용하는 도구들인데요. 1) 리액트 개발을 편하게! ESLint 설치 ESLint : 자바스크립트 문법 및 코드 스타일 검사 도구 2) Reactjs Code Snippets 설치 Reactjs Code Snippets : 단축키를 통한 코드 조각 자동 생성 추가 기능제공 : rcc 단축키 활용 가이드 ㄴ~.js문서를 하나 만들고 해당 화면에서 rcc 라고 입력하면 클래스 컴포넌트 소스 스니펫(코드조각)을 만들 수 있다. 주요 키워드 명 : RCC, RCCP, RCFC,RPC, RSC, RSCP 3) Prettier-Co.. 2023. 12. 5. 벡엔드 서버 개발을 위한 node.js 디렉토리 구조와 생산성 향상을 위한 nodemon 오늘은 Node Express.js에 대해서 알아 보겠습니다. ^^ Node Express.js 란? Javascript를 서버에서 사용하려면 구글의 V8 엔진을 기반으로 한 nodeJS 프레임워크를 사용해야 합니다. nodeJS를 사용한 REST 서버를 편리하게 구현하게 해주는 프레임워크로는 express가 있습니다. express 특징 Node 기반의 오픈소스 웹서버 프레임워크 라이브러리입니다. Node 기반 웹 및 모바일 애플리케이션 개발 지원 강력한 기능을 지원합니다. 수많은 HTTP 기반 유틸리티 기능 및 미들웨어 제공으로 강력한 API 개발 환경 지원 합니다. Node Express 프로젝트 생성 및 실행 STEP 1) Express-generator 패키지를 npm 명령어를 통해 전역으로 최.. 2023. 12. 5. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
