[취업준비일지] - 4

1.MERN STACK은 MongoDB, Express, React, Node.js를 묶어 칭하는 것으로
원래는 MEAN(Angular)가 인기있었지만 React가 전반적으로 강점을 보이고 있기 때문에
Angular의 위치를 대체하게 되었다.


2.React의 장점은 아래와 같은 점들이 있다.
-UX가 뛰어남
-HTML 관리가 편함
-모바일 제작이 가능
-Router 관리가 편함


3.각 언어들의 버전도 중요한 부분이라는 사실을 잊고 있었는데
강의 내용 중 언급한 최신버전의 LTS를 강조한 부분을 듣고 다시 떠올렸다.
다행히도 강의보다 더 최신의 LTS를 사용하고 있지만 만약 언급이 없었고 
이 부분에서 문제가 생겼다면 왜 문제가 생겼는지 파악하지 못했을 것 같다.

type,경로, server에서 거의 대부분의 문제가 나올 것이라고 생각하고 있었고
실제로도 아직까지는 버전 때문에 문제가 생긴 적은 없지만
누군가 문제가 생겼을 때 그 사람의 문제가 버전때문일 수 있음을 인지하고 있자


4.React에서 style, css를 적용하고 싶을 때는 {{}}를 사용해야 하는데

jsx에서는 기본적으로  js의 사용을 {}로 하기 때문에 구별하기 위함으로 보인다.

기존 프로젝트에서는 개별 적용을 하지 않고 Styled Components를 사용했기 때문에 잊고 있던 부분이다.


5.handler를 사용하지 않고 onClick에서 바로 state를 바꿀 경우 
onClick={() => {setXXX(!XXX)}} 형태로 function으로 감싸줘야한다.


6.실시간으로 onChange에서 값을 변경할 때는 

event.target.value로 내용을 처리했는데 currentTarget도 유사한 기능을 하는 것 같다.
검색해보니 div를 기준으로 할 때 element를 target으로 하는지 아니면 textNode를 target으로 하는지의 차이를 가지고 있다.

더 자세한 snippet 으로 작성된 예시를 보니 

current target은 div로 중첩된 경우 해당하는 외곽을 current target으로 인식하고 

target은 현재 있는 가장 가까운 태그를 나타낸다.

아무래도 current target 또한 포함되는 최상단까지 거슬러 올라가는 것 같은 모습을 보이고 있는데 bubbling과 뭔가 유사한 것 같은 느낌도 들고 어디에 쓸지 당장은 모르겠지만
알아두면 언젠가 사용할지도 모르겠다.


8.MongoDB에서 모든 IP에 접속을 허용할 경우(배포를 위해) 0.0.0.0/0을 입력하면 된다.


9.도중 install에 --save를 사용하는 모습이 있는데 이는 package.json에 있는 

dependency에 모듈을 추가한다는 의미인데 

왜 이 부분에 대해서 몰랐을까 확인해보니
npm5 부터는 기본적으로 적용되기 때문에 적용할 필요가 없다고 한다.
생각해보면 axios등 여러가지 모듈을 적용할 때 dependency에 들어간 모습을 볼 수 있었고

이를 통해 백엔드분들이 npm i, npm start를 통해 바로 클라이언트를 실행했던 것을 떠올릴 수 있었다.



10.인코딩을 통해 전송 효율을 높일 수 있는데 
압축해서 보내는 콘텐트 코딩(gzip, compress, deflate, identity 등)과 
분해해서 보내는 청크 전송 코딩이 있다.
서버 측에서 특정 방식으로 인코딩(압축/분해)을 진행하면 클라이언트는
형태에 맞는 디코딩을 통해 데이터를 복원해 사용할 수 있다.

11.퀵 정렬은 이름처럼 빠르기는 하지만 timsort보다 막 더 좋고 그런것은 아니다.
그렇기 때문에 JS 내장 Array.sort를 애용하자
최선 O(NlogN), 최악 O(N^2)의 시간복잡도를 가지고 있지만

이미 게산된 피벗들은 대상에서 제외되기 때문에 같은 시간복잡도임에도 불구하고 훨씬 빠르다는 장점이 있으며 

앞에서 다룬 bubble, selection, insertion 정렬처럼 추가적 메모리 공간을 요구하지는 않는다.
 

12.margin값에 0, auto를 주는 경우 중앙으로 배치하겠다는 것으로
auto가 하는 것은 좌우여백의 사이즈를 같게 하겠다는 의미이기 때문에 

margin이 없는 상태로 들어가 감싸고 있는 container등의 내부 위치 중앙에 들어간다.

사실 0이 중요한 포인트가 아니고 auto가 여백의 사이즈를 같게 조절한다는 점이 중요한 것 같다.


13.SSAS의 이용 자체는 별것 아니었는데 내부에 CSS를 적용하는 중 사용한 scrollbar 또는 resize를 막는 등의 기능 자체를 처음 봤다.
해당 키워드를 기억했다가 사용할 일이 있을 때 적용하며 세세한 부분도 신경써야겠다.

 

(1).백준 2490 윷놀이는 백도가 없는 윷의 0/1로 표기된 앞 뒤의 정보를 보고 도,개,걸,윷,모의 상태를 판단하는 문제였다. filter를 통해 1의 갯수를 파악해 string의 해당 index를 출력하게 만들었다.

let input = `0 1 0 1
1 1 1 0
0 0 1 1`.split('\n')
let result = []
for(let i = 0 ; i < input.length ; i++){
    result.push('DCBAE'[input[i].split(' ').filter(el => el === '1').length])
}

console.log(result.join('\n'))