분류 전체보기 954

Refs 요소나 컴포넌트를 참조

refs 는 말 그대로 주소를 지정해서 접근할 수 있도록 해 주는 거임. 이렇게 ref를 지정해 주고, 저게 접근할 수 있는 이름이 됨. import HelloWorld from './components/HelloWorld.vue'; export default{ components:{ HelloWorld }, mounted(){ console.log(this.$refs.hello); } } 이렇게 this.$refs.이름 해서 접근 가능함. 저 $refs.hello에는 굉장히 많은 정보가 담겨져 있는 객체임. 내부의 요소에 접근하고 싶으면 console.log(this.$refs.hello.$el); 저렇게 뭐 최상위로 Handler, Target, isRevoked 등 객체와 값들이 있음. 어.. 그러..

Vue.js 2023.10.19

5. 개발

JPA 구동 방식 JPA는 Persistence라는 클래스가 있는데, 저게 persistence.xml을 읽어서 EntityManagerFactory라는 클래스를 만듦. 그 후, 필요할 때 마다 EntityManager라는 것을 생성해서 그걸 사용하면 됨. 자 여튼 본격적으로 실습해 보자면, public class JpaMain { public static void main(String[] args) { EntityManagerFactory emf = Persistence.createEntityManagerFactory("hello"); } } 이렇게 팩토리 생성해서 "hello"해서 저기에 관한 정보들로 구성된 팩토리를 생성해 주고 한번 실행해봤는데 막 빨간줄로 쫘라락 뜸. 근데 이렇게 된거면 잘한거라..

JPA/JPA 기본 2023.10.19

4. 프로젝트 생성

강의가 옛날거라 Maven 써서 좀 그렇다.. 스프링 부트도 안쓴다.. 근데.. 저 groupId 할 때 - 썼더니 저게 패키지 src java 내부에 패키지로도 생성되고 거기에 메인 패키지가 생기는데 패키지이름으로 - 이거 쓰면 안되는 듯? refactor -> rename 해주면 정상적으로 되긴 함. 아니면 아예 그 생성된 패키지 자체를 지워버리고, 새로 패키지 만들어서 거기 안에 main 클래스 만들고 main 메소드 넣어줘도 되긴 함. 보면 pom.xml이 생기는데 이게 build.gradle 역할 4.0.0 jpa-basic ex-hello-jpa 1.0-SNAPSHOT 17 17 UTF-8 이렇게 되어 있음. 이제 종속성, 즉 라이브러리 추가해 줘야 함. 4.0.0 jpa-basic ex-he..

JPA/JPA 기본 2023.10.19

3. JPA

Java Persistence API 자바 영속성 API 자바 진영의 ORM 기술 표준 Object-Relational Mapping 오브젝트 관계 매핑 말 그대로 오브젝트랑 관계형 DB 매핑 기술 패러다임 불일치 등 해결해 줌 대부분 대중적인 언어는 ORM 기술 존재 JPA도 결국 JDBC를 쓰는 거. 저장 하면 (persist가 insert 하면서 저장시키는 거임) JPA 내부에선 먼저 객체를 분석하고 그에 따라 insert 쿼리를 생성하고 그걸 JDBC를 통해 DB에 날림. find 하면 쿼리 생성하고 JDBC를 통해 DB에 쿼리 날림 DB에서 결과 반환된 걸 JDBC로 받고, JDBC에서 받은 ResultSet JPA에서 지정한 엔티티와 매핑하고 돌려줌 JPA는 표준임. 아래가 구현체들. 보통 거..

JPA/JPA 기본 2023.10.19

2. 웹소켓 서버 구현

node.js에는 ws라는 라이브러리 지원됨. 일단 그럼 npm i ws 해서 설치 근데, 우리가 기존에 서버를 express로 쓰고 있었는데, express는 http지 웹소켓이 아님. 그래서 express에 ws를 사용할 수 있도록 추가해 줄거임. 약간 바뀌었다. import express from "express"; import http from "http"; import WebSocket, { WebSocketServer } from 'ws'; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.static(__dirname + "/p..

1. HTTP와 WebSocket

HTTP http는 stateless, 딱히 무언가 상태를 저장하고 있지 않음. (회원가입등은 서버가 DB와 연결하여 DB에 저장하는 거지 서버 자체에서 변수로 뭘 가지고 있거나 그러지 않음.) 즉 클라이언트에 대한 무언가를 저장하고 있지 않음. request가 오면 요청을 받고 response를 보냄. 끝임. 딱히 연결되어 있다거나 그런 게 아니고, 그냥 요청오면 응답 보내고 끝임. 마치 프린터 처럼 인쇄요청이 오면 인쇄 한 다음 끝임. 그냥 대기상태. 웹소켓은, 연결 요청을 보냄. 그럼 연결 수락응답을 보내면, 연결된거임. 즉, 클라이언트와 서버가 서로 기억함 이렇게 연결하면, 이제 서버는 프린터 같은 게 아니라 그냥 맘대로 클라이언트한테 데이터 보내고 할 수 있음. 요청 안와도. 양방향 통신이 됨...

2. 환경

환경은 node.js 이다. 바벨 (최신버전 자바스크립트를 서버 혹은 웹브라우저에 맞는 ES5 자바스크립트 언어로 만들어 주는) nodemon 이건 코드를 바꾸면 실시간으로 반영해주기 위한 그 다음 express 이거는 서버 뭐 그런 거 같음. pug 이거는 html 쉽게 쓰는거임. { "name": "zoom", "version": "1.0.0", "description": "Zoom Clone using WebRTC and Websockets", "main": "index.js", "scripts": { "dev": "nodemon" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/cli": "^7.23.0..