chez Manon

🤷🏻‍♀️ 왜 잔디안심어짐? : 로컬에서 git push할 때 email과 github에 등록된 email이 다르기 때문이다. 🔻 해결 1. 작업중인 곳에서 local에 등록된 email 확인한다. $ git config --list 2. github - setting - email 에서 저장된 email 확인한다. 3. email 다르면 통일시켜준다. $ git config user.email "[github 이메일]" 모든 프로젝트에 대해서 이메일 바꿔주려면 $ git --global config user.email "[github 이메일]"

getter / setter : 데이터의 무결성을 보존하기 위해 쓰는 키워드이다. 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룬다. (immutable) //내년나이를 알고싶으면? age를 직접사용하지않고, nextAge라는 함수를 따로 만들어서 let 사람 = { student: true, age: 14, nextAge() { return this.age + 1; }, }; 🤷🏻‍♀️ 왜 굳이 따로 꺼내서 사용함? - object안이 복잡할수록 함수 만들어놓는게 데이터 꺼내기 쉽다. - 내부에 있는 age 변수를 건드리지 않아서 실수방지하므로 좀 더 안전해진다. 🔻 함수로 object 데이터 수정 object안 데이터를 수정하고 싶을 때 object.key =..

Rest parameter rest parameter는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해준다. function Plus(...a: number[]) { console.log(a); } Plus(1, 2, 3, 4, 5); Destructuring 1. parameter에 object처럼 타입지정. 2. type 키워드로 따로 만들어서 지정. // Object let person = { student: true, age: 20 }; // 파라미터에 object처럼 타입지정 function 함수({ student, age }: { student: boolean; age: number }) { console.log(student, age); } 함수({ student: true, ..

HTML 변경 🔻 null이 들어오는 경우 체크해주는 옵션 tsconfig.json 파일에서 "strickNullChecks" 옵션을 true로 지정한다. 혹은 그냥 "strict" : true 를 하면 strickNullChecks 자동으로 true로 켜진다. 🔻 selector로 html을 찾으면 못찾을 경우가 null값이 되어서 변수가 union type이다. ( Element | null ) let 제목 = document.querySelector("#title"); 제목.innerHTML = 'hi' //error 해결책 1) narrowing if (제목 != null) { 제목.innerHTML = "hi"; } 해결책2 ) instanceof 사용하는 narrowing if (제목 inst..

Type Aliases - 타입을 여러가지 써야할 때 길어서 보기싫거나, 나중에 또 사용하고싶을 때 변수에 담아서 사용한다. ( 타입 키워드는 재정의가 불가능하다. 보통 대문자로 시작하거나 뒤에 type이라고 붙여서 작명해준다. ) - Alias는 새로운 type 변수를 생성하는 것이 아니라, 정의한 타입에대해 쓰기쉽게 새로운 별칭을 부여하는 것과 같다. 1. 변수에 저장 type 타입변수명 = 타입종류 type 저장 = string | number | undefined; let 변수1 : 저장 = 1; 2. Object // type 키워드 쓰지않을 때 코드 let 학생: { name: string, age: number } = { name: "kim", age: 23, }; type 사람 = { na..

🔗 Prototype 정리 https://manon-kim.tistory.com/129 [JS] 객체지향 (Constructor, Prototype) Prototype ? : Javascript는 흔히 프로토타입 기반언어(prototype-based language)라 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다... manon-kim.tistory.com ES5 - Object.create( ) Object.create() : ES5 때 나온 상속이용하여 쉽게 object 만드는 방법 Object.create(부모object) : 소괄호안에 적은 부모 object가 prototype이 된다. let 부모 = { name : ..

터미널에서 code . 를 입력하면 VScode가 안열리고 에러발생할 때 1. PATH가 정상적으로 설정되지 않으면 아래와 같은 에러 발생 $ code zsh: command not found: code 1-1. VScode를 실행하고 Command + Shift + P를 입력해서 커맨드 팔레트를 연다. 'Shell Command : Install 'code' command in PATH' 실행해서 추가한다. 1-2. 터미널에서 code -v를 실행해서 버전이 출력되면 해결 2. 1-1에서 permission error가 발생하면 터미널에서 bin 디렉토리에 접근하여 PATH code를 지우고 다시 install 한다. cd /usr/local/bin sudo rm -rf code VScode를 켜서 1..

Prototype ? : Javascript는 흔히 프로토타입 기반언어(prototype-based language)라 불린다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수있고 그 상위 프로토타입도 마찬가지이다. 이를 프로토타입 체인 (prototype chain)이라 부르며, 한 객체에 정의된 메소드와 속성을 다른 객체에서 사용할 수 있도록하는 근간이다. Javascript의 자료형 1. Primitive data type : 자료 자체가 변수에 저장되는 자료들 (문자, 숫자 자료형) let name = 'kim'; let age = 30; 2. Refer..

useRef ref (reference) 1. 특정 DOM을 선택하고 싶을 때 사용한다. 2. 컴포넌트가 re-rendering될 때마다 기억하고싶은 값을 저장할 때 사용한다. useRef에서 관리하는 값은 바뀌어도 re-rendering되지 않는다. ( setTimeout, setInterval의 id, 외부라이브러리를 사용하여 생성된 인스턴스 scroll위치 등) React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려고 한다. ( 데이터는 부모에서 자식으로 props로 전달 ) 따라서 HTML element중 자체적으로 특정 data를 가지는 태그의 등은 state로 값을 관리하는데, 이처럼 내부상태가 react에 의해 제어되는 것을 C..

https://react-bootstrap.netlify.app/components/navbar/#navbars React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com https://mui.com/components/dividers/ React Divider component - MUI A divider is a thin line that groups content in lists and l..