안녕하세요. 오늘은 vue.js의 특징중 Reactivity에 관해서 포스팅해보고자 합니다. 먼저, vue.js의 특징중에서 뷰 모델의 내용이 바뀌면 새로고침이 필요없이 즉각적으로 화면에 반영된다는 장점이 있습니다. 기존 웹개발에서의 소스를 보시죠. 기존 소스 우리가 일반적으로 html, css, javascript를 코딩할 때의 모습과 똑같은 모습입니다. 여기서 주목해야할 점이 str이라는 변수를 바꿔주고 innerHTML을 이용해서 두번 바인딩해주었다는 것입니다. 즉, 기존 웹개발에서는 데이터가 변경이 될때마다 개발자가 프로그래밍을 통해서 직접 바인딩해주어야 했습니다. 하지만 Vue.js에서는 Vue.js 소스 {{ message }} Vue 객체의 data의 message 속성이 변할 때마다 브라우..
즉시실행 함수(Immediately Invoked Function Expression)란 정의되자마자 즉각적으로 실행되는 자바스크립트 함수(Function) 중 하나입니다. (function () { //변수 선언 //변수 처리 //특정 로직 등 구현 })(); 즉시실행 함수는 두가지부분으로 이루어져있습니다. 첫째, 괄호로 둘러쌓인 익명함수부분 스코프기반의 자바스크립트에서 전역스코프로 자바스크립트의 불필요한 변수를 만들지 않고 마찬가지로 안쪽으로 불필요한 변수들이 선언되는 것을 방지할 수 있도록 합니다. 저는 이걸보고 라이브러리 모듈 같다고 생각했습니다. 둘째, 함수를 실행할때 사용되는 ()괄호 입니다. 자바스크립트 엔진이 문법을 읽고 선언된 함수를 즉각적으로 실행하게 됩니다. 즉시실행함수 예제 외부에서..
학원생 수강 시절, 스프링으로 간단히 예제를 잡는 과정에서 예상치못한 실수를 하여 에러를 냈습니다..ㅠㅠ 간단한 것이었는데 에러메시지 검색해볼 생각도 안하고 혼자 잡아보다가 고생했었던 에러메시지를 공유하고자 합니다. 메시지는 memberController라는 빈을 생성하고자하는데 @Autowired할 때 빈생성에서 에러가 난다는 메시지였습니다. 처음에는 @Autowired의 문제점인 circular reference에 관한 상황이 여기서 발견되는건가 싶어서 신기해했지만.. 이유는 다름아닌 @Service 어노테이션때문이었습니다... 스프링 프레임워크는 기본적으로 스프링컨텍스트 내에 Bean이라는 스프링이 관리하는 객체들을 싱글톤으로 관리하고 있습니다. 즉 @Autowired로 주입해주는 그 인스턴스는 다..
안녕하세요. 오늘은 Eclipse 다음으로 가장 대중적인 IDE(통합개발환경)인 인텔리제이의 플러그인을 하나 소개하고자 합니다. 최근에 Mac OS를 사용하면서 Window/Eclipse 체제에서 MacOS/Intellij 체제로 갈아타게 되었는데요. 업무용은 MacOS를 쓰지만 아직 개인용 노트북이 Window 노트북인지라 Window 상에서 인텔리제이를 쓰는 일이 종종 있었습니다. 그런데 한가지 문제점이 바로 shortcut. 단축키인데요. MacOS를 쓴지도 얼마 되지 않았고, 인텔리제이를 사용한지도 얼마 되지 않아서 MacOS에 있는 커맨드 옵션키가 매우 어색할 뿐만아니라 Eclipse 단축키와 상당히 다른 인텔리제이의 단축키 또한 매우 어색한 상황에 두가지 OS를 넘나들며 하나의 IDE에서 개발..
모든 소스는 github에서 관리하고 있습니다. 따라하시다가 미처 제가 신경쓰지 못한 부분이 있다면 이곳을 확인해주세요^^ 목표 : getAll을 없애고 list 페이징 처리를 하여 페이지당 10개의 게시물을 가져올 수 있도록 한다. 파일별 설명 BoardController.java @GetMapping( value = "/list/{page}", consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.APPLICATION_JSON_VALUE ) public Object getList(@PathVariable("page") @Min(0) Integer page) throws Exception{ return boardService.getBoar..
서론 개발하다가 DB에서 데이터를 Select 하는 경우가 가장 빈번하다. 그 다음은 데이터를 가공하거나 테스트 데이터를 생성하는 등 DML 데이터 조작 SQL을 작성하는 경우다. 하지만 점점 직접 테이블을 생성하고 수정하며 제약사항을 걸고 기본값을 설정하거나 외래키, 외래키에 대한 옵션 등 자주 사용하지는 않지만 그로 인해 잊어버리기 쉬운 수정(ALTER) DDL을 정리하고자 한다. 컬럼 추가 ALTER TABLE 테이블명 ADD COLUMN 컬럼명 데이터타입 제약조건 자동증가(auto_increment) PK 컬럼 생성 예제 SQL : ALTER TABLE tblTest ADD COLUMN test_seq bigint PRIMARY KEY DEFAULT nextval('test_seq'); -> AL..
프로젝트 구조 - 유저쪽 패키지를 생성합니다. - 컨트롤러와 서비스 DAO단 클래스들을 생성합니다. - 테스트코드에서 User api를 테스트할 클래스를 생성합니다. 파일별 설명 모든 소스는 github에서 관리하고 있습니다. 따라하시다가 미처 제가 신경쓰지 못한 부분이 있다면 이곳을 확인해주세요^^ UserController.java package co.worker.board.user.controller; @RestController @RequestMapping("/api/users") @Validated public class UserController { private UserService userService; public UserController(UserService userService){ ..
프로젝트 구조 설명 - 프로젝트 구조는 이전과 같습니다. 파일 설명 pom.xml 태그 안에 다음과 같이 modelmapper 의존성을 추가해줍니다. org.modelmapper modelmapper 2.3.5 BoardService.java 이전의 서비스 로직에서의 코드는 아래와 같이 직접 setter를 통해 하나하나 매핑을 했었습니다. @Transactional public Object getBoard(Long seq){ return boardRepository.findById(seq).map(boardEntity -> { Optional results = boardRepository.findById(seq); return results.isPresent() ? results.map(boardEnti..