컨플릭트를두려워하지말자

키보드를 타이핑 하는 도중 문자들 중간에 입력을 하면 뒤에 쓴 글자가 지워지는 현상이 일어날 때가 있다.

이렇게 글씨가 지워지는 이유는 현재 겹쳐쓰기 모드가 적용되어있기 때문이다

이럴 때 해결방법은

키보드의 insert키를 누르면 해결된다. 

키보드에 따라 window키 + insert키 또는 fn키 + insert키를 함께 눌러야 해결되는 경우도 있다 

https://school.programmers.co.kr/learn/courses/30/lessons/42746#qna

function solution(numbers) {
   return numbers.filter(n=>n===0).length === numbers.length ? "0" :
     numbers.sort((a,b)=>{
        const order1 = `${b}${a}`
        const order2 = `${a}${b}`
        return order1.localeCompare(order2);
    }).join('');

}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

.localeCompere() 를 사용해 문자열의 순서를 비교해서 해결했다. 

테스트케이스 11번만 통과를 못해서 질문창을 읽어보니

11번은 numbers 값으로 0만 들어있는 (e.g [0,0,0,0,0,0,0]) 케이스 라는 것이었다 ㅂㄷㅂㄷ.... 

그래서 배열안에 들어있는 0의개수가 배열의 길이와 동일하면 문자열 0을 리턴하게끔 수정했더니 통과 할 수 있었다. 

https://school.programmers.co.kr/learn/courses/30/lessons/42748

function solution(array, commands) {
    var answer = [];

    for(i of commands){
        let larray = [...array];
        let trim = larray.slice(i[0]-1,i[1]).sort((a,b)=>a-b);
        var num = trim[i[2]-1];
        answer.push(num);
    }

    return answer;
}

slice와 sort 같은 자바스크립트 메서드를 쓸 줄 안다면 쉽게 풀 수 있는 문제

**splice는 원본 배열을 변경하는 메서드로 이 문제에서는 사용하면 안 됨! 

https://school.programmers.co.kr/learn/courses/30/lessons/1845

function solution(nums) {
    var max = nums.length/2;
    var ponkemon = new Map();
    for(i of nums){
        if(!ponkemon.has(i))
            ponkemon.set(i,1);
        else 
            ponkemon.set(i,ponkemon.get(i)+1);
    }
    if(ponkemon.size<max)return ponkemon.size;
    else return max;
}

해시맵으로 각 폰켓몬별 마릿수를 구하고, 

폰켓몬 / 2 값보다 폰켓몬 종류값이 큰 경우 폰켓몬 / 2 값을, 

아닐 경우 폰켓몬의 종류값을 .size로 구해서 리턴하면 된다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

자바스크립트의 해시맵을 사용할 줄 안다면 쉽게 풀 수 있는 문제다! 

 
[ 테스트 코드란? ]
 
컴포넌트 안에 들어가는 기능(onClick 이벤트 등 핸들러)과 전체적인 동작이 개발자의 의도대로 동작하는지 확인하는 코드 . jest는 Meta에서 개발한 js 테스트 프레임워크로 리액트와의 호환성이 뛰어나 리액트 프로젝트에서 많이 사용된다! 
리액트 외에 Vue.js, Angular에서도 사용 가능하다 
 
 
 
테스트 코드를 작성하는데 도움을 받은 문서 
 
리액트에서의 테스트 방안 한글문서 
 
https://ko.legacy.reactjs.org/docs/testing-recipes.html#mocking-modules

 
 
getting started - jest 
 
 
https://jestjs.io/docs/getting-started

 
 
 
jest 설치 방법(with Typescript)
 
npm이나 yarn을 통해 jest와 관련 패키지를 설치한다.

npm install --save-dev jest @testing-library/jest-dom @testing-library/react @types/jest
npm install @testing-library/user-event

 
패키지에 대한 설명 
 
jest : 테스트 프레임워크 
@testing-library/jest-dom : dom 관련 테스트 메쳐 추가제공  *테스트 메쳐: 테스팅프레임워크에서 사용되는 함수. 
@testing-library/react : 리액트 컴포는트를 테스트하기 위한 유틸리티 제공 
@types/jest : 타입스크립트에서 jest를 사용할때 필요한 타입 제공 
@testing-library/user-event  사용자이벤트를 시뮬레이션하여 테스트할수있게 함 . 
 
 
테스트 코드를 작성 후 
콘솔에서 npm test 를 입력하면 테스트코드가 돌아간다. 
 
 
jest의 매쳐(matcher)를 사용해서 테스트를 진행해보자 
 
 
describe : 테스트케이스들을 그룹화 하는 함수 
 
it or test : 개별 테스트 케이스를 작성하는 함수. 둘 다 동일한 기능. describe 안에서 여러개를 작성 할 수도 있고, describe 없이 하나만 작성하는 것도 가능. 그러나 afterEach, beforeEach 등의 기능을 쓰기위해서는 describe안에 정의해야만 한다. 
 
afterEach , beforeEach: 테스트 실행 전,후에 실행될 동작을 정의하는 함수. 테스트케이스별로 각각 동작한다. 
 
afterAll , beforeAll: describe 그룹 내의 모든 테스트 가 동작하기 전,후로 한 번씩만 실행될 동작을 정의하는 함수. 
 
expect : 테스트의 결과를 검증할때 사용. 특정 함수가 예상대로 동작하는지 확인하는 함수.
e.g) expect(어떤value).toBe(어쩌고handler); => 어떤 value가 true일때 어쩌고 핸들러가 동작해야 한다. 
 
 
테스트코드의 파일명은 
(파일명).test.ts 등으로 작성하는 것이 일반적이다. 
 
왜나하면, jest가 테스트 파일로 자동 인식하는 파일명 패턴이 정해져있기 때문이다! 
 
패턴 종류
.test.js .test.jsx .test.ts .test.tsx
.spec.js .spec.jsx .spec.ts .spec.tsx
 
 
이제 위에 소개한 메쳐들이 들어간 테스크 코드를 jest 공식문서에 나오는 코드를 사용해서 작성해보자 
 
 
파일명 예시 : mathHook.test.ts 

describe("덧셈 뺄셈 테스트 코드", ()=>{


beforeEach(()=>{
//각각의 테스트 코드 실행 전에 실행할 내용을 작성 
//e.g) 변수 초기화 등 
});

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});


it('four minus two is two', () => {
  expect(4 - 2).toBe(2);
});


afterEach(()=>{
//각각의 테스트 코드 실행 후에 실행할 내용을 작성 
//e.g) 리소스 해제 등 메모리 할당 해제 
});

})

 
 
- describe를 통해 덧셈 테스트코드, 뺄셈 테스트코드를 하나의 그룹으로 묶고 
- it or test를 사용해 각각의 테스트코드를 작성한다. 
- expect를 통해 기대되는 값을 확인한다. 
 
 
 
 
앞으로 더 추가할 예정.. 
 
 
 
 

마이크로프론트엔드란

각각의 독립적인 팀이 FE모듈을 개발하고, 이를 조합해서 하나의 사용자경험을 제공하는 방식. 

Webpack이 필수적임 ~.~ 

Webpack5 부터 포함되는 Module Federation 플러그인을 사용해서 리모트 모듈을 정의하고, 이를 호스트모듈에서 찾아 쓰도록 한다! 

장점: 

각 팀이 독립적으로 개발하고 배포할 수 있다 (각자의 깃 레포지토리에 업로드 하는 것이 가능함!)

이로인해 다른 모듈과의 의존성 충돌을 줄일 수 있다! 

각 팀이 선호하는 라이브러리나 프레임워크를 사용하는 것이 가능하다 (호스트에서는 리액트,리모트A에선 Angular,B에선 Vue를 사용하는것이 가능)

단점: 

중복  로드가 발생할 수 있음

라이브러리 중복-> 공유 라이브러리(module federation)도구를 사용하여 문제 해결 

네임 스페이스 중복->모듈 번들러(Webpack, Rollup)를 사용해 각 모듈을 독립적으로 번들링 or Web Component사용 or 자바스크림트 IIFE 즉시 호출 함수 표현식을 사용하여 전역변수의 범위를 제한. 

스타일 중복 -> CSS-IN-JS 라이브러리(styled등)를 사용

개발시에는 

리모트 모듈들이 모두 실행된 상태에서 호스트 모듈을 실행해야 정상적으로 작동하고 , 

실제 서버 배포시에는 

각각의 url에 리모트와 호스트가 모두 배포된 상태여야 정상적으로 동작한다. 

공부하면서 알게 된 내용을 조금씩 더 추가할 예정..

1. HTTPS에대해서 

인터넷에서 브라우저와 서버간에 안전하게 데이터를 전송하기위한 프로토콜. HTTP에 SSL/TLS 프로토콜을 결합하여 데이터를 암호화하고 전송 중 데이터의 무결성과 기밀성을 보장한다. 세션 키를 통해 데이터를 암호화하고 복호화 함. 

(** HTTP와의 차이점에대해 묻는 질문이 아님을 기억하기!) 

장점: 보안성, 무결성, 인증,SEO향상. 

도입방법: SSL/TLS인증서 구매 및 설치, 웹 서버 설정. 

SSL/TLS핸드셰이크란? 클라이언트(브라우저)와 서버 간에 안전한 연결을 설정하는 초기단계. 

2. React에서 State와 Props의 차이는? 

props는 부모가 자식컴포넌트에게 전달하는 읽기 전용 데이터. state는 컴포넌트 내부데서 관리되는 동적 데이터. 

state는 상태 변경이 되고, 변경될 때마다 리랜더링이 일어나지만 props는 변경이 불가능함. 

3.Flexbox와 Grid의 차이? (css관련. 웹 퍼블리셔 예상 질문에도 나올듯)

flexbox(display:flex, flex-direction, flex-wrap,justify-content,align-items)는 1차원,

grid(display:grid, grid-column-gap, grid-row-gap,grid-gap, 행과 열 배치가 가능)는 2차원 레이아웃 시스템. 

4. React의 상태관리를 위한 방법들 

-useState등 자체 상태관리 속성 사용

-Context Api로 전역역적으로 관리

-Redux, Mobx,Recoil 등 전역 상태 라이브러리 사용 

5. async/await에 대해 (비동기 함수에 대해)

javascript에서 비동기 함수를 간단하게 작성할 수 있는 기능.

async : 함수를 비동기 함수로 선언. 프로미스를 반환하고 예외 발생시 예외처리(try/catch) 가능 

await : 비동기 함수 내에서만 사용 가능. 프로미스가 해결될 때까지 실행을 중지하고, 해결이 되면 결과 반환. promise의 than 역할.  

만약에 여러 비동기작업을 병렬로 실행해서 모든 작업이 될때까지 기다리고싶으면 Promise.all을 사용해야함. 

6. React 클래스형과 함수형의 차이

클래스에서는 this를 사용하고, 메서드 오버라이드를 통해 작업을 수행함

함수형에선 저 둘을 사용하지 않고 useState 훅을 사용하여 상태를 관리함. 화살표 함수를 사용. 

함수형이 좀 더 코드 이해가 쉽다 

7. SPA(single page application)의 장단점

장점: 초기 로딩 후에는 페이지간의 전환이 빠르고 서버 요청이 줄어들어 사용자경험이 향상된다. 

클라이언트측 라우팅으로 상태관리가 편리하다. (대시보드나 분석 툴, 커머스 사이트, 소셜네트워크 서비스 ,채팅 등 빠른 페이지 전환과 상호작용이 필요한 서비스에 용이, 블로그 등 부드러운 네비게이션을 필요로 하는 사이트에도 좋음)

단점: 초기 로딩 속도가 느림. SEO(검색 엔진 최적화)최적화가 어렵다. 큰 애플리케이션의 경우 메모리사용량이 많아질 수 있음. 

8. SSR의 장단점 

장점 : SEO최적화(서버에서 완전한 html을 제공해서 크롤러가 쉽게 콘텐츠를 인덱싱함), 초기 로딩속도가 빠르다, 저사양 디바이스를 지원. 정적 사이트(블로그,문서 사이트 등 주기적으로 업데이트되는)나 미리보기 기능 생성에 유리함. 초기에 많은데이터를 가져와야 하는 경우 미리 페이지를 생성하므로 유리. (next.js-react , nuxt.js-vue)

단점: 서버 부하 증가, 복잡한 설정 및 유지보수,모든 요청에대해 서버에서 html을 생성하므로 네트워크 지연 발생가능, 실시간 데이터 업데이트가 어려움.

9. Reac 16.8버전 이후의 주요변화 

훅 도입으로 클래스에서만 가능했던 상태관리와 생명주기 메소드를 함수형에서도 사용 가능하게 됨.

useState,useEffect,useContext(컴포넌트 트리 전체에 데이터를 쉽게 전달, props drilling 방지 ), useCallback(의존성 배열이 변경되지 않는 한 동일한 함수를 반환함, 컴포넌트가 불필요하게 다시 랜더링된는 것을 방지.),useMemo,useReducer 등.. 

이로 인해 코드가 더 간결해짐. 

10. 브라우저의 랜더링 과정에 대해 

브라우저가 html,css,javascript 파일을 가져와 랜더링함. html 파싱을 통해 DOM트리 생성, css파싱을 통해 cssom 트리 생성. javascript는 DOM 및 CSSOM에 접근하여 조작. 

11. HTTP 프로토콜의 주요 메소드에 대해 

GET,POST,PUT,DELETE 에대한 설명 ...

12. CSS모듈과 SCSS의 차이에 대해 

css는 클래스 이름이 로컬스코프로 제한되어 컴포넌트 간 스타일 충돌을 방지함. scss는 sass의 확장으로 변수,중첩,믹스인 기능을 제공하여 더 복잡하고 유지보수 가능한 스타일을 작성가능케 함. css는 컴포넌트 단위로 관리하는데, scss는 복잡한 스타일을 작성하는데 유리 .

    - scss 에서 믹스인과 함수의 차이점 

           믹스인은 css속성을 재사용할 수 있게 해줌. @include를 통해 사용. 함수는 값을 반환하는 로직을 포함할 수 있어              주로 계산된 값을 반환하는데 사용됨.

13. TCP와 UDP의 차이 

TCP: 신뢰성 보장. 정확하고 순서에 맞는 데이터 전달을 위해 여러가지 확인 절차를 거침. ex)페이지 로딩,파일 전송 

UDP: 연속성(실시간 서비스) 보장. 데이터를 보내기만하고 확인 절차는 x. ex) 게임,스트리밍,화상통화 

14. type과 interface의 차이

interface는 객체에만 사용 가능. type은 객체가 아니여도 모든 유형의 타입에 정의 가능. 

interface는 상속 가능!  type도 &를 통해 비슷하게 사용 가능하지만 성능적으로 떨어짐. 

그리고 여러번 선언 되어도 나중에 선언한 것으로 대체되거나 오류가 발생하지않고, 모두 병합된다!  

앞으로 더 추가예정... 

https://emotion.sh/docs/typescript

이모션 공식 문서대로 

tsconfig.json 파일 안에 

{
.
.
.
.

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}

이 부분을 추가하자!

css-in-js 스타일 라이브러리중에 emotion이 코드도 깔끔하고 수정이 쉬워서 자주 사용중인데

프로젝트에 typescript를 도입하니 여기저기 에러가 튀어나온다 ...

번들러랑 바벨 다루는게 더 익숙해져야겠지 ~.~