본문 바로가기

Programming206

[Vue] 라우터 ( Router ) [Vue] 컴포넌트의 통신 방식 ( Props, Emit )[Vue] 템플릿 문법과 컴포넌트(component)[Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progreshong-study.tistory.com뷰 라우터뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.뷰 라우터의 설치 방법은 CDN 방식과 NPM 방식으로 총 2가지가 있다.CDN 방식별도의 설치 없이 아래 링크를 통해 라우터 라이브러리에 대한 정보를 불러올 수 있다.NPM 방식Vue CLI로 프로젝트를 생성하거나 NPM 기반으로 프로젝트를 생성한다면 아래 .. 2024. 6. 25.
[Vue] 컴포넌트의 통신 방식 ( Props, Emit ) [Vue] 템플릿 문법과 컴포넌트(component)[Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심hong-study.tistory.com컴포넌트의 통신 방식뷰 컴포넌트는 각 각 고유한 데이터 유효 범위를 갖는다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 한다.상위에서 하위로 데이터 전달 : Props 속성하위에서 상위로 이벤트 전달 : 이벤트 발생Props 속성프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 중 하나이다. 속.. 2024. 6. 25.
[Vue] 템플릿 문법과 컴포넌트(component) [Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심 기능으로는 선언적hong-study.tistory.com이전에는 Vue와 인스턴스에 대해 공부를 했다. 이번에는 Vue의 템플릿 문법은 무엇이 있는지와 Component란 무엇인가에 대해 공부해보려고 한다.뷰의 템플릿 문법뷰의 템플릿 문법은 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 아마 Spring B.. 2024. 6. 25.
[Vue] Vue & 인스턴스 Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgVue의 핵심 기능으로는 선언적 랜더링과 반응성 두 가지가 있다.선언적 랜더링(Declarative Rendering)Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있다.반응성(Reactivity)Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행한다.뷰 인스턴스인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.MVVM 패턴과는 관련이 없.. 2024. 6. 25.
Spring Security - BadCredentialsException 이전에 공부를 한 부분이지만, 아직 Spring Security에 대한 이해도가 낮은 것은 사실입니다..그래서 해당 게시글은 원래도 스스로 학습의 개념이지만, 그냥 기록상의 이유 그리고 나중에 찾아보는 용도로 정리하려고 한다.BadCredentialsException로그인 기능을 구현할 때, 원인을 모르는 로그인 실패시에 로그도 확인이 안되 아래와 같이 디버그를 진행해서 어떤 문제가 있었는지 확인할 수 있었다. 그리고 해당 커스터마이징 과정은 가장 아래 git 을 통해 내려받을 수 있다. org.springframework.security.authentication.BadCredentialsException:자격증명에 실패하였습니다.  위의 이유를 자세히 보면 BadCredentialsException .. 2024. 6. 15.
[Spring boot] Spring Security static 폴더(CSS,JS) 적용 문제 해결하기 Spring Security를 이용해 접속시 CSS, JS가 적용이 되지 않는 문제를 직면할 것이다.이런 문제는 아래의 코드를 @Configuration, @EnableWebSecurity가 적용된 클래스에 삽입해주면 간단하게 적용이 되는 것을 확인할 수 있다.@Beanpublic WebSecurityCustomizer webSecurityCustomizer() { return (web) -> web.ignoring() .requestMatchers(PathRequest.toStaticResources().atCommonLocations());}위 구문만 적용해주면 Static 폴더 내의 모든 것을 시큐리티 필터에서 무시한채 가져올 수 있다.그리고 하나씩 접속권한을 부여하는 것보.. 2024. 6. 15.
[JS] HTTP 란 무엇일까 이번 포스팅은 HTTP 프로토콜에 대해서만 알아보려고 한다. 이전에는 HTTP란 Hyper Text Transfer Protocol 로 웹 간의 데이터를 주고 받기 위한 통신 규약으로만 간단히 이해하고 포트번호는 80을 사용한다고만 이해하고 있었다.오늘은 HTTP에 대해서 너무 깊진 않지만 약간 알아보려고 한다.HTTP ( Hyper Text Transfer Protocol )API와 같이 다른 서버와 통신을 할 때는 특정한 규칙에 맞춰 그 통신이 이루어져야 한다.현재 웹에서 통신을 할 때 가장 흔하게 HTTP를 사용한다.HTTP는 Hyper Text Transfer Protocol의 약자로, 간단하게 이야기하면 서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약이다.우리가 HT.. 2024. 6. 14.
[JS] 호이스팅 이전 포스팅에서는 스코프에 대한 원리와 이해를 해보기 위해 공부를 진행하였다.이번에는 호이스팅이란 무엇이고, 이것의 원리는 어떻게 되는 지 공부를 해보려고 한다. [JS] Scope(스코프)오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError :hong-study.tistory.com먼저 호이스팅에 대한 개념을 알아보기 전에 아래와 같은 두 예시를 드며 호이스팅이란 무엇인가에 접근을 할 수 있다.console.log(item)let item = 1;console.log(item);var item = 1;위는 각 각 let 키워드와 var 키워드로 i.. 2024. 6. 14.
[JS] Scope(스코프) 오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError : confined is not defined at :4:13이러한 에러가 발생하는 가장 큰 이유를 그저 박수 내부에 변수가 갇혀있다고로만 이해하고, 수정을 진행하였는데 오늘은 이러한 에러가 왜 발생하는 지 원인에 대해서 공부를 해보려고 한다.JavaScript에는 scope라는 개념이 존재한다.스코프는 크게 전역 스코프, 지역 스코프가 있는데 이해하기 쉬운 예로는 전역 변수, 지역 변수가 있다.전역 변수의 경우는 특정 함수에 갇히지 않고, 참조가 가능하지만 지역 변수의 경우는 해당 함수 내에서만.. 2024. 6. 14.
[AWS] EC2 고급 기능 1 이전 포스팅에서 EC2 란 무엇이고, EC2 인스턴스를 어떻게 생성하는지 그리고 보안그룹을 어떻게 지정하는지에 대해서 공부를 진행하였습니다. 오늘은 EC2의 고급 기능들에 대해서 조금씩 공부를 하면서 이해를 해보려고 한다. [AWS] EC2[AWS] IAM 서비스[AWS] AWS란?개발을 교육받으면서 몇 가지 의문점이 들 수 있었다. 개발만 하는 개발자? 개발과 동시에 서비스를 제공하는 개발, 서비스를 제공하며 커스터마징까지 가능한 개발자hong-study.tistory.com [AWS] EC2로 서버 연결하기[AWS] EC2[AWS] IAM 서비스[AWS] AWS란?개발을 교육받으면서 몇 가지 의문점이 들 수 있었다. 개발만 하는 개발자? 개발과 동시에 서비스를 제공하는 개발, 서비스를 제공하며 커스터.. 2024. 6. 13.
반응형

티스토리툴바