Java, JavaScript (33) 썸네일형 리스트형 [Spring Boot] Entity 생성은 뭐야? Spring Boot에서 ManyToOne, OneToMany, ManyToMany 관계를 설정하는 방법에 대해서 알아보겠습니다. 다음은 전체 테이블 설계입니다. 1과 가까운 테이블은 일을 나타내고, *와 가까운 테이블을 다를 나타냅니다. 우선 Entity 구현 간에 사용되는 어노테이션들에 대해서 알아보겠습니다. @Id - 해당 변수를 Primary Key로 지정해준다. @GeneratedValue - Primary Key의 생성 전략을 명시한다. @Column - 실제 DB의 Column에 대응하는 변수라는 것을 명시한다. @Entity - 실제 DB의 테이블에 대응하는 클래스라는 것을 명시한다. @Getter - 변수를 선언하면 자동으로 Getter 코드를 만든다. @Setter - 변수를 선언하면 .. [Spring Boot] Intellij 유용한 단축키 모음 Intellij 사용하는 데 있어 아직 서툴기 때문에 유용한 단축키들을 모아서 참고하려고 모음을 만들었습니다. 자주 사용하는 기능들을 위주로 만들었고, 전체 단축키를 볼 수 있는 링크도 만들어 두었으니 필요에 따라 사용하시면 좋을 것 같습니다. ⚠ 윈도우를 기준으로 작성되었습니다. 기능 단축키 코드 끝에 ; 붙여주기 Ctrl + Shift + Enter 변수 추출하기 Ctrl + Alt + v 생성자, Getter, override methods.... 자동 완성 Alt + Insert 동일한 변수명 수정 Shift + F6 자동 코드 정렬 Ctrl + Alt + L class, files, setting 등 검색어와 관련된 것을 검색 Shift + Shift 최근에 open한 파일 목록 확인 Ctrl .. [React] fetch를 사용한 데이터 가져오기 우선 fetch는 리액트에서 API를 이용하여 서버와 비동기 요청을 할 수 있는 하나의 방식 중에 하나입니다. 아래의 코드는 https://www.themoviedb.org/ 사이트에서 제공하는 API 데이터를 가져오는 것을 코드로 나타낸 것입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import React, { useEffect, useState } from 'react'; import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config'; import MainImage from './Selctions/MainImage'; function LandingPage() { const [Movies, setMov.. [React] 컴포넌트의 생명 주기 리액트에서 사용되는 컴포넌트들의 생성 주기에 대해서 알아보겠습니다. 위의 그림에 기본적인 컴포넌트의 생성, 완료, 갱신, 소멸에 거치는 과정들을 그림으로 표현해놓았습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 import { Component } from 'react'; class LifeCycleExample extends Component { static getDerivedStateFromProps() { console.log('getDerivedStateFromProps 호출'); return {}; } constructor(props) { super(props); .. [React] state 사용 시 주의할 점 props를 통해서는 컴포넌트 내부에서 값을 바꿀 수 없다. 이번에는 state를 통해서 컴포넌트의 내부에서 값을 바꾸는 방법에 대해 알아보겠다. 생성자에서 반드시 초기화를 해줘야 한다. state값을 바꾸려면 반드시 setState() 함수를 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: props.count, }; this.increaseCount = this.increaseCount.bind(this); } 생성자를 사용하여 state를 만들어줍니다. .. [React] 프로퍼티가 뭐야? 프로퍼티는 상위 컴포넌트(App)가 하위 컴포넌트(PropsExample)에 값을 전달할 때 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class PropsExample extends Component { render() { const { boolValue, numValue, arrayValue, objValue, nodeValue, funcValue, } = this.props; return ( 불리언값: {String(boolValue)} 숫자값: {numValue} 배열.. [React] 템플릿 문자열 React의 템플릿 문자열 사용 방법입니다. 1 2 3 4 5 6 function App() { var cart = { name: '계란과자', price: 1000 }; var getTotal = function (cart) { return cart.price + '원'; }; cart라는 변수에 name과 price에 맞는 임의의 값을 넣어줍니다. 그리고 getTotla 함수를 만들어서 cart에 있는 price에 '원'을 붙여줍니다. 1 var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}`; myCart에 저장되는 문자열이 템플릿 문자열을 사용한 것 입니다. `` ← window 기준 ~표시 있는 키에 있습니다. 템플릿 문자열을 사용함으.. [React] 리액트 기본 설정 'Do it 리액트 프로그래밍의 정석' 공부한 내용을 정리하는 글입니다. 리액트 프로젝트를 생성해준다. 1. Prettier과 Reactjs code snippets 플러그인을 설치해준다. 그리고 프로젝트에 .prettierrc 라는 .jsx 파일을 생성해준다. 생성이 완료되었으면 1 2 3 4 5 6 7 8 9 { "useTabs": false, "printWidth": 100, "tabWidth": 2, "trailingComma": "all", "semi": true, "singleQuote": true } useTabs - 탭을 사용할 때 빈칸을 채운다. printWidth - 파일 최대 길이를 100칸으로 지정한다. tabWidth - 탭의 빈칸을 두칸으로 지정한다. trailingComma -.. 이전 1 2 3 4 5 다음
