TutleKing Story

디렉티브 (directives = 지시어)v-접두사가 있는 특수 속성종류 v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-on (단축표기 @) * 중요v-bind (단축표기 :) * 중요v-modelv-slot (단축표기 #) * 중요v-prev-oncev-cloakv-memo (v3.2+)디렉티브 구성디렉티브(directives) : v- 접두사가 있는 특수 속성으로, 디렉티브의 값(value)이 변경될 때 특정 효과를 반응적으로 DOM에 적용하는 것을 말함전달인자(Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자 수식어(Modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사이벤트v-on 사용 -> @로 축약// 인라인 핸들러..

Vue.js #1Vue 란?Vue 는 User Interface 개발을 위한 자바스크립트 프레임워크 HTML, CSS, JavaScript를 기반으로 복잡한 UI 까지 개발 가능 핵심기능선언적 렌더링 (Declarative Rendering) : 템플릿 구문{{데이터}}을 활용하여 출력반응성 (Reactivity) : JS 상태 변경을 자동으로 추적 및 변경시, DOM을 효율적으로 업데이트 컴포넌트UI 를 재사용할 수 있도록 정의한 것 JS 뿐 아니라 HTML, CSS 도 캡슐화 하여 재사용 가능 컴포넌트 만드는 법 : 정의 -> 등록 -> 사용컴포넌트 정의문자열 템플릿 : HTML, CSS, JS를 string 으로 선언 Single File Component (SFC) : 빌드 도구(Webpack, ..

반응형 기초https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html반응형 상태 설정data 옵션을 사용하여 컴포넌트 반응형 상태 선언data 에서 return 한 변수들은 this로 접근해야한다.컴포지션 API : reactive (객체일때), ref (원시값 일때 사용)data에 포함하지 않고 this 에서 데이터를 선언 및 사용 할 수 있지만, 아래와 같은 warning 을 받는다.Property "abc" was accessed during render but is not defined on instance.메서드 선언컴포넌트 인스턴스에 메서드를 추가하기 위해서는 methods 옵션을 사용arrow function 사용 주의 (참고2)반..

정리 1 : 자기 참조 - 도서 카테고리 구현 [Spring boot 프로젝트 정리 1] 자기참조 - 도서 카테고리 구현 NHN Acadmey에서 인증과정 중 제가 구현한 파트에 대해 정리하고자 글을 씁니다. 인터넷 도서 사이트를 제작하는 프로젝트였고 그 중 카테고리, 주문 조회, 결제, 캐싱처리를 담당하였습니다. 예스 tk-story-1201.tistory.com 위의 링크의 후속으로 도서 카테고리를 관리하는 페이지를 구현한 내용을 정리해보고자 합니다. 해당 UI는 프로젝트 구현의 시간이 촉박하여 유행하고 있는 vue.js 나 리액트를 쓰지 못했고 커리큘럼상 가장 많이 썼던 Thymeleaf를 의존성을 추가하여 사용하였습니다. (그러므로 Spring boot 기반의 Front Server에서 UI 및 ..

NHN Acadmey에서 인증과정 중 제가 구현한 파트에 대해 정리하고자 글을 씁니다. 인터넷 도서 사이트를 제작하는 프로젝트였고 그 중 카테고리, 주문 조회, 결제, 캐싱처리를 담당하였습니다. 예스알라딘 사이트 첫번째로는 카테고리입니다. 카테고리는 2단으로 구현을 했습니다. 부모 카테고리 - 자식 카테고리로 구현 하였고 자기 참조 방식을 사용하였습니다. 해당 카테고리를 등록, 수정, 삭제, 순서 변경까지 가능하도록 구현하였습니다. 아래는 카테고리의 엔티티 맵핑 관련한 코드입니다. JPA에서 entity를 생성할때, 기본 생성자(NoArgs)를 protected 까지 허용해주기 때문에 롬복 어노테이션을 사용하여 선언하였습니다. 카테고리는 static한 id를 사용하기로 정책으로 정했습니다. 고로 부모 카..

서버를 운영시, 크게 변하지 않는 데이터를 계속 client에서 read 하고자할때, 사용하면 좋은 기능이다. 현재 진행중인 프로젝트인 인터넷 서점 구현에서 메인화면에 보이는 상품의 카테고리가 계속 조회가 되는 것 때문에 성능에 영향을 주는 듯하여 spring의 cache 기능을 사용하고자 하였다. Spring cache는 AOP 기반으로 관심사 분리를 하여 비즈니스 로직에 영향이 없도록 구현이 되어있고, Redis로 사용시, redis에 관련한 의존성만 추가한다면 편하게 사용할 수 있다. (현 프로젝트에서는 기존에 ObjectMapper와 Redis에 대한 설정이 되어있어서 더 편하게 사용하였다.) 우선 spring boot 2.7.7 환경에서 config 설정은 아래와 같다. CachConfig.ja..

servlet 에서 모든 클래스가 servlet일 필요가 없어서 Front Controller 패턴을 사용하여 프로그램으로 들어오는 요청 및 응답을 하나의 servlet이 처리를 하였다. Spring MVC 에서의 Front Controller : DispatcherServlet ApplicationContext 와 WebApplicationContext의 차이 WebApplicationContext : ApplicationContext + ServletContext 설정 방법 WebConfig.java 를 생성 Controller만 따로 web요청을 처리하기 위해 따로 @ComponenetScan 해야함 (spring boot에서는 x) @Configuration, @EnableWebMvc 을 선언 W..

Servlet 개념 웹서버 : 정적인 웹 컨텐츠를 처리하는 서버 동적 웹 컨텐츠를 처리하기 위해 사용하는 방법 : CGI CGI 가 Java 에서 사용하기 불편하고 CGI의 특성(프로세스를 만들었다 죽임) 때문에 Servlet 사용 Servlet은 spec(API) 이고 servlet을 생애주기에 맞춰 실행시켜주는 것이 Servlet Container이다. Servlet Container = Tomcat = Web Application Server Proxy Servlet 구현 Servlet 생애주기 : init -> service -> destroy service() 메서드는 굳이 override 할 필요 없음 : doGET(), doPost() 로 사용 doGET() ServletContext Ser..

스프링 DI 방법 중 XML Annotation JAVA @Required 반드시 의존성이 주입되어야함을 강제 하는 어노테이션 @Autowired 주입 방법 required 속성 : 해당하는 객체가 스프링 컨테이너에 없으면 에러 타입이 같은 스프링 빈이 2개인 경우 : primary 속성 사용 가능 @Qualifier 스프링 빈의 이름을 지정해서 의존성 주입 @Value 외부속성을 주입하기 위해 사용 : 프로퍼티스 파일 내용 사용 환경별로 문자열이 달라질 수 도 있는 경우가 있으니 자주 사용 Annotation의 장점 XML 보다 간결한 코드로 설정 가능 Java 코드와 동일하게 구성 가능 단점 스프링 프레임워크에 의존성이 생겨버린다 Spring JavaConfig 클래스 사용 @Configuration..

스프링 프레임 워크란? - 자바 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크 - 프레임워크에 종속적이지 않음 (non-intrusive) - 원하는 기능만 끼워넣어서 사용가능 (modular) - 비기능적 요구사항 개발시, 필요한 인프라 제공 - POJO를 통한 개발 - 특징 - 경량 컨테이너로 Spring Bean을 직접 관리 - Spring Bean : 스프링 프레임워크가 원하는 대로 짠 자바 객체 - Spring 객체 라이프 사이클 관리 - Container : Spring bean 객체의 생성,보관,제거에 관한 모든 일을 처리 - POJO 기반 프레임워크 - 특정 인터페이스 구현 및 상속을 받을 필요 없음 - 제어 역전(IoC : Inversion of Control)..