Fall in IT.

안녕하세요. 오늘은 SASS에 대해 알아보겠습니다. SASS란?CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다. SASS홈페이지http://sass-lang.com/ SASS 설치방법윈도우에서 설치 방법 - http://rubyinstaller.org/에 방문해서 ruby를 설치한다. - 윈도우키+R키를 누르고 cmd를 입..

안녕하세요. 오늘은 MAC에서 npm으로 광역모듈 설치시, 해당 모듈을 찾지 못하는 에러에 대해서 알아보고 해결해보도록 하겠습니다. 에러상황npm으로 광역모듈 설치후 임포트하여 사용하려고 할때 해당 모듈을 찾지 못한다는 에러 발생에러원인npm으로 설치한 모듈의 설치경로(디폴트) - /usr/local/lib/node_modules node.js의 프로젝트 상에서 모듈을 찾는 경로(디폴트) - /usr/local/lib/node 해결방법node.js의 프로젝트가 모듈을 찾는 경로에 npm의 설치경로를 심볼릭링크로 걸어주면 됩니다. - $ ln -s /usr/local/lib/node_modules node 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 Base64에 대해서 알아보겠습니다. Base64란?컴퓨터 분야에서 쓰이는 Base 64 (베이스 육십사)란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. Base64 동작방식base64는 8bit의 데이터(바이너리)를 6bit의 크기로 표현합니다. 따라서 24bit를 단위로 하여 3개의 문자에서 4개의 문자를 얻게 되는 것입니다. 위와 같이 abc를 base64 인코딩 하여 YWJj를 얻을 수 있게 됩니다. 여기서 6bit의 이진수는 아래의 base64 table을 이용하여 문자로 바꿔줍니다. base64 인코딩 24bit 단위인데 인..

안녕하세요. 오늘은 반응형 웹페이지 디자인의 핵심 기술인 media query에 대해서 알아보겠습니다. media query란?최근 트렌드인 반응형 웹앱을 만들기 위한 CSS 기능입니다.화면의 종류와 크기에 따라서 디자인을 달리 보여줍니다. 예제소스넓이가 500px 이하일 경우는 body 태그의 배경색을 green으로 설정하는 코드. @media(max-width:500px) { body { background-color: green; } } 넓이가 500px 이상일 경우 body 태그의 배경색을 green으로 설정하는 코드 @media(min-width:500px) { body { background-color: green; } } 예제소스 2 결론엘리먼트들의 크기나 위치를 쉽게 설정할 수 있어, 레이..

안녕하세요. 오늘은 자바스크립트에서 Callback을 사용하는 방법에 대해서 알아보겠습니다. 간단하게, Callback이 무엇인지 알아보고, 언제 사용이 되는지 예제를 통해 알아보도록 하겠습니다. Callback이란?모든 명령의 실행을 마친 후에 넘겨받은 함수(객체)를 실행 하는 것을 Callback이라고 합니다. (자바스크립트에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있습니다. 또한, 넘겨 받은 함수(객체)를 언제 실행할지 결정할 수 있습니다.) 자바스크립트는 자바와 다르게 비동기적으로 처리되기 때문에, Callback을 구현하여 사용 합니다. Callback 사용 전예제 코드 for(var i = 0; i < 5; i++) { console.log(i); } console.log("완료"); ..

안녕하세요. 오늘은 자바에서 많이 사용되는 this와 super에 대해서 알아보겠습니다.this와 this() 그리고, super와 super()는 맥락은 같지만 조금씩 쓰임새는 다른데요, 이에 대해 알아보도록 하겠습니다. this란?현재 클래스의 인스턴스를 의미합니다.즉, 현재 클래스의 멤버변수를 지정할때 사용합니다.this 사용예제아래와 같이 현재 클래스(ParentClass)의 클래스 변수 mother와 동일한 이름의 파라미터(setMother 메소드)가 들어올 경우, 명확히 구분해 줄 수 있습니다. this()란?현재 클래스에 정의된 생성자를 부를때 사용됩니다. this() 사용예제아래와 같이 ParentClass의 생성자가 2개 있을 경우, 생성자 값이 들어오지 않을 경우 this()메소드를 사..

안녕하세요. 오늘은 스트래티지 패턴(Strategy Pattern)에 대해서 알아보고, 간단한 예제에 적용해 보도록 하겠습니다. 스트래티지 패턴이란?스트래티지 패턴은 어떤 목적을 달성하기 위해 일을 수행하는 방식, 비즈니스 규칙 등의 전략을 쉽게 바꿀 수 있도록 해주는 디자인 패턴입니다. (예를들어, 게임 프로그래밍을 할때 게임 캐릭터가 자신이 사용하는 무기를 상황에 따라 변경하고 싶을때 유용합니다.)스트래티지 패턴 설계스트래티지 패턴의 기본 설계는 아래와 같습니다. 스트래티지 패턴의 핵심 전략은 무엇이 변화되었는지를 찾은 후에 이를 클래스로 캡슐화 하는 것입니다. 간단한 요구사항로봇 만들기 - 아톰, 태권V, 선가드 로봇들을 만들어본다. - 각각의 로봇들은 기본적으로 이동기능과 공격기능을 가지고 있다...

안녕하세요. 오늘은 싱글톤패턴(Singleton Pattern)에 대해서 알아보고, 간단한 예제에 적용해 보도록 하겠습니다. 싱글톤패턴이란?싱글톤 패턴을 통해서 하나의 인스턴스만을 생성하고, 사용할 수 있다. (하나의 객체만 생성하고 사용해야 할때, 적용할 수 있는 패턴.) 싱글톤패턴 설계싱글톤 패턴의 기본 설계는 아래와 같습니다. 간단예제) 요구사항시스템에서 스피커에 접근하는 클래스를 개발한다. 스피커 클래스는 하나만 존재한다. 예제 소스Main 클래스 public class Main { public static void main(String[] args) { Speaker speaker1 = Speaker.getInstance(); Speaker speaker2 = Speaker.getInstance..

안녕하세요. 오늘은 nodejs에서 npm의 특정 모듈을 나의 프로젝트에 import해서 사용하는 방법에 대해서 알아보겠습니다. npm 모듈 사용방법 (이론)먼저 나의 프로젝트 디렉터리를 npm 패키지로 등록해야합니다. (다른 사람이 만든 모듈(패키지)을 우리 것으로 가져오기 위해서는 우리의 디렉터리 또한 패키지로 만들어야 합니다.)$npm init 명령을 사용하여 npm 패키지로 등록할 수 있습니다. 프로젝트 이름, 버전, 설명, entry point(우리가 만든 패키지에 여러개의 자바스크립트가 있을 때 어떠한 자바스크립트 파일이 이패키지를 구동시키는 스크립트인가 설정하는 것), test command(tdd를 하게되면 어떤 명렁을 실행하면 테스트를 실행시킬것인지 설정하는것), git repositor..

스프링부트를 사용하여 프로젝트를 만든 후, 실행을 했는데 아래와 같은 에러가 발생했습니다. Exception in thread "main" java.lang.UnsupportedClassVersionError: com/chat/SyChatAppApplication: Unsupported major.minor version 52.0at java.lang.ClassLoader.defineClass1(Native Method) at java.lang.ClassLoader.defineClass(ClassLoader.java:791) at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142) at java.net.URLClassLoader..