당 떨어질 땐 초코딩

highlightjs.org highlight.js Version 9.15.7 New languages: none. New styles: none. Improvements: - fix(powershell): Add cmdlets (#2022) - fix(Bash): escaped double quotes (#2041) - fix(c++): add aliases 'hh', 'hxx', 'cxx' (#2017) - fix(ini/toml): Support comments on the same line. (#2 highlightjs.org 스크립트 파일 하나와 CSS 파일 하나, 두 개의 파일만으로 코드 하이라이트 구현이 가능! 아래와 같이 코드를 작성하게 되면 티스토리에 스킨 적용하는 것 처럼 보여진다 in..

람다식 : 익명 함수를 이용해서 익명 객체를 생성하기 위한 식 - 인터페이스 함수을 람다식을 사용해서 바로 구현 - 객체를 따로 만들 필요가 없음 - 인터페이스가 갖고 있는 메소드를 간편하고 즉흥적으로 구현하여 사용 - 식별자 없이 실행 가능 장점 - 불필요한 클래스 파일이 생기는 것을 막을 수 있음 - 과정이 간결해짐 기본 형태 ( 타입 매개변수, ... ) -> { 실행문; ... } - 타입 매개변수 : 오른쪽 중괄호 블록을 실행하기 위해 필요한 값을 제공 - -> 기호 : 매개 변수를 이용해서 중괄호 실행 함수적 인터페이스 ( @FunctionalInterface) : 람다식으로 구현 할 인터페이스 - @FunctionalInterface가 적용된 인터페이스는 한 개의 추상 메소드만 선언 가능 -..

Anonymous (익명) : 이름이 없는 것 Anonymous class (익명 클래스) : 이름이 없는 클래스 - 함수를 바로 구현해서 사용 Anonymous Fuction (익명 함수) : 이름이 없는 함수 - 함수 인수로 코드를 전달할 때 사용 Anonymous Object (익명 객체) : 이름이 없는 객체 - 객체를 생성하지 않고 사용 - 객체가 없어서 메모리가 만들어져도 바로 사라짐 - 보통 한번 쓰고 말 때 사용 - interface 구현 interface Apple13 { void func01(); } - 익명 클래스 Apple13 a13 = new Apple13() { public void func01() { System.out.println("Apple13"); } }; a13.fun..

Singleton Pattern : 클래스의 인스턴스(객체)가 오직 1개만 생성되도록 하는 것 - 필요할 때마다 똑같은 인스턴스를 만드는게 아니라, 이미 생성해둔 기존 인스턴스를 사용 - 전역 인스턴스로 만들기 떄문에 다른 클래스의 인스턴스들이 데이터를 공유하기 쉬움 - 메모리 낭비를 막음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 class Singleton { // static : 단 하나의 인스턴스만 담기 위함 private static Singleton instance; private Singleton() {} // private으로 선언된 instance를 다른 클래스에서 사용하기 위함 public static Singleton getInstance()..

Decorator : 객체 결합으로 기능을 동적으로 추가 OCP (Open-Closed Principle) : 디자인 원칙 - 클래스는 확장되어야 하고, 코드는 변경되어서는 안됨 - 강하고 튼튼한 디자인 가능 사용 이유 : 기존 코드를 건드리지 않고 확장하기 위함 장점 - 확장하는 데이터가 다양하고 일정하지 않을 때 효율적 - 기존 코드를 수정하지 않고 확장 할 때 단점 - 자잘한 클래스가 많아짐 - 과도한 사용시 가독성이 떨어지고 디버깅이 어려워짐 - 조건이 끝날 때 까지 함수를 계속 콜 시킴 -> 재귀함수와 상당히 비슷한 구조를 가짐 - 들어간 만큼 return이 됨

Strategy Pattern : 같은 문제를 해결하는 여러 알고리즘을 클래스별로 캡슐화하여 사용 - 같은 문제를 다른 알고리즘으로 해결할 수 있게 하는 패턴 ex) 게임 프로그래밍에서 게임 캐릭터가 자신이 처한 상황에 따라 공격이나 행동하는 방식을 바꾸고 싶을 때 - '주입' 개념으로 들어가면 전략 패턴으로 간주 사용 이유 : 장점 - 동일 계열 알고리즘을 생성할 수 있음 -> 같은 함수의 중복을 제거 - 객체 행위에 대한 서브 클래스를 이용하지 않음 -> 상위 클래스로 Interface를 정의하면, 본 소스는 건드릴 필요가 없음 - 조건문을 사용하지 않음 - 구현을 선택할 수 있음 단점 - 사용하기 전에 클래스를 알아야 함 - 메모리를 많이 사용하게 됨 Strategy : 어떤 목적을 달성하기 위해 ..

Design Pattern : 객체 지향 프로그래밍 설계를 할 때 자주 발생하는 문제들을 피하기 위해 사용되는 패턴

삼항연산자 : if문을 비교적 짧고 간결하게 작성하는 방법 - 형태 : (조건문) ? 참일 때 값 : 거짓일 때 값 // 예시 1 int a = 10; int b; if (a 0) { System.out.println("호랑이"); } else { System.out.println("코끼리"); } // 삼항연산자 System.out.println((a > 0) ? "호랑이" : "코끼리"); - 사용 예제 -> 어떤 값을 넣든 중간 값을 찾는 알고리즘 //중간 값 구하기 int a = 1, b = 2, c = 3; // int a = 1, b = 3, c = 2; ..

Component Component 파일 안에서 선언한 다른 Component를 import / export - class 앞에 export 키워드 작성 - Bpp.js 안에 Cpp.js, Dpp.js 선언 import React, { Component } from 'react'; class Bpp extends Component { render() { return ( Bpp ); } } // 다른 파일에서 Bpp안에 있는 Cpp를 사용하고 싶을 때, 앞에 export 작성 // 아니면 'Cpp' is not exported from './components/bpp.js' 오류 뜸 export class Cpp extends Component { render() { return ( Cpp ); } } e..

컴포넌트 스타일링 방법 1. CSS Module : CSS를 모듈화하여 사용하는 방식 - 고유한 클래스네임을 생성하여 스코프를 지역적으로 제안하는 방식 - classnames 라이브러리를 사용하면 더욱 편지 지정 가능 classNames - 설치 yarn add classnames - bind 기능 : 클래스네임을 입력할 때 styles. 생략 가능 import React from 'react'; import classNames from 'classnames/bind'; import styles from './App.css'; const cx = classNames.bind(styles); function App() { return ( ); } export default App; 2. Sass (Synt..

함수형 컴포넌트 class 문법 사용 - 컴포넌트에서 라이프사이클 API나 state를 사용할 때 사용하는 형식 import React, {Component} from 'react'; class Hello extends Component { state = { name: "Hello" } render(){ return( Hello {this.props.name} ); } } export default Hello; 함수형 컴포넌트 - 오로지 props를 전달받아 뷰를 랜더링하는 역할만 수행 mport React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; - ES6의 화살표 함수와 비구조화 할..

Life Cycle - 컴포넌트 상태에 변화가 있을 때 마다 실행하는 메소드 - Third Party 라이브러리를 사용하거나, DOM을 직접 건드려야 하는 상황에서 유용 1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타내는 것 constructor 메소드 - 컴포넌트의 생성자 메소드로 컴포넌트를 만들 대 처음으로 실행 - 초기 state 정의 getDerivedStateFromProps( ) - props에 있는 값을 state에 동기화하는 메소드 - 컴포넌트를 마운트하거나 props를 변경할 때 호출 render( ) 함수 - 컴포넌트 모양새 정의 - this.props와 this.state에 접근 가능 - 리액트 요소 반환 (아무것도 보여주지 않고싶으면 null값이나 false값 반환) - 절대..

ABOUT JSON : https://www.json.org/ JSON(JavaScript Object Nation) : 경량화된 데이터 교환 포맷 - 사람이 읽고 쓰기 쉬운 동시에, 컴퓨터로 파싱하고 생성하기도 쉬움 - 데이터를 구조화하고 전송하기에 안성맞춤인 포맷 - 연관 배열처럼 이름/값 깡으로 구성되어 있음 - 데이터를 전송할 때 XML보다 효율적 jQuery + JSON = getJSON $.getJSON(url_to_load, function(json) { //data }); - url_to_load : 데이터를 가져올 URL - function : 콜백 함수 실행 - json : 반환된 데이터는 json 객체 안에 들어있음

Ajax(Asynchronous JavaScript and XML) : 비동기 자바스크립트와 확장 마크업 언어 - 사용자를 방해하지 않고 브라우저와 웹 서버가 정해진 형태로 데이터를 주고받을 때 사용 - 데이터 이용량은 줄어들고, 작은 부분만 업데이트하고, 페이지 새로고침을 기다리는 시간도 줄어듬 - 웹 페이지나 어플리케이션에서 필요한 데이터(페이지에서 바꿔야만 하는 부분의 데이터), 서버에서 받아와야하는 데이터만 요청 - 서버와 동적으로 데이터를 주고받을 수 있음 1. jQuery나 JavaScript를 사용해서 서버에 Ajax 요청을 보냄 2. jQuery나 JavaScript로 그 결과를 받고, 파싱해서 페이지의 일부만 업데이트함 Asynchronous(비동기) : 사용자가 페이지에서 하는 일을 방..

속성 window.name : 창의 이름에 접근할 수 있는 객체 속성 window.history : 현재 창에서 열었던 URL을 저장 window.document : 현재 문서의 내용을 가리킴 window.onfocus : 클릭이나 키보드 입력, 기타 사용자가 입력하는 행위를 감지 window.onblur : 현재 창이 포커스를 잃었음을 감지 window.onblur = blurResponse; function blurResponse(){ //함수 정의 } 메소드 window.setTimeout( ) : 함수나 문장을 실행하기 전에 일정 시간 기다리도록 함 setTimeout(myFunction, 4000); window.clearTimeout( ) : 기다리도록 예약한 타이머를 취소할 때 사용 wind..

내장 이펙트 : 요소의 CSS 속성을 변화시키면서 움직이게 만듦 .hide( ) : 선택한 요소의 display 속성을 none으로 바꾸고 레이아웃에서 없앰 .show( ) : 선택한 요소의 display 속성을 바꿔서 보이게 만듦 .toggle( ) : 요소가 숨겨진 상태라면 그 요소를 보이게 만들고, 보이는 상태면 숨김 .fadeIn( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 0에서 100으로 바꿈 .fadeTo( ) : 요소를 지정한 불투명도 퍼센트까지 애니메이트 가능 .fadeOut( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 100에서 0으로 바꿈 요소가 보이지는 않지만 그 자리는 유지됨 .slideUp( ) : DOM이 선택한 요소의 높이를 0으로 바꾼 다..

DOM TREE 이동 메소드 .parent( ) : 해당 요소 위에 있는 요소 선택 $('p').parent() //body .children( ) : 해당 요소 아래에 있는 요소 선택 $('ul').children() //li .prev( ) : 해당 요소 왼쪽에 있는 형제 요소 선택 $('p').prev() //h1 .next( ) : 해동 요소 오른쪽에 있는 형제 요서 선택 $('title').next() //meta 메소드 체인 사용 - 더 높이, 더 낮게, 더 깊이 이동할 때 사용 - 더 효율적으로 이동하고 수정 가능 - 메소드를 추가하너가 여러개를 조합하여 사용 가능 $('a').parent().parent() //body $('title').parent().next(.parent() //ht..

타이포그래피 : 활자 서체의 배열, 즉 글자를 활용한 모든 디자인을 가리키는 말 폰트 : 문자와 숫자, 특수 기호 및 서체와 굵기 등이 완벽하게 구현된 글자 디자인 모음 사용 이유 1. 크기와 색상 조절이 자유로움 2. 읽기 쉬움 - '나눔고딕' 폰트를 많이 사용 구글 웹 폰트 - 자세한 사용방법 : https://cho-coding.tistory.com/171 [CSS] FONT - 글꼴 font-family : 글꼴 지정 - 두 개 이상의 글꼴 이름윽ㄹ 지정할 때에는 쉼표(,)로 구분 body { font-family : "맑은 고딕", 돋움, 굴림 } 위와 같을 때, 맑은 고딕이 없으면 돋움을, 돋움이 없으면 굴림을 적용하.. cho-coding.tistory.com 빅 타이포그래피 : 방문자의 시..

One Page Site 원 페이지 사이트 : 웹 사이트를 한 페이지로 만드는 것 - 한 페이지 안에 모든 내용이 다 들어있기 때문에 따로 메뉴를 선택하지 않아도 화면을 스크롤하면서 내용을 볼 수 있음 - 스크롤을 할 때 마다 새로운 내용을 볼 수 있으므로 사용자의 호기심을 자극할 수 있음 - 예시 : http://thus.co.kr/ https://datacenter.navercorp.com/ko/index.html 데이터센터 ‘각’ 2013년도 전력 사용량 15,933MWh 2014년도 전력 사용량 52,718MWh 2015년도 전력 사용량 72,629MWh 2016년도 전력 사용량 84,317MWh 2017년도 전력 사용량 105,948MWh 2018년도 전력 사용량 139,109MWh 데이터센터 ..

풀 스크린 배경 : 이미지나 동영상을 화면 전체에 가득 채워서 풀 스크린으로 보여주는 기법 - 사이트에 접속하자마자 방문자의 시선을 한눈에 사로잡을 수 있음 - 주로 원 페이지 사이트에서 주로 사용하지만, 첫 화면에만 사용할 수 있음 기대 효과 - 기존 사이트를 그대로 사용하면서도 사이트 방문자들에게 사이트의 주제나 분위기를 단번에 전달함 장점 - 내용이 한 화면씩 바뀌는 경우에 적합 - 바뀌는 화면마다 풀 스크린 배경을 사용하면 더욱 효과적 단점 - 처음 사이트를 로딩하는 데 어느 정도 시간이 걸림 - 사용자들이 많거나 모던 브라우저 사용자들이 많이 접속한다면 풀 스크린 배경 사용을 자제하는것이 좋음 - 화면에 표시할 내용이 많은 경우에도 풀 스크린 배경은 적합하지 않음 풀 스크린 배경 : 이미지 - ..

카드 UI : 담고 있는 정보의 양에 따라 자유롭게 크기가 조절되는 카드 형태 - 사용자들이 콘텐츠에 집중할 수 있도록 초점을 맞춘 디자인 방식 - 단조로운 화면 구성을 개선할 수 있는 디자인 - 보통 한 화면에 여러 개의 카드가 표시되기 때문에 카드에 테두리를 둘러 콘텐츠를 감싸거나 색상을 달리함 - 대표적인 예시 : https://www.pinterest.co.kr/ Pinterest - 핀터레스트 계정을 만들거나 Pinterest에 로그인하세요. 레시피, 집 꾸미기 아이디어, 스타일 관련 아이디어 등 시도해 볼 만한 다른 아이디어를 찾아보세요. www.pinterest.co.kr 기대효과 - 선과 카드 색상, 배경 색상이 확실하게 구분되고 콘텐츠에 신경을 집중할 수 있음 - 사용자가 콘텐츠 정보를 ..

이벤트 : 페이지에서 어떤 일이 일어 났을 때 코드를 실행하는 매커니즘 - 이벤트가 일어났을 때 실행되는 코드가 함수인데, 이를 사용하면 jQuery를 더 효율적으로 만들고 코드 재활용 가능 bind : 이벤트 묶기 - 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됨 - .bind( ) 메소드 사용 1. 단축 메소드 - DOM 요소가 이미 존재 할 때만 사용 가능 $("#myElement").click(function() { alert($(this).text()); } 2. DOM 요소를 새로 만들었을 때처럼, 페이지를 불러온 뒤에 추가된 요소에도 이벤트 리스너 등록 가능 $("#myElement").bind("click", function() { alert($(this).tex..

플랫 디자인 : 웹 요소에서 입체감을 주는 효과들을 제고하고 단순하게 표현하는 기법 - '평평'하고 '납작'한 디자인 - 납작하다 : 깊이를 제거해 입체감을 없앴다는 의미 #깊이 : 그림자와 경사, 그라데이션 등 웹 요소를 입체적으로 보이기 위해 사용하는 여러가지 효과 장점 - 사용자의 시선을 분산시킬 수 있는 복잡한 요소들을 빼고, 중요한 것만 남기기 때문에 콘텐츠에 집중할 수 있음 직관성 - 디자인적인 부연 설명을 하지 않아도 사용자가 직관적으로 이해해서 클릭하거나 탭할 수 있도록 유도 - 화려하게 보이기 위한 그림자나 입체적으로 보이기 위한 깊이, 반사 효과 등의 추가적은 효과들은 배제 - 단순히 사각 형태로 삽입하거나 텍스트와 이미지를 같이 겹쳐놓는 오버레이 형태로 배치에 시각적인 효과를 줌 - ..

유동형 패턴 - 모바일 화면을 제외한 대부분의 화면 사이트의 레이아웃을 그대로 유지하면서 브라우저 창 너비에 따라 콘텐트의 크기만 조절 - 아주 큰 화면에서는 콘텐츠 영역의 넓이를 일정하게 유지하기 위해 좌우여백을 남겨둠 - 모바일 화면에서는 콘텐츠가 수직으로 쌓여 표시 - 레이아웃이 똑같이 유지되면서 화면 안의 이미지나 동영상 등의 콘텐츠 크기가 달라짐 칼럼 드롭 패턴 - 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴 - 화면 넓이가 좁아지면 칼럼들이 아래로 떨어지도록 구성 - 모바일 기기 화면 크기가 되면 모든 칼럼이 하나씩 수직으로 배치 - 화면 넓이를 줄였을 때, 화면을 벗어나는 콘텐츠 칼럼이 라래로 옮겨지면서 레이아웃이 바뀜 레이아웃 이동 패턴 - 칼럼 드롭 패턴과 유사하게 화면 크기에 ..