이 글은 이전글인 JPA - 연관관계 매핑(조인 방법), 단방향 연관 관계 및 매핑 과 이어집니다. JPA - 연관관계 매핑(조인 방법), 단방향 연관 관계 및 매핑 JPA에서의 연관관계를 알아볼때 목표 객체지향적인 패러다임과 관계형 DB가 지향하는 패러다임의 차이를 이해해야 한다. 객체의 참조와 테이블의 외래 키를 매핑 용어 방향(Direction) : 단방향, 양 scoring.tistory.com 양방향 매핑 방법 Member와 Team 테이블의 연관 관계로 설명 Member.java @Entity public class Member { @Id @GeneratedValue @Column(name = "MEMBER_ID") private Long id; @Column(name = "USERNAME")..

이글은 이전 글인 [React] 리덕스 - counter와 todos 모듈 만들고 합치기 와 이어집니다. [React] 리덕스 - counter와 todos 모듈 만들고 합치기 이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패 scoring.tistory.com 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란? 리덕스 스토어에 직접적으로 접근하지않고, 필요한 값 또는 함수를 props 로만 받아와서 사용하는 컴포넌트 주로 UI를 선언하는 것에 집중하며, 필요한 값이나 함수는 props로 받아와서 사용하는 형태로 구현 프리젠..

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 공부하며 쓴 글입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리덕스 모듈이란? 액션 타입, 액션 생성함수, 리듀서가 모두 모여있는 자바스크립트 파일을 말한다. 이와 같은 항목을 하나의 파일에 몰아서 작성하는 방식을 Ducks 패턴이라고 한다. 프로젝트에 리덕스 적용 react-redux 라이브러리 설치 $ yarn add react-redux counter 모듈 만들기 mod..

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us useEffect란? 컴포넌트가 마운트 됐을때(처음 나타났을 때), 언마운트 됐을때(사라질 때), 업데이트 됐을때(특정 props가 바뀔 때) 특정 작업을 처리 한다. React컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 하는데, 이를 함수형으로 사용할수 있..

이 글은 velopert님의 벨로퍼트와 함께하는 모던 리액트를 참고하여 쓴 글 입니다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 배열에 요소 추가하기 배열에 항목을 추가한다는 것은 변화를 주는 것이기 때문에 리액트에서의 불변성을 지켜주어야 한다. 따라서 useState에 등록된 setter에서 변화를 줄때, 배열의 push, splice, sort 등의 함수는 사용할 수 없다. 불변성을 지키면서 배열에 항목을 추가하는 방법 2가지 sprea..

배열 렌더링 하기 import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username} ({users[1].email}) ); } export ..

2022.09.19 - [라이브러리/React] - [React] input태그 상태 관리 [React] input태그 상태 관리 input 태그 상태 관리하기 inputSample.js 생성 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; App.js 에서 렌더링 import React from 'react'; im.. scoring.tistory.com 이 글은 이전 글인 input태그 상태관리와 연계 됩니다. useRef란? javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector 특정 DOM에 접근할 때 사용한다..

input 태그 상태 관리하기 inputSample.js 생성 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; App.js 에서 렌더링 import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; useState를 활용해서 input 객체 상태 관리 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(..

Props란? Props의 사용방법 Props란? Props는 Properties의 줄임말이다. 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법 Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변경하고 싶으면 부모 컴포넌트에서 state를 변경 시켜야한다.) Props의 사용 //App.js const App = () => { return //Text.js const Text = ({text}) => { return {text} } 위의 코드는 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 Props를 사용해서 “Hello world!” 라는 문자열 데이터를 전달했다. 여러개의 Props 와 defaultProps 부모 컴포넌트에서 여..

제너레이터(Generator)란? 함수의 실행을 중간에 멈추고 재개할 수 있는 기능 실행을 멈췄을때, 값을 전달할 수 있다. 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용가능 제너레이터 함수의 사용방법 제너레이터 함수를 만들때는 function* 키워드를 사용 한다. 제너레이터가 처음 만들어지면 함수의 흐름은 멈춰 있는 상태 next() 가 호출되면 다음 yield 가 있는 곳까지 호출하고 다시 함수가 멈춘다. 제너레이터 함수의 호출이 완료되면, done: true 가 같이 리턴된다. 일반적인 방법 순차적으로 값을 전달하는 예시 function* testGenerator() { //function* 키워드를 사용 console.log('제너레이터') yield 1; console.log..