성공을 즐기자

1. Node.js 설치 https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org -> 다운로드 노드JS -> msi 파일을 눌러 설치를 해줍니다.  다 next를 누르고 설치하면 finish가 나옵니다.  node-v 명령어로 설치된 버젼을 확인할 수 있습니다!  혹시 nodejs 버젼충돌 문제가 난다면 ? (TypeError: Class extends value undefined is not a constructor or null)-> 참고 https://velog.io/@keynene/ErrorNodejs-N..

axios -> 뷰에서 권고하는 promise기반의 http 통신 라이브러리  ajax (Asynchronous Javascript And Xml)-> 비동기적인 webApplication의 제작을 위한 웹개발 기법      vue에서 http통신을 하기위해서는 axios를 주로 사용하도록 권고하고 있습니다.  axios는 오픈소스로https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.jsPromise based HTTP client for the browser and node.js - axios/axiosgithub.com 이 깃허브 주소에서 확인하실수있습니다.    깃헙..

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,..