하위 컴포넌트에 인자 한번에 주기 function App(){ // const name = "홍홍홍"; const bodyProps = { name : '홍길동', location : '대전시' } return( ) } export default App; 저렇게 {...객체} 해서 주면 각각 name="홍길동" location="대전시" 이렇게 전달이 된다. React 2023.10.26
구조 분해 할당 let arr = ['Hong', 'Ghil dong']; 이렇게 있을 때 const [firstName, surname] = arr; 이렇게 하면 이제 firstName, surname이라는 변수로 각각 사용할 수 있다. const [number, setNumber] = useState(5); useState 또한 배열로 반환하기 때문에, 구조 분해 할당 가능. 프론트엔드-코드/Javascript 2023.10.26
24. 상속관계 매핑 객체의 상속관계를 테이블에선 어떻게 표현할 수 있고, JPA에서는 어떻게 지원을 할까? 예전에도 설명했듯이, RDB에는 상속관계가 없다. 가장 유사한 것이 슈퍼타입과 서브타입이라는 모델링 기법을 통해 구현해 낸게 가장 유사하다. JPA에서 상속관계 매핑은 이 객체의 부모 자식 상속 구조와 테이블의 슈퍼타입, 서브타입의 관계를 매핑하는 것이다. 왼쪽이 논리모델, 오른쪽이 물리모델. 여튼, 저 슈퍼타입, 서브타입 논리 모델을 실제 물리모델로 구현하는 방법은 3가지 방법이 있다. 각각 테이블로 변환 -> JOIN 통합 테이블로 변환 -> 단일 테이블 전략 서브타입 테이블로 변환 -> 구현 클래스 마다 테이블 먼저 JOIN전략 타입을 구분하는 열을 하나 둬서 JOIN으로 가져오는 방식이라고 한다. 가장 정규화 .. JPA/JPA 기본 2023.10.26
외래키 CREATE TABLE Orders ( orderid INTEGER PRIMARY KEY, custid INTEGER , bookid INTEGER , saleprice INTEGER , orderdate DATE, FOREIGN KEY (custid) REFERENCES Customer(custid), FOREIGN KEY (bookid) REFERENCES Book(bookid) ); foreign key(내테이블의열이름) references 참조할테이블(참조테이블의열이름) 이렇게 하면 외래키로 등록이 된다. 외래키를 등록하지 않아도 join하고자 하는 테이블을 참조할 수 있다. 근데 외래키를 등록하는 이유는 무결성 때문에 그렇다. 그러니까, 외래키는 저렇게 보통 다른 테이블 열의 id와 맞추는데, .. DB 2023.10.26
객체 <-> JSON <-> 문자열 변환 JSON.stringify 객체 -> Json 형태의 문자열 JSON.parse Json 형태의 문자열 -> 객체 프론트엔드-코드/Javascript 2023.10.25
6. 닉네임 솔직히 이것도 쉬워보이긴 한다. 먼저, 이제 클라이언트 쪽에서 데이터를 그냥 문자열이 아닌 json 형태로 보내야 한다. 거기에 nickname, message를 필드로 가지고 있다. 뭐 그냥 바로 해보자. 사실 별 문제는 없었다. 클 -> 서버로 가는 데이터가 버퍼로 와서 변환해 줬다. 먼저 일단, 클쪽에서 문자열인 데이터를 Json으로 바꿔보자. $msgForm.addEventListener("submit", (e)=>{ e.preventDefault(); const $nickname = $msgForm.querySelector("#nickname"); const $message = $msgForm.querySelector("#message"); const data = { nickname:$nickn.. 실시간/WebSocket을 이용한 채팅 2023.10.25
5. 웹소켓으로 다른 브라우저 끼리 메시지 주고받기 쉽다. 다른 부분 제쳐두고, const sockets = []; wss.on("connection", (socket)=>{ sockets.push(socket); console.log("Connected to Client"); socket.send("hello!"); socket.on("message", (m)=>{ for(const sc of sockets){ sc.send(m.toString('utf-8')) } }); socket.on("close", (socket)=>{ const idx = sockets.indexOf(socket); sockets.splice(idx,1); console.log("Disconnected socket"); }); }); 연결될 시, 그 소켓을 sockets 라는 .. 실시간/WebSocket을 이용한 채팅 2023.10.25
변수 요소에 넣기 {변수명} 저렇게 중괄호 변수명 하면 됨. 저거 계산도 됨. 함수 호출도 됌. {num}은 {num % 2 === 0? "짝수" : "홀수"}입니다. 근데 style의 경우, 객체형식으로 넘길 수 있음. 이렇게도 감싸서 객체로 만들어서도 되고, const sty = { backgroundColor: "royalblue", color: "#fff", }; 이렇게 해도 되고. 이렇게 객체로도 넣을 수 있으니, 아예 컴포넌트로 객체형태로 내보내서 다른 컴포넌트에서 import 해서 쓸 수 있음. 근데 뭐 계산도 할 수 있고 그러니.. 중괄호는 요소 내에서 자바스크립트 문법 쓴다고 생각하면 될 듯? React 2023.10.25
리액트 연습 (피드백 받았음) https://github.com/kfs121/react-fetch GitHub - kfs121/react-fetch Contribute to kfs121/react-fetch development by creating an account on GitHub. github.com useEffect()로 한번에 여러 값 들을 배열에 불러와 저장하고 시작하는게 어떠냐고 했다. 맞다. 저렇게 값을 자주 가져오면 확실히 성능 상의 문제가 있고, 한번에 여러 개 가져오고 일정 수 까지 가져오면 또 그때 몇십개 가져오는 게 좋다. useState? 를 이용하라고 하셨다. 그리고 todo 리스트 한번 해보라고 하셨다. 뭔가 적은 다음에 + 버튼 누르면 추가. 그렇게 추가 시킨 다음에 추가시킨 요소 더블클릭 하면 그 요.. React 2023.10.25
