Dev Diaries Dev Diaries

분류 전체보기

• [디자인 패턴] 싱글톤 패턴(Singleton Pattern)

  Computer Science/Design Pattern 2022. 12. 12. 23:41

  싱글톤패턴이란? : 단 '하나'의 인스턴스만 생성하여 사용하는 디자인패턴 - 애플리케이션에 시작될 때, 클래스가 최초 한 번만 메모리를 할당하고 해당 메모리에 인스턴스를 만들어 지속 사용 - 생성자가 여러번 호출되더라도, 객체는 최초 호출시에만 한 번 생성되며 이후 호출부터는 이미 생성한 객체를 반환 [ 구현 방법 ] public class Singleton { // 1. static 영역에 객체를 1개만 생성 private static final Singleton instance = new Singleton(); // 2. public으로 인스턴스가 필요할 경우 static 메서드를 통해 조회만 가능하도록 허용 public static Singleton getInstance() { return inst..

  Read More
• [뷰 Vue.js] Computed 속성과 Watchers

  Programming/Vue.js 2022. 11. 7. 13:54

  Computed Properties - Computed Properties(계산된 속성)은 탬플릿의 데이터 표현을 좀 더 직관적이고 간결하게 쓰도록 도와줌 - 복잡한 로직이나 반복해야하는 코드들을 computed property로 만들 수 있음 [ Computed Properties를 사용하지 않았을 경우 ] - 아래와 같이 코드를 작성하면, 한 번에 message가 어떻게 표시될지 알 수 없고, 해당 코드를 여러 곳에 적용시켜야 할 때 복잡성이 증가하게 됨 {{ message.split('').reverse().join('') }} [ Computed Properties 사용시 ] - 아래와 같이 작성함으로써 코드의 재사용성과 가독성을 높일 수 있다. Original message: "{{ messag..

  Read More
• [뷰 Vue.js] 이벤트 핸들링 (Event Handling)

  Programming/Vue.js 2022. 11. 3. 15:16

  Listening to Events - v-on 디렉티브를 이용하여 DOM 이벤트를 듣고 반응하여 JavaScript를 실행 Add 1 {{ counter }} Methods Event Handlers - 이벤트 핸들러 뒤에 JavaScript 코드들을 작성하는 것은 복잡성을 높여 좋지 않음 - method로 빼고 v-on 뒤에는 메소드의 이름만 작성함으로써 메소드를 호출할 수 있음 Greeting Methods in Inline Handlers - 메소드 이름을 직접 바인딩하는 대신 인라인 JS 구문에 메소드 사용 가능 say hi say what - 원본 DOM 이벤트에 엑세스하고 싶을 때는 $event 변수를 사용해 메소드에 전달할 수 있음 say hi say hello Event Modifiers..

  Read More
• [뷰 Vue.js] 뷰 템플릿(Template Syntax) - Directives (뷰 디렉티브 총 정리)

  Programming/Vue.js 2022. 11. 2. 14:11

  뷰 템플릿이란? HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결해 HTML로 변환해주는 속성 => HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것 1. Interpolations (보간법) 1-1. Text "Mustache" syntax : 데이터 바인딩의 가장 기본적인 형태 ( {{ property }} ) - 해당 태그는 데이터 객체의 property 에 해당하는 value를 가져와 대체함 Message: {{ msg }} v-once directive : 데이터 변경 시 업데이트 되지 않는 일회성 interpolation함으로써 데이터가 변경되지 않음 This will never change: {{ msg }} 1-2. Raw HTML - 이중 중괄호는..

  Read More
• [뷰 Vue.js] 뷰 인스턴스 (Instance) 생성과 라이프 사이클

  Programming/Vue.js 2022. 11. 1. 16:19

  1. 뷰 인스턴스 생성 - 모든 뷰 인스턴스는 아래와 같은 Vue function을 통해 생성된다. let vm = new Vue({ // options }), 1-1. 뷰인스턴스 옵션 속성 옵션 속성 설명 el - 뷰로 만들어진 화면이 그려지는 시작점을 의미 - 뷰 인스턴스에 마운트(연결)할 기존 DOM 요소 지정 - CSS Selector, HTML Elment 작성 - new를 이용한 인스턴스 생성시에만 사용 data - 데이터 객체로, 객체 또는 함수 형태로 작성 가능 - Component를 정의할 때 data는 데이터를 반환하는 함수로 선언해야 함 - 화살표 함수 사용 불가(this가 Vue 인스턴스를 가리키지 않음) template - 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는..

  Read More
• [뷰 Vue.js] Vue.js란? (개념 및 MVVM 패턴의 구성요소, 처리 흐름)

  Programming/Vue.js 2022. 11. 1. 11:27

  Vue.js는 Component 기반 Framewrok이다. - 컴포넌트(Component) 기반의 SPA(Single Page Application)을 구축할 수 있게 해주는 프레임워크 - Component: 웹을 구성하는 로고, 버튼 등 웹 페이지 내의 다양한 UI 요소를 재사용하도록 구조화한 것 - SPA: 단일 페이지 어플리케이션으로 하나의 페이지 안에서 필요한 영역만 로딩되는 형태(빠른 페이지 변환, 적은 트래픽 효과, 단, 최초 로딩시 모든 요소들을 가져와야 하기 때문에 속도가 느려질 수 있음) MVVM 패턴을 이용한다. 프론트엔드의 화면 동작과 관련된 로직과 백엔드 데이터ㅔ이스 처리 로직을 분리하여 더 깔끔하게 코드를 구성하는 것 MVVM 구성요소 View 사용자에게 보이는 화면 출력 Mod..

  Read More
• [Java Spring] AOP 개념 및 사용 방법(AspectJ, xml, annotation)

  Programming/Java 2022. 10. 30. 18:12

  AOP (Aspect Oriented Programming), 관점 지향 프로그래밍 어떤 로직을 기준으로 핵심적인 관점(비즈니스 로직), 부가적인 관점을 나누어 그 관점을 기준으로 모듈화 - 요청(Request)에 대해 핵심 관심사항(Aspect)과 부가 관심사항으로 나눠 관점을 기준으로 프로그램을 구현하는 기법 - OOP: 사용자의 관점에서 필요한 핵심적인 비즈니스 로직을 구현하는데 있어 객체(클래스)를 모듈화함으로써 반복되는 코드를 줄임 - AOP: OOP의 개념에 더해, 어플리케이션 전체에 사용되는 부가기능(Aspect)들을 모듈화, 공통 기능(Corsscutting Concerns)관리를 더 효율적으로 가능하게 함 (개발, 운영 측면에서 OOP를 더욱 강력하게 만듦) - 어플리케이션에서 계속 반복..

  Read More
• [Java Spring] IoC, DI (의존성 주입 방법 xml, annotation)

  Programming/Java 2022. 10. 30. 03:39

  IoC(Inversion of Control), 제어의 역전 : 객체 생성을 프레임워크가 유연하게 제어함으로써 객체간 결합도를 줄여, 유연성 증가, 코드 중복 제어, 유지 보수의 편리성 증가 - 스프링이 모든 의존성 객체를 스프링이 실행될 때 다 만들어주고 필요한 곳에 주입 - Bean들은 싱글턴 패턴의 특징을 가지며, 제어의 흐름을 사용자가 컨트롤하지 않고 스프링에게 맡겨 작업 처리 [ 일반적인 객체 제어 과정 ] 1. 객체 생성 2. new 키워드를 통해 의존성 객체 생성(클래스 내부에서 생성) 3. 의존성 객체의 메소드 호출 [ 스프링의 객체 제어 과정 ] 1. 객체 생성 2. 의존성 객체 주입 (스프링이 만들어놓은 객체를 주입) 3. 의존성 객체의 메소드 호출 DI (Dependency Injec..

  Read More