코드의 오아시스

그리드간 형태  드래그 기능 예시 Sort 5를 Sort 2로 드래그를 하여 Sort 1과 Sort 2사이에 삽입이 되었다.그래서  Sort 2이후의 순번들은 하나씩 밀리게 된다.     나의 문제 상황 나는 이 그리드간 드래그 앤 드랍기능을 구현하면서 성능을 하나도 고려하지 않고 그냥 기능 구현에 급급했다.구현은 되었고 코드 리뷰와 테스트를 할 때 몇가지의 문제 상황을 발견하였다.  드래그를 하여 순번이 바뀌면 전체의 순번을 재정렬을 하는 코드로 구현하였다.중간에 삭제를 하면 전체의 순번을 재정렬하는 코드로 구현하였다.JPA를 사용하여 저장을 하였는데 전체의 순번을 재정렬하는데 반복문을 돌리면서 커넥션을 막 찌르고 있었다. 지금 생각해보면 진짜 개발도 못 하였고 개발자가 아닌 공부하는 것처럼, 학생처럼..

들어가기 전에 SPA (Single Page Application)싱글 어플리케이션으로 페이지 이동을 하지 않고 하나의 페이지로 내용만 계속 변경하는 것으로 구성된 웹 어플리케이션 입니다.예를 들어, Google 지도, Gmail, 구글 캘린더, 네이버 지도 등이 있습니다.  MPA (Multi Page Application)페이지 이동할 때마다 매번 서버에 HTML을 받아와 페이지 전체를 렌더링하는 전통적인 웹 어플리케이션 입니다.예를 들어, 네이버, Amazon 등이 있습니다.  이게 뭣이야!? 라고 생각하시는 분들은 가볍게 무엇인지 알고오시는 것이 좋습니다.      CSR (Client Side Rendering) 클라이언트 사이드 렌더링이라고 합니다. Client-Side Rendering (C..

DML 이란? Data Manipulation Language의 약어이며 데이터 조작어라고 불립니다. 그래서 DML은 데이터를 조작하기 위한 용도입니다. SELECT 표현법 칼럼 값은 소문자로 작성하고 나머지는 대문자로 작성하는 것이 관례입니다. -- [사용법] SELECT 컬럼 명[, 컬럼명...] FROM 테이블 명 WHERE 조건식; -- 작동 순서 : FROM → WHERE → SELECT 칼럼 값만 소문자(Java 연동할 때 데이터 넘겨주기 편하니까), 나머지는 대문자가 관례 DISTINCT 조회하고자 하는 칼럼에 중복된 값을 제외하고 딱 한번만 조회하고자 할 때 사용한다. 해당 칼럼명 앞에 기술하면 된다. 단, SELECT 절에 DISTINCT 구문은 단 한 개만 가능하다. -- [표현법] D..

문제 핵심만 설명하겠습니다. 승환이는 마지막 번호표를 받게 되었다. 설상가상으로 몇몇 양심에 털이 난 학생들이 새치기를 거듭한 끝에 대기열의 순서마저 엉망이 되고 말았다. 간식을 나눠주고 있던 인규는 학우들의 터져 나오는 불만에 번호표 순서로만 간식을 줄 수 있다고 말했다. 그제야 학생들이 순서대로 줄을 서려고 했지만 공간이 너무 협소해서 마음대로 이동할 수 없었다. 다행히도 대기열의 왼쪽에는 1열로 설 수 있는 공간이 존재하여 이 공간을 잘 이용하면 모두가 순서대로 간식을 받을 수 있을지도 모른다. 자칫 간식을 못 받게 될지도 모른다는 위기감을 느낀 승환이는 자신의 컴퓨터 알고리즘적 지식을 활용해 과연 모든 사람들이 순서대로 간식을 받을 수 있는지 확인하는 프로그램을 만들기로 했다. 사람들은 현재 1열..

타임 리프 (Thymeleaf) 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다. 즉, SSR(Server Side Rendering) 을 한다. 순수 HTML을 그대로 태그사용, 유지하면서 뷰 템플릿도 사용할 수 있는 것을 네츄럴 템플릿 (natural template)라고한다. 즉, 타임리프는 네츄럴 템플릿이다. 스프링의 다양한 기능을 편리하게 지원해준다. 백엔드 개발자 라면 무조건 알아야하는 템플릿 중 하나입니다. SSR에는 JSP, 타임리프 등이 있지만 지금으로써는 타임리프만 알아도 되기 때문에 타임리프를 공부할 것이고 깊게 하는 것이 아닌 이런게 있구나 정도고 필요할 때 찾으면 되는 정도로 작성하게 되었습니다. 공식 문서 지금 현재 버전은 3.1 버전이며 현재 버전과 최신버전에 차..

이 글을 작성하는 이유 지금까지 DB에서 데이터를 가져와서 어떻게든 어딘가에 데이터를 담아 둘라고 하였다 안좋은 예시 HTML input에 ( ) 넣어 두었거나 어떠한 DOM 속성 id에 ( id="dataId" ) 이런식으로 넣어 두었다. 이렇게 담아 두어서 하나하나 컨트롤 하려고 하다보니 코드는 어지러워지고 코드를 유지보수하는거 조차 힘들어지기 시작하였습니다. 이 때, HTML 요소의 'data-' 로 시작하는 속성을 알게 되어서 깔끔하게 해결이 되어서 공유하기 위해 작성하게 되었습니다. 데이터셋 사용 사례 이렇게 Apple.com 사이트에서도 HTML DOM요소에도 data를 넣어서 사용하는 것을 볼 수 있습니다. 또한 이렇게도 사용할 수 있습니다. 이하 내용은 아래 예시를 가지고 하겠습니다. 삼성..

URL (Uniform Resource Locator) URL은 인터넷에 존재하는 여러 서버들이 제공하는 자원에 접근할 수 있는 주소를 표현한 것입니다. "프로토콜://호스트명:포트번호/경로명/파일명?쿼리스트링#참조" 형식으로 되어 있습니다. URL 객체를 사용하는 이유 URL 객체를 사용하여 URL 문자열을 파싱하여 프로토콜, 호스트, 포트, 경로 등의 구성 요소를 쉽게 추출하기 위해 URL 객체를 사용하여 URL 주소를 조합하여 새로운 URL을 생성하기 위해 URL 객체는 네트워크 리소스에 접근할 수 있는 핸들 역할을 하며 URLConnection 객체를 사용하여 웹페이지를 연결하기 위한 기본 객체로 사용하기 위해 URL 클래스의 메서드 공식 문서 Java17 API : https://docs.ora..

2018년도 카카오 BLIND RECRUITMENT 문제입니다. 비밀지도 문제 지도 암호를 해독 할 수 있는 방법이 있다. 지도는 한 변의 길이가 n 인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도1"과 "지도2"라고 하자. 지도1 또는 지도2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 즉, 지도1과 지도2에서 모두 공백인 부분은 전체 지도에서 공백이다. "지도1" 과 "지도2"는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0 으로 부호화 했을 때 얻어지는 이진수에 해당하는 값의 배열이다. 입력과 조건 출력 형식 원래의..

에러 발생 Spring 서버를 작동하려고 하는데 아래와 같은 오류가 발생한적 있는가? 예시 상황 // 인터페이스 구현1 @Component public class EmailService implements NotificationService { ... } // 인터페이스 구현2 @Component public class SMSService implements NotificationService { ... } // 다른 곳에서 어디선가 인터페이스에 빈 주입 @Autowired private NotificationService service; org.springframework.beans.factory.UnsatisfiedDependencyException 또는 NoUniqueBeanDefinitionExc..

이벤트 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 한다. 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라한다. 이벤트 핸들러 등록 어트리뷰트 방식 Click me! 프로퍼티 방식 Click me! addEventListener 메소드 방식 addEventListener 메소드 방식은 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무런 영향을 주지 않는다. Click me! Tip) addEventListener 메소드는 하나 이상의 이벤트 핸들러를 등록할 수 있다. 단, 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다. Click me! 이벤트의 종류 마우스 이벤트 이벤트 명 이벤트 타..