2023/03 22

Chapter 03. 웹팩 적용하기와 숫자 야구

초기 설정 웹팩을 쓰기 위해서는 먼저 node를 깔아야한다. node를 설치하면 npm이 같이 따라온다. npm은 다른 사람이 작성해둔 javascript 코드를 끌어다 쓸 수 있다. 결국 Vue도 남이 만들어둔 소스라고 볼 수 있다. node를 제대로 설치하면 다음과 같이 버전 확인이 가능하다. node -v npm -v npm init 터미널로 들어와서 npm init 입력하고 나면 다음과 같이 버전 및 여러 가지가 나오는데 package name만 다음과 같이 입력하고 나머지는 모두 넘긴다. 입력하고나면 다음과 같이 json 파일이 하나 생성된다. 내가 쓸 수 있는 다른 사람의 소스 코드가 정리된 파일이다. 정리하는 이유: 각 소스코드마다 버전이 있다. 내가 어떤 버전을 쓰고 있는지 버전관리하고 몇..

Chapter 02. 컴포넌트와 웹팩을 쓰는 이유

컴포넌트의 필요성 같은 코드의 중복을 없애고 간편하고 효율적으로 개발하기 위해 컴포넌트가 필요하다. 컴포넌트의 활용은 여러 번 사용하는 것을 전제로 한다. 지난 포스팅에서 살펴본 것과 다르게 여러 개의 끝말잇기를 한 페이지에 여러 개 진행하려면? Ex) 컴포넌트를 적용하지 않은 끝말잇기 게임 복사해서 여러 개의 submit 메서드를 만든다. {{word}} 입력! {{result}} {{word1}} 입력! {{result1}} {{word2}} 입력! {{result2}} Note) 실행 결과 아래와 같이 세 개의 끝말잇기를 만들었으나 중복되는 부분이 너무 많다. 이런 비효율성을 해결할 수 있는 것이 "컴포넌트"이다. 최소 단위를 재사용한다. 컴포넌트 적용하기 component() 안에는 파스칼, 케밥..

Chapter 01. Vue 환경 설정, 끝말잇기 게임

순수 html로 Vue 만들어보자 웹팩, 바벨(Babel)이 없어도 html 만으로도 가능하다. Vue 환경 설정 링크에서 node를 다운 받는다. https://nodejs.org/ko/download VS code를 다운받고 작업하려는 폴더에서 VS code 터미널을 연다. npm install -g@vue/cli 입력 다운 완료 입력해서 로컬에서 실행해준다. npm run local 로컬에서 실행이 되면 다음과 같이 뜬다. 웹 페이지가 뜨면 실행 완료! vue 라이브러리를 사용하기 위한 source를 넣는다. 이 소스를 넣어주면 좋아요 페이지의 내용을 뷰의 컴포넌트 또는 템플릿으로 전환한다. html 좋아요 el 에다가 통제할 대상의 속성 이름인 root를 넣어준다. Vue가 root 영역을 통제할..

Chapter 05. Vue.js 3

Vue.js 2 에서 Vue.js 3로 바꾸기 CDN 라이브러리가 달라진다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Note) 실행 결과 라이브러리만 바꿨는데 다음과 같이 오류가 난다. Vue는 더이상 생성자가 아니라는 오류가 난다. 기존 Vue 2 Vue 3 createApp() 안에 기존 옵션들을 집어 넣는다. mount()를 이용해서 view의 ele를 넣어준다. methods{}는 동일하게 작성하지만 data{}를 넣었던 부분이 다음과 같이 바뀐다. Ex) 변경하기 new Vue => createApp() ele 는 맨 뒷부분으로 빠진다. data 가 메서드로 바뀐다. 반환값을 넣어준다. 적용하고난 코드 Vue.createApp(..

FrontEnd/Vue.js 3 2023.03.29

Chapter 04. Vue 시작하기

Vue 코드의 기본 구조 Model을 심어준다. section을 "calc-app"이라는 이름으로 범위를 설정한다. 위 사진의 왼쪽은 new Vue()는 Vue 2에 해당한다. 중괄호 안에 객체(Options API)를 담아서 전달한다. 이러한 형식이 약속된 방식이므로 인터페이스와도 같다. Ex) Vue 2를 이용한 계산기 프로그래밍 지난 포스팅에서 Vue 없이 페이지를 만든것과 다르게 이번에는 뷰를 적용하려고 한다. HTML 페이지는 동일하며 JavaScript 코드만 바뀐다. Vue 사이트에서 라이브러리를 가져온다. https://v2.vuejs.org/v2/guide/ html 페이지 만들기 기존 자바스크립트 파일의 내용을 아래와 같이 모두 지운다. 그리고 기존에 있던 new Vue({ el: "#..

FrontEnd/Vue.js 3 2023.03.29

[03월 4주차] OkHttp 예제, Thread와 ExecutorService

OkHttp 구현 방법 OkUtils 클래스 안에 개발자가 직접 정의한 GET 메서드를 활용해서 사용자가 굳이 url을 입력하지 않아도 개발자가 원하는 때에 수신 서버에 대한 특정 Http 요청이 실행되게끔 구현 가능하다. Ex) OkHttp POST 구현 OkHttpUtil Util 클래스의 post() 안에서 HTTP Request 를 보내고 상대방 서버에서 보낸 Response를 바로 받을 수 있다. 서버에서 WorkflowId를 @PathVariable로 받을 수 있도록 URL에 넣어서 보내준다. MediaType은 json 형태로 주고 받으니까 body에 다음과 같이 세팅한다. 아래 코드는 URL이 {POST 요청하는 서버 IP 주소} : port 번호/{workflowId} 인 경우에 POST..

Chapter 01. Object와 의존 관계

1.1 DAO DAO(Data Access Object): DB를 사용해서 데이터를 조회하거나 조작하는 기능만 하도록 만드는 오브젝트을 말한다. 1.1.1 User public class User { String id; String name; String password; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setP..

머릿말

Spring이란 무엇인가? Java Enterprise application 개발에 사용되는 프레임워크를 말한다. 애플리케이션의 바탕이 되는 틀과 공통 프로그래밍 모델, API를 제공한다. 애플리케이션의 바탕이 되는 틀(Spring Container): 스프링 컨테이너 또는 ApplicationContext 라고 불리는 스프링 런타임 엔진을 제공한다. 독립적 동작할 수도 있고 보통 웹 모듈에서 동작하는 서비스나 서블릿으로 등록해서 사용한다. 공통 프로그래밍 모델: IoC/DI, 서비스 추상화, AOP 1) 스프링은 유연하고 확장성있는 코드를 만들 수 있도록 도와주는 객체지향 설계 원칙, 디자인 패턴의 핵심원리를 담고 있는 IoC, DI를 근간으로 한다. IoC, DI 방식을 따라 작성해서 스프링이 제공하..

[03월 3주차] JPA 연관 관계 매핑, 복합 키, 제네릭 클래스에 의존성 주입

에러 해결 제네릭 클래스에 의존성 주입이 가능한가? 오류: @Autowired - NullpointerException EaiEventListener (@Service) 에서 new MyThread 호출한다. MyThread (extends Thread)에서 ListenerService를 멤버 변수로 선언한다. 그런데 MyThread 클래스에 Service 생성자 주입이 되지 않는다. MyThread를 스프링 컨테이너에 등록해도 해결되지 않는다. (@Component, @NoArgsConstructor을 이용해도 오류가 난다.) @Autowired, @RequiredArgsConstroctor 둘다 적용이 되지 않는다. 원인 제네릭 클래스 MyThread는 생성자 주입이 불가능하므로 Nullpointer..

OkHttp vs RestTemplate

OkHttp Square 사에서 개발한 라이브러리 모바일 앱에서 사용하기에 최적화되어 있다. 단일 스레드 모델을 사용해서 비동기식으로 요청을 처리하는 게 특징이다. 이를 통해 네트워크 대역폭을 최대한 활용할 수 있고 성능이 좋다. RestTemplate Spring Framework에서 지원하는 라이브러리이다. Java EE 애플리케이션 개발에 적합하다. OkHttp vs RestTemplate 공통점 둘다 HTTP 클라이언트 라이브러리이다. RestFul API를 호출하는데 사용된다. 애플리케이션에서 HTTP 요청을 처리하고 응답을 분석하는데 사용 가능 차이점 성능 측면에서 OkHttp가 더 빠르고 최신 기술을 적극 활용한다. 개발자는 Spring Framework와의 연동성이 높기 때문에 RestTe..

개발 일지 2023.03.18