DI(Dependency Injection)는 스프링의 핵심 기능 중 하나 입니다. 기존 자바처럼 new를 이용해서 객체를 생성하지 않아도 객체를 주입하는 기능 입니다. 이 방법은 모듈 간 의존도를 낮추어 '느슨한 결합'을 추구할 수 있는 장점이 있습니다. DI(Dependency Injection) 객체 자향적인 자바는 여러 클래스가 조립되는 형태로 프로그래밍 됩니다. Dependency의 사전적 의미는 의존인데, 이처럼 조립된 객체 간에는 의존성이 형성되기 때문에 이름을 이렇게 붙인 거 같네요. Dependency Injection는 의존성 주입이라고 번역되긴하지만, 그냥 객체를 주입한다고 이해하면 무리가 없을 듯 합니다. 스프링이 객체를 생성하고 꺼내오는 공간을 IoC 컨테이너라고 부릅니다. 스프링..
검색창에 jQuery로 Autocomplete 기능을 구현했을 때 제시된 첫 번째 완성 검색어가 자동으로 선택되는 현상이 발생할 수 있다. 예를 들어, 자동완성을 제공할 배열에 '삼성전자', '삼성전기', '삼성물산' 등이 있다면 '삼성'이라는 문자를 입력하면 그 아래로 삼성전자, 삼성전기, 삼성물산 등이 자동완성 옵션을 제공할 것이다. 이때 이용자는 위아래 화살표로 자유롭게 자동 완성된 리스트 중 하나를 골라 enter키로 검색창에 완성될 문자를 확정할 수 있다. 그러나 자동완성 이후 ↓ 화살표를 누르자마자 첫번째 자리에 있는 자동완성 검색어가 enter로 선택된 것처럼 자동 선택되는 오류가 발생하는 경우가 있다. 이는 배열의 문자열이 한국어로 구성됐을 때 생기는 오류로 파악된다. 해결법은 focus ..
게시판에 페이지 번호를 매기는 작업은 필수적이다. 한 화면에 보여줄 글의 개수가 정해지고 그 개수를 초과하면 페이지가 [1] [2] [3] ... 과 같이 추가되는 식이다. 구현 코드는 검색하면 쉽게 찾을 수 있다. 변수 선언을 이런 식으로 한다. int pageSize = 10; // 한 페이지의 글 개수 int currentPage = Integer.parseInt(pageNum); // 현재 페이지 int startRow = (currentPage - 1) * pageSize + 1; // 한 페이지의 시작글 번호 int endRow = currentPage * pageSize; // 한 페이지의 마지막 글번호 int count = 0; int number = 0; 그러나 나는 이 코드가 어떻게 동..
웹 애플리케이션 개발 모델2로 불리는 MVC 패턴은 반드시 알아야 하는 중요 개념이다. 차근차근 이해해보자. 동작 순서 : server start → web.xml 검사 → web.xml 실행(서블릿 URL 패턴 요청 대기) → URL 패턴 최초 요청 → 서블릿 객체 생성(컨트롤러) → 서블릿 init() 메서드 실행 → 서블릿 doGet/doPost 메서드 실행 → URL 패턴에 맞는 모델 경로 확인 → 모델(Command, service, dao) 클래스가 비즈니스 로직 처리하고 결과 값 저장 → 뷰(JSP) 경로 값 컨트롤러에 반환 → 컨트롤러가 뷰 경로 포워드 → 뷰가 저장된 결과값으로 화면 작성 및 클라이언트에 전송 화면 하나 만드는데 참 길다. 그래도 패턴에 익숙해지면 점차 보기가 수월해진다...
MVC 패턴은 매우 널리 사용되는 소프트웨어 디자인 패턴이다. MVC는 모델(Model), 뷰(View), 컨트롤러(Controller)를 의미한다. 각각은 비즈니스 로직과 프레젠테이션 로직, 데이터를 나누어서 처리한다. 쉽게 말해 연산을 하는 업무와 사용자가 보는 화면을 만드는 업무를 분리해서 처리하는 방식이라고 볼 수 있다. 이 패턴은 코드의 양이 많아져도 유지 보수가 편하고 확장 역시 용이한 장점이 있다. 컨트롤러로의 중앙화가 이루어지는 점도 주요 특징이다. Model1 vs Model2 Model1 웹 애플리케이션 개발 패턴은 크게 모델1과 모델2 두 가지다. 통상 교육과정을 통해 웹 프로그래밍을 배우면 모델1부터 배운다. 모델1은 구조가 비교적 간단하고 코드가 좀더 직관적으로 읽히기 때문인 거 ..
jsp 파일에서 이처럼 js나 css를 태그로 넣어준 상태에서 분명 js, css 파일에서 내용을 수정하고 저장했는데 반영이 안 되는 경우가 있습니다. 이때 임시방편으로 파일명 뒤에 ?v=1을 붙여주는 것으로 강제 적용이 가능합니다.
제목이 무슨 말인지 좀 헷갈릴 수 있는데, 간단하게 예시를 들어 설명하겠다. CORPCODE.xml 00126380 삼성전자 005930 20210610 이 코드는 open DART에서 제공하는 xml 파일 내용 중 삼성전자가 담긴 list만을 뽑은 코드다. 원본에는 수많은 국내 기업들의 고유번호, 회사명, 종목코드 등이 담겨있다. 하려는 작업은 이런 것이다. 나는 삼성전자의 기업명은 알고 있는데 삼성전자의 고유번호인 00126380은 알 길이 없다. 그렇다면 '삼성전자'를 입력해서 '00126380'라는 값을 찾아낼 수는 없을까? 잘은 모르겠지만 몇 가지 방법이 있을 거 같긴 하다. 단, xml 파일을 수정하는 방법은 사용할 수 없다. 원본 파일은 저렇게 생긴 코드가 50만 줄 넘게 있기 때문이다. 하..
앞서 영화진흥위원회의 오픈 API를 활용해 날짜를 선택하면 해당 날짜의 박스오피스 순위와 누적 관람객 수를 화면에 보여주는 코드를 구현했다(오픈 API로 일별 박스오피스 불러오기). 이번엔 한 발 더 나아가 화면에 출력된 영화를 클릭하면 개봉일, 감독, 주연을 보여주는 코드를 구현해보자. 날짜를 선택하고 확인 버튼을 누르면 1위부터 10위까지의 박스오피스가 나타난다. 이제 1위인 발신제한을 클릭하면 이와 같이 개봉일과 감독, 주연이 바로 아래 출력된다. ▶전체 코드 보기 HTML에서 input과 button 태그를 만든 뒤 자바스크립트에서 Date 객체를 만들고 get 방식으로 JSON 데이터를 받는 과정까지는 이전 포스팅과 동일하게 진행한다. HTML 확인 박스 오피스 순위 JavaScript 이제 r..
영화진흥위원회는 박스오피스, 영화사, 영화인, 영화 등의 실시간 정보를 OPEN API로 제공한다. 이를 활용해 날짜를 선택하면 해당 날짜의 박스오피스 순위와 누적 관람객 수를 화면에 보여주는 실습을 진행해 보자. 이렇게 날짜를 선택하면 해당 날짜의 누적 관람객 기준 1위부터 10위까지 영화 순위를 출력한다. ▶전체 코드 보기 API 이용을 위해선 회원가입 후 고유 키를 발급받아야 하는 것이 일반적이지만 일부 기능은 그런 절차 없이도 이용할 수 있다. 이번 포스팅에서 구현하는 기능은 회원가입 절차가 필요하지 않다. 영화진흥위원회 OPEN API 사이트 - OPEN API - 일별 박스오피스에 접속한다. REST 방식을 사용한다. XML과 JSON을 모두 지원하는데 JSON을 활용한다. 참고로 XML과 J..
each() jQuery에서 each() 메서드는 각 요소(element)별로 접근해서 반복문의 기능을 수행한다. $(selector).each(function(index,element)) index - selector의 인덱스 번호를 의미 element - 현재 요소를 의미함. 반복적으로 수행되는 성격상 상황에 맞게 값을 대입할 수 있게 해주는 this가 주로 사용됨 console.log를 찍어보는 방법으로 each() 메서드가 어떻게 동작하는지 확인할 수 있다. 버튼 Coffee Milk Soda ul 태그 안에 li 태그가 3개 있다. 제이쿼리를 통해 버튼 태그를 클릭하면 li 태그에 대해 each() 메서드가 동작하도록 해준다. 결과를 확인하기 위해 console.log로 태그 안에 있는 텍스트와..