2. Snap Scroll

    <h3>Scroll down</h3>
    <div id="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>

#container {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  overflow: scroll;
  **/* Add this to the parent */
  scroll-snap-type: y mandatory;**
}
.item {
  /* Add this to the child */
  scroll-snap-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 18px;
  align-items: center;
  **justify-content: center;
  border: 1px solid red;**
}

3. is Pseudo Selector

header button,
nav button,
form button {
    background-color: red;
}

에서 :is 를 사용한다면

:is(header,nav,form) button {
    background-color: red;
}

만약 요소가 header거나, nav거나, form 이면
button을 선택하고 배경색은 red로 변경한다

4. flex box gap

flex container에 gap property를 지정해주면 됨 (예전엔 margin을 사용했음.)

div{
    display: flex;
    gap: 10px 5px;
    /*10px은 row-gap , 5px은 column-gap*/
}

5. aspect ratio

웹사이트에서 이미지나 영상을 정해진 비율을 유지할때 유용.

igm{
    aspect-ratio : 16/9;
}

6. position: sticky

원하는 요소에 position: sticky를 지정해주고 정의된 높이가 있는 컨테이너 안에 요소를 넣어주면 됨.

set : 중복을 허용하지 않는 자료구조

const array = ["🐱","🐶",🐰",🦊","🐱","🦊"];
//중복을 제거한 새로운 배열을 만들때
// array는 중복을 허용하는 자료구조 이므로
// set (중복을 허용하지 않는 자료구조)을 이용한다.
const newarray = [...new Set(array)];
console.log(newarray);

출처:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

leftExpr ?? rightExpr

null, undefined ?? rightExpr 실행

✦ Default Parameter is only for undefined!

Logical Or operator ||

leftExpr || rightExpr

falsy || rightExpr 실행

for ... of

for of / for in 차이를 아라보자..! 🤣

반복가능한 객체 Array, Map, Set, String , arguments객체등을 포함 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

const array1 = ['a','b','c'];
for (const element of array1) {
    console.log(element);
}

for ... in

키가 지정된 모든 열거 가능한 속성에 대해 반복함.

const object = {a:1, b:2, c:3};
for(const property in object){
    console.log(property);
}

//a
//b
//c
//출력

이제 외워...!

Reducer함수 만들기

State와 정의한 Action Type으로 Reducer함수를 만들면 된다. 이때 Reducer는 꼭 순수 함수로 만들어야 한다. 아래 4가지 조건을 만족하면 된다.

1. Reducer함수는 이전상태와 액션객체를 파라미터로 받는다.
2. 파라미터 값 외에는 의존하면 안된다.
3. 이전 상태는 절대 건들이지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
4. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야한다.

function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE : 
      return {
          number: state.number +1
      };
    case DECREASE : 
      return {
          number: state.number -1 
      };
    default : 
      return state;
  }

}
export default counter;

Action type에 따라 state를 변형한 새로운 state를 반환해주면 된다. 절대로 기존 state를 수정해서는 안됨.

createAction메소드를 사용해 action타입을 반환하는 함수를 만들어준다.

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
//만약 파라미터를 전달해줘야 한다면 payload를 사용하면 됨.
export const changeInput = createAction(CHANGE_INPUT, input => input);

코드가 길어질때 redux-actions라이브러리를 사용해 switch-case에서 벗어 날 수 있다.

const counter = handleActions (
  {
      [INCREASE] : (state,action) => (
      {
          number:state.number +1
      }
    ),
    [DECREASE] : (state,action)=>(
      {
        number: state.number -1
      }
    ),
    initialState

  }

);

createAction에서 payload를 넣어줬다면?

const counter = handleActions (
  {
      [INCREASE] : (state,action) => (
      {
          number:state.number +1
      }
    ),
    [DECREASE] : (state,action)=>(
      {
        number: state.number -1
      }
    ),

    [CHANGE_INPUT] : (state,action) => (
      {
          ...state,
        input : action.payload
      }
    )

    initialState

  }

);

위와 같이 작성하면 payload에 어떤 값을 넣었는지 헷갈리므로

handleActions (
  {
      [CHANGE_INPUT] : (state,{payload:input})=>(
      {
          ...state,
        input: input
      }
    )
  },
  initialState

);

이런식으로 작성하면 가독성이 좋아진다.

ReduxStore에는 하나의 Reducer만 연결되어야 하므로 reducer를 통합해야한다. redux는 combineReducers 라는 함수를 사용한다.

import {combineReducers} from 'redux';
import counter from './counter';

const rootReducer = combineReducers({
    counter
});

export default rootReducer;

combineReducers메소드 안에 객체 형태로 우리가 만든 Reducer를 넣어주면 됨.

const rootReducer = combineReducers ({
    counter1,
      counter2,
      counter3
});

Hook을 이용해 Redux이용하기

useSelector사용

useSelector를 이용하면 connect 함수 없이 redux를 조회할 수 있다.

const result = useSelector(상태 선택 함수);

import {useSelector} from 'react-redux';
const CounterContainer = ()=>{
    const counterNum = useSelector(state=> state.counter.number)
    return (
        <Counter number = {counterNume}/>
    );
};

useDispatch를 사용해서 action dispatch하기

const dispatch = useDispatch();

를 이용해 dispatch를 얻은 후에 modules에서 얻은 함수를 넣어준다.

import {useSelector} from 'react-redux';
const CounterContainer = ()=>{
    const counterNum = useSelector(state=> state.counter.number);
    const dispatch = useDispatch();
    return (
        <Counter 
              number = {counterNume}
            onIncrease = {()=>dispatch(increase())}
            onDecrease = {()}
        />
    );
};

이렇게 작성하면 숫자가 바뀔때마다 컴포넌트가 리렌더링 됨 -> 매번 함수를 새로 만드므로 useCallback으로 감싸준다.

import React, {useCallback} from 'react';
const CounterContainer = () => {
    const CounterNum = useSelector(state=>state.counter.number);
      const dispatch = useDispatch();
      const onIncrease = useCallback(()=>dispatch(increase(),[dispatch]));
      const onDecrease = useCallback(()=>dispatch(decrease(),[dispatch]));

  return (
      <Counter
        number = {counterNum}
        onIncrese = {onIncrease}
        onDerease = {onDecrease}
    />
  );

};

1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.

2. 읽기전용 상태이다.

리액트에서 state업데이트를 할때는-> setState 를 사용한다 배열을 업데이트 할때는 -> 배열자체에 push하지 않고, concat 함수를 사용해 기존의 배열을 수정하지 않고, 새로운 배열을 만들어 교체해 업데이트 한다. 리덕스에서 불변성을 유지하는 이유는 내부적으로 데이터가 변경되는것을 감지 하기 위해 shallow equality를 검사하기 때문이다.

3. 변화를 일으키는 함수 (===리듀서)는 순수한 함수여야 한다.

리듀서는 이전 상태, 액션객체를 파라미터로 받는다. 이전의 상태는 절대 건들이지 않는다. 변화를 일으킨 새로운 상태 객체를 반환한다. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환한다.

만약 실행할때마다 다른 결과값이 나타야 한다면(순수하지 않은 작업) 리덕스 미들웨어를 사용한다.

Axios는?

• Node.js,브라우저를 위한 Promise API를 활용하는 HTTP비동기 통신 library
• 백엔드-프론트엔드 통신을 위한 library

HTTP:https://developer.mozilla.org/ko/docs/Web/HTTP

1. Axios다운로드

yarn add axios

2. HTTP Methods

클라이언트가 웹서버에게 사용자에게 요청하는 방법

GET : 입력한 url에 자원 요청.

axios.get(url,[,config])

POST : 새로운 리소스 생성 (create)할 때 사용.

    axios.post('url주소',{
                data객체
               },[,config]
              )

DELETE : REST API에서 db에 저장된 내용을 삭제.

    axios.delete(url,[,config]);

PUT : REST API에서 db에 저장된 내용을 갱신.

    axios.put(url[,data[,config]])

3. Axios 서버 통신

Memoization

: 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술

useMemo, useCallback, React.memo 는 Memoization을 기반으로 작동한다.

React.memo : component의 결과값을 memoized함.

일반적으로 함수를 직접 감싸서 사용하기도 한다.

const Welcome = ({name}) => {

    return <h1> Hello {name} </h1>;

};

export default React.memo(Welcome);

Welcome의 결과를 Memoization해서 이후 props가 변경될때까지 현재 memoized된 내용을 그대로 사용해 리렌더링을 막는다.

React.memo가 props를 비교할때 얕은 비교를 진행한다. 얕은 비교 : 원시값일때 -> 같은값을 갖는지 확인/ 객체,배열 일때 -> 같은 참조값,같은주소값을 갖는지 확인.

React.memo메서드는 React.memo(component,compFunc)이 기본형태이다. compFunc는 수동으로 비교방식을 수정할 수 있다.

React.memo는 언제 사용할까?

무조건적인 사용은 지양한다. 최적화를 위한 연산이 불필요한 경우에는 비용만 발생시킨다.

React.memo는 아래의 상황에서 사용을 권장한다.

1. Pure Functional Component에서
2. Rendering이 자주 일어날 경우
3. re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우
4. UI element의 양이 많은 컴포넌트의 경우

일반적으로 불필요한 Render가 많이 발생하는 곳에서 사용해라

React.memo를 사용하지 말아야할 경우

class기반의 컴포넌트를 래핑하는것은 적절하지 않다. 이 경우 memoizatioin을 해야한다면 PureComponent를 확장해 사용하거나 shouldComponentUpdate()를 사용하길 권장.

useMemo : 함수의 결과값을 memoized함.

: 메모리제이션된 값을 반환한다

useMemo는 함수 호출 이후의 return값이 memoized된다. 두번째 파라미터인 배열의 요소가 변경될때 마다 첫번째 파라미터의 callback함수를 다시 생성하는 방식이다.

useCallback : 함수를 memoized함.

:메모리제이션된 함수를 반환한다

const handleChange = useCallback(
    (e) => {setNum(e.target.value)
   }, [] 
) ;

useCallback을 통해 memoized된 함수는 eventhandler로 사용되며 두번째 인자인 [] <- 배열인 요소가 변경될때마다 새로운 함수가 생성된다.

useCallback - useMemo와 비슷한 hook

• useMemo : 특정 결과값을 재사용할때 사용
• useCallback : 특정 함수를 새로 만들지 않고 재사용할때 사용.

useCallback을 사용해 함수 재사용

출처:https://react.vlpt.us/basic/18-useCallback.html 을 읽고 정리함.

const onCreate = ()=>{
    const user = {

    }
};

const onRemove = id => {

};

const onToggle = id =>{

};

위의 함수들은 컴포넌트가 리렌더링 될떄마다 새로 만들어진다. 한번 만든 함수를 재사용하는 것은 중요하다.

const onChange = useCallback(
    e=>{

    }
);

const onCreate = useCallback(()=>{

});

const onRemove = useCallback (

);

** 함수 안에서 사용하는 상태 props가 있다면 꼭, deps 배열안에 포함시켜야한다.**

useCallback은 useMemo를 기반으로 만들어짐

const onToggle = useMemo(
    ()=> ()=> { /* */},[users]
);

useCallback은 컴포넌트 렌더링 최적화 작업을 해줘야 성능이 최적화됨 -> 어떤 컴포넌트가 렌더링 되는지 확인하기 위해서 -> React DevTools 를 사용한다. -> 'highlight Updates'

basic

• cd : change directory cd/경로명
• cd .. : 상위디렉토리로 보냄
• pwd : 현재 경로 표시
• ls : 조건 검색어 ls 검색어 검색어를 포함한 모든 파일 표시
• cp : 원본 복사 cp web /bin web폴더를 /bin에 복사.
• mv : 원본 이동 mv web /bin webv폴더를 /bin에 이동.
• mkdir : 폴더 생성 mkdir web web폴더를 현재 경로에 생성.
• rmdir : 폴더 삭제 mkdir web web폴더를 현재 경로에서 삭제.

ls option

• -a : 모든 파일 표시
• -t : 시간 순 정렬

cp option

• -a : 파일 , dir 뿐만 아닌 권한정보 등 속성을 모두 복사

참고:https://kim-daeyong.github.io/2019-01-04-%EB%A7%A5-%ED%84%B0%EB%AF%B8%EB%84%90-%EB%AA%85%EB%A0%B9%EC%96%B4/

https://www.slideshare.net/guruguru/ss-14241987

1.브라우저 렌더링 원리

1-1.사용자에게 보이는 순서.

2. 호이스팅이란?

3. 클로저(Clouser)란?

4. GET,POST의 차이점과 사용용도

🖤🖤🖤🖤

1. this란?

1-1. this용법

2. 브라우저 저장소들의 차이점 (localStorage, sessionStorage,Cookie)

3. RestfulAPI란?

3-1. RestfulAPI의 GET,PUT,PATCH,DELETE등 설명

4. javaScript의 특징

4-1. js를 멀티스레드처럼 사용하는 이유는?

4-2. 비동기적언어를 동기적으로 사용하는 방법은?

5.Event Loop란?

6. Event Bubbling에 대해 설명하시오

6-1. event bubbling 은 child->parent 인데 반대로 구현하는 방법은?

6-2. event bubbling을 막기 위한 방법

6-3. event bubbling을 활용하기 위한 방법

7. TypeScript란?

7-1. TypeScript특징에 대해서 설명

8. contextAPI란?

🖤🖤🖤

9. Html이 렌더링중 js가 실행되면 렌더링이 멈추는 이유는?

10. SPA와 SSR(서버사이드렌더링)의 차이점은?

11. SASS,SCSS,StyledComponent비교

12. js성능 최적화를 위한 방법

13. Vue와 React의 차이점은?

14. ES6의 arrow function을 사용할때 이유는?

15. var, let ,const 차이점

16. CORS란?

16-1. CORS를 해결하는 방법은?

🖤

17. SEO란?

18. RDBMS란?

19. mySql의 종류

1. 브라우저의 렌더링 과정

2. http와 https의 차이

3. oop에 대한 설명

4. 함수형 프로그래밍

5. 웹프로토콜이란?

6. Asynchronous란?

6-1. AJAX란?

6-2. Axios library란?

7. Promise란?

7-1. Callback이란?

7-2. promise와 callback의 차이와 장단점 설명

7-3. Async와 Await이란? promise와 비교한다면?

8.javaScript타입

8-1. 원시타입은?

8-2. Execution Context에 대해 설명

9. 프로토타입이란?

10. js의 This란?

10-1. 일반함수의 This와 화살표함수의 This의 차이는?

11. Call,Apply,Bind함수에 대한 설명

12. ES6를 지원하지 않는 브라우저에서 사용하는것은?

12-1. Babel이란?

13. var,let,const를 scope의 개념에서 설명

14. Class란? Prototype,function의 es5로 class를 구현할 수 있는가?

15. React란?

15-1. React의 상태관리는 어떻게 하는가?

15-2. Redux에 대한 설명

15-3. context-API에 대해 설명

15-4. 클래스형과 함수형의 차이

15-5. lifeCycle Method에 대해 설명

16. 라이브러리와 프레임워크에 대해 설명

17. 메소드 체이닝이란?

17-1. 메소드 체이닝의 장단점

18. RESTful API란?

18-1. RESTful API의 장단점, 통신방법

19. CORS란?

19-1. CORS를 해결하는 방법

20. ESlint란?

21. Prettier란?

22. Webpack이란?

23. npm 과 yarn의 차이점

24. 배포를 해본 경험

25. 적응형과 반응형의 차이점

26. package.json의 역할

26-1. dependencies와 devDependencies의 차이는?

27. 프로세스와 스레드의 정의와 차이점

28. csr정의, 과정

29. ssr정의, 과정

30. Call by value vs Call by ref

31. null vs undefined의 차이

32. inline vs inline block

33. virtual DOM이란?-장단점

원인

• 배포 후 접속하면 index.html이 브라우저의 캐시 상태이기 때문에 배포 바로 이전의 index.html이다. 그 안에 번들링한 js파일을 불러오는 부분이 배포 전 번들링 파일을 임베드 하기 때문

출처에 아주 자세하게 해결방법이 나와있다!🥳

출처:http://lab.naminsik.com/4011

출처: https://stackoverflow.com/questions/57423244/manifest-line-1-column-1-syntax-error-on-chrome-browser

1. Class에서 Function으로 바꾸세요

From

class MyComponent extends React.Component{
    //...
}

to

function MyComponent(props) {
    //...
}

2. render 메소드를 지우세요

render 메소드를 지우고 return을 포함한 모든것들을 유지시키세요 그리고 function Component의 마지막에 두세요

From

render() {
    return (<p>Hello, world</p>);
}

to

function MyComponent(props){
    return (<p>Hello, world</p>);
}//end of function

3. 모든 메소드를 function으로 변환시키세요.

Class 메소드들은 function 안에서 전혀 작동하지 않습니다. 그러니까 모두 functions로 변환시키세요!

From

class MyComponent extends React.Component{
  onClickHandler(e){
      //...
  }
}

to

function MyComponent{
    const onClickHandler=(e)=> {
        //...
    }
}

4. this로 참조한것들을 지우세요

this들은 더이상 function 안에서 유용하지 않을거에요. 렌더와 function들 안에서 this들을 모두 지우세요.

*From *

class MyComponent(props) extends React.Component{
    //...
  mySpecialFunction(){
      console.log('you clicked the button!');
  }

  onClickHandler(e){
      this.mySpecialFunction();
  }

  render(){
      return(
        <div>
              <p> Hello, {this.props.name}</p>
              <button onClick={this.onClickHandler}> Click! </button>
          </div>
    )
  }
}

To

function MyComponent(props){
    //...
  const mySpectialFunction = () => {
      console.log('you clicked the button!');
  }

  const onClickHandler=(e) => {
      mySpecialFunction();
  }

  return (
        <div>
              <p> Hello, {props.name}</p>
              <button onClick={onClickHandler}> Click! </button>
          </div>
  );

}

5. constructor를 지우세요!

constructor를 지우는것은 약간 까다롭기 때문에 더 상세하게 설명할게요.

1. useState

Instead of

constructor(props){
  super(props);
  //Set Initial state
  this.state = {
      counter:0,
    name: ""
  }
}

*useState Hook을 대신 사용하세요! *

function MyComponent(props) {
    const [counter,setCounter] = useState(0);
      const [name,setName] = useState("");
}

2. event handler로 바인딩된것들을 지우세요 우리는 더이상 function Component에서 event Handler를 바인딩할 필요가 없어요.

constructor(props){
    this.onClickHandler = this.onclickHandler.bind(this);
}

우리는 간단하게 이 줄을 지울 수 있습니다

6. this.setState를 대체하자

이제 this.setState는 명확하게 우리의 function Component에 존재할 필요가 없어요! 우리는 대신에 setter라고 불리는 걸로 다 대체할거에요!

이것들을 대체하세요

class MyComponent extends React.Component{
    onClickHandler(e){
        this.setState({count:this.state.count+1})
    }
}

이걸로 대체하세요!

function MyComponet{
    const [count,setCount] = useState(0);
      const onClickHandler = e => {
        setCount(count+1);
    }
}

7. 상태 업데이트를 위한 useEffect

state가 업데이트 된 후에 실행되던 callback을 어떻게 this.setState가 받는지 기억해? useState의 업데이터 함수는 그런게 아니라 대신에 우리는 useEffect hook을 사용해야만 합니다. useEffect는 그 자신의 dependencies들이 변화가 있을때마다 trigger가 될것입니다.

만약에 당신이 이렇게 했었다면

this.setState({counter: this.state.counter+1}, () => {
  console.log('Counter was updated!')
})

대신 이렇게 바꾸세요

    const [counter,setCounter] = useState(0);

    useEffect(()=>{
        console.log('counter changed!');
    },[counter])

8. lifecycle 메소드들을 hook으로 교체하세요.

ComponentDidMount componentDidMount메소를 사용하는대신에 빈 dependency배열을 쓰는 useEffect hook을 사용하세요!

useEffect(()=>{
    console.log('component mounted!')
},[]) //비어있는 배열이 있다는것을 알려줘야함!

ComponentWillUnmount 리액트 트리에서 컴포넌트를 지우기전에 clean up하기 위해서 componentWillUnmount메소드를 사용하는 대신에 빈 배열에 의존하는 useEffect hook을 사용하는 function을 리턴해줍니다.

useEffect(()=>{
    console.log('component mounted');
  //return a function to execute at unmount
  return ()=>{
      console.log('component will unmount')
  }
},[]) //빈배열을 선언하세요!

ComponentDidUpdate 만약에 당신이 useEffect에서 두번째 인자로 아무것도 전달하지 않는다면 컴포넌트가 업데이트 될때마다 트리거가 될것이다. 그러니까 componentDidUpdate를 사용하는것 대신에 아래에 나오는것을 사용하세요

useEffect(()=>{
    console.log('component updated!');
}) // 두번째 인자로 아무것도 없다고 표시하기!

React-Router란?

useHistory hook