개발하는 고라니

Spring을 사용해보았다면 필요한 객체를 주입받는 @Autowired 어노테이션을 알 것이다. 이는 어플리케이션 전체에 공유되는 하나의 객체를 Spring IoC 컨테이너에서 주입받아 사용하는 것인데, 이는 Singleton 패턴이라고 한다. Spring의 @Autowired를 사용하지 않고 모든 곳에서 공통으로 사용될 수 있는 하나의 객체를 만들어보자. 내용 3개의 컨트롤러와 3개의 View가 필요하다. AController, BController, CController /a/index.html, /b/index.html, /c/index.html 전역에서 쓰일 객체 SimpleStorage private Map map을 멤버로 갖는다. map은 key('a', 'b', 'c')로 value(List..

프로젝트를 진행하던 중 글 상세조회 페이지에서 이미지를 보여주는데, 이미지가 여러개일 경우 한번에 다 나열해서 보여주기보다, 화살표나 버튼을 클릭해서 다음 이미지, 이전 이미지를 보는 것에 알게모르게 익숙해져있을 것이다. 그래서 트렌드에 맞게 이미지 슬라이더를 HTML, CSS, JS만으로 구현해보도록 하자. 먼저 결과를 보면 위와같은 UI가 될 것이다. 설계 구현을 하기에 앞서 어떻게 구현할지 설계를 해보았다. 가장 바깥에서 버튼들과 이미지가 보여질 곳(B)을 감싸는 녀석을 A라고 하고, 각각의 이미지(D)를 감싸는 프레임을 C라고 생각하면 된다. # A display: flex justify-content: center align-items: center position: relative # B di..

전통적인 페이징은 와 같은 형태를 지닌 Object를 눌러 페이지를 이동시키며 해당 페이지에 해당하는 데이터가 보여지게끔 하는 방식이었다. 하지만 근래에는 다양한 방법으로 페이징 처리를 한다. 예를 들어 댓글 같은 경우, [더보기] 버튼을 눌러 더 많은 댓글을 append 하는 방식을 사용하거나, 페이스북, 인스타그램 같은 SNS에서는 어느정도 데이터를 보고 나면 저절로 밑에 더 생기는 것을 볼 수 있을 것이다. 위 방식이 스크롤에 따른 페이징 처리인지는 정확히 모르겠으나, 이번 포스팅에서는 [ 스크롤 이동에 따른 페이징 처리 ]를 설명해보고자 한다. 나는 Scroll이 맨 아래에 닿을 때 추가적인 데이터를 불러오도록 코딩하였다. 페이징 처리를 위한 API는 다 준비가 되어있다는..

Function # 전달하지 않겠다는 의미는 null이 아닌 undefined를 넣어야하며, undefined를 넣었을 시 10이 기본 값으로 들어간다. Function Rest function print(x, y, ...rest){ ... } Function Spread function print(x, y){ ... } let arr = [10, 20]; print(...arr); Function Default function print(x, y=10){ ... } print(5, undefined); Arrow Function ※ 함수를 위임할 때 - 다른 처리기에게 함수를 위임하는 방법 2가지 test.addEventListener('click', function(e) { ... }); test.a..

Collection List Map Set 프로그래밍 언어에는 종류에 상관없이 Map, Set, List 컬렉션을 지원한다. 하지만 JS의 경우 ES 6 이전에 List밖에 없었고, 다음 버전인 ES 6에서는 나머지 컬렉션들이 추가가 되었다. Set let set = new Set(); set.add(5); set.add("5"); set.add('ok'); set.add(true); set.add(5); console.log(set.size); //4 Set은 흔히 알고있듯, Value가 Key가 되는, 즉 하나의 Value의 중복을 허용하지 않는 컬렉션이다. 그래서 배열의 중복제거를 위해 종종 사용되기도 한다. const arr = [2, 2, 3, 8, 1, 10, 2, 5, 3, 5, 8, 7, ..

이미지 파일을 서버에 업로드 하기전에 클라이언트 단에서 먼저 이미지를 미리보기 하고 올리고 싶을 경우가 있다. 이전에는 몇 가지 복잡한 방법을 사용했으나, 이제는 간단한 자바스크립트 처리로 충분히 가능하다. FileReader FileReader 객체는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위해 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다. File 객체는 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로부터 얻는다. Event Handler 이미지 미리보기 먼..

팀 프로젝트를 진행하다가 JQuery를 안쓰고 Ajax를 사용하려니 코드량도 길고 반복되는 코드가 많아져서 조잡하지만 간단하게 ajax를 사용할 수 있는 모듈을 만들어보았다. 실용성은 그다지 모르겠으나.. 나의 의도대로 잘 동작하긴 한다. 이는 요긴하게 쓰일 수 있는 모듈이므로 차차 업데이트를 진행할 예정이다. function ajax(obj){ const xhr = new XMLHttpRequest(); var method = obj.method || 'GET'; var url = obj.url || ''; var data = obj.data || null; if(obj.contentType) xhr.setRequestHeader('Content-Type', obj.contentType); /* 성공/..

Ajax Ajax이전의 웹 요청은 문서요청이라서 매 요청마다 문서를 새로 받아왔다. 웹 개발을 하다보면 페이지를 새로고침 없이 데이터를 받아오거나, 데이터를 보내거나 등 작업이 요구될 때가 많은데 이같은 작업을 위해선 비동기적인 방법이 필요하다. Ajax(Asynchronous Javascript and XML)은 Javascript 라이브러리 중 하나이다. 비동기식 요청의 대표적인 라이브러리이다. 브라우저가 갖는 XMLHttpRequest 객체를 이용해 페이지를 다시 요청(Refresh)하지 않아도 데이터를 가져올 수 있는 기술이기도 하다. Javascript를 이용한 비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는다. 데이터 전송 Ajax를 알아보기 전에 동기식과 비동기식 데이터 전송은 어..