코딩.zip

🚨 추상화 : 불필요한 정보 숨기고 중요한 정보만 나타내는 것추상 클래스  &  추상 메서드선언 방법 : abstract 키워드 ✏️ 추상 메서드는 자식 클래스에서 구현된다. ➡️ 부모 클래스는 메서드명만 가지고 있고 자식 클래스가 해당 메서드명을 사용하는 것추상 클래스는 추상 메서드 있어도 없어도 되지만(일반 메서드만 있어도 된다.) 있다면 반드시 추상 클래스로 선언해야 한다.추상 클래스에서 일반 메서드를 포함할 수 있는 이유 : 추상 클래스는 인터페이스보다 더 많은 유연성을 제공하기 때문에 공통된 구현을 상속받는 클래스들이 반복해서 구현할 필요성을 줄인다.클래스의 사용자가 특정 동작을 반드시 구현해야 할 때 사용 : 추상 클래스는 하위 클래스에서 반드시 구현해야 하는 메서드를 강제로..

자료형 기본형 : 계산을 위해 실제 값을 저장 참조형 : 실제 값이 아닌 객체의 주소값을 저장 메모리의 힙(heap)에 실제 값을 저장하고, 그 참조값(주소값)을 갖는 변수는 스택에 저장 출처: https://inpa.tistory.com/entry/JAVA-☕-변수의-기본형-참조형-타입 [Inpa Dev 👨‍💻:티스토리] [비슷하지만 다른] 매개변수와 인수 매개 변수는 메서드에 전달된 입력값을 저장하는 변수를 의미하고, 인수는 메서드를 호출할 때 전달하는 입력값 🌎 클래스와 객체 클래스 구성요소 멤버 변수 : 객체의 데이터가 저장되는 곳 멤버 메서드 : 객체의 동작, 데이터의 조작이 이루어지는 곳 생성자 : 객체를 생성할 때 초기화 되는 항목 관리 멤버 변수와 정적 변수 차이 1. 소속 및 클래스의 범..

팀원 : 김*준, 김*희, 김*표, 조*린기간 : 2024.03.27 ~ 2024.04.02 주제 : 전시 예약 페이지 구현구성 : 헤더, 메인, 상세, 예약현황 페이지HeaderMainDetailReservation메인 페이지 이동상단 이미지(2개)전시이미지(슬라이드 구현)예약이미지(small)예약현황 페이지 이동페이지 소개전시명 / 전시 정보전시명로고상품 배열(6개)이용요금이용요금Route 이용해서 경로 설정 인원수 버튼인원수 버튼총 금액삭제 버튼 / 전체 삭제 버튼예약 버튼결제 버튼✏️ Detail과 Reservation의 데이터 관리를 효율적으로 하기 위해 global state 이용✅ 구조 ✅ 페이지 이름-ArtKey: alt키 - Alternative 대체라는 뜻, 주로 다른 키와 함께 사용되..

App.js {/* children 요소로 들어감 */} 자식요소  ? div가 어떻게 Button 컴포넌트의 children props로 받아지는 이해가 가질 않았다.부모 jsx의 하위에 가 들어가 있기 때문에 div가 자식이라 children props를 받는거야? 아님 Button이 자식이기 때문에 children을 받는거야?! Button.jsx// props에는 반드시 객체 형태의 값이 들어옴// 점표기법으로 값에 접근하지 않고 '구조분해할당'으로 접근하면 더 편함export const Button = ({ text, color, children }) => { return( {text} - {color.toUpperCase()} {children} ..

🌎 글로벌 state 상태를 여러 컴포넌트 간에 공유하고, 이를 통해 데이터의 일관성을 유지하고 복잡한 상태 관리를 단순화 -context 사용하면 글로벌 값 관리 할 수 있다. ➡️ 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 필요 없이 데이터를 공유 context 넣은 값이 무언가 변경되면 그 context 참조하는 모든 컴포넌트 재렌더링하는데, 랜더링 최적화하고자 할 때 context에 넣는 데이터를 적절하게 분배해 여러 provider를 사용한다. Local state(특정 컴포넌트 내에서만 사용되는 상태)를 사용해 prop으로 전달되는 상태 값이 여러 단계의 컴포넌트를 거쳐 전달될 때, 문제 깊은 중첩 문제: prop으로 전달되는 상태 값이 여러 단계의 컴포넌트를 거쳐 전달될 경우, 중간 ..

🐾 재렌더링 발생 조건 state가 업데이트 된 컴포넌트 props가 변경된 컴포넌트 재렌더링 된 컴포넌트 아래의 모든 컴포넌트 ☻ 사전준비 실습 구조 src ├── App.js ├── components │ ├── Child1.jsx │ ├── Child2.jsx │ ├── Child3.jsx │ └── Child4.jsx ├── index.css ├── index.js 🔔 메모이제이션(memoization) - 함수의 반환 값을 저장해 두었다가 동일한 인수(argument)가 전달될 때, 이전에 계산한 값을 재사용하는 최적화,고속화 기법 ✔︎ 컴포넌트의 메모이제이션 - memo : 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하는 함수 App 컴포넌트가 재렌더링될 때, memo를 ..

방법 1. SCSS(Syntactically Awesome Style Sheets) css 프리프로페서, 변수, 중첩 규칙, 믹스인, 함수 등을 지원하여 CSS 코드를 보다 효율적으로 작성 scss 라이브러리 패키지 설치 : % npm install node-sass import classes from "./CssModules.module.scss" export const CssModules = () => { return ( CSS Modules입니다. 버튼 ); }; .container { border: solid 1px #aaa; border-radius: 20px; padding: 8px; margin: 8px; display: flex; justify-content: space-around; al..

💡 node.js 와 React 관계 node.js는 JavaScript Runtime 환경으로 React를 더 편하게 사용하도록 도와주는 오픈소스이다. node.js를 설치하면 NPM(Node Package Manager)이라는 패키지 관리자가 같이 설치되고 이것을 통해 React 개발에 필요한 다양한 모듈을 사용할 수 있다! React는 사용자 UI를 개발하는데 사용되는 자바스크립트 라이브러리이다. 가상 DOM을 사용해서 성능을 최적화 하고 실제 DOM 조작을 최소화하기 때문에 웹 애플리케이션 성능을 향상시키고 빠르게 렌더링이 가능해진다. (?) What's 'DOM' 1. DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 인터페이스이다. 2. DOM은 트리 구조..