백수의 개발
-
CSS 애니메이션 모음 AniCollection백수의 개발/개발을 하면서... 2020. 4. 5. 15:15
CSS 애니메이션 모음 AniCollection 오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자. 요즘에는 예전처럼 완전 정적인 페이지보다는 조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다. 어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다. 예전에는 이러한 움직임들을 구현하기 위해서는 Javascript를 통해 하나하나 움직임을 조종?했다면 이제는 CSS만으로도 충분히 가능하다. CSS를 통해 다양한 동적인 움직임을 구현하는 것이 처음에는 그렇게 쉽지만은 않을 것이다. 그래서 AniCollection이라는 오픈소스를 보며 실제로 적용해보고 분석해보며 적용해보자. AniCollection은 여기서 살펴..
-
Request요청 시 공백이 포함된 URL에 유의하라백수의 개발/웹 2020. 3. 18. 20:24
Request요청 시 공백이 포함된 URL에 유의하라 프론트와 백앤드 사이에 데이터를 주고 받기 위해 Rest API를 많이 사용한다. 이를 위해 특정 URL를 통해 요청(Request)를 하게 된다. 이때 사용되는 URL은 ASCII 문자 집합으로 이루어져 인터넷을 통해서만 보낼 수 있다. 그러나 URL에 있는 ASCII로 대체할 수 없는 문자들이 있을 수 있다. 이러한 경우 URL Encoding을 통해 %와 16진수의 조합으로 ASCII로 대체할 수 있도록 변환한다. [ URL Encoding ] 문제점 아래와 같은 url이 있다고 생각해보자. http://www.example.com/?value=">" 이러한 경우 URL Encoding을 통해 적절히 Encoding되어 아래와 같은 URL로 변환..
-
[ JavaScript ] 타입/클래스 비교 연산 Typeof/Instanceof백수의 개발/웹 2020. 3. 17. 21:30
타입/클래스 비교 연산 Typeof/Instanceof Java와 같이 객체를 다루는 컴파일언어 조차도 타입 안정성에 있어서 완전히 자유롭지 않을 것이다. 그러나 컴파일러 조차 없는 Javascript ES6에서 클래스가 도입되었고 타입에 관한 문제가 더 많이 생길 수 있을 것이다. 이를 위해 TypeScript를 통해 조금은 더 타입 안정성을 가질 수 있더라도 여전히 이를 완전히 극복할 수는 없을 것이다. 이를 위해 우리는 타입/클래스 비교 연산을 확실하게 알고, 적용할 수 있어야 할 것이다. 오늘은 typeof와 instanceof를 통해 타입/클래스 비교를 어떻게 할 수 있을지 다루어 보겠다. Typeof typeof는 함수가 아닌 연산자이다. 즉, 괄호를 사용하지 않고 !value, ~value와..
-
[CSS] box-sizing - element의 크기 정하기백수의 개발/웹 2020. 3. 7. 17:50
box-sizing - element의 크기 정하기 오늘은 element의 크기를 정해줄 수 있는 box-sizing에 대해서 알아보자. box-sizing box-sizing의 속성으로는 기본적으로 content-box, border-box 두가지가 있고, 기본값이 content-box로 되어있다. content-box 크기의 기준이 content 영역이다. 그렇기 때문에 padding의 크기나, border의 크기를 지정하면 설정한 width와 height보다 더 큰 영역을 차지하는 element가 생성된다. 아래 간단한 예시를 보자. .content-box-div { box-sizing: content-box; width: 500px; height: 200px; padding: 10px; borde..
-
[ CSS ] margin vs padding - 여백 조정하기백수의 개발/웹 2020. 3. 5. 20:00
margin vs padding - 여백 조정하기 우리는 웹개발을 할 때 다양한 Element들을 사용한다. 그때 Element들을 다양하게 이동시킬필요가 있을 것이다. 이를 위하 활용할 수 있는 것이 바로 margin과 padding이다. 그렇다면 margin과 padding이 어떤 것인지 알아보자. Element의 구조 들어가기에 앞서 Element가 어떤식으로 구성되어있는지 간단하게 알아보고가자. 기본적으로 실제 Element 내부에 기본적으로 content가 있을 것이다. { content } 이러한 content는 padding, border, margin의 순서로 둘러싸여있다. 그림으로 보면 아래와 같이 나타낼 수 있다. padding은 element와 content사이의 여백, border는..
-
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트백수의 개발/웹 2020. 3. 4. 20:32
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 ]에서 Caret을 설정하고, 드래그의 형태로 만드는 것 까지 진행해봤다. 그러나 드래그의 형태로 해보면 알겠지만, 뒤에서 앞으로 드래그를 했을때와, 앞에서 뒤로 드래그를 했을 때는 엄연히 다를 것이다. 이번 글을 통해 이에 대해 알아보고 ContContentEditable에서 커서(Caret) 활용하기를 마무리 하겠다. 드래그 한 Caret의 위치 내가 키보드나 마우스로 Caret을 조정하였다면 큰 문제는 없을 것이다. 그런데 앞에서 한 것 처럼 Caret을 인위적으로 바꿨다면 나의 기준은 어디이고, 기준은 어떻게 바꿔야 할까? 아래와 같이..
-
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트백수의 개발/웹 2020. 3. 3. 21:16
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트 ]에서 커서의 위치를 확인하는 방법을 알아봤다면, 이번에는 코드를 통해 커서의 위치를 설정하는 방법을 알아보자. Caret 위치 지정하기 Caret의 위치를 지정하기 위해서 우리는 Selection과 Range만 알면 된다. 아래와 같은 코드가 있다고 생각해보자. 가나다라마바사아자차 여기서 우리는 Range를 먼저 설정해주고, 해당 Range를 Selection에 전달해주면 Caret의 위치가 지정될 것이다. "다" 부터 "아"까지 드래그를 한 형태로 Caret을 옮겨본다고 생각해보자. 간단하게 설명하자면 다음과 같다. "다"의 위치를 Ran..
-
Spring AOP(Aspect Oriented Programming)이란?백수의 개발/스프링 2019. 12. 31. 18:52
AOP(Aspect Oriented Programming)이란?AOP를 관점 지향 프로그래밍이라고 한다. 관점 지향은 어떤 로직에 대해 핵심 기능과 공통 기능을 나누어서 보고, 그 관점을 기준으로 모듈화를 진행하는 것이다.즉, 공통 기능을 핵심 기능과 분리해 놓고, 공통 기능 중에서 핵심 기능에 적용하고자 하는 부분에 적용하는 것이다. 간단하게 보면 일반적인 핵심 비즈니스 로직은 핵심 기능으로 본다면 로깅, 트랜잭션, 데이터베이스 연결, 파일 입출력 등과 같은 일련의 핵심 로직을 위한 부가적인 기능들을 공통 기능으로 분리한다고 볼 수 있다. AOP 주요 용어Aspect : 공통 기능(모듈화 된 기능)Target : Aspect(부가 기능)를 부여할 대상 (클래스, 메서드 .. ) Advice : 실질적인..