DEV - WORLD IS WIDE

textContent, innerText, innerHTML 간단 비교(javascript)

요소의 텍스트를 다루는 textContent, innerText, innerHTML의 차이점과 유의 사항

요소에 접근해 데이터를 설정하거나 가져올 때 사용하는 프로퍼티인 textContent, innerText, innerHTML에 대해 알아보겠습니다.

<div id=1 onClick=(check(event))>click
    <div id=2>child1</div>
    <div id=3>child2
      <div id=4>grandchild</div>
    </div>
</div>

onClick 이벤트를 통해 div요소의 텍스트에 접근할 때 각각의 프로퍼티를 사용한 결과는 다음과 같습니다.

1. 실행 결과

textContent

const check = (event) => {
    console.log(event.target.textContent); 
}

innerText

const check = (event) => {
    console.log(event.target.innerText); 
}

innerHTML

const check = (event) => {
    console.log(event.target.innerHTML); 
}

textContent

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은 별도로 문제 방지를 위한 설정이 없다면 사용을 권장하지 않습니다.

구현도 중요하지만 상황에 맞고 적절한 방식을 통해 구현한 시스템에 문제가 생기지 않도록 사전에 방지하는 것이 더 중요한 것 같습니다. 적절한 방식을 선택하는 것은 결국 각 기능의 이해를 통해서야 비로소 가능한 부분이므로 필요할 때 정리를 해두면 도움이 될 것 같습니다.

A Simple Explanation of Currying Functions(Javascript)

currying function’s usages, pros and cons

‘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.

So we can use currying as below.

function setAppell(appell){
    return function(name) {
       console.log(appell + name);   
    }
}

const setName = setAppell('Mr.');
setName('Right');  // Mr.Right
setAppell('Mr.')('Baker'); //Mr.Baker

//ES6 화살표 함수
const setAppell = appell => name => console.log(appell + name);

const setName = setAppell('Miss.');
setName('Dior');  // Miss.Dior

If we use currying function, we can also pass event and value together.

const setNumber = (num) => (event) => {
     console.log(event.target.id+':'+num);
}

<div onClick="setNumber(2)(event)" id='myNum'>
  click
</div>

// myNum:2

What is Pros.

? Pros
– Reusable
– Reduced amount of code
– Readability

And Cons.

? Cons
– Deeply nested functions cause memory and speed issue. So Currying

Mathematical Explanations of Currying

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.

리액트가 타입스크립트로 생성이 안될 때(CRA + typescript not working)

create-react-app <project> –template typescript

리액트+타입스크립트로 새 프로젝트를 생성하고자 create-react-app –template typescript를 실행해도 App.tsx가 아닌 App.js로 생성되는 경우가 있습니다.

cra-template-typescript 패키지가 없어 발생하는 문제일 가능성이 있으므로 해당 패키지를 설치해주고 실행해 봅니다.

npm install cra-template-typescript -g

설치 후 다시 create-react-app <projectName> –template typescript를 실행한 결과입니다.

또 다른 원인 중 하나는 캐쉬에 남아있는 이전 버전으로 설치가 되어 적용이 안될 가능성도 있으므로 npm uninstall -g create-react-app를 통해 삭제 후 재설치를 진행해보는 것도 좋을 것 같습니다.

CSS, 알면 쉬운 display 속성(inline, flex, …others)

inline, block, inline-block, flex, inline-flex, grid, inline-grid, none

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 : 표시하지 않음(공간을 차지하지 않음)

inline과 block 요소

줄바꿈 없이 태그를 표시하는 요소를 inline 요소, 태그마다 줄바꿈이 되는 요소를 block 요소라고 합니다.

대표적인 inline 요소는 <span>, <a> 등이 있으며, block 요소는 <div>,<p>,<h1>,<h2> 등이 있습니다.

먼저 아무 속성도 설정하지 않은 div를 확인해 보겠습니다.

.setContainer{
  background-color:black;
}

.setOne{
  background-color: red;
}

.setTwo{
  background-color: orange;
  width:95%;
}

.setThree{
  background-color: green;
  width:90%;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

div의 default 설정은 width 100%입니다.

기본 설정을 확인하기 위해 setTwo와 setThree에 width를 설정한 결과입니다.

먼저 display의 inline 속성을 확인해보죠.

1. inline

inline

위 속성은 말 그대로 요소를 일렬로 늘어선 방식으로 표시하며 줄바꿈을 하지 않습니다.

각 요소마다 설정하며 width는 자동으로 크기에 맞게 변형됩니다.

.setContainer{
  background-color:black;
  display:inline;
}
.setOne{
  background-color: red;
  display:inline;
}
.setTwo{
  background-color: orange;
  display:inline;
}
.setThree{
  background-color: green;
  display:inline;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

inline은 위와 같이 문자열처럼 일렬로 늘어선 상태로 표시됩니다.

2. block

block

block은 inline 요소를 block으로 표시합니다.

block 요소 div 대신 inline 요소 span을 사용하면 다음과 같은데요.

위에서 div에 display:inline을 설정한 것과 같은 모양입니다.

그러므로 span에 display:block을 설정하면 반대로 div를 사용한 것과 같은 결과가 나오는 것을 알 수 있습니다.

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:block;
}
.setTwo{
  background-color: orange;
  display:block;
}
.setThree{
  background-color: green;
  display:block;
}

<div class='setContainer'>
  <span class='setOne'>red</span>
  <span class='setTwo'>org</span>
  <span class='setThree'>grn</span>
</div>

block 속성은 inline 요소를 block 요소처럼 표현하는 것을 알 수 있습니다.

3. inline-block

inline-block

그렇다면 inline-block은 언제 사용할까요?

display:block이 필요하지만 표시는 inline으로 표시를 하고 싶은 상황입니다.

그러면 그게 그냥 span의 default 아닌가라고 생각할 수도 있지만 span에는 width, height 등 속성이 적용되지 않기 때문에 block으로 설정을 해야 합니다.

위의 코드에서 첫 번째 요소에 width:300px, height:200px를 설정하면 다음 그림과 같은 모습이 됩니다.

위 요소를 inline으로 설정하기 위해 inline-block를 사용할 수 있습니다.

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:inline-block;
  width:300px;
  height:200px;
}
.setTwo{
  background-color: orange;
  display:inline-block;
}
.setThree{
  background-color: green;
  display:inline-block;
}

<div class='setContainer'>
  <span class='setOne'>red</span>
  <span class='setTwo'>org</span>
  <span class='setThree'>grn</span>
</div>

div를 사용해 위와 같이 나타내려면 어떻게 해야 할까요?

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:inline-block;
  width:300px;
  height:200px;
}
.setTwo{
  background-color: orange;
  display:inline;
}
.setThree{
  background-color: green;
display:inline;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

위와 같이 사용하면 됩니다.

만약 위와 같이 사각형 사이 사이에 빈공간이 들어가는 경우가 있다면 <div> 태그 사이의 띄워쓰기나 줄바꿈을 확인해봐야 합니다.

보기에는 안좋지만 다음과 같이 태그 사이를 모두 붙여쓰면 공백이 발생하는 것을 제거할 수 있습니다.

<div class='setContainer'><div class='setOne'>red</div><div class='setTwo'>org</div><div class='setThree'>grn</div></div>

4. flex

flex

flex는 새로운 속성 중 하나로 부모 요소에서만 설정을 합니다.

display:flex를 설정하면 모든 자식 요소에 display:inline-block을 설정한 것과 같은 효과를 줍니다.

따라서 모든 자식 요소는 display를 설정할 필요 없이 width, height 등의 속성이 사용 가능합니다.

.setContainer{
  background-color:black;
  display:flex;  
}
.setOne{
  background-color: red;
}
.setTwo{
  background-color: orange;
  width:200px;
}
.setThree{
  background-color: green;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

개별 요소에 모두 display를 설정할 필요 없이 부모 요소에서만 편하게 설정이 가능합니다.

만약 자식 요소를 가운데 정렬하고 싶으면 부모 요소에서 justify-content:center;를 사용하면 됩니다.

5. inline-flex

inline-flex

flex는 이미 inline-block의 기능을 갖고 있는데 그럼 inline-flex의 기능 무엇일까요?

바로 inline 특징 중 하나인 자동 크기 조절입니다.

inline-flex는 자식 요소를 합친 크기 만큼만 크기를 설정하므로 width는 100%가 아닌 자식 크기의 합입니다.

flex의 결과와 비교해보면 알 수 있듯이 부모 요소를 의미하는 블랙이 공간을 차지하고 있지 않습니다.

6. grid, inline-grid

grid, inline-grid

이 grid는 무엇일까요?

그리드는 flex처럼 가로나 세로 한 방향으로만 레이아웃을 설정하는 것이 아니라 가로, 세로 두 방향 모두 설정할 수 있는 속성입니다.

grid 역시 부모 요소에서 설정을 하며 자식 요소를 block으로 표현합니다.

다양한 속성을 통해 레이아웃을 구성하는데 효과적이지만 내용이 많아 다른 포스팅을 통해 좀 더 알아봐야 할 필요성이 있을 것 같습니다.

.setContainer{
  background-color:black;
  display:grid;  
  grid-template-columns: 100px 100px 100px;
}
.setOne{
  background-color: red;
}
.setTwo{
  background-color: orange;
}
.setThree{
  background-color: green;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

inline-grid 역시 inline-flex 속성과 마찬가지로 width를 자식 요소에 맞게 조절하는 기능을 합니다.

7. none

none

none은 해당 요소를 표시하지 않으며 공간도 차지하지 않는 방식입니다.

.setContainer{
  background-color:black;
}

.setOne{
  background-color: red;
  display:none;
}

.setTwo{
  background-color: orange;
}

.setThree{
  background-color: green;
}


<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

이렇게 없는 놈 취급을 합니다.

이와 반대되는 속성이 visibility로 이는 공간은 차지하되 표시만 하지 않는 속성입니다.

visibility, display 사용 관련 포스트

display:none을 visibility:hidden으로 변경한 결과입니다.

있는데 없는 척을 합니다.

물론 visibility도 공간만 차지할 뿐 할 수 있는 일은 없습니다.

CSS의 기본이지만 모든 기능을 다 이해하고 사용하기까지는 어느 정도의 시간과 경험이 필요한 것 같습니다. 무작정 외우기보다는 사용하면서 답답함이 쌓였을 떄 한번씩 소화제 느낌으로 설명을 삼켜주면 조금 더 와닿는 설명이 되지 않나 싶습니다..🧔

템플릿 리터럴(template literal)과 쉬운 응용(feat.`)

`로 시작해서 `로 끝나는 템플릿 리터럴

템플릿 리터럴(template literal)은 ES6부터 도입된 기능으로 문자열 다루기에 특화된 기능인데요.

` (backtick, grave accent)

템플릿 리터럴은 ` 기호로 시작해 ` 기호로 끝나며, 문자열과 변수를 함께 전달하거나 태그를 편리하게 사용할 수 있습니다.

또한 다음과 같은 방식도 사용도 가능한데요.

const printData = (text) => {
    console.log(text[0]); // 'Hello everyone!'
}

printData`Hello everyone!`;

함수에 템플릿 리터럴을 전달할 수도 있습니다.

이를 태그드 템플릿(tagged template)이라고 하는데요.

호출된 함수는 템플릿 리터널 내 문자열 조각이나 표현식 등을 매개변수로 받습니다.

styled-components에서 사용되는 방식도 태그드 템플릿입니다.

1. 템플릿 리터럴(template literal)

템플릿 리터럴은 시작과 끝에 반드시 `(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 등 이스케이프를 사용하지 않고도 입력한대로 출력할 수 있습니다.

템플릿 리터럴은 쉽게 응용이 가능하니 태그드 템플릿에 대해 알아보겠습니다.

2. 태그드 템플릿(tagged template)

const TextBox = styled.div`
  display: inline-block;
  color: gray;
  margin: 0 auto;
`;

const StyledInput = styled.input`
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid gray;
    outline: none;
    width: 100%;
`;

위와 같이 styled-components에서 태그드 템플릿이 밥 먹듯이 사용됩니다.

템플릿 리터럴로 함수를 호출하면 어떻게 사용할까요?

함수를 호출하면 매개변수로 문자열과 변수가 전달됩니다.

const name = 'clint';
const age = '92';
const city = 'LA';

const showString = (text, ...args) => {
    console.log(text);
    console.log(args);
    console.log(text[2]);
    console.log(args[2]);
}

showString`He is ${name} and ${age}. From ${city}`;

전달된 매개변수는 텍스트와 ${ }에 넣은 변수이며, 각각 확인할 수 있습니다.

텍스트와 변수에 접근하려면 인덱스를 사용하면 됩니다.

텍스트의 경우 ${ }이 들어간 부분에서 끊어주므로 ‘He is’, ‘ and ‘, ‘. From ‘, ”이렇게 네 부분으로 나뉘어지며, 순서대로 0, 1, 2, 3의 인덱스를 갖습니다.

태그드 템플릿을 사용하는 이유는 문자열을 원하는 형식으로 재가공하여 사용할 수 있는 장점이 있기 때문입니다.

styled-components를 무턱대고 사용하는 것보다 구조를 알고 사용하면 더 도움이 될 것 같아 태그드 리터럴에 대해 알아보았습니다. 템플릿 리터럴은 이제 너무 유용하고 편리한 기능이므로 꼭 알아두어야 할 기능 중 하나인 것 같습니다.

CSS transition, 작동 원리 이해하기(왜 작동을 안할까?)

transition의 작동원리와 transition 대체할 수 있는 방법

transition은 애니메이션 효과를 주는 CSS입니다.

transition 하나만으로도 투박한 느낌을 지우고 부드러운 느낌을 줄 수 있는데요.

메뉴가 부드럽게 열리고 닫히거나 화면에 fade-in 효과 등을 줄 수 있습니다.

CSS의 대표적인 애니메이션 처리는 transition와 animation이 있는데요.

transition은 변경이 발생하는 순간 작동하고, animation은 transition보다 더 자유롭고 다양하게 사용이 가능한 친구입니다.

그럼 transition을 작성하는 코드부터 확인해 보겠습니다.

1. transition 사용하기

.setBox{
  background-color:pink;
  width:200px;
  height:200px;
  transition:all 1000ms linear 500ms;
}

위와 같은 방식으로 사용하며, 한 줄 표기의 의미는 다음과 같습니다.

transition: property duration timing delay;

property : color, background-color, border, position, all 등의 속성

duration : 완료까지 걸리는 시간. ms(밀리초) 또는 s(초)로 설정

timing : linear(동일), ease(느림->빠름->느림), ease-in(느림->빠름), ease-out(빠름->느림)

delay : 딜레이 시간(ms 또는 s로 설정)

물론 property나 delay 는 생략도 가능합니다.

이를 풀어 쓰면 다음과 같이 작성할 수 있습니다.

transition-property : property
transition-duration : duration
transition-timing-function : timing
transition-delay: delay

transition을 사용해 마우스를 올리면(hover) 박스가 부드럽게 커졌다가 줄어드는 코드를 확인해 보겠습니다.

.setBox{
  background-color:pink;
  width:100px;
  height:50px;
  transition:all 1000ms linear 500ms;
}

.setBox:hover{
  background-color:gold;
  width:200px;
  height:100px;
  transition:all 300ms ease;
}

<div class='setBox'></div>

박스가 커질 때는 .setBox:hover{}의 transition 설정에 따라 300ms, 줄어들 때는 .setBox{}의 transition 설정에 따라 1000ms동안 움직입니다.

그럼 이제는 요소 숨기기&표시하기 기능을 확인해 보겠습니다.

.setBox{
  background-color:gray;
  color:white;
  width:100px;
  height:50px;
  text-align:center;
  line-height:50px;
}
.showMenu{
  visibility:hidden;
  height:150px;
  width:100px;
  background-color:lightgray;
  opacity:0;
  color:black;
  border-radius:5px;
  transition:linear 500ms;
}
.setBox:hover .showMenu{
  visibility:visible;
  transition:linear 500ms;
  opacity:1;
}

<div class='setBox'>MENU
    <div class='showMenu'>
        <div class='menu'>
          메뉴 A
        </div>
        <div class='menu'>
          메뉴 B
        </div>
        <div class='menu'>
          메뉴 C
        </div>
    </div>
</div>

위 코드의 실행 결과는 아래와 같습니다.

마우스를 올리면 숨겨둔 div를 표시하거나 숨기면서 transition이 작동하는 것을 볼 수 있습니다.

위 코드에서 visibility가 아닌 display를 사용하면 결과는 어떨까요?

display를 사용하면 transition이 작동하지 않는 것을 볼 수 있습니다.

이유는 바로 display와 visiblility의 작동 방식에 차이가 있습니다.

transition은 위에서 이야기한 것처럼 변경이 발생하는 순간 작동합니다.

예를 들어 A 모양에서 B 모양으로 변경될 때 작동을 하는데요.

visibility는 공간은 그대로 두고 설정에 따라 요소를 숨기거나 나타내므로 A에서 B로 변경을 적용할 수 있습니다.

다음 그림과 같은 느낌입니다.

2. transition 작동하지 않는 이유

그렇다면 display가 작동하지 않는 이유도 추측할 수 있습니다.

display:none은 요소의 표시 뿐만 아니라 표소가 있는 공간도 비워버리는 설정입니다.

따라서 ‘A모양 -> B모양’으로의 변형이 아니라 ‘없음 -> B모양’ 이 되므로 transition이 작동하지 않는 것입니다.

그러므로 transition은 ‘모양의 변형‘만 기억하면 됩니다.

그렇다면 같은 효과를 내는 animation은 어떻게 사용할까요?

코드만 봐도 이해하기 쉬운 구조이므로 코드로 확인해 보겠습니다.

.setBox:hover .showMenu{
  visibility:visible;
  animation:setMotion 3s;
}
@keyframes setMotion{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

CSS3는 아주 다재다능한 친구라 기존에는 jquery를 사용해 복잡하게 구현할 수 있던 애니메이션 효과들을 이제는 한 행의 코드만으로 해결할 수 있게 되면서 CSS3는 조금만 배워 둬도 아주 유용하게 사용할 수 있는 친구가 되었네요. CSS에 조금 더 관심을 갖고 포스팅을 늘려 가야겠습니다.

does not have a commit checked out 에러(Git)

git add 시 발생하는 에러를 해결하자

git add 명령어 실행 시 does not have a commit checked out 에러가 발생하는 경우가 있습니다.

이는 레포지토리에 있는 폴더 내 .git 파일이 존재하기 때문이며 이 파일을 모두 제거해주면 문제 없이 git add 실행이 가능합니다.

파일이 숨겨져 있기 때문에 간단하게 폴더나 탐색기를 열고 해당 폴더 내 숨겨져 있는 .git 파일을 찾아 모두 삭제해주고 다시 git add를 실행하면 됩니다.

위와 같이 폴더에서 ‘숨긴 항목’을 체크하여 표시한 다음 .git으로 된 폴더를 제거해주면 됩니다.

git add를 하려는 폴더로 이동
숨긴 항목 해제 후 .git 폴더 삭제
git add <파일> 실행

간단하게 에러가 해결된 것을 볼 수 있습니다.

기록의 힘을 믿고 간단한 것이라도 기록하는 습관을 기르도록 노력 중입니다!

target으로 부모 요소, 자식 요소 접근하기(자바스크립트,target)

event와 target으로 부모 요소와 자식 요소에 접근하는 방법

자바스크립트는 보통 이벤트와 target을 통해 요소에 접근합니다.

그리고 <div>와 같은 요소를 중첩해서 사용하다 보면 이벤트 발생 시 부모 요소 또는 자식 요소에 접근이 필요한 경우가 있습니다.

예를 들면 다음과 같이 id=2인 div 요소의 이벤트가 발생했을 때 부모 div 요소 id=1에 접근하고 싶은 경우가 있습니다.

const check = (event) => {
    console.log(event.target.id);
}

<body>
  <div id=1>    
        <div id=2 onClick=(check(event))>click
            <div id=3></div>
            <div id=4></div>
        </div>
  </div>
</body>

그렇다면 어떻게 접근을 해야 할까요?

1. 이벤트를 통해 부모 요소 속성 접근하기

현재 이벤트가 발생한 요소를 감싸고 있는 부모 요소에 접근하기 위해서는 target과 parentElement를 사용하여 접근할 수 있습니다.

부모 요소의 id 속성에 접근하는 코드는 다음과 같습니다.

const check = (event) => {
    console.log(event.target.parentElement.id);    // 1
}

<body>
  <div id=1>    
        <div id=2 onClick=(check(event))>click
            <div id=3></div>
            <div id=4></div>
        </div>
  </div>
</body>

실행해보면 콘솔에 1을 프린트합니다.

만약 id가 아닌 다른 속성에 접근하고 싶은 경우에는 id 대신 해당 속성명을 그대로 사용하면 됩니다.

구조를 확인하고 싶은 경우에는 console.log(event.target.parentElement)을 입력하여 확인할 수 있습니다.

console.log(event.target.parentElement)결과

현재 요소를 기점으로 접근을 진행하므로 target을 사용하며, 이벤트가 기점이 되는 경우 currentTarget를 사용합니다.

관련 포스트 : target, currentTarget 차이가 뭘까?

2. 이벤트를 통해 자식 요소 속성 접근하기

위 코드에서 보면 <div id=2>의 자식 요소는 <div id=3>과 <div id=4>입니다.

자식 요소는 target과 children을 통해 접근하는데요.

부모 요소는 하나밖에 없지만 자식 요소는 여럿 존재할 수 있습니다.

따라서 자식 요소는 인덱스를 통해 접근해야 하며, 리액트 코드를 통해 자식 요소의 구조를 살펴보겠습니다.

const accessChildren = () => {

const check = (e) => {
    console.log(e.target.children)
}

    return (
        <div id={1}>    
            <div id={2} onClick={check}>click
                <div id={3}>I'm a first child</div>
                <div id={4}></div>
            </div>
        </div>
    )
}

export default accessChildren;

콘솔에 찍히는 children의 구조는 다음과 같이 두 개의 object를 갖습니다.

따라서 첫 번째 자식 요소의 id에 접근하기 위해서는 다음과 같이 사용하면 됩니다.

const check = (e) => {
    console.log(typeof(e.target.children[0].id)) // 3
}

그렇다면 첫 번째 자식 요소의 텍스트인 I’m a first child는 어떻게 접근할까요?

간단하게 위 children 구조를 열어서 살펴보면 답이 나옵니다.

textContent를 사용해서 접근할 수 있습니다. (innerHTML은 XSS에 취약)

const check = (e) => {
    console.log(e.target.children[0].textContent) //I'm a first child
}

특정 요소가 속한 속성 전체(예를 들면 e.target)를 콘솔에 출력하면 다양한 하위 속성을 확인할 수 있으므로 원하는 속성을 찾거나 에러를 해결할 때 유용하게 사용할 수 있습니다.

빅오 표기법(Big O notation)을 알아보자

알고리즘의 효율성을 나타내는 빅오 표기법

빅오(Big O) 표기법은 점근적 표기법(Asymptotic Notation)의 하나로 Landau symbol이라고 부르기도 하며, 알고리즘의 효율성(시간 복잡도)를 나타낼 때 사용합니다.

그렇다면 점근적 표기법이란 무엇일까?

점근적 표기법은 중요하지 않은 상수와 계수를 제거하여 알고리즘의 복잡도를 단순화하여 나타낼 때 사용하는 표기법입니다.

점근적 표기법은 빅 세타(Big-θ), 빅 오(Big-O), 빅 오메가(Big-Ω)가 있으며 대략적인 의미는 다음과 같습니다.

빅 오(Big-O)	점근적 상한에 대한 표기	ex) O(n²)
빅 세타(Big-θ)	상한과 하한의 평균에 대한 표기	ex) θ(n²)
빅 오메가(Big-Ω)	점근적 하한에 대한 표기	ex) Ω(n²)

빅 세타와 빅 오메가는 원하는 효율성을 정확하게 나타내지 못하는 관계로 빅 오 표기법이 주로 사용됩니다.

알고리즘의 대략적인 실행 시간만 알면 되므로 빅 오 표기법은 차수가 가장 높은 항만 사용해 수행 시간의 상한(최악의 경우)을 나타냅니다.

예를 들어 f(n)=3n²+2n+1일 때, 빅 오 표기법을 사용하면 O(n²)로 나타낼 수 있습니다.

입력값이 작을 때는 문제가 없지만 입력값이 무한대에 가까워지는 경우에는 기하 급수적으로 복잡도가 증가하며 주요 증가율은 다음과 같습니다.

시간 복잡도	n이 2배가 될 경우
O(1)	변함 X
O(log n)	약간 증가
O(n)	2배 증가
O(n log n)	2배보다 약간 증가
O(n²)	4배 증가
O(n³)	8배 증가
O(n^k)	2^k배 증가
O(kⁿ)	kⁿ배 증가
O(n!)	nⁿ배 증가

증가율을 그래프로 보면 다음과 같습니다.

그래프 기울기가 완만할수록 효율이 좋은 것을 나타내며 기울기가 가파를수록 효율성이 나쁜 것을 의미합니다.

출처 : https://en.wikipedia.org/wiki/Big_O_notation

위 그래프를 통해 상수->로그->선형->다항->지수->팩토리얼의 순으로 효율이 떨어지고 있는 것을 알 수 있습니다.

ジャバスクリプト、文字列操作(JAVASCRIPT & STRING)

Javascript文字列のメソッド : slice(), substring(), includes(), startsWith(), trim(), replace()…….

フロントエンド(React, Vue, Angular)もバックエンド(Nodejs)もジャバスクリプト(Javascript)が使われる時代になって、だんだんジャバスクリプトの文法が重要となりますね。

その中、文字列(String)関連のメソッドはよく使うのに、あまり覚えてはいないやつですね。😂

文字列関連のメソッドは一度覚えておくと自動に覚えられるぐらい使う頻度が高いので最初だけ頑張ればですね！

では、頻繁に使うメソッドの中slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test()をご紹介します。

slice(start index, (end index))

sliceメソッドはインデックスをパラメータで渡し、必要な文字列を抽出します。

スタートインデックス(start index)と終了インデックス(end index、省略可)を渡し、終了インデックスを省略する場合は文字列の最後までになります。

パラメータが０の場合は頭から一番目、-1は逆で後ろから一番目の意味になります。

const myWord = 'primavera';

myWord.slice(0,5);   // 'prima'
myWord.slice(-4);    // 'vera'
myWord.slice(3);     // 'mavera'

myWord.slice(3,1);    // '' -> slice()はスタートが終了より大きいと空を返す

substring(start index, (end index))

substringメソッドもsliceと同じくインデックスを渡し、文字列を抽出します。

基本的な操作は同様ですがsubstringはスタートが終了より大きいの場合自動に位置を交換してメソッドを実施します。

また、substringに負数を入れると０と認識します。

例えば(3, -1)を渡すと(3, 0)として認識します。それに(3, 0)はスタートが大きいので自動交換し、(0, 3)を実施します。

メソッド名が似たようなsubstrは’位置’と’文字数’をパラメータに渡すメソッドです。

const myWord = 'invierno';

myWord.substring(3);     // 'ierno'
myWord.substring(1,3);   // 'nv'

myWord.substring(3,1);   // 'nv' -> 自動にスタートと終了位置交換

myWord.substring(3,-1);  // 'inv' -> 負数は0, 自動位置交換

myWord.substring(-4);    // 'invierno' -> 負数は0, スタート(0)から最後まで

myWord.substr(1,3);      // 'nvi' -> スタート1から三つ

includes(文字列, (index))

includesは文字列の中、指定した文字列が含まれているかをチェックします。

パラメータは文字列(必須)とインデックス(省略可)を渡し、返すのはtrue或はfalseです。

このメソッドは指定文字はもちろん、配列の中で空の値を確認するためには使えます。

const myWord = 'alegria';

myWord.includes('le');       // true
myWord.includes('i');        // true
myWord.includes('rio');      // false

const myArray = ['dream','','king'];
myArray.includes('');       // true   -> myArray[1]が空なのでtrue
myArray.includes('dream');  // true   -> myArray[0]と一致
myArray.includes('drea');   // false  -> 要素は完全一致する場合のみtrue

startsWith(文字列, (index)), endsWith(文字列, (index))

startsWithメソッドも文字列が含まれているかをチェックします。

文字列のみ渡すと0インデックスから始まる指定文字の存在を確認し、BOOLEANを返します。

endsWithは指定文字で終わることをチェックします。

const mySentence = 'cafe con leche';

mySentence.startsWith('cafe');     // true
mySentence.startsWith('fe');       // false
mySentence.startsWith('fe',2);     // true

mySentence.endsWith('eche');      // true

trim()

trimは文字列両断の空白を除くメソッドです。

文字列変換の過程で入られた空白またはタイプミスで入った文字列は文字比較の時falseを返し、エラーになりがちです。

なのでtrimで空白を事前に除き、エラーを予防することができます。

文字列両断の空白、タップ、改行(/n)文字を除くことができますが、両断ではなく文字列中に入っているのは作動しません。

const mySentence = '  la casa de papel   ';

mySentence.trim();        // 'la casa de papel'

const mySentence = ' el amor \n';

mySentence.trim();       // 'el amor'

replace(指定文字, 変換文字)

replaceは文字列から指定した文字を探して変換文字に変換します。

文字列の中に指定文字が一つ以上存在するとき、最初に見当たるのだけが変更対象になります。

例えば ‘my_name_is_Ron’からアンダーバーを全部空白にするためreplace(‘_’,’ ‘)にしても結果は’my name_is_Ron’になります。

なので、文字列の中で存在する全ても指定文字を変換したい時は正規表現を使うと行けます。

const mySentence = 'my name is:Ron';

mySentence.replace(':',' ');        //'my name is Ron'

const mySentence = 'my_name_is_Ron';

mySentence.replace('_',' ');      // 'my name_is_Ron'

//正規表現ですべての文字を変換
mySentence.replace(/_/g, ' ');    // 'my name is Ron'

indexOf(指定文字, (start index))

indexOfは指定文字の位置を返します。

このメソッドは指定文字の前または後で文字列を切り取るとき有用なものです。

たとえ、’Z001-03’から後ろの’03’だけを抽出したいとき、indexOfで’-‘文字を探し、返しのindex +1位置から最後までカットすると’03’を切り取ることができます。

もし文字列の中指定文字が一つ以上の場合、頭から探し始め最初に見当たる文字位置を返します。

でもパラメータにindexを渡すと指定された位置から指定文字を探します。

注意点はstart indexを渡しても返す値は全体の文字列から何番目であるという数字を返します。

後ろから検索するのはlastIndexOfで、後ろから最初の指定文字の位置を返します。

この時も返す値は頭から何番目であるという数字です。

指定文字がなければ-1を返します。

const mySentence = 'Z001-03';

mySentence.indexOf('-');     // 4

mySentence.substring(mySentence.indexOf('-')+1);    // '03'

mySentence.indexOf('D');    // -1

const mySentence = 'Z001-03-02';

mySentence.indexOf('-');    // 4
mySentence.indexOf('-', 5);   // 7

mySentence.lastIndexOf('-')   // 7

test(文字列)

testは一般的に正規表現と一緒に使い、渡す文字列と比較し有効性を確認します。

パスワード、アルファベット、特殊文字、生年月日などの形式検査に使えます。

const mySentence = /a/;
const myWord = 'baby';

mySentence.test(myWord);   // true

/\d/.test('cookie');       // false \dは数字を意味(正規表現)
/\d/.test('cookie1');      // true

上の例以外にも山ほどメソッドが多いし、また新しく作られるメソッドもたくさんありますね。

また必要な機能のメソッドがあれば確認していきましょ！

あざーす！