분류 전체보기 (61) 썸네일형 리스트형 [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.. [JPA] 콘솔에 Hibernate 로 찍히는 sql 로그 설정하기 1. 콘솔에 sql 문 보이게 하기 spring.jpa.show-sql=true 2. sql 들여쓰기 띄어쓰기 맞춰 이쁘게 맞춰 보이기 spring.jpa.properties.hibernate.format_sql=true 3. ? 에 어떤 값이 들어가 있는지 보이게 하기 logging.level.org.hibernate.type.descriptor.sql=trace [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 ··· 5 6 7 8 다음
