DalpangLOG

Spring Boot의 컨트롤러에서 String(문자열)을 반환하면, View Resolver가 자동으로 해당 String + '.html'이라는 이름을 가진 html파일을 templates 디렉토리에서 검색한다. 만약 해당 이름의 html파일이 templates에 없는 경우. White Label 오류가 반환된다. + 비동기 처리를 이용해 페이지를 넘어가는게 아닌 데이터만 넘기고 싶을 때는 @responsebody를 이용해 데이터만 넘길수 있음. Spring-boot-devtools를 devpendencies에 추가해 주면, 코드 변경시마다 계속 코드 재 시작할 필요 없이 변경 사항이 자동으로 저장할때마다 적용된다. gradle프로젝트이므로 나는 build.gradle 파일에 다음과 같이 추가 해줬다...

Programming/BackEnd 2023. 2. 19. 21:43

일반적으로 프로젝트를 생성하면, 개발자가 모든 코드를 일일이 손으로 하나하나 작성하는 것이 아니라 이미 개발되어 있는 방대한 자바의 라이브러리 중, 내가 필요한 것들을 가져다가 내 프로젝트를 만들게 된다. 내가 사용하겠다고 명시한 dependencies들은 build.gradle에 가면 확인할 수 있는데, 이외에도 external Libraries라는것이 설치되어진다. External Libraries? : 외부 라이브러리 설치받은 것들. 내가 필요로 하는 라이브러리를 선언했을 때, 그 라이브러리가 실행되기 위해 의존하고 있는 다른 라이브러리들도 자동으로 같이 설치되게 된다. 때문에 내가 선언한 것보다 훨씬 많은 라이브러리가 external Libraries에 설치 되게 된다. Log? 실무에서는 cri..

Programming/BackEnd 2023. 2. 16. 22:57

프로젝트 기본 설정 : Java version 11. 사용할 IDE : IntelliJ IDEA start.spring.io 사이트에서 스프링 부트 깔기. Project : Gradle - Groovy Language : Java Spring Boot : 2.7.8 (3.0.2로 설정해봤을 때, build.gradle 파일 실행 시 제대로 실행되지 않는 문제가 있어, 정식 출시된 다른 버전인 2.7.8으로 다운로드하여 설치함. 3.0.2 버전 설치 시 sourceCompatibility='17'로 되어 있는 것으로 봤을 때, 해당 버전은 java 17 버전이 깔려 있었어야 했던 듯하다.) Project Meta Group : 일반적으로 기업 도메인명을 적는 곳. Artifact : 빌드 되어야 나오는 결..

Programming/BackEnd 2023. 2. 15. 23:03

Vuex 부모 컴포넌트와 자식 컴포넌트 관계가 복잡해지면, 서로 상태 관리가 어려워진다. Vuex에서 제공하는 Store에 데이터를 저장하고 있어 App을 통해서가 아니라 store를 통해 바로 데이터를 가져와 사용할 수 있다. 부모 자식 컴포넌트가 간단하게 작성되어 있는 경우 Vuex를 사용하지 않아도 된다. 만약 프로젝트 크기가 커져서 관계가 복잡하게 얽혀 있는 경우 사용하는 걸 권장. npm i vuex를 커맨드를 통해 vuex설치. npm i vuex 위 커맨드로 vuex설치시, 자동으로 4점대 버전의 vuex가 설치됨. 현재 vue프로젝트가 vue2로 작성되어 vuex 4점대 버전이 설치 불가한 이슈가 있었음. npm i vuex@3.6.2 위 커맨드로 3.6.2버전 설치 시도 시 제대로 동작!..

Programming/FrontEnd 2023. 1. 6. 18:14

Slot 슬롯 - 부모 컴포넌트에서 태그로 작성한 부분을 자식 컴포넌트에서 값을 지정가능. Slot을 이용해, 값을 출력해줄 위치를 미리 지정가능. 자식 컴포넌트에서 태그를 사용해 위치를 지정한 후, 부모 컴포넌트에서 값을 전달받아 자식 컴포넌트에서 해당 값을 렌더링해 표출해 준다. 'v-slot: default'를 '#default'로 줄여 쓸 수 있다. 자식 컴포넌트에서 데이터를 전달받아 부모 컴포넌트에서 값을 출력하고 싶은 경우, 자식컴포넌트에서 다음과 같이 데이터를 보내준다. slot name="header" :slotval="slotval"> 부모 컴포넌트 뷰 파일에서는 다음과 같이 전달받아 출력해주면 됨! header111 {{ props.slotval }} LifeCycle Hooks Vue..

Programming/FrontEnd 2023. 1. 6. 10:48

Vue CLI로 뷰 설치하기 Vue CLI : Vue Command Line Interface. Terminal에서 Vue 설치, 실행을 할 수 있게 하는 툴. 터미널에서 사용하는 뷰 설치 커맨드. npm install -g @vue/cli '-g'를 통해 설치해야 전역으로 설치된다. 어느 폴더에서 실행하더라도 vue가 작동되게 하려면 전역 설치 필요. 설치 후, vue 프로젝트 생성 커맨드. vue create '프로젝트명' vue create 이후 프로젝트 폴더에 들어가면 다음의 폴더, 파일들이 생성된 것 확인가능. 프로젝트 내 자동 생성된 폴더, 파일 설명. - node_modules : vue.js가 사용하는 npm 패키지들. - configuration files. - package.json :..

Programming/FrontEnd 2023. 1. 5. 17:59

https://www.youtube.com/watch?v=LoxRqagf3k4&list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh&index=11 vue 기초 익히기 11강 ~ 20강 여러 개의 Vue 인스턴스 사용하기 와 같이 id가 app이 아닌 다른 태그에서도 뷰 기능을 사용하기 위해서는 => id값을 다르게 작성해 주고, script태그 내에 새로운 new Vue생성, 앞서 정한 새로운 id값으로 el값을 정해주기. {{ name }} Click {{ name }} Click Vue Component :뷰 인스턴스. 전역, 지역으로 생성가능. 전역 컴포넌트 Vue.component('my-component', { //options }) Vue 인스턴스 생성되기 전, 스크립트 상..

Programming/FrontEnd 2023. 1. 4. 15:56

뷰js 기초 익히기 1~10강 내용 Vue2 CDN 링크 v-bind => 스크립트 태그 내에서 작성한 데이터나 메소드 등을 HTML태그에 연결할때 'v-bind:'를 사용. 콜론(':')만 단독으로 사용해도 동일한 역할을 한다. ... {{ nextYear('안녕하세요') }} 링크이름 ... Event example1) {{ year }} 더하기 빼기 example2) Submit ※ Computed 속성과 Method 속성 차이? ※ methods를 사용해서 똑같은 동작을 하게 할 수도 있다. ( 단, methods 함수로 사용할 경우 '함수명()'형태로 사용할것. ) computed 함수는 변수를 사용하듯이 함수명만 쓰면 실행 가능. 사실상 실행 결과는 동일해 보임. 그렇다면 차이점은? compu..

Programming/FrontEnd 2023. 1. 3. 19:26

Computed Properties. 코드의 재사용성을 높이기 위해 Computed Properties를 사용 할 수 있는데, 여기서 Computed Properties는 바로 컴퓨터가 우리 대신 연산을 해서 값을 리턴해주는것을 뜻한다. 예제를 보자. computed Properties를 사용하지 않을 경우. - index.html ... {{ brand + ' ' + product }} ... - Main.js const app = Vue.createApp ({ data(){ return { cart:0, product: 'Socks', brand:'Vue Mastery', ... } } }) 위와 같이 코드를 작성했을 경우 h2태그 내에 우리가 지정해준 뷰앱 속성값이 치환되어 웹페이지에 출력되게 된다..

Programming/FrontEnd 2022. 11. 10. 16:05

지난 시간 green, blue로 출력된 글 자위에 mouseover 하면 해당 색상의 이미지가 출력되는 것을 확인했다. 이번 시간에는 이 글자 대신 실제 색상이 출력되게끔 코드를 변경할 것. 전 {{ variant.color }} 후 위의 html파일에서 연결해준 class="color-circle"은 css파일의 다음 코드와 html 파일을 연결해준다. css 파일 확인하기. .color-circle { width: 50px; height: 50px; margin-top: 8px; border: 2px solid #d8d8d8; border-radius: 50%; } 실제 실행시 다음과 같이 작동. VUE 스타일 바인딩 사용하기 index.html HTML 파일에서 아래와 같이 css 스타일 바인딩을..

Programming/FrontEnd 2022. 10. 15. 02:04

이번 튜토리얼을 끝내면 다음과 같이 이벤트를 처리할 수 있는 버튼을 생성할 수 있다. 깃헙에서 L6-start 브랜치를 체크아웃하면 index.html 파일에서 다음 코드를 확인할 수 있다. Cart({{ cart }}) ... Add to Cart index.html 파일의 cart변수는 main.js의 cart 속성을 출력하게 된다. 소스코드에는 app이 return하는 객체 내부에 cart 속성으로 지정되어 있음. 이벤트 리스닝 속성 추가 button 태그가 이벤트를 인식할 수 있도록 하기 위해 vue는 v-on속성을 제공한다. 위의 사진을 보면, v-on속성 뒤에 ':'콜론과 함께 어떤 이벤트를 리스닝해야 하는지 지정해주고, 그 값으로 어떤 행위가 수행되어야 하는지 지정해 줄 수 있다. 하지만 보..

Programming/FrontEnd 2022. 10. 13. 04:11

Vue를 사용하여 리스트에 접근하기 위해서는 v-for 옵션을 사용하게 된다. main.js 파일의 소스코드를 보면, details라는 리스트를 생성해놨다. const app = Vue.createApp({ data() { return { product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton', '30% wool', '20% polyester'] } } }) 이 리스트 내부 요소를 출력하기 위해 html파일 ul, li 태그에 v-for 옵션을 추가해 다음의 라인을 추가하면, 바로 밑의 실행 사진과 같이 for 루프를 돌면서 내부 요소를 출력해준다. {{ detail }} v-for에 옵..

Programming/FrontEnd 2022. 10. 13. 03:10

Vue.js의 조건문 상품 상세 정보를 출력하려 한다. 조건문을 사용해 만약 제품의 재고가 있다면 "In Stock"을 출력하고, 재고가 없다면 "Out of Stock"을 출력하게 할 것. v-if & v-else js파일에 instock이라는 속성을 불린 값 true와 함께 추가해주고, html 파일에 v-if, v-else 즉, vue 조건문을 추가해줬다. Tips! v-if문을 사용할 때, 꼭 v-else문과 함께 짝을 지을 필요는 없다. 만약 if문 하나만 필요하다면 하나만 사용 가능! v-show v-show는 v-if문과 비슷하지만, 스위치처럼 토글 방식으로 작동하는 조건문이다. true인 경우 출력되고 아닌 경우 해당 태그의 style이 display:none 되어 안 보이게 처리된다. 더..

Programming/FrontEnd 2022. 9. 29. 13:14

튜토리얼 3번째 강의 - Attribute Binding [강의 목표] 이미지 표시하기 작업 Branch 변경하기 해당 튜토리얼에 사용될 코드를 가져오기 위해, vs code 터미널을 켜고 다음의 커맨드를 실행했다. git checkout --track origin/L3-start 이 커맨드를 쪼개 보면 git checkout은 브랜치 변경을 위한 것, --track 옵션을 통해 로컬에 자동으로 해당 이름의 브랜치를 생성하고 origin 은 원격에 있는 브랜치를 의미 L3-start는 리포지토리 fork시에 함께 포크 된 여러 브랜 치중 L3-start라는 이름의 브랜치를 선택하겠다는 의미. 더보기 [참고] https://dev-su.tistory.com/83 브랜치 변경 후 index.html 파일을 ..

Programming/FrontEnd 2022. 9. 29. 12:47

Vue를 사용하기 위해 CDN 연결을 설정해준다. 튜토리얼에서는 Vue3 베타 버전을 사용했으므로 해당 CDN링크를 변경해야 한다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Quick Start | Vue.js Free Weekend 1st & 2nd of October Get Access to ALL Vue School premium courses vuejs.org 위의 링크를 통하거나 vuejs.org 홈페이지에서 Quick Start로 이동하면 CDN 링크를 복사할 수 있다. [ index.html 파일 CDN 링크 변경 후 ] index.html 파일 아래쪽을 보면 main.js파일을 import 하고 있는 것을 확인할 수 있다. ..

Programming/FrontEnd 2022. 9. 28. 17:51

Vue를 배우려는 이유! Vue.js는 React, Angular등과 더불어 현재 가장 많이 쓰이는 프론트엔드 프레임워크이다. 어떤 게 제일 좋다고 단정 지어 얘기할 수는 없지만 초심자가 처음에 배우기에 가장 쉬운 편인 프레임워크가 Vue.js라고 많이 얘기한다. 가장 큰 이유는 Vue.js같은 경우 각각 문제에 대한 정답이 정해져 있는 것처럼 코드를 짤 수 있기에, 개발자의 자유도는 낮을수 있지만, 대신 다른 사람이 짠 코드를 읽었을 때 이해하기 쉽고, 협업 시에 원활한 소통이 가능하다는 장점이 있다. 때문에 다른 프레임워크들을 다뤄 보기에 앞서 가장 처음으로 Vue.js학습을 하게 되었다. 실습은 Vue Mastery 사이트에서 제공하는 Vue intro 코스가 있어 이를 따라 실습해 보기로! Int..

Programming/FrontEnd 2022. 9. 28. 15:57