프로그래밍 언어 썸네일형 리스트형 [React] Controlled Component vs. Uncontrolled Component 리액트의 Controlled Component와 Uncontrolled Component의 차이점에 대해서 설명해주세요.1. Controlled Component란?Controlled Component(제어 컴포넌트)는 React의 상태(state)를 직접 관리하는 방식의 컴포넌트입니다.사용자의 입력 값이 컴포넌트의 state에 의해 제어되며, 값이 변경될 때마다 onChange 이벤트 핸들러를 통해 state를 업데이트합니다.예제 코드import { useState } from "react";function ControlledInput() { const [value, setValue] = useState(""); return ( type="text" value={value.. 더보기 [AWS] Route 53 으로 도메인 구매하기 1. AWS 로그인 -> Route53접속 2. 도메인 - 등록된 도메인 메뉴 선택 3. 도메인 등록 버튼 선택 4. 원하는 도메인 입력 후 금액 확인 chaezzing.com 으로하면 연 14달러 라고하네요 ? 19000원 가량 하구요 구매는 다른 사이트에서 하셔도 됩니다. 우선 이렇게 진행해보겠습니다!5. 결제 요금 옵션 확인하기자동으로 도메인을 갱신할건지 여부를 선택할 수있고, 아래와 같이 이용기간을 등록할 수도 있습니다. 6. 연락처 정보 입력하기빈칸을 채워 입력해주시고 우편번호도 꼭 입력해주세요. 7. 입력정보 확인 8. 요청내용 확인 연락처 정보에 입력했던 이메일 주소로 아마 관련한 내용이 전달되고도메인 등록이 진행됩니다. 9. 도메인 등록 성공 일정 시간이 지난 후 대시보드 확인해보면 호스.. 더보기 뷰 인스턴스 라이프 사이클 [뷰 인스턴스 라이프 사이클] 라이프 사이클 ✈︎ 애플리케이션이 가지는 생명주기 🌀 뷰 인스턴스 라이프 사이클 라이프 사이클 (Life Cycle) 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성 라이프 사이클 훅 (Life Cycle Hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 | 뷰 생명 주기 표 뷰에서 제공하는 라이프 사이클 표이다. 하나씩 살펴보도록 하자. | 뷰 라이프 사이클 다이어그램 라이프 사이클은 크게 4가지로 나눌 수 있다. 1) 인스턴스 생성 2) 인스턴스 적용 3) 인스턴스 갱신 4) 인스턴스 소멸 1. beforeCreate 인스턴스 생성 후 가장 처음으로 실행되는 라이프 사이클 vue 인스턴스가 아직 정의되기 전으로 아직 접근할 수 없는 상태 2. crea.. 더보기 뷰 인스턴스의 유효범위 [뷰 인스턴스의 유효범위] ⛳️ 뷰 인스턴스의 유효범위 뷰 인스턴스를 생성 시 HTML 의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효범위라고 한다. 즉, 뷰 인스턴스에 정의한 영역이 적용되는 영역을 의미한다. 이를 자세하게 이해하기 위해서 인스턴스 생성 시 화면에 어떻게 적용되는지 살펴보자. | 뷰 인스턴스가 화면에 적용되는 과정 1) 인스턴스 생성자 실행 - 인스턴스 옵션 속성인 el, data를 인스턴스에 정의하고 new Vue로 인스턴스를 생성한다. 2) el 에 인스턴스 적용 - 특정 화면요소 에 인스턴스 부착. ex. #app - > app id 를 가진 dom 영역에 인스턴스 적용하여 지정한 화면 요소와 그 이하 레벨의 화면요소에 값 치환하여 적용 3) 인스턴스.. 더보기 뷰 인스턴스란 - 뷰 인스턴스의 정의와 속성 [ 뷰 인스턴스의 정의와 속성 ] ✅ 뷰 인스턴스 (Instance) : 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 인스턴스를 통해 html 에서 텍스트가 화면에 표시될 수 있다. | 뷰 인스턴스의 생성 뷰 인스턴스 형식 new Vue ({ ... }); new Vue ( => 인스턴스 생성 el 속성 : 뷰 인스턴스가 그려질 지점 지정 data : message 값을 정의하여 화면의 {{ message }} 와 연결 | 뷰 인스턴스 생성자 new Vue() 를 이용하여 인스턴스를 생성할 때, Vue → 생성자 뷰 생성자는 뷰 라이브러리 로딩 후 접근 가능 Q. 생성자를 사용하는 이유? 개발 시 필요한 기능들을 생성자에 미리 정의해 두고 사용자가 그 기능을 재정의하여 편리하게 사용하도록.. 더보기 뷰 Vue.js 시작하기 - Hello Vue.js ! 프로젝트 만들기 [ Hello Vue.js ! 프로젝트 만들기 ] ⛑️ 프로젝트 작업 순서 1) HTML 파일 생성 2) 뷰 소스 코드 추가 3) 브라우저로 실행 1) HTML 파일 생성 2) 뷰 소스 코드 추가 {{message}} 소스를 해석해보면, new Vue () -> Vue 를 만든다. el: #app -> 'app' 이라는 id 를 가진 엘리먼트에. data : {..} -> data 에 정의한 데이터를 넘긴다. 3) 브라우저로 실행 해당 파일 실행시 message 가 출력되는 것 확인 * Vue 개발자 도구 활성화하여 데이터 확인 더보기 [AWS EC2] BASTION Host 터널링을 통한 인스턴스 SSH 접속 방법, 원격지의 파일 SCP로 로컬에 전송 다운로드하기 ✅ BASTION HOST ? AWS에서 보안을 위해 BASTION HOST 를 통해 EC2 를 관리하게 될 때가 있다. Bastion 호스트는 가상 프라이빗 클라우드(VPC)의 프라이빗 및 퍼블릭 서브넷에 위치한 Linux 인스턴스에 대한 보안 액세스를 제공한다. 배스천 서버는 간단하게 말해서 방화벽과 같은 역할을 하는 문지기이다. 실제 서버에 접속하기전에 반드시 거쳐야할 관문 같은 역할이라고 생각하면 된다. 위와 같이 구성되어있는 인스턴스에서 SERVER 에 있는 정보를 접근하고자 할 때 접속 방법을 설명하려고 한다. 구글링으로 명확한 접근 방법을 찾을 수가 없어 chatGPT 와 싸우다가 해결한 방법이다 ⛳️ BASTION 인스턴스를 통해 SERVER 접속하기 (SSH) 접속을 위해 필요한 내용 우.. 더보기 [MySQL] DBeaver Incorrect table definition; there can be only one auto column 테이블 생성 시 오류 | 😱 오류내용 DBeaver 에서 테이블을 생성해서 컬럼을 집어넣고 있었는데 아래와 같은 오류가 발생했다. (conn=82302870) Incorrect table definition; there can be only one auto column and it must be defined as a key | 🚀 현상 회원 가입시 저장 될 회원 DB를 구성하고 있었는데 아래와 같이 순번을 넣는 컬럼을 seq 로 설정하고 auto_increment 체크를 했었다. DBeaver에서 생성해준 create 문 CREATE TABLE CUSTOMER ( seq BIGINT auto_increment NOT NULL, userId varchar(30) NOT NULL, password varchar(50) NOT .. 더보기 이전 1 2 3 다음
