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

Single Sign On. 통합 로그인이라고 불리며, Federated Identity를 기반으로 만들어진 기능. Federated Identity Federated Authentication . Federation Identity Management는 Identity Provider와 Service Provider간 사용자 인증에 대해 어떤 정보를 토대로 할것인지 상호 이해를 바탕으로 하는 협약이다. 여기에는 SAML(Security Assertion Markup Language), OAuth, OpenID등이 있다. OAuth를 예로들자면 개발자는 1. Google API로부터 OAuth credentials를 받아와야한다. 이때 해당 정보는 구글과 해당 회사 두곳이 모두 알고 있는 정보 (예를들어..

개발공부/개발공부 2023. 2. 17. 13:07

일반적으로 프로젝트를 생성하면, 개발자가 모든 코드를 일일이 손으로 하나하나 작성하는 것이 아니라 이미 개발되어 있는 방대한 자바의 라이브러리 중, 내가 필요한 것들을 가져다가 내 프로젝트를 만들게 된다. 내가 사용하겠다고 명시한 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

모듈 소개 애플리케이션의 크기가 커져 파일을 여러 개로 분리해야 할 때, 분리된 파일 각각을 '모듈'이라고 부른다. 모듈은 대개 클래스 하나 or 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. - export : 외부 모듈에서 export가 붙은 변수나 함수에 접근 가능(모듈 내보내기). - import : 외부 모듈의 기능 가져오기 가능(모듈 가져오기). http, https 프로토콜을 통해 모듈 import, export동작. 모듈은 항상 use strict(엄격모드)로 실행된다. 때문에, 변수에 값 할당 전에 꼭 선언 해야 코드 에러 발생 안 함! 모듈 레벨 스코프 : 모듈은 자신만의 스코프가 있다. 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근 불가. ***외부..

개발공부/개발공부 2023. 1. 2. 17:58

제너레이터 : 일반 함수가 하나의 값을 반환하는 것과 다르게 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. 제너레이터와 이터러블 객체를 함께 사용해 데이터 스트림 만들기 가능. 제너레이터 함수 : function* function* generateSequence() { yield 1; yield 2; return 3; } 제너레이터와 이터러블 : 제너레이터는 이터러블이므로 for..of반복문을 사용해 값을 얻을 수 있다. function* generateSequence() { yield 1; yield 2; yield 3; } let sequence = [0, ...generateSequence()]; alert(sequence); // 0, 1, 2, 3 이터러블 대신 제너레이터 사..

개발공부/개발공부 2023. 1. 2. 16:37

11.8 Async와 Await async 함수 function앞에 async 키워드를 붙여 사용. async function f() { return 1; } *** function앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스 아닌값을 반환해도, 자동으로 resolved promise 형태를 만들어 감싸준다(wrap). await async함수 안에서만 동작하는 키워드. // await는 async 함수 안에서만 동작합니다. let value = await promise; 자바스크립트는 await키워드를 만나면 프라미스가 처리될 때까지 기다리고, 그 이후에 결과를 반환. example) async function f() { let promise = new Promise((res..

개발공부/개발공부 2023. 1. 2. 15:46

[ 프라미스 API ] Promise 클래스의 5가지 정적 메서드, 이중 Promise.all을 가장 많이 사용한다. Promise.all : 여러 프라미스가 모두 준비될 때까지 기다릴 때 사용. '모 아니면 도' 형식. let promise = Promise.all([...promises...]); //---사용예--- Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 ]).then(a..

개발공부/개발공부 2023. 1. 2. 15:16

CallBack function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); script.src = src; document.head.append(script); } // 해당 경로에 위치한 스크립트를 불러오고 실행함 loadScript('/my/script.js'); // loadScript 아래의 코드는 // 스크립트 로딩이 끝날 때까지 기다리지 않습니다. // ... 문제점? js 로딩이 완료 되지 않았을 때, js파일 내에 작성된 함수를 호출할 경우 에러가 발생. loadScript('/my/script..

개발공부/개발공부 2023. 1. 2. 14:37

'try..catch'와 에러 핸들링 에러가 일어났을 때 스크립트가 중단되는 것을 막기 위해, 에러를 잡는 기능을 하는 try...catch문을 사용하면 try...catch문 안에서 에러가 처리되어 스크립트가 중지되지 않음! 단, try...catch문은 런타임 에러에만 동작! (유효한 자바스크립트 코드에만 실행된다는 의미. 만약 문법적 문제가 있는 경우엔 try...catch문이 동작되지 않는다.) 기본 문법 try { // 코드... } catch (err) { // 에러 핸들링 } 타이머를 사용하는 scheduled코드에서 발생한 예외는, 코드가 try...catch를 떠난 후에 실행되므로 확인불가. 스케줄 된 함수 내부의 예외를 잡기 위해서는, 스케줄 된 함수 내부에 try...catch를 구현..

개발공부/개발공부 2023. 1. 1. 22:35

클래스와 기본 문법 기본 문법 class MyClass { // 여러 메서드를 정의할 수 있음 constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ... } -> 위와 같이 클래스 생성 후, new MyClass()를 호출하면 내부에서 정의된 메서드가 들어있는 객체 생성됨. new에 의해 내부 constructor() 자동 호출, 자동으로 객체 초기화 가능. 클래스란? 자바스크립트에서는 클래스가 함수의 한 종류. 순수 함수로 클래스 역할을 하는 함수를 선언하는 방법과 class 키워드를 사용하는 방법의 결과는 거의 같다. 차이점 1) class로 만든 함수엔 [[ IsClassConstructor ]]: true 프로퍼티..

개발공부/개발공부 2022. 12. 30. 21:18