본문 바로가기

js,ts

(18)
usememo, usecallback https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html
html과 DOM 차이
[js]set과 map - set객체는 중복되지 않는 유일한 값들의 집합 수학적 집합의 특성을 표현하기 위한 자료구조 이터러블을 인수로 전달받아 set 객체를 생성한다. 중복된 값은 빼고 중복을 허용하지 않는 set객체의 특성을 이용하여 아래와 같이 배열의 중복된 요소를 제거할수있다 set요소를 배열에 담고싶을때 * [... new Set(arr)] set 객체는 이터러블 이기때문에 for ... of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링의 대상이 될수도 있다. map 객체는 키와 쌍으로 이루어진 컬렉션이다. 객체와 유사하지만 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 x ㅇ 요소 개수 확인 object.keys(obj).length map.si..
자바스크립트의 메모리관리 https://curryyou.tistory.com/276
린팅, 포맷팅 셋팅 https://velog.io/@kmlee95/React-Typescript-eslint-prettier%EC%84%A4%EC%A0%95
[js]자바스크립트는 프로토타입언어 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 상속의 개념으로 다른 객체에 정의된 메소드와 속성을 객체에서 사용할 수 있도록 하는 근간이다. 객체지향을 가능하게하는 .. 대박대박 근데 어려우니 오늘은 여기까지만 객체 인스턴스와 프로토타입 간에 연결이 구성되며 이 연결을 따라 타고올라가서 속성과 메소드를 탐색함 function Person(...) { this.first = first; .. } 로 Person은 생성자함수, person1은 Person에서 만들어낸 인스턴스라 하면
[js]함수와 this, scope 함수와 메소드 차이는? - 메소드는 클래스 내부에 정의한 함수 - 독립적으로 존재하는 함수이냐 클래스 내부에 종속되어 있느냐로 구분 - 함수 ⊃ 메소드 일반함수와 화살표 함수 차이는? - function foo () { .. } : 일반함수 - const fa = () = { .. } : 화살표함수 // 즉시 실행이 필요한 경우 사용한다 react에서 event를 jsx에 달때 많이 사용하지.. 모든 함수는 실행될때마다 함수 내부에 this라는 객체가 추가된다 일반함수의 this - 일반함수 실행시에는, this는 전역객체(window)를 가리킨다 - 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다. - 생성자(new) 실행 시에는 새롭게 만들어진 객체를 가리킨다 그리고 어떻게 호출되었는지에 따..
console.log 와 console.dir console.log - 값을 출력 - 요소를 html(태그) 형태의 트리 구조로 출력 console.dir - 객체의 속성을 출력 - 요소를 json(키와 값) 형태의 트리 구조로 출력
함수형 프로그래밍 xx프로그래밍: 사고방식 입력값에 대해서만 변환이 있는 순수함수방식 추구 선언형: what에 주목 출처: https://jongminfire.dev/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%B4%EB%9E%80
[nextjs]nextjs를 왜쓰냐면! nextjs는 CRA(create-react-app)과 같은 리액트 프레임워크이다. 라이브러리와 프레임워크의 차이를 니꼬쌤은 내 코드가 만들어져 있는 외부의 도구를 갔다쓰면 라이브러리, 프레임워크가 정해놓은 장소에 내 코드를 갔다놓으면 프레임워크라고 한다 (괜찮은 분류인듯?) 구조를 짜보며 느낀 프레임워크 nextjs의 초반감회를 얘기해보자면 0. 구조를 대략적으로 짜준다 요기에 내가 이용할 방식으로 가미하기시작함 0-1. 페이지구성을 자동으로! /pages 하위에 1) 파일이름을, 혹은 2) 폴더아래 index.tsx를 지점(중첩된 파일들에 대해서도 지원)으로 자동으로 라우팅처리를 해준다 3) 동적라우터 구성도 가능! ex) pages/blog/[slug].js -> /blog/:slug (동적인 세그..