NODE (11) 썸네일형 리스트형 React_Day 04 :: 리액트 컴포넌트 스타일 SCSS, SASS 1. sass, scss sass는 CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여주어 유지보수를 쉽게 해줍니다. pro-processor : 미리 CSS를 프로그래밍해서 만들어 놓는다. 컴파일을 해줘야한다. sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get eve.. React_Day 03 :: useEffect와 Hook 함수 ● useEffect 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법을 제공합니다. ● Hook 함수란? class형 컴포넌트에서 사용하던 상태값 또는 생명주기를 함수형 컴포넌트에서 사용할 수 있도록 제공되는 함수를 Hook이라고 합니다. Hook함수의 특징은 리액트 모듈에서 끄집어서 사용하는 방식입니다. ex) import, React, {useEffect} from 'react' ● useEffect(함수, 의존값이 들어있는 배열) 의존 값이 들어있는 배열이 비워있다면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출됩니다. 배열 자체가 깨끗하게 지워집니다. 컴포넌트가 사라졌.. React_Day 02 :: useRef 와 Spread에 대해서 자바스크립트를 사용할 때에는, 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector함수를 사용합니다. 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야하는 상황이 발생하는데 이때, DOM을 선택하여 처리하는 리액트 함수 useRef를 사용하면 됩니다. useRef란 ? ● 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것입니다. useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다. useRef.. React_Day 01 :: 작업환경 준비하기 1. node.js 설치 nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org >> npm init -y 2. npm 새 프로젝트 실행 >> npx create-react-app react1(프로젝트명) 컴포넌트란 ? 리액트에서 레고 조각처럼 조합하여 프로그래밍 할 수 있게 만든 모듈 단위입니다. index.js ReactDOM.render( document.getElementById('root); ); 3. ReactDOM.render 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링 하겠다는 의미입니다. "index.html"파일의 id가 root인 DOM을 .. Nodejs_Day 07 :: RDBMS 란 ? MySQL 메소드와 연결방법 RDBMS 의 사용 MySQL 다운로드 dev.mysql.com/downloads/ MySQL :: MySQL Community Downloads The world's most popular open source database dev.mysql.com MySQL Community Server 클릭 > go to download page 클릭 > 용량 더 큰걸로 다운 > No thanks, just start my download 클릭 mysql 사용하려면 mariaDB 중지시킨다. 중지시키는 법 : 검색 > 서비스 > M 눌러서 mariaDB 중지버튼 활성화된거 꺼주기 응용프로그램 눌러서 EXCUTE 누르기 (MySQL Community Server 버전) --------------------- MyS.. Nodejs_Day 06 :: mongoose (몽구스) 모듈이란? * 몽고DB에 메일 보낸 객체를 저장 mongoose몽구스 모듈이란? 몽고디비를 사용하면 하나의 컬렉션 안에 똑같은 속성을 가진 문서 객체를 반복적으로 넣어둔다면 데이터를 조회 할 때도 어떤 속성들이 들어있는지 미리 알고있는 상태에서 조회 할 수 있습니다. 따라서 관계형 데이터베이스처럼 테이블, 엑셀시트와 같이 쉽게 다룰 수 있는데 이를 제공하는 모듈이 몽구스 입니다. 오브젝트 맵퍼 (Object Mapper) 자바스크립트 객체와 데이터베이스 객체를 서로 매칭하여 바꿀 수 있게 합니다. 메소드 connect() : mongoose 를 사용해 데이터베이스를 연결합니다. model() : 모델을 정의합니다. Schema() : 스키마를 정의하는 생성자입니다. Promise 자바스크립트 비동기 처리에 사용되는.. Nodejs_Day 05 :: multer 모듈 (파일 업로드하기 위한 모듈) 로보몽고 robomongo.org/download) Robomongo robomongo.org DB 담아두는 곳 --------------------------------------------------------------------------------------------- multer 모듈 --------------------------------------------------------------------------------------------- - 익스프레스에서 파일을 업로드하기 위한 미들웨어입니다. >> npm install multer 1. 파일 업로드 폴더를 만듭니다. 2. diskStorage 설정 - destination : 저장 폴더를 설정합니다. - filename : 저장.. Nodejs_Day 04 :: DB 사용 NoSQL / MongoDB 특징과 사용법 NoSQL (Not Only SQL의 약자다) 💖 기존의 RDBMS의 한계를 극복하기 위해 만들어진 새로운 형태의 데이터베이스입니다. 관계형 DB가 아니므로, RDBMS처럼 고정 된 스키마 및 JOIN문이 존재하지 않습니다. NoSQL을 사용하는 대부분의 이유는 성능 때문이다. 관계형 데이터베이스는 시스템의 신뢰도를 높이는데 필요한 장치를 많이 가지고 있다. SQL문을 읽고 실행하는 데 많은 리소스를 사용하여 성능이 떨어지는 경우가 많다. 반대로 NoSQL은 성능을 최우선으로 생각하여 실시간으로 처리해야 하는 경우나 대용량 트래픽을 감당 할 수 있는 메시징 시스템등에 많이 사용된다. --------------------------------------------------------------------.. 이전 1 2 다음
