React (13) 썸네일형 리스트형 Yarn 설치 및 사용 방법 yarn 이란? Yarn은 프로젝트 패키지 의존성을 관리하는 툴이며, 페키지 메니저이다. yarn 은 2016년 페이스북에서 발표됐으며 npm 보다는 조금 더 빠른 성능을 보유하고 있다고 한다. yarn 의 장점 1. 빠른 Installation npm은 npm install 시 패키지들을 하나씩 순차적으로 설치하는 반면 yarn 은 yarn install 시 package.json 에 나열돼있는 의존성 패키지들을 동시에 병렬적 방식으로 한번에 설치를 진행한다. 그래서 설치 측면에서 npm 보다 빠르다는 장점이 있다. 2. 보안성 yarn.lock, package.json 파일에 있는 의존성 페키지들만 설치를 진행하기 때문에 모든 디바이스에서 같은 패키지들을 설치하는 것을 보장하며 다른 버전이 설치되어 .. [React] react-canvas-draw 에 CanvasDraw 에 그린 그림의 dataURL 을 File 로 변환시키는 javascript 로직 이것은 파일명에 Data.now 를 사용해 현재 날짜의 밀리초를 파일명으로 삽입하여 파일명을 유동적으로 자동 지정되게 하였다. 요즘 버전? const dataURLtoFile = (dataurl) => { const arr = dataurl.split(","); const mime = arr[0].match(/:(.*?);/)[1]; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } const name = Date.now() + "." + mime.split("/")[1]; return new File([u8arr].. [React] VS code 플러그인 Reactjs code snippets 으로 코드 템플릿 자동 생성하기 - rsc React 프로젝트에서 component 를 만들때 일일이 코드 쳐주기가 귀찮다. 간단하게 rsc 로 함수형 컴포넌트 템플릿을 만들 수 있다. IntelliJ 와 같은 개열인 WebStrom 에서는 React 프로젝트 내에서 rsc 기능을 자체 지원한다. 1. Reactjs code snippets 플러그인 install 해준다. components 폴더안에 js 파일을 만들어주고 그안에 rsc 를 치면 자동 완성으로 뜬다. Create a stateless React Component 라고 되어있다. 즉 함수형 컴포넌트를 자동 완성 해준다는 것이다. 엔터 친다 깔끔하게 완성 rcc 는 클래스형 리액트 컴포넌트를 생성해준다. 이렇게 생성 된다. 우리는 주로 함수형 컴포넌트 템플릿을 사용하기 때문에 rsc.. [Node] Node.js 로 간단한 server 만들어 React 프로젝트에 사용하기 git clone 폴더 안에 server 폴더를 만든다. server 는 React 프로젝트와 db 를 연동해주는 기능을 할것이다. $ npm init or $ yarn init 둘다 가능하다. 콘솔에 뭔가 뜨는데 그냥 계속 엔터 눌러주자. 그럼 package.json 이 생김 연동하기 위해서는 의존성 모듈(dependency) 몇가지가 필요하다. 1. body-parser mysql : body-parser란 POST 요청 기능을 수행할 수 있게 해주는 미들 웨어이다. db 는 mysql로 지정 2. nodemon : 파일이 수정되었을때 노드가 그것을 읽고 자동으로 노드 애플리케이션을 재시작해주는 확장 모듈 3. cors : Cross-Origin Resource Sharing Policy 를 해결해준.. [React - Redux] React 에 Redux 적용하기 1. Redux 란? Redux 는 javascript 상태 관리 라이브러리 이다. 또한 Redux 는 앱 내에 여러 데이터들의 상태를 저장하는 저장소이다. React 는 기본적으로 하위 컴포넌트들에 props 를 넘겨주는 3가지 방법이 있다. 첫번째는 props에 담아서 넘겨주는 것이고, 두번째는 context api 를 활용하는 것이다. 그리고 마지막으로 Redux 를 통해 모든 컴포넌트들에서 공통 store 에서 값을 참조 할 수 있게 하는 것이다. 리덕스 공식 홈페이지에서는 Redux 를 예측 가능한 상태 컨테이너라고 표현한다. 즉 어떤 값을 넣고 어떤 값이 도출 되는지 예측이 가능하다는 말이다. 위는 리덕스의 구조이다. 앱 화면에서 Dispatch 를 통해 Action 을 발생시킨다. 그러면 R.. 이전 1 2 다음
