text/plain으로 파싱하여 모든 요소를 반환합니다. <script>, <style> 요소를 포함해 CSS를 사용해 숨겨진 요소도 함께 반환하며 요소의 원시 텍스트를 사용하므로 성능이 좋습니다.
innerText
text/plain으로 파싱하여 렌더링 후의 요소를 반환합니다. <script>, <style> 요소는 반환하지 않으며 숨겨진 요소도 반환하지 않습니다. 자식 노드를 모두 제거하고 하나의 텍스트로 반환되며 성능은 보통입니다.
innerHTML
text/html로 파싱하여 요소의 html, xml 전체를 반환합니다. html을 다루므로 보안 이슈 중 하나인 XSS(Cross Site Scripting)에 취약합니다. HTML5에서는 innerHTML에 삽입된 <script> 태그는 실행되지 않도록 변경되었지만 <img>등 다른 태그를 통해 접근하면 여전히 취약점이 남습니다. 따라서 innerHTML은 별도로 문제 방지를 위한 설정이 없다면 사용을 권장하지 않습니다.
구현도 중요하지만 상황에 맞고 적절한 방식을 통해 구현한 시스템에 문제가 생기지 않도록 사전에 방지하는 것이 더 중요한 것 같습니다. 적절한 방식을 선택하는 것은 결국 각 기능의 이해를 통해서야 비로소 가능한 부분이므로 필요할 때 정리를 해두면 도움이 될 것 같습니다.
‘Currying’ has the same spelling as Curry that we love.
But ‘currying’ is derived from the name Haskell Brooks Curry who was known as a mathematician and a logician.
Currying is a technique that converting multiple arguments function into a single argument functions sequence.
Like this.
func(a, b, c) -> f(a)(b)(c)
Three arguments function is converted into three functions with single argument each.
f(a) returns value and (b) takes this value as a parameter. (c) also do the same thing. Get’s (b)‘s return value and return.
//non-curried
function plusFunc(a, b, c){
console.log(a + b + c);
}
plusFunc(1, 2, 3); // 6
//curried
function plusFunc(a){
return function(b){
return function(c){
console.log(a + b + c);
}
}
}
plusFunc(1)(2)(4); // 7
Then what are the differences between Curried and Non-curried?
non-curried : Function will be immediately executed even though parameters are not passed. ? Function definition : func(a, b, c) ? Function execution : func(a) ? Execution result : func(a, undefined, undefined)
curried : Execution will be suspended if parameters are not fully passed. ? Function definition : func(a, b, c) ? Function execution : func(a) ? Execution result : func(a) waits for b parameter.
Most of the functions can be implemented without using currying. but you can expect a good effect if you use currying to improve productivity through reusability or readability.
display는 요소를 보여주고 숨기거나 위치를 설정하기 위한 옵션으로, display만 잘 알아도 레이아웃의 많은 부분을 해결할 수 있습니다.
이번 포스팅에서 display의 속성인 inline, flex, inline-flex, block, inline-block, grid, inline-grid, none의 구현을 통해 각각의 표시 방식을 알아보도록 하겠습니다.
알아보기 편하도록 배경은 블랙, 요소는 각각 레드, 오렌지, 그린으로 표현하겠습니다.
inline : inline으로 표시(width는 요소 크기) block : block으로 표시 inline-block : inline + block으로 표시 flex : 자식 요소를 모두 inline-block으로 설정 inline-flex : inline + flex(전체 width는 자식 width의 합) grid : flex처럼 한 방향이 아닌 가로, 세로로 설정 가능한 레이아웃 inline-grid : inline + grid(전체 width는 자식 width의 합) none : 표시하지 않음(공간을 차지하지 않음)
템플릿 리터럴은 시작과 끝에 반드시 `(backtick)을 붙여야 하며, ‘(홑따옴표), “(쌍따옴표)와 반드시 구분해야 합니다.
const name = 'clint Eastwood';
const age = '92';
const city = 'San Francisco';
const occupation = 'director';
// 표현식
console.log('His name is '+name+ '\n' + 'and '+age+'.');
// 템플릿 리터럴
console.log(`He was born in ${city}
and he is a ${occupation}`);
템플릿 리터럴에서 ${ }를 사용하면 블록 내 변수 또는 함수에 접근이 가능하며, \n 등 이스케이프를 사용하지 않고도 입력한대로 출력할 수 있습니다.
CSS3는 아주 다재다능한 친구라 기존에는 jquery를 사용해 복잡하게 구현할 수 있던 애니메이션 효과들을 이제는 한 행의 코드만으로 해결할 수 있게 되면서 CSS3는 조금만 배워 둬도 아주 유용하게 사용할 수 있는 친구가 되었네요. CSS에 조금 더 관심을 갖고 포스팅을 늘려 가야겠습니다.
