반응형

오블완 21

태태개발일지 - Vue Router(캡틴판교)

Routingvue의 롸우팅이란?vue.js에서 페이지 간 이동을 위한 라이브러리이다. 설치방법 terminal에서 아래와 같은 명령어를 실행하면 dependency에 router에 대한 라이브러리가 명시된다.npm install vue-router --save  import Vue from 'vue';import VueRouter from 'vue-router';import Hello from './Hello';Vue.use(VueRouter);export default new VueRouter({ routes: [{ path: '/', redirect: '/home' }, { path: '/info', component: Hell..

Front/Vue 2024.11.27

태태개발일지 - Spring 시작 (토비님) 기본 복귀하기

Spring 시작하기 @RestControllerpublic class HelloController{ @GetMapping("/hello") public String hello(String name){ return "Hello " + name; }} Test:localhost:8080/hello?name=Spring 으로 테스트가 가능하다. 테스팅 방법1. 웹 브라우저 개발자 도구2. curl3. HTTPie4. Postman5. JUnit Teset6. Another 웹어플리케이션의 흐름 1. web client가 web request를 web container가 componet를 찾아서 다시 return한다. *client와 container 사이에는 request와 resp..

Spring 2024.11.26

태태개발일지 - 스프링부트 이해와 원리(토비님)

스프링부트란?스프링을 기반으로 실무 환경에 사용 가능한 수준의 독립실행형 애플리케이션을 복잡한 고민 없이 빠르게 작성할 수 있게 도와주는 여러가지 도구의 모임이다. 스프링은 옛날꺼다? 그래서 우리는 안쓴다?? --> 이것은 틀린말이다.스프링 != 스프링 부트스프링 부트는 그저 스프링을 잘 그리고 빠르게 사용할 수 있게 해주는 도구이다.#스프링기반, #실무환경, #독립실행형애플리케이션 #도구  1. 매우 빠르고 광범위한 영역의 스프링 개발 경험 제공2. 강한 주장을 가지고 즉시 적용 가능한 기술 조합을 제공하면서, 필요에 따라 원하는 방식으로 손쉽게 변형3. 프로젝트에서 필요로 하는 다양한 비기능적인 기술제공(내장형 서버, 메트릭, 보안)4. 코드생성이나 XML 설정을 필요로 하지 않음 요악: Spring..

Spring 2024.11.25

태태개발일지 - 웹팩 데브 서버

웹펙 데브 서버 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구웹팩의 빌드 대상이 변경되면, 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브러우저를 새로고침 해준다. ex) "dev":"webpack-dev-server"로 해야한다.  코드를 변경할 때 마다 재 컴파일을 해서 바로 반영한다.하지만 원래 있어야할 bundle.js 가 안보이는데 빌드가 된다. -> memory상으로만 빌드하고 파일 시스템으로는 보이지 않는 것이 특징

Front/Vue 2024.11.24

태태개발일지 - 웹팩

웹팩프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.ex) 웹 어플리케이션을 구성하는 자원을 모두 각각 모듈로 보고 이를 조합해서 결과물로 만든 것. webpack.config.js 파일을 만들어서 설정 파일을 관리하면 좋다. var path = require('path') -> path에서 라이브러리를 가져와서 실행한다.entry: -> entry에있는 파일로 빌드를 해서output: -> 폴더안에있는 파일에 할당을 한다는 뜻

Front/Vue 2024.11.23

태태개발일지 - 양방향 연관관계

양방향 연관관계 앞서 OneToMany , ManyToOne, OneToOne, ManyToMany 관계를 알아보았다. 양방향 연관관계는 ManyToMany를 말하는 것이 아니다. OneToMany 와 ManyToOne 으로 서로 연관관계를 맺었을 때에 대한 이야기이다. -- sudo code --public class One{ private Long id; @ManyToOne @JoinColumn(name = "TWO") private Two two;} -- sudo code --public class Two{ private Long id; @OneToMany(mappedby= "two") private List ones;}  아래와 같이 서로 양방향으로 연관..

Spring/JPA 2024.11.22

태태개발일지 - 웹펙

웹펙 NPM은 자바스크립트 라이브러리들이 모여있는 곳이다.Jquery , tensorflow  npmnpm init -> 프로젝트 생성 -y를 통해서 기본 값으로 설정 가능하다.npm install jquery -> jquery라는 라이브러리를 다운받겠다는 뜻.npm unistall gurp -> 의존성을 삭제해준다.npm install jquery --global -> 전역설치 (시스템 레벨에서 사용한다) npm을 사용하면 좋은 이유.html안에서 태그 안에서 의존성을 넣어서 돌린다면..? 단점:1. 긴 코드에서 누가 어떤 의존성을 넣었는지 찾아야한다.2. 버전이 바뀌었을 경우 다 하나씩 일일이 찾아야한다. 장점:1. npm은 package.json에 모아서 개발하기 떄문에 보기 편하다.2. 페이지..

Front/Vue 2024.11.21

태태개발일지 - Vue Computed API

Computed 기본적으로 Computed를 사용하는 경우는 변수 즉 값이 계속 변하는 수를 변환시킬 때 Computed를 사용하여 이를 처리한다.  컴퓨티드(computed) API는 컴포지션(Composition API)에서 사용된 컴퓨티드 속성을 의미한다.   {{ reversedMessage }} 기본 Computed는 다음과 같이 사용할 수 있다.  {{ reversedMessage }} Set up() 을 사용하여 Computed API를 사용한다면 아래와 같이 사용하면 된다.

Front/Vue 2024.11.20

태태개발일지 - ActionQueue

ActionQueue 커리어리에서 개발 관련 글을 읽다가 JPA가 flush 할 때 개발자가 의도한 비지니스 로직 대로, 실행되지 않는다는 글을 읽게 되었다. 그래서 실제로 간단한 Entity하나를 만들어서 테스트해봤다.테스트 한 내용은 이렇게된다. 예상 로직 : insert -> select -> insert -> delete -> insert실제로직 : insert -> insert -> insert  -> delete 하지만 test하니까 정말로 중복키 에러가 뜨는 것이였다. 그래서 ActionQueue에 대해서 찾아봤다. ActionQueue의 주요 역할엔티티 상태 추적:JPA에서는 엔티티 객체를 관리하는데, ActionQueue는 엔티티 객체가 변경될 때마다 그 변경 사항을 추적합니다. 예를 들..

Spring/JPA 2024.11.18
반응형