성공을 즐기자

https://opentutorials.org/course/5098/32351 Single Page Application - 생활코딩 소스코드 https://github.com/egoing/nextapp/commit/e0dc92feeb55b80239f0015792a60f281f930001 라이브 예제 https://nextapp-9efh7p3uc-egoing.vercel.app/ 우리가 하고 싶은 것 링크를 클릭하면 페이지 전체 리로딩이 일어나지 않 opentutorials.org 를 참고하여 공부하고 있습니다. SPA(Single Page Application ) => 하나의 페이지에서 모든 작업을 처리 next.js 에서는 Link를 이용하여 SPA를 구현한다. Link를 이용하면 1. 페이지 리로딩..

Grab me ! 여기 안에 태그를 삽입하였다. h1태그의 text는 "Grab me ! " 이고 id는 "title"이다. 1. document.getElementById() getElementById를 통해 ID를 인자로 입력하여 인자로 입력한 값이 id인 요소를 가지고 올수있다. 위의 이미지는 콘솔창에 document.getElementById()를 입력한 경우이다. 인자로를 title을 입력하여 id가 title인 요소를 가지고 왔다. 이렇게 id가 "title"인 값을 hi에 저장하여 console.dir으로 볼수있다. hi의 textContent도 확인할 수 있다. 이 상태에서 JS코드를 추가해보자. 다음과 같이 app.js 코드에 id가 title인 친구를 const title 에 넣는다. ..

먼저 제목에 대한 답을 말하자면 브라우저에서 HTML에 대한 정보를 담은 document를 제공해준다. 그래서 JS는 HTML의 내용을 볼수있고 수정할 수 있다. HTML은 CSS와 JavaScript를 가져온다. HTML의 Element들을 JS를 통해 변경하고 읽을 수 있다. 콘솔창에 document를 입력하면 해당 페이지의 html 코드가 나온다. document은 우리가 말들거나 연결하지 않아도 이미 브라우저에 존재하는 objcet 이다. 이 object는 우리가 접근할 수 있는 HTML을 가리킨다. console.dir(document)를 호출하면 더 자세한 정보가 나온다. => console.dir은 요소를 JSON과 같은 트리구조를 출력한다. Json 구조의 document를 확인할 수 있다..

앱을 실행시키고 시작하는 첫 순간 서버로부터 로그인 데이터 또는 여타 앱 실행을 위한 준비를 한다. 이때 클라이언트에게 보여주는 화면을 launch screen, splash screen 이라고 한다. 방법을 찾아 헤매었지만 찾기가 어려웠는데 결국 발견했다. https://www.youtube.com/watch?v=dB0dOnc2k10 1. flutter native native 패키지를 설치한다. 2. pubspec.yaml 에 코드를 추가한다. 코드는 splash화면에 보일 이미지와 배경색등을 추가할 수 있다. 이런식으로! 3. 그 후 콘솔창에 flutter clean flutter pub get flutter pub run flutter_native_splash:create 를 입력해준다. spla..

완성본 캡쳐 - 1. Scaffold를 이용해 화면을 구성한다. home: Scaffold ( ) 2. Scaffold 내에서 appBar를 만든다. appBar: AppBar( title: Text( 'Hello Flutter', style: TextStyle(fontSize: 28), ), centerTitle: true, ), title 영역에 Text 위젯을 만든다. 보여질 text는 'Hello Flutter' 이다. 글자의 크기는 style - TextStyle에서 변경할 수 있다. 이렇게 두면 글자는 왼쪽 정렬된다. 중간으로 옮기기위해 centerTitle : true를 속성으로 준다. 3. body는 SingleChildScrollView로 만든다. 이메일과 비밀번호를 입력과 사진 로그인 ..

Member는 Order(주문)을 여러개할 수 있다. 즉, Order의 입장으로는 N:1이므로 @ManyToOne 어노테이션을 사용하여 매핑한다. @JoinColumn을 통해 연결된 PK가 뭔지 알려준다. 다(N)쪽이 연관관계의 주인이 되므로 이 친구가 주인이다. // FK // Member의 Member_ID가 PK다. @ManyToOne @JoinColumn(name="MEMBER_ID") private Member member; 만약 양방향 관계로 하고싶다면 Member 엔티티에 Order의 리스트를 만들어 @OneToMany 를 붙여주고 속성에 mappedBy를 통해 member와 연결해주면 된다. 여기서 member는 위 코드의 private Member m..

영속성 컨텍스트 > "엔티티를 영구 저장하는 환경" - J2SE 환경 기준 - EntityManager.persist(entity); DB에 저장한다는 의미가 아니라 entity를 영속성 컨텍스트에 저장한다는 의미 엔티티 매니저를 통해 영속성 컨텍스트에 접근할 수 있다. EntityManager와 영속성 컨텍스트가 1:1 관계이다. 엔티티의 생명주기 1. 비영속 상태 > 멤버 객체를 생성만한 상태 2. 영속 상태 > 객체 생성후 엔티티 매니저를 통해 persist해서 객체를 영속 컨텍스트에 넣는다. 3. 준영속 상태 > detach , 영속 상태의 엔티티가 영속성 컨텍스트에서 분리 4. 삭제 상태 > DB에서 객체를 삭제 영속성 컨텍스트의 이점 !! 1. 1차 캐시 key : pk value : enti..

JPA에는 persistence가 있다. persistence는 persistence.xml에서의 정보를 가지고 EntityManagerFactory를 만든다. EntityManagerFactory는 EntityManager를 만든다. EntityManagerFactory 는 딱 하나만 만들어야한다. 일관적인 단위를 하나 할 때는 EntityManager 이용 (고객의 요청이 올 때마다) EntityManager 는 쓰레드간 공유 X , 사용하면 버려야함 JPA를 사용하면 내부에서 JDBC API를 사용해 SQL를 호출하여 DB와 통신한다. 아래 어노테이션을 사용해 엔티티를 생성한다. https://what-am-i.tistory.com/357?category=1083625 @Entity, @Table,..

1. @Builder @Builder public PostCreate(String title, String content) { this.title = title; this.content = content; } 메서드에 builder어노테이션을 붙여준다. 작은 클래스라면 클래스 위에 붙여도 되지만 왠만하면 메서드 위에 붙이는 것이 좋다. 이것은 lombok의 어노테이션 중 하나이다. 이 어노테이션을 생성자에 붙이면 PostCreate request = PostCreate.builder() .title("제목입니다.") .content("내용입니다.") .build(); 이렇게 postCreate에 있는 변수에 각각 이름에 값을 넣어 build할 수 있다. 이로써 생성자에 순서가 변경이 되는 상황이 생겨도 ..

JPQL(Java Persistence Query Language) > 객체 지향 SQL SQL을 추상화한 객체 지향 쿼리 언어이다. 그렇기 때문에 특정 DB SQL에 의존하지 않는다. SQL는 DB 테이블을 대상으로 쿼리를 날리지만 JPQL은 엔티티 객체를 대상으로 검색한다. JPQL은 결국 SQL으로 변환된다. List resultList = em.createQuery("select m from Member m where m.name like '%kim%'", Member.class) .getResultList(); 여기서 "select m from Member m ~~" 에서 Member는 테이블을 의미하는 것이 아니고 entity를 의미한다. Member.class는 createQuery가 반환할..