Modal 기존 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것 > * 팝업 현재 페이지에 또 다른 페이지를 띄우는 것. 외부설정으로 제어할 수 있음(강제로 창을 막는 등) 모달 새로운/다른 페이지가 아니라 레이어를 보여주는 것. 페이지를 이동하면 사라짐. 외부설정의 옵션에 영향을 받지 않음. 요구조건 모달창 외부를 클릭했을 때에도 창이 닫히도록 해야 함. 의사코드 모달창의 표시 유무를 확인하는 boolean값을 다룰 useState 생성 모달창을 표시할 버튼 생성(useState의 상태 업데이트) state의 true/false 조건에 따라 표시 유무가 달라지는 div 생성 div 안에 모달창이 보일 때 함께 보일 배경 박스와 모달 창 추가 배경 박스에 true값을 false값으로 바꾸는 클릭 이벤트 추가 코드 기억할 것 position:fixed 해당 요소를 항상 고정된 위치에 배치 f

객체 지향 프로그래밍(Object Oriented Programming) 객체 지향 언어 데이터 모델의 청사진(Class)를 사용해 코드 작성 데이터와 기능을 한 번에 묶어서 처리 가능 객체 지향 프로그래밍(OOP) 프로그램 설계 철학 재사용성을 얻을 수 있음 캡슐화(Encapsulation) 데이터와 기능을 하나로 묶는 것 느슨한 결합(Loose Coupling) : 코드가 상징하는 실제 모습과 닮게 결합. 은닉(Hiding) : 내부 데이터나 구현이 외부로 노출되지 않도록 만드는 것. 외부 객체에서 필요한 동작만 노출. 코드가 복잡하지 않으며 재사용성을 높일 수 있음. 상속(Inheritance) 기본 클래스(부모 클래스, base class)의 특징을 파생 클래스(자식 클래스, derived class)가 물려받는 것. 중복되는 속성과 메서드를 다시 구현할 필요 없이, 외에 필요한 속성과 메서드만 추가 가능. 불

객체 지향 데이터와 기능을 한 곳에 묶어서 처리. 속성과 메서드가 하나의 '객체'에 포함되며, 해당 객체는 class라고 한다. Class 클래스는 객체의 템플릿을 말한다. 클래스 안에 생성자(constructor)을 포함하고 있으며, 보통 대문자로 시작해 일반명사 형식을 띈다. 생성자 함수는 return값을 만들지 않는다. Instance Class를 바탕으로 만든 객체를 말한다. 새로운 인스턴스를 만들 때는 new 키워드를 사용. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 가진다. this : 인스턴스 객체를 의미. new 키워드로 인스턴스를 생성했을 때, 해당 인스턴스가 바로 this의 값이 된다. prototype : 모델의 청사진을 만들 때 쓰는 원형 객체

얕은 복사(Shallow Copy) 주소값(참조값)을 복사. 데이터를 공유하고 있기 때문에 값의 변경 등이 모두 반영된다. 깊은 복사(Deep Copy) 속성(property)만 복사. 주소는 복사되지 않음. 따라서 복사된 객체의 값을 변경하여도 기존의 값은 변경되지 않으며 반대도 적용. 위 방법의 경우 1차원은 깊은 복사가 진행되지만, 2차원부터는 깊은 복사가 진행되지 않는다 (변경사항이 영향을 받는다)

원시 자료형(primitive data types) 객체가 아니면서 method를 가지지 않는 타입. string, number, bigint, boolean, undefined, symbol, (null)을 지칭. 하나의 변수에는 하나의 데이터만 담고 있음. ex) 값 자체에 대한 변경은 불가능. 해당 변수에 다른 데이터를 할당하는 것은 가능. 참조 자료형(reference data type) 원시 자료형이 아닌 모든 타입. 배열, 객체, 함수 등. heap이라는 특별한 데이터 보관함에 데이터를 저장되고, 변수에는 해당 데이터의 위치를 담음. (따라서 동적으로 크기를 변경 가능) 주소를 저장하기 때문에 같은 주소를 공유하는 변수의 경우, 한 변수에서 값을 변경하면 그 변경은 주소를 공유하는 다른 변수에도 영향을 미친다. ex) 참고

1. continue 반복문의 현재 단계를 건너 뛸 때 사용 2. break 루프와 관계 없이 반복문을 벗어날 때 사용(즉시 반복문이 종료) 3. return 반복문만이 아니라 해당 함수 자체를 벗어난다.(즉시 함수 종료)

타입 : 값(value)의 종류 typeof 연산자로 값의 타입 확인 가능 Number 타입 정수(integer)와 실수(float)을 모두 표현할 수 있음 사칙 연산이 가능 Math 내장 객체 Math.floor() : 내림 반환 Math.ceil() : 올림 반환 Math.round() : 반올림 반환 Math.abs() : 절대값 반환 Math.sqrt() : 루트값 반환 Math.pow(a, b) : a를 밑, b를 지수인 숫자 반환 String 타입 문자열로 이루어진 타입. 따옴표('), 쌍따옴표("), 백틱으로 감싸서 표현. toLowerCase() : 소문자 변경 toUpperCase() : 대문자 변경 concat() : 문자열 연결 slice(a, b) : a부터 b까지의 문자열 추출 (ex. indexOf() : 문자열 내의 요소가 몇 번째 인덱스에 위치하는지 확인. 없으면 -1 반환 includs() : 문자열 내에 요소가 포함되어