프로젝트 중 security 없이 Servlet Filter JWT 로그인을 구현하며 가장 고통받았던 부분이다. 공부하며 배웠던 부분을 가볍게 정리해보자! CORS(Cross-Origin Resource Sharing)이란? 교차 출처 리소스 공유(Cross-Or

소개 검증기를 일일이 매번 작성하는 것은 상당히 번거로운 일이다. 특히 특정 필드에 대한 검증 로직은 '값이 비었는지', '특정 범위 안인지'와 같이 매우 일반적인 로직이다. 이런 로직들을 애노테이션화 해서 아래와 같이 간단히 줄일 수 있다. 너무 좋다 이런 검증

프로젝트를 하고 있는데 errors.properties의 한글 문자가 저런식으로 나오고 있었다. 지금까지 프로젝트에 한글 설정도 하지 않고 있었다... 이번에 방법을 한번 정리해보려고 한다!File > Settings(ctrl + alt + s) > Editor > F

검증 요구사항 요구사항: 검증 로직 추가 타입 검증 가격, 수량에 문자가 들어가면 검증 오류 처리 필드 검증 상품명: 필수, 공백X 가격: 1000원 이상, 1백만원 이하 수량: 최대 9999 특정 필드의 범위를 넘어서는 검증 가격 * 수량

1. 프로퍼티 소개 (부모 => 자녀 통신) 우리는 지금까지 Vue 앱에 필요한 데이터를 앱 안에 저장해왔다. 그러나 특정 로직이 포함된 재사용 가능한 컴포넌트를 만들고자 하기 때문에, 외부에서 데이터를 받아와야 할 수 있다. 프로퍼티(props) 같은 컴포넌트를 여

Vue.js란? 웹 프론트엔드 프레임워크 컴포넌트(Component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크 컴포넌트 (Component) 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한

전역 컴포넌트와 지역 컴포넌트 전역 컴포넌트 main.js 지금까지 compontent 메서드를 사용해서 앱에 컴포넌트를 등록한다. 방법 자체에는 문제가 없으나, 가장 좋은 방법은 아니다. component 메서드를 등록해서 앱에 컴포넌트를 등록하면, 전역(glob

구축한 Vue 애플리케이션의 규모가 커질수록 애플리케이션 상태, 데이터 관리도 점점 더 어려워 질 것이다. Vuex는 그러한 고민을 도와줄 뛰어난 상태 관리 솔루션이다. 여러 컴포넌트 또는 앱 전체에서 공유하고 싶은 데이터를 교체, 제공, 주입하는데 사용할 수 있다.

웹 게시판 사이트를 진행하던 중, 계속 게시글이 두번씩 작성되는 문제가 발생했다. 최근 Servlet Filter와 관련해서 스트레스를 계속 받아오던 중이라, 해당 filter의 doChain 메서드 호출이 문제의 원인이라 생각해 한참 시간을 쏟았다.로그를 한참 살펴보

프로그램을 개발하고 사용하는 과정에서 예상하지 못한 여러 오류 발생할 수 있다. 예외 발생 시 사용자에게 오류 페이지를 제공하는 것 또한 주요한 구현 사항 중 하나이다. 이같은 오류 페이지 관련 메커니즘을 서블릿과 스프링이 어떤 방식으로 제공하고 있는지 알아보자! 서

요구사항에 따르면, 로그인을 한 사용자만 상품 관리 페이지에 접근할 수 있다. 그러나 지금까지 우리가 작성한 코드는 URL을 직접 호출하는 경우 상품 관리화면에 접근 가능하다. (단순히 버튼을 보여주지 않는 방식으로 구현했기 때문에)이는 모든 컨트롤러 로직에서 일일이

loginDTO, membetDTO를 나누는게 더 좋나? (비밀번호를 암호화 할 정도로) 보안에 신경쓰는데, 그냥 SELECT * 해서 member의 비밀번호를 다 가져오고 그러는건 좀 아니지 않나? 로그인 처리하기 - 쿠키사용 로그인 상태 유지하기 로그인의 상태를

메시지, 국제화 소개 메시지 코드에 직접 적힌 코드를 일일이 수정하는 것은 보통일이 아니다. 만약 기획자가 html의 라벨 속 상품명 이란 단어를 모두 상품이름으로 변경해 달라고 하면 어떻게 해야할까? 일일이 고치면 될 것 같아 보이지만, 많은 코드들을 실수없이 변경하

다른 설치 없이 순수 Vue를 통해 개발하는 것에는 아쉬운 부분이 많다.코드의 변화를 인식하고 자동 로드, 업데이트 기능IDE의 자동 완성 & 오류 검수 기능구현한 JavaScript 코드를 불러오고 내보내는 기능이 같은 기능을 사용하고 싶을때, 우리는 Vue CLI를

How Vue Works Understanding "Virtual DOM" & DOM Updating Vue의 반응성 소개 vue의 내부작업, 반응성 data에서 정의한 내용을 vue가 지속적으로 추적 vue는 이 data의 모든 프로퍼티를 전역 프로퍼티와 합쳐서

양방향 바인딩 (양방향으로 통신)입력 요소에서 나오는 이벤트, 즉 입력 이벤트 수신 = v-on:inputvalue 속성 및 value 프로퍼티를 통해 값을 입력 요소에 다시 보낸다. = v-bind:valuev-bind:value, v-on:input의 축약어 nam

이벤트 및 메서드 HTML 코드에 로직을 많이 넣으면 안되고, 출력에 집중해야 한다. 로직은 JavaScript 코드에 구현해야 한다. 이때의 메서드는 동적으로 출력하는 것이 아니라, 클릭시 실행되도록 하는 것이므로 아무것도 return할 필요 없다.

createApp으로 전달하는 객체 내 프로퍼티 이름.값으로 함수(function)를 가진다.이 함수는, 값으로 객체(키-값, 타입 설정도 가능)를 반환한다.Vue 앱에 구성된 data 프로퍼티의 근본적인 개념:data에서 반환하는 객체의 어느 부분이든 Vue가 조정하

1. 커넥션 풀 이해 데이터베이스 커넥션을 매번 획득 데이터 커넥션 획득 과정 애플리케이션 로직은 DB 드라이버를 통해 커넥션을 조회한다. DB 드라이버는 DB와 TCP/IP 커넥션을 연결한다. 물론 이 과정에서 3 way handshake 같은 TCP/IP 연결을

1. JDBC 이해 애플리케이션 서버와 DB: 일반적인 사용법 커넥션 연결: 주로 TCP/IP 사용해서 커넥션을 연결한다. SQL 전달: 애플리케이션 서버는 DB가 이해할 수 있는 SQL을 연결된 커넥션을 통해 DB에 전달한다. 결과 응답: DB는 전달된 SQL을 수