VS CODE 단축키 Ctrl + D = 선택한 해당 단어 동시 수정 가능 Alt + 클릭 = 동시 클릭한 곳 수정,추가 작업 가능 Alt + ↑ or ↓ = 선택된 부분 위 아래 이동이 가능함 Alt + Shift + ↑ or ↓ = 선택된 부분 복사되면서 위 아래로 이동 Ctrl + Home or Down = 코드 맨위, 맨아래로 가는 키 Ctrl + / = 선택된 줄 주석 처리 Ctrl + A = 전체선택 div>ul>li 엔터 --> div , ul , li 형식 태그 작성 ! 엔터 --> html 기본 코드 작성 .class 엔터 --> div class 태그 작성 #id 엔터 --> div id 태그 작성 ul>li*5 엔터 --> ul 안에 li 태그 5개 작성 div>(header>ul>l..

useCallback은 useMemo를 기반으로 만들어져서 비슷한 점을 가진 hooks다. useMemo는 특정 결과값을 재사용할 때 사용하고 useCallback은 특정 함수를 재사용할 때 사용한다. useCallback을 사용할 때 함수 안에서 사용하는 state, props가 있다면, 반드시 deps 배열 안에 포함시켜야 한다. 그리고 컴포넌트에서 props로 함수를 받아왔다면 그 함수도 deps에 포함시켜야 한다. 함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야 한다. 그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다. useCallback은 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다..

클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 클래스형 컴포넌트와 함수형 컴포넌트 차이 1) 선언방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { return } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { return } } export default App; 클래스 컴포..

1. Map() 함수 기본 사용법 map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다. 2. Map 함수의 형태 arr.map(callback, [thisArg]) import React from 'react'; const App = () => { const arr = [1, 3, 5, 7, 9]; const result = arr.map((v, i) => { console.log(i); }); return ( ) } export default App import React from 'react'; const App = () => { const names = ['test1', 'test2', 'test3', 'test4'..

채팅,게임,주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려면 http 프로토콜이 아닌 웹소켓 프로토콜을 사용하는것이 좋다. 웹소켓이 필요한 5가지 1. 실시간 양방향 데이터 통신이 필요한 경우 2. 많은 수의 동시 접속자를 수용해야 하는 경우 3. 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우 4. 개발자에게 사용하기 쉬운 API가 필요할 경우 5. 클라우드 환경이나 웹을 넘어 SOA 로 확장해야 하는 경우 : 서버연결 웹 소켓이 동작하기 위해서 제일 처음 서버와 연결이 되어야 한다. HTML5가 제공하는 WebSocket 객체를 통해 서버 연결을 수행한다. 일반 통신은 ws, 보안 통신은 wss 프로토콜을 이용한다 기본 포트 역시 http,https와 동일한 80,443을 이용한다 va..

ES5에서 this의 움직임 function test(){ return { rs : 25, bar : function(){ console.log(this.rs); } } } test.call({rs:100}).bar(); // 25 ES5 function 안의 this는 자신을 가장 마지막으로 품고 있는 scope로 항상 변한다. Arrow Function에서의 this의 움직임 function test(){ return { rs : 25, bar : () => { console.log(this.rs); } } } test.call({rs:100}).bar(); // 100 arrow Function은, 처음 바인딩 된 스코프 안에서 가리키는 this가 절대 변하지 않는다. 차이점 1. 화살표 함수와 기..