매일 공부한거 기록하기

알고리즘을 풀다가 대충 안 reduce때문에 런타임 에러가 떴다 const array = [1,2,3,4]; const initValue = 0; const sum = arrray.reduce((previousValue,currentValue)=>previousValue+currentValue),initValue); console.log(sum); // 10 [1,2,3].reduce((acc,cur)=>acc+cur); // 6으로 잘 작동함 [1,2,3].reduce((acc,cur)=>acc+cur); // 1 [1].reduce((acc,cur)=>0); // 1 [].reduce((acc,cur)=>acc+cur); // 빈배열일경우 empty array라는 에러가 뜸. [].reduce((ac..

Array.from() 유사배열객체 , 반복가능한 객체를 얕은 복사를해 새로운 Array를 만든다. console.log(Array.from('foo'); // ['f','o','o'] console.log(Array.from([1,2,3],x=>2*x)); //[2,3,6]; Array.from이 손에 안익는당 자주 쓰도록 노력해야겠음요 크크

Next.js는? : React의 SSR을 도와주는 FrameWork이다. React는 js library로 사용자 인터페이스를 만들기위함. 1. Component 2. 단방향 데이터 바인딩 3. JSX (javaScript XML) 4. Virtual DOM 의 특징을 가진다. Next.js 장점 1. 앱에 있는 페이지들이 미리 렌더링 된다. 정적으로 생성됨(static) create-react-app | next.js의 차이 Create-react-app 1. create-react-app 은 CSR로 작동한다 => 클라이언트가 UI를 모두 만듦. 2. 브라우저가 js를 가져와 모든 ui를 만든다. 3. CSR => 연결이 느리다면 흰 화면이 보일 수 있다. 4. . SEO에 최적화 되어있지 않다. ..

객체지향프로그래밍 OOP ( Object Oriented Programming) 객체지향 프로그래밍은 명령,절차지향프로그래밍과 반대되는 개념이다. 절차지향의 단점? 1. 프로젝트를 수정하기 위해 전체 이해가 필요하다. 2. sideEffect의 위험이 있다. 3. 유지보수가 어렵고, 확장성이 떨어진다. 객체 지향 1. 오브젝트 단위로 만든다. 2. 확장성이 높다. 3. 유지 보수가 쉽다. 오브젝트는 함수,데이터로 구성되어있다. 데이터는 fields, property 함수는 methods로 부른다. Class는 template 데이터가 없는 틀 이라고 생각하면 쉽다. (no data in) Object는 instance of a class 틀로 만들어진 오브젝트이다. (data in) Coffee Clas..

React- Redux라이브러리를 사용하지않고 오로지 Redux만 사용해서 구현해보자. 그 이후 React-Redux를 사용해보자. 대부분 React-Redux를 사용함. 리덕스에 저장된 데이터를 화면에 보여줄때는 다양한 형식으로가공할 필요가 있다. reselect라는 라이브러리가 도움이 됨. Cannot find module 'react-dev-utils/crossSpawn' exception React App Ask Question npm i react-dev-utils 오류

리액트 렌더링 과정 component(data)-> 가상돔과 비교-> 실제 돔에 반영 리액트가 실행될때 가장많은 CPU자원을 사용하는것이 렌더링 리액트는 데이터와 컴포넌트 함수로 화면을 그림. 그 과정에서 대부분의 연산은 컴포넌트의 실행과 가상돔에서 발생. 데이터는 컴포넌트의 속성값,상태값을 말함 속성,상태값이 변경되면 리액트가 자동으로 컴포넌트를 이용해 화면을 다시 그림. 리액트 memo함수를 사용하면됨-> 속성값의 변경사항이 없으면 이전 렌더링 결과를 재사용할 수 있다. 렌더링 속도를 개선하기 위해 각 단계에서 할 수 있는 일은? 평상시에는 성능 최적화를 고민하지 말고 편하게 작업하면됨. 성능이슈가 생겼을때 그때 고민하길! 1. 리액트 불변객체로의 속성값 비교 2.gist.github.com/nina..

useEffect 의존성배열을 다루기 까다로운데 거의 의존성 배열을 입력하지 않아도 되지만 종종 필요한 경우가 있다. 쉽게 버그로 이어지므로 가능하다면 의존성 배열을 입력하지 않는게 좋다. async await promise junil-hwang.com/blog/javascript-promise-async-await/ [javascript] Promise, async, await - 개발자 황준일 javascript는 event driven 으로 작동되며 이에 따라 비동기 프로그래밍 해야합니다. 즉, 이벤트가 끝난 후에 코드가 실행 되는 방식입니다. 이 때 많은 사람들이 callback 지옥을 직면하게 되며, promise를 junil-hwang.com

관심사의 분리 복잡한코드를 비슷한기능을 하는 코드끼리 모아서 별도로 관리하는것을 말함 UI를 처리하는 코드 서버API호출하는 코드 DB를 관리하는 코드등을 같은파일에서 관리하면 복잡 -> 이들은 관심사가 다르다고 보고 파일을 분리해서 관리한다. 하나의 컴포넌트에서 모든 기능을 구현할 수 없기 때문에 여러개의 컴포넌트를 만들어 조립한다. 부모의 상태를 별도의 상태값으로 관리하는 것은 좋지않음. 상태값은 일부 컴포넌트로 한정해서 관리하는 것이 좋음. 컴포넌트가 비지니스 로직이나 상태값을 갖고있으면 재사용하기 힘듦. javaScript map, filter-> 공통점 : 기존 배열은 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다. map 함수 -> 콜백함수가 적용된 새 요소들을 반환한다. fil..

리액트 내장 훅 useState useEffect useContext useRef : useMemo : 메모리제이션 기능제공 (재사용가능) useCallback : 메모리제이션 기능 제공 (재사용가능) useReducer : 여러개의 상태 값을 하나의 훅으로 관리할때 편리하게 사용가능함. useImperativeHandle useLayoutEffect useDebugValue

1. 엘리먼트 Element 실제로 화면에 렌더링할 DOM노드들의 정보를 React에게 알려주기 위한 수단. DOM노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체에 해당함. type문자열 혹은 컴포넌트 함수/ 클래스 필드와 props객체 필드로 표현됨. 일반적으로 하나 이상의 자식 엘리먼트는 props의 children필드로 표현하며, 이를 통해 엘리먼트들이 중첩될 수 있다. 이 필드에는 텍스트에 해당하는 문자열, 엘리먼트, 혹은 엘리먼트들의 배열등이 저장될 수 있다. 일반적으로 JavaScript의 React.createElement()함수 또는 JSX태그 문법 (EX.)으로 작성한다. 엘리먼트들로 이뤄진 트리를 엘리먼트 트리라 부르며, 이는 메모리 상에만 존재하는 가상 돔이다. i..