qwef

npm i socket.io 설치하고, 이제 사용해 보자. 기존에 사용하던 websocket 지우고, socket.io를 사용할 것이다. const server = http.createServer(app); const wss = new WebSocketServer({server}); 기존에 이렇게 http 서버를 웹소켓으로 감싸면서 둘이 연결하였다. socket.io도 마찬가지 이다. const server = http.createServer(app); const io = SocketIO(server); 이렇게 하고 사용하면 된다. 이렇게 하면, 또 하나 자동으로 만들어지는 url이 있다. http://localhost:3000/socket.io/socket.io.js 이 url인데, 이게 뭐냐면, 클라..

Socket IO는 나온지 오래 되었다. 안정적이다. Socket IO는 실시간, 양방향, event 기반의 통신이 가능하다. Socket IO는 websocket과 다르다고 함. 그러니까 가끔 Socket IO가 websocket을 이용하기는 하는데, 다른 거 라고 함. 프록시나 방화벽이 있다고 해도 socket IO는 계속 작동한다고 한다. 그리고 Socket IO가 만약 브라우저가 websocket을 지원한다는 것을 확인하면 websocket을 이용한다고 한다. 또, websocket을 지원하지 않으면 다른 걸 사용한다고 한다. (HTTP long-polling을 사용한다고 한다.) 이런 걸 탄력성이라 한다. 그러니까, 뭐랄까 어댑터? 같은 역할이려나. 그런 걸 websocket 등 소켓 이용하는 ..

컴포넌트 내부 스크립트 자식노드 프로퍼티 메소드 생명주기 변수 반응형 변수 문서 이벤트 바인딩 반복문, 조건문 css 컴포넌트 외부 컴포넌트 불러온 후 호출 자식노드 주기 프로퍼티 주기 전역변수 (Provide, Inject 등)

state는 값을 변경되면 html에 바로바로 반영되는 반응형으로 만들고 싶을 때 사용하는 거임. const [number, setNumber] = useState(5); 이렇게 하고, useState가 왼쪽에 참조할 값, 오른쪽에 그 참조할 값 변경하는 콜백함수. const increase = () => { setNumber(number + 1); }; 이런 식으로 사용하면 됨. 내가 명명한 setNumber 해서 값 태그에서 참조할 때는 {number} 이런 식으로. 하다보면 저거 여러 개 사용하게 되는데, const [state, setState] = useState({ name:'', gender:'', birth:'', bio:'' }); 이렇게 객체형태로 한번에 여러개 가능. 근데 이러 면 사..

Member를 조회할 때 Team도 함께 조회 해야 할까? 뭐, 말 그대로 상황에 따라 다르다. Member와 Team을 짝꿍처럼 쓴다면 함께 가져와야 하고, Team을 사용하는 경우가 있다, 정도라면 Member만 조회해서 가져오는 게 낫다. 말 그대로 어떤 경우엔 Member만 가져오고(사용하지도 않는 Team을 가져오는 것은 성능 낭비니까) 어떤 경우엔 둘 다 가져오고 싶은 것이다. EntityManager는 조회할 때, em.find 뿐 아니라 em.getReference라는 것도 있다. 사용방법은 똑같다. 무슨 차이일까? 코드상에서 설명 하겠다. 먼저 em.find() Member member = new Member(); member.setName("memberA"); em.persist(mem..

요구사항 상품의 종류는 음반, 도서, 영화가 있고 추 후 확장될 수 있음. 모든 데이터는 등록일과 수정일이 필수. 기존에서 Item을 음반, 도서, 영화의 Join 상속관계로 바꾸고 BaseEntity를 @MappedSuperclass로 만들어 공통 속성을 처리토록한다. 그럼 모든 @Entity를 BaseEntity를 상속받도록 하면되는데, 음반, 도서, 영화는 Item을 상속받으므로 Item에만 상속받도록 하면 된다. 내가 먼저 한 것 먼저 BaseEntity @MappedSuperclass public class BaseEntity { private LocalDateTime createdDate; private LocalDateTime lastModifiedDate; } 이거를 모든 @Entity가 ..

일단 이거는 전에 배웠던 상속관계 매핑과는 별로 관계가 깊지 않다. 이거는 뭐냐면, 그러니까 좀 완전 다른? 다른 테이블인데, 객체상에서만 속성만 상속 받아서 쓰고 싶은 경우. 뭐 이런 경우.. Member Seller 완전 다른 테이블이지만, 객체상에서는 상속 받아서 쓰고 싶다. 왜냐하면 저렇게 id나 name같은 거 중복 있으면 저런 게 여러 개 있으면 귀찮으니까. 그러니까, 뭐 상속받는다 그런 거 보다는, 공통적인 것을 사용하고 싶을 때. 공통적인 매핑 정보가 있을 때 사용한다. 꽤 자주 사용하는 모양이다. 뭐 하긴 게임오브젝트로 생각하면 유용할 것 같기는 하다. 코드 @MappedSuperclass public abstract class BaseEntity { private String creat..

그러니까, 이렇게. Footer도 내가 만든 컴포넌트고, ChildComp도 그런데, 저렇게 넣을 경우 저 ChildComp에 접근하는 방법. 일단은 결국 props로 다 관리한다. 쟤는 props.children 해서 관리할 수 있다. 참고로 저기에, 이렇게 하면 props.children이 배열로 들어오는데, ' ' ChildComp ' ' 이렇게 들어온다. 컴포넌트 단위로 단위가 나눠지는 모양이다. asdfsda dsafasdf 이렇게 하면 컴포넌트 단위로 나눠진다. ' ' ChildComp ' ' ChildComp ' asdfsda dsafasdf ' 이렇게 된다. 그러므로 공백 생각하라. 그러므로, 저렇게 위에서 넣어준 자식 컴포넌트를 사용하고 싶으면, function Footer(props) ..

리액트는 반복문을 처리하는데 map을 많이 쓴다. { list.map( el =>{ return {el} }) } 이런 식으로. map 자체는 js 자체의 기능이긴 하다. 리스트.map(각각요소의별칭 =>{ ~~처리나 계산 등~~~ return {각각요소의별칭} }) 저렇게 return 해서 최종적으로 각 element에 들어갈 값을 return 시켜준다. 저러면 최종적으로 return된 값이 모인 배열이 완성되었었나?

리액트는 싱글페이지 어쩌고로, js타입의 한 페이지에 html, js 모두 쓴다. 즉, html 요소도 쓴다. 그래서 이거 봤더니, const getLi = ()=>{ const list = []; for(let i =0; i< 3; i++){ list.push({i}); } return list; } 아예 저 저 요소가 뭔가 리액트에서 제공하는 객체였다. 그리고, 저 객체사이에서 값을 쓰려면 {변수명} 이렇게 쓰면 된다. 원래 js에서는 문자열로 html 페이지에 넣어서 html에서 읽게 만들었다면, 저거는 그냥 html을 저렇게 객체로 다룬다. 문자열로 넣지 않았는데도 저게 잘 됐다. 그리고, return ( {getLis()} ); 이렇게. 그러니까, {[1,2,3]} 이렇게 배열로 받으면, 그 요..