파피루스

컨벤션 구조[적용 범위(선택 사항)]: [본문(선택 사항)][꼬리말(선택 사항)] 사용 예시 feat: 무한 스크롤                                              // :         // 필수 규격feat(api): email 전송 기능 추가                        // 타입[적용범위]: 설명feat!: 배송 완료 시 고객에게 이메일 전송        // 타입!:설명          // !는 단절적 변경을 강조*단절적 변경(breaking change) : 다른 것에 영향을 끼칠 수 있는 변경  각 영역에 들어가는 정보들타입- feat : 새 기능 추가- fix    : bugfix- 그 외 : 앵귤러 컨벤션 기반 타입들 (build, chore..

postscol namedata typekeynullalbedefault비고idintPKnot nullauto increment titletextPKnot null  contenttext nullable (empty)  writertext  nullable (null) user_id 와 매칭 (FK는 걸지 않음)created_attimestamp  now() tagtext   , 기준으로 끊기 (예시 : a,b,c,d,e)likeint not null0 viewint not null1   userscol namedata typekeynullalbedefault비고idintPKnot nullauto increment created_attimestamp not nullnow() idtextPKnot null..

useEffect  useMemo컴포넌트 또는 데이터의 생애 주기에 따라 값을 업데이트하고 싶을 때 사용 dependencies가 mount 될때useEffect : 함수를 실행한다. (mount, unmount 실행은 반드시 paint 1회 후에 이루어진다. --> 화면 깜빡 거림 등이 동반)useLayoutEffect : 함수를 실행한다.useMemo : 값을 할당한다.useCallback : 함수를 할당한다.언제 useMemo와 useCallback을 사용하는가?컴포넌트, 데이터의 생애주기에 맞춰 값을 업데이트하고 싶을 때리렌더링 될 때마다 새롭게 값을 계산하거나 새로운 함수를 정의하는 것이 문제가 될 때새로운 값의 게산이나 새로운 함수의 정의가 무거울 때값, 함수의 참조값을 유지하는 것이 중요할 ..

필수 자바스크립트구조분해할당배열 구조 분해 할당const array = [1, 2, 3, 4]; const [a, , , b] = array;                     // a=1, b=4const [c, ...rest] = array;                  // c=1, rest=[2, 3, 4] const [d, e=10, , , f =20] = array;    // d=1, e=2, f=20 객체 구조 분해 할당const obj = { a: 1, b: 2, c: 3 };const {a, rest} = obj;                       // a=1, rest={b:2, c:3}const {a: first, b : num} = obj;         // first=..

리액트의 장점1. 단방향 바인딩 (명시적 상태 변경)2. JSX3. 배우기 쉽고 간결함4. 강력한 커뮤니티 +) 넷플릭스가 리액트 vs 백본으로 프로토 타입을 만들어보며 느낀 리액트의 장점1. 자바스크립트 코드의 크기가 줄었다.2. 상대적으로 배우기 쉬움3. 빠른 기능 추가

소스 코드 : 실행가능한 코드 ; executable code)종류전역 코드함수 코드eval 코드모듈 코드 자바스크립트 엔진은 소스코드를 평가와 실행으로 나누어 처리한다. 소스코드의 평가1) 선언문 실행2) 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록소스코드의 실행 = 런타임 시작1) 실행 컨텍스트가 관리하는 스코프에서, 실행에 필요한 정보를 검색해서 취득한다.2) 실행 컨텍스트가 관리하는 스코프에, 실행 결과를 등록한다.  실행 컨텍스트: 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 스택(stack) 구조로 관리한다. 역할1. 전역 코드 평가: 전역 코드의 선언문 실행 후, 결과를 컨텍스트의 전역 스코프에 등록한다. 2. 전역 코드 실행: 전역..

: 자기 참조 변수 (자신이 속한 객체를 가리키는 식별자) 함수 호출 방식에 의해 동적으로 결정된다. OO에서 this는ㅁㅁ 이다.전역에서 전역 객체 window일반 함수 내부에서전역 객체 window메서드 내부에서매서드 호출한 객체생성자 함수 내부에서생성자 함수가 생성할 인스턴스apply/call/bind 메서드에 의한 간접 호출메서드에 첫번째 인수로 전달한 객체 console.log(this); //window   [전역]function foo() {   console.log(this); // window [일반 함수 내부]}foo();const person = {   name : '떼굴펜',   getName() {        console.log(this); // {name : '떼굴펜', ge..

자바스크립트 객체 분류1. 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체2. 호스트 객체 : 실행환경 (브라우저, node.js)에서 제공 (ex. DOM, fecth 등)3. 사용자 정의 객체 래퍼 객체 : 객체처럼 접근하면 생성되는 임시 객체 원시값을 객체처럼 사용하면, 자바스크립트 엔진은 암묵적으로 연관 객체를 생성하여 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시 값으로 되돌린다.const str = 'hello';str.name = 'Lee';            // 여기에서 str은 암묵적으로 생성된 래퍼 객체이다.console.log(str.name);   // undefinedconsole.log(typeof str, str); // string hello 전역 객체: ..