프로젝트를 하면서 처음 안 기능! 그건 바로 $.extends 이다. JQuery 공식문서에서는 다음 기능을 "둘 이상의 개체 내용을 첫번째 개체로 병합합니다."라고 소개한다. jQuery.extend( target, object1 [, objectN ] ) 예시를 살펴보자. var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 var result = $.extend( object1, object2 ); console.log("결과: " + JSON.stringify( re..
이슈 input length must be multiple of 16 when decrypting with padded cipher 원인 암호화는 됐는데 복호화가 안됨 HttpServletRequest nextElement()로 파라미터 값을 가져올때 '+'를 공백으로 처리해서 암호화되던게 바껴서 형식이 안맞아 복호화 오류가 나는 문제였다. 해결 replace로 공백을 '+'로 바꿔주었다.
이슈 날짜비교를 하려고 DB에서 날짜를 가져와서 오늘 날짜와 비교를 하는데 오류가 났다. 원인 오늘 날짜 포맷은 "2021-01-27"이었고 DB에서 가져온 날짜 포맷은 "2021-01-31 23:00:33"이었다. 포맷이 맞지 않아 오류가 난 것이다. 해결 DB에서 가져온 날짜 포맷을 "2021-01-31"로 변경했다. 추가 "2021-1-1" 과 "2021-01-01" 또한 포맷이 맞지 않아 오류가 난다. 이럴때는 function leadingZeros(n, digits) { var zero = ''; n = n.toString(); if (n.length < digits) { for (i = 0; i < digits - n.length; i++) zero += '0'; } return zero + ..
모바일웹 프로젝트를 할 때 발견한 오류? 이슈? 였다. var d = new Date("2021.12.22"); // Invalid Date 함수를 쓸때 안드로이드나 크롬에서는 잘 되는데 safari에서만 안되는 오류였다. 찾아보니 크로스브라우징 이슈라는... 이 이슈를 해결하기 위한 방법으로는 moment.js 라이브러리를 사용하는 방법도 있다고 한다. moment.js를 사용하면 어느 브라우저에서나 호환이 된다고 한다. 또한 다른 방법으로는 날짜를 2020-09-01T00:00:00 / 2020/09/01 00:00:00 형식으로 바꿔서 넣어주면 된다고 한다. 브라우저들 생각안하고 코드 막 짰다가 결함체크 할 때 뒤통수 맞아버린... 크로스 브라우징 이슈를 잘 체크해야겠다. Reference http..
이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX 없이 리액트 기초를 잡아보자! React의 엘리먼트나 컴포넌트 같은 기초 개념을 이해하는 것이 중요하다. 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 엘리먼트를 어떻게, 왜 사용하는지 배워보자 var h1 = React.createElement('h1', null, 'Hello world!!!') ReactDOM.render( h1, document.getElementById('content') ) ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다. 이는 동일 DOM 계층에 h1 요소 두 개를 렌더링해야 하는 경우에 문제가 발생한다. 계층적 복잡한 구조를 만드는 방법은 엘리먼트를..
이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX를 사용하지 않고 자바스크립트만 이용해서 작성해보는 코드! JSX가 뭔지도 잘 모르겠지만 일단 따라해본다. JSX 없이 React를 시작하는 이유 * 브라우저는 일반적인 자바스크립트만 실행할 수 있기때문에 자바스크립트로만 React 코드를 작성하는 방법을 안다면 유용할 것이다. 이 방식으로 시작하는 이유는 jsx는 필수사항이 아니고 React를 위한 표준은 자바스크립트라는 점을 확인하기 위함이다. -- Hello World 뷰를 위한 React 코드를 작성한다. React 엘리먼트를 직접 에 렌더링하지 않는 이유 -> 다른 라이브러리나 를 조작하는 브라우저 확장 프로그램과 충돌하는 것을 방지하기 위함 라이브러리를 HTML 파일에 추가하면..
일반적으로 프록시는 다른 무언가와 이어지는 인터페이스 역할을 하는 클래스이다. 프록시는 어떠한 것(이를테면 네트워크 연결, 메모리 안의 커다란 객체, 파일, 또 복제할 수 없거나 수요가 많은 리소스와도 인터페이스 역할을 수행할 수 있다. 프록시(Proxy)란 '대리'라는 의미이다. 프록시에게 어떤 일을 대신 시키는 것이다. 어떤 객체를 사용하고자 할때, 객체를 직접 참조 하는 것이 아니라 해당 객체를 대행하는 객체를 통해 대상객체에 접근하는 방식을 사용. 이렇게하면 해당 객체가 메모리에 존재하지 않아도 기본적인 정보를 참조하거나 설정할 수 있고 또한 실제 객체의 기능이 반드시 필요한 시점까지 객체의 생성을 미룰 수 있다. 보호하고 있는 개체에 대한 접근을 제어하고 관리한다. 쉽게 예를 들면 수표나 신용카..
이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 단일 페이지 어플리케이션 single-page applications, SPA 입사 후 첫 프로젝트 파견 전에 본사에서 SPA 게시판을 만들어보라는 과제를 받았었다. 어찌저찌 만들긴 했는데 내가 만든건 진정한 SPA 형태가 아니니 나중에 다시 공부를 해보라는 피드백을 받았었다. 당시에도 SPA는 처음 들어보는 형태였던지라 무척 생소했었다. 그리하여 책의 흐름을 따라 정해보고자 한다. SPA 아키텍처는 서버보다는 클라이언트 즉, 브라우저 측에 로직이 더 많은 팻 클라이언트(fat client or thick client)다. SPA는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결한다. 1. 사용자가 새로운 페이지를 열..
이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 첫번째 프로젝트에서 풀스택(?)으로 일을 하며 든 의문점이 있다. 각자의 업무가 주어진 페이지에서 큰 틀 안에 자잘자잘한 코드를 작성하다보니 A업무단에서 쓰여진 코드가 B업무단에서 필요할때 그 코드를 복사 - 붙여넣기를 하다보니 고쳐야하는 부분이 생기면 어느 한군데에서 고치고 그걸 다시 복사 - 붙여넣기를 하는 너무나도 쓸데없는 짓을 반복하는 것이다. 시간에 쫒겨 마구잡이로 일을 할 때는 그냥 지나쳤는데 끝나고 나니 현타가 몰려왔다. 이게 진정한 프로그래밍이 맞나? 생각하던 차에 다른 언어를 배우며 공부를 해봐야겠다 싶었다. 리액트는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. 리액트는 강력한 UI 라이브러리다. 모든 기능은 물론..
트랜잭션이란 더이상 나눌 수 없는 가장 작은 작업 단위 이다. 트랜잭션의 특성으로는 ACID가 있다. 원자성(Atomicity) 하나의 작업단위는 그 결과가 성공 또는 실패할 경우 관련된 동장은 모두 동일한 결과가 나온다. 작업 중 하나라도 실패한다면 관련된 트랜잭션 내에서 처리한 동작들도 모두 처음 상태로 돌아간다. 일관성(Consistency) 트랜잭션이 성공적으로 처리되면 데이터베이스의 관련된 모든 데이터는 일관성을 유지해야 한다. 고립성(Isolation) 트랜잭션은 독립적으로 처리되며, 처리되는 중간에 외부에서의 간섭은 없어야 한다. 서로 다른 트랜잭션이 동일한 데이터에 동시에 접근할 경우 적절한 동시 접근 제어를 해야 한다. 지속성(Durability) 트랜잭션이 성공적으로 처리되면 그 결과는..