디자인너 코딩하기

자바스크립트의 모듈시스템을 이용하는 방법으로 내보내기 export, 불러오기 import를 사용 ※ 모튤시스템 : 다른 페이지의 함수나 클래스를 불러와 사용 01 export 여러 개의 객체(함수, 클래스, 변수)가 있는 라이브러리 형태의 모듈 특정개체만 내보내기가 가능 import 할 때 별칭이 불가능(객체의 이름을 유지해야 함) import 할 때 불러올 개체를 { } 로 감싸줘야 함 예) export { myFunction } import { myFunction } from 02 export default 해당 모듈에 하나의 객체만 존재할때 import 할때 별칭으로 불러올 수 있음(객체의 임의의 이름 사용 가능) 예) export default Class import { default as Cla..

리액트로 개발할 때 함수형 컴포넌트를 사용한다면 react hook이라는 편리한 기능을 사용할 수 있다 State 컴포넌트가 갖을 수 있는 상태 예) 시계라는 컴포넌트에서 시간이라는 State를 가질수 있음 useState는 컴포넌트의 state를 간편하게 생성하고 업데이트 시킬 수 있게 해주는 도구 const [ state, setState ] = useState(초기값); 먼저 스테이트의 생성과 동시에 가져야 할 초기값을 useState 함수에 인자로 넣어주면 state와 setState의 두가지 요소를 배열 형태로 리턴해줍니다. state = 현재의 상태값 변경해야 할 값은 setState함수를 이용하면 변경 예) const [ time, setTime ] = useState(5); state: t..

한줄 삭제 Ctrl(left) + Shift(right) + k 한줄 이동 Alt + ↑ / Alt + ↓ 한줄 복사 Shift + Alt + ↑ / Shift + Alt + ↓ 한줄삭제가 안될때 왼쪽 ctr과 오른쪽의 shift를 누를것 바로가기 키 Ctrl + K Ctrl + S

단축 자동완성 단축 자동완성 리스트 https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier. marketplace.visualstudio.com

mysql 우측클릭 create database book_manager; 콘솔창에 위를 입력하여 book_manager 디비를 만든다. show databases; 확인한다 application.yml에 디비를 연결해 준다. datasource: url: jdbc:mysql://localhost:3306/book_manager username: root password: apmsetup 그리고 generate-ddl: true 입력해 준다.(자동으로 entity 활용하고 있는 테이블을 생성한다.) hibernate: ddl-auto: create-drop application.yml spring: h2: console: enabled: true jpa: defer-datasource-initializat..

관계형 DB에서 특정Table의 PK를 다른Table FK(Foreign Key)로 활용하여 연결 Contributors: Linda DeMichiel 외부 키 열을 매핑하는 일대일 연결(종속관계) 종속관계 Customer class @OneToOne(optional=false) @JoinColumn(name="CUSTREC_ID", unique=true, nullable=false, updatable=false) public CustomerRecord getCustomerRecord() { return customerRecord; } CustomerRecord class @OneToOne(optional=false, mappedBy="customerRecord") public Customer getCu..

H2DB project에 설치 IntellJ new project 생성시 의존성 주입 build.gradle의 Dependencies dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-b..

eslint 자바스크립트 코드를 실행하지 않아도 정적 분석을 통해 문법 오류를 찾아준다 간단한 포맷팅기능도 있음 npm i -D eslint prettier 포맷팅 중 하나 https://prettier.io/ 에서 install 명령어를 찾아 복사 실행시켜준다. npm install --save-dev --save-exact prettier --save-dev -> -D와 동일 --save-exact -> package.json devDependencies에서 ^ 없이 설치를 의미 "^"의 의미는 패키지가 업데이트 할때 마이너 버전에 한해 업데이트를 허용 포맷팅이므로 버젼에 따라 기본 설정이 달라지므로 exact로 설치 "devDependencies": { "css-loader": "^6.7.1", "..

1 새로운 폴더를 만든다 2 npm init -y 실행 package.json파일 생성 확인 → package.json 초기화 3 npm i -D webpack webpack-cli webpack-dev-server i는 install -D 개발환경, 테스트, 로컬환경 사용용(devDependencies) webpack, webpack-cli, webpack-dev-server 세 가지를 개발환경에서만 사용하는 용도로 인스톨 node_modules 폴더와 package-lock.json 파일 목록생성 및 버젼 확인 4 src 폴더 생성 src 폴더와 하위에 css폴더와 css폴더하위에 style.css파일과 js폴더와 js폴더 하위에 index.js파일을 생성 5 webpack.config.js파일 생성..

방법 2. Spring Jpa에서 제공하는 기본 Entity Listener ① 메인 클래스에 @EnableJpaAuditing 붙여준다. @SpringBootApplication @EnableJpaAuditing public class BookmanagerApplication { public static void main(String[] args) { SpringApplication.run(BookmanagerApplication.class, args); } } ② 해당 Entity에 @EntityListeners(value= AuditingEntityListener.class) 붙여준다. ③ 해당 필드에 맞는 어노테이션을 붙여준다. (@CreatedDate, @LastModifiedDate ...) ..