본문 바로가기

분류 전체보기308

정보처리기사 정처기 | SQL SELECT 문법 - 데이터 조작어(Data Manipulation Language, DML) | 필기&실기 개념 ✅ SELECT 문법 SELECT 문법은 데이터베이스 테이블에서 데이터를 조회하는 SQL 명령어입니다. SELECT 문을 사용하면 테이블에서 원하는 열(칼럼)의 데이터를 선택하고, 조건을 지정하여 필터링할 수 있습니다. SELECT 문은 데이터를 읽기만 하므로 원본 데이터는 변경되지 않습니다. 💡 SELECT 문장 구조 SELECT: 조회할 열의 목록을 지정합니다. 열1, 열2 등은 조회 결과에 포함될 열의 이름입니다. FROM: 데이터를 조회할 테이블의 이름을 지정합니다. WHERE: 조회할 행을 선택하는 조건을 지정합니다. 조건을 만족하는 행만 조회됩니다. SELECT 열1, 열2, ... FROM 테이블명 WHERE 조건절; 예를 들어, "Employees"라는 테이블에서 직급이 "Manager"인.. 2023. 7. 10.

정보처리기사 정처기 | 데이터베이스 병행제어(Concurrency Control) | 필기&실기 개념 ✅ 병행제어(Concurrency Control) 병행 제어(Concurrency Control) 기법은 다중 트랜잭션 환경에서 데이터베이스의 일관성과 무결성을 유지하기 위해 트랜잭션들의 동시 실행을 조절하는 기법입니다. 병행 제어는 동시성을 향상시키고 성능을 개선하기 위해 여러 트랜잭션을 동시에 실행할 수 있도록 하면서도 데이터의 일관성을 보장합니다. 이러한 기법은 트랜잭션들 간의 상호작용과 충돌을 방지하고 데이터베이스에 대한 일관된 접근을 제공합니다. 💡 로킹(Locking) 로킹(Locking)은 병행 제어 기법 중 하나로, 같은 자원을 액세스하는 다중 트랜잭션 환경에서 데이터베이스의 일관성과 무결성을 유지하기 위해 트랜잭션의 순차적 진행을 보장하는 직렬화 기법입니다. 로킹은 트랜잭션들이 공유하는 .. 2023. 7. 10.

정보처리기사 정처기 | 데이터베이스 회복(Recovery) 기법과 Redo, Undo | 필기&실기 개념 ✅ 회복(Recovery) 기법 회복(Recovery) 기법은 데이터베이스에서 장애로 인해 손상된 상태에서 데이터베이스를 손상 이전의 정상적인 상태로 복구하는 작업을 말합니다. 데이터베이스 시스템은 여러 가지 회복 기법을 사용하여 데이터의 일관성과 무결성을 유지합니다. 💡 즉각 갱신 회복 기법(Immediate) 즉각 갱신 회복 기법은 롤백(Rollback) 시 REDO와 UNDO가 모두 실행되는 트랜잭션 처리법입니다. 이 기법에서는 트랜잭션 수행 중 갱신 결과를 바로 데이터베이스에 반영합니다. 💡 지연 갱신 회복 기법(Deferred) 지연 갱신 회복 기법은 트랜잭션이 완료된 후에 데이터베이스에 기록하는 회복 기법입니다. ✅ Redo, Undo 💡 Redo 장애 발생 전 DB로 복구하는 기법으로 디스크.. 2023. 7. 10.

정보처리기사 정처기 | 트랜잭션 제어언어(Transaction Control Language, TCL) | 필기&실기 개념 ✅ 트랜잭션 제어언어(Transaction Control Language, TCL) 트랜잭션 제어언어(Transaction Control Language, TCL)는 데이터베이스 시스템에서 트랜잭션의 제어와 관리를 위해 사용되는 언어입니다. TCL은 트랜잭션의 시작, 종료, 커밋, 롤백 등의 제어를 수행하는 명령어를 제공하여 데이터베이스의 일관성과 무결성을 유지합니다. 데이터 제어어(Data Control Language, DCL)은 데이터베이스에서 데이터의 보안과 권한을 관리하는 데 사용되는 언어입니다. 하지만 TCL은 트랜잭션(Transaction)을 제어하는데 특화된 몇 가지 명령어를 포함하고 있습니다. 따라서, TCL은 '트랜잭션을 제어하는 SQL 언어'로 볼 수 있습니다. 💡 커밋(Commit).. 2023. 7. 10.

정보처리기사 정처기 | 트랜잭션(Transaction) 특성 [ACID] | 필기&실기 개념 ✅ 트랜잭션(Transaction) 특성 [ACID] 트랜잭션(Transaction)은 데이터베이스의 상태를 변환시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위로 정의됩니다. 트랜잭션은 데이터베이스에서 데이터를 안전하게 처리하기 위해 필요한 개념입니다. 트랜잭션은 일련의 연산들을 포함하며, 이 연산들은 모두 성공적으로 수행되거나, 실패할 경우 이전 상태로 롤백됩니다. 💡 원자성(Atomiciry) 트랜잭션을 구성하는 모든 연산은 전부 실행되거나 전부 취소되어야 합니다. 트랜잭션은 원자적으로 동작하여 데이터베이스에 일관성 있는 상태를 유지해야 합니다. 만약 트랜잭션 중간에 오류가 발생하면, 이전 상태로 롤백되어야 합니다. 💡 일관성(Consistency) 트랜잭션 수행 전과 수행 완료 후의 데이터베.. 2023. 7. 10.

리액트 React | 리스트 ✅ 리스트 💡 JavaScript 리스트 JavaScript에서 배열을 다루는 기능 중 map() 함수를 활용하여 리스트를 변환할 수 있습니다. map() 함수는 각 배열 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. map() 함수는 배열의 각 요소를 인자로 받아 해당 요소를 가공한 후 새로운 배열을 반환합니다. 예를 들어, 주어진 배열의 각 요소를 두 배로 만들고 싶다면 다음과 같이 작성할 수 있습니다. numbers 배열의 각 요소를 두 배로 만들어 새로운 배열을 생성하고, 그 결과를 doubled 변수에 할당하여 출력하였습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number.. 2023. 7. 7.

리액트 React | 조건부 렌더링(Conditional Rendering) ✅ 조건부 렌더링(Conditional Rendering) React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다. 💡 사용자 로그인 상태에 따른 조건부 렌더링 사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다. function UserGreeting(props) {.. 2023. 7. 6.

리액트 React | 상태(State) ✅ 상태(State) React에서 상태(State)는 컴포넌트 내에서 관리되는 비공개적인 데이터로, 컴포넌트 내부에서 값을 변경하고 화면에 반영하는 데 사용됩니다. State는 컴포넌트의 동적인 데이터를 저장하고 업데이트하는 데 주로 활용됩니다. State는 일반 JavaScript 객체이므로 여러 가지 데이터 유형을 저장할 수 있습니다. 💡 상태(State)와 속성(Props) 차이점 React에서는 상태(State)와 속성(Props)이라는 두 가지 주요 개념을 사용하여 컴포넌트의 데이터를 관리합니다. Props는 읽기 전용 데이터로, 컴포넌트 외부에서 설정되고 컴포넌트 내부에서는 변경할 수 없습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 반면에 State.. 2023. 7. 4.

리액트 React | 컴포넌트 설계 패턴 ✅ 컴포넌트 설계 패턴 컴포넌트를 역할과 관심사에 따라 분리 시키기 위해서는 코드 내부의 로직을 쪼개고 다른 코드로 위임을 해야된다. 제어를 위임하는 것의 문제는 쪼개고 위임 할수록 사용 코드에 대한 이해 난이도가 높아 가고, 가독성이 떨어진다 또, 커스텀 설정이 요구되는 경우가 많다. 이 역시 절대적인 것은 없고 개발자의 재량에 따라 최적을 찾아야 한다. 유지보수와 확장이 불가능한 스파게티 코드로 끝나버리지 않으려면, 리액트 개발자로서 더 경험이 많아질수록 다양한 컴포넌트 패턴에 대해 학습하는 것이 필요하다. 이것이 끝은 아닌 것이, 여러 가지 패턴을 알아가는 것 자체가 좋은 기초가 된다. 이것의 가장 중요한 면은 어떤 문제에 대해 어떤 패턴을 적용할지 그때를 알게 된다는 점이다. 5 Advanced .. 2023. 7. 4.

리액트 React | 프로젝트 구조 설계 패턴 ✅ 리액트 설계를 하는 원칙 우리는 확장성있고 재사용성 있는 코드를 만들어야 한다 관심사에 따라서 코드를 분리하고 단일 책임을 가지는 컴포넌트를 만들어야 한다 외부에 제어를 위임시키는 것을 고려 해야한다 깨끗하고 성능 좋은, 유지 보수가 쉬운 리액트 컴포넌트 만드는 법 배워보기 모든 프로그래머의, 적어도 나에게는 꿈같은 일이다. 나한테는 훌륭한 프로그래머와 좋은 프로그래머를 가르는 자질이기도 하다. 언제나 배워야 하고, 개선해야 할 점이 있기 때문에, 절대로 완벽해질 수 없다는 사실이 재미있는 지점이다. 아래 모범 사례를 따라가다 보면 팀원뿐만 아니라 자기 자신도 도움받을 수 있을 것이다. 스타일 가이드를 통해 어떻게 코드를 짜는지에 대한 중요한 내용을 정의해 둔 개발팀을 본 적이 있다. 어떻게 생각하느.. 2023. 7. 4.

리액트 React | Hook - useState, uesEffect, useRef, useCallback, useMemo ✅ Hook 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. 💡 useState 💡 useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. 💡 useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마다 특.. 2023. 7. 4.

리액트 React | React 엘리먼트(Element) ✅ React 엘리먼트(Element) 💡 React 엘리먼트(Element) 리액트 애플리케이션에서 엘리먼트(Element)는 가장 기본적인 구성 요소입니다. 엘리먼트는 JSX 문법을 사용하여 일반 JavaScript 객체로 생성할 수 있습니다. JSX 문법은 XML과 유사한 문법을 사용하여 리액트 컴포넌트를 작성하는 방식입니다. 엘리먼트는 사용자 인터페이스의 다양한 부분을 나타내기 위해 사용됩니다. const element = Hello, world; 이렇게 생성된 엘리먼트는 화면에 표시되기 위해 렌더링 되어야 합니다. 💡 가상 DOM(virtual DOM) 리액트에서는 가상 DOM(virtual DOM)을 사용하여 실제 DOM을 대신하여 UI를 관리합니다. 가상 DOM은 메모리 상에 존재하는 자바스.. 2023. 7. 3.

리액트 React | React란? ✅ 리액트 React 리액트(React)는 페이스북에서 개발된 자바스크립트 라이브러리로, 2013년에 처음 공개되었습니다. 동적인 웹사이트를 만들기 위해 자바스크립트를 효율적으로 활용할 수 있는 문법 모음집입니다. 리액트는 개발자가 재사용 가능한 컴포넌트를 만들고 최적화하는 기능을 제공하여 개발자들이 더욱 쉽게 웹 애플리케이션을 개발할 수 있도록 도와줍니다. 💡 라이브러리 Library 리액트(React)는 UI 컴포넌트를 만들고 관리하기 위한 강력한 라이브러리입니다. 이러한 리액트는 종종 프레임워크와 혼동될 수 있지만, 사실은 라이브러리로 분류됩니다. 기능의 범위: 프레임워크는 애플리케이션의 전체 구조와 흐름을 관리하는 많은 기능과 도구를 포함한다. 하지만 리액트(React)는 UI 컴포넌트를 만들고 .. 2023. 7. 3.

컴퓨터활용능력 컴활 1급 | 필기 기출 | 2020년 07월 04일(2회) | 1과목 : 컴퓨터 일반 ✅ 1과목 : 컴퓨터 일반💡 1. 다음 중 컴퓨터 및 정보기기에서 사용하는 펌웨어(Firmware)에 관한 설명으로 옳은 것은?주로 하드디스크의 부트 레코드 부분에 저장된다.인터프리터 방식으로 번역되어 실행된다.운영체제의 일부로 입출력을 전담한다.소프트웨어의 업그레이드만으로도 기능을 향상할 수 있다.펌웨어(Firmware)펌웨어는 장치의 소프트웨어적인 부분으로, 기기의 작동 방식과 동작을 제어하는 중요한 역할을 합니다.전자기기나 컴퓨터의 펌웨어는 기기의 하드웨어와 소프트웨어 사이의 인터페이스 역할을 하며, 안정적이고 원활한 작동을 보장합니다.펌웨어는 제조사나 개발자에 의해 설계되며, 주기적으로 업데이트되어 기능 개선, 버그 수정, 보안 강화 등의 업데이트가 이루어집니다.펌웨어 업데이트는 주로 인터넷을 .. 2023. 7. 3.

리액트 React | Link 컴포넌트 ✅ Link 컴포넌트 Link 컴포넌트는 React의 하이퍼링크 생성 컴포넌트로, 다른 페이지로 이동하기 위해 사용한다. react-router-dom 라이브러리에서 제공하며, 페이지 간 라우팅을 간편하게 처리할 수 있도록 한다. Link 컴포넌트를 사용하면 페이지를 전체적으로 새로고침하지 않고 필요한 부분만 업데이트하기 때문에 데이터 로딩이 줄어든다. 개발자 도구에서는 Link 컴포넌트가 태그로 표시된다. 💡 태그와 Link 컴포넌트의 차이점 태그 태그는 일반적인 HTML 태그로, 페이지 이동 시 전체 페이지를 다시 렌더링하고 브라우저의 주소를 변경한 후 페이지를 새로고침한다. 이러한 동작 방식으로 인해 상태 값이 유지되지 않으며 성능이 저하된다. // 태그 사용 function MyComponent(.. 2023. 6. 12.

리액트 React | index.html ✅ index.html index.html 파일은 초기 HTML 구조를 정의하고, index.js 파일은 리액트 애플리케이션을 초기화하고 컴포넌트를 렌더링 한다. index.html 파일은 웹 브라우저에 직접 로드되며, index.js 파일은 index.html 파일에 의해 호출되어 애플리케이션을 동적으로 렌더링 한다. 💡 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지를 선언한다. HTML5는 최신의 웹 표준이며, 구조적인 개선과 새로운 기능을 포함한다. // HTML5를 사용하는 문서 DOCTYPE 선언은 문서 유형 선언(Doctype declaration)의 약어로, 문서가 따르는 DTD, Document Type Defi.. 2023. 6. 8.

리액트 React | HTTP 클라이언트 데이터 통신: Ajax, Fetch, Axios ✅ HTTP 클라이언트(Client) 리액트(React)는 사용자 인터페이스를 구축하는데 초점을 두고 있어, 서버와 데이터를 주고받는 기능(HTTP 클라이언트)을 포함하지 않는다. 리액트(React)에서 서버와의 데이터 통신을 위해서는 별도의 HTTP 클라이언트를 사용해야 한다. 클라이언트와 서버는 개별적인 메시지 교환에 의하여 통신한다. HTTP 클라이언트는 HTTP 프로토콜을 사용하여 서버로부터 정보를 요청(requests)하고, 서버는 요청에 따라 적절한 응답(responses)을 반환한다. 리액트(React)에서 API 요청을 할 때 페이지를 새로고침하지 않고 데이터를 가져오기 위해 Axios나 Fetch 라이브러리를 사용한다. 💡 HTTP, HyperText Transfer Protocol HT.. 2023. 5. 19.

리액트 React | React-bootstrap: UI 컴포넌트 디자인 ✅ React-bootstrap React-Bootstrap은 UI 컴포넌트 라이브러리이다. Bootstrap 프레임워크의 디자인과 기능을 React 컴포넌트로 사용하는 것이다. React-Bootstrap 공식 문서를 통하여 자세한 정보와 사용 방법을 확인할 수 있다. 💡 React-bootstrap 사용하기 프로젝트에 React-Bootstrap 라이브러리를 설치하여 사용한다. 별도의 bootstrap.js 파일을 프로젝트에 추가하지 않아도 된다. npm 명령어를 실행하여 React-Bootstrap과 Bootstrap을 설치한다. npm install react-bootstrap bootstrap index.js 파일에서 Bootstrap의 CSS를 import 한다. 전체 애플리케이션에 Boots.. 2023. 5. 18.

스트링부트 | 리포지터리 ✅리포지터리엔티티만으로는 데이터베이스에 데이터를 저장하거나 조회 할 수 없다. 데이터 처리를 위해서는 실제 데이터베이스와 연동하는 JPA 리포지터리가 필요하다.리포지터리는 엔티티에 의해 생성된 데이터베이스 테이블에 접근하는 메서드들(예: findAll, save 등)을 사용하기 위한 인터페이스이다. 데이터 처리를 위해서는 테이블에 어떤 값을 넣거나 값을 조회하는 등의 CRUD(Create, Read, Update, Delete)가 필요하다.이 때 이러한 CRUD를 어떻게 처리할지 정의하는 계층이 바로 리포지터리이다. 💡 QuestionRepository 인터페이스 생성QuestionRepository는 리포지터리로 만들기 위해 JpaRepository 인터페이스를 상속했다. JpaRepository를 .. 2023. 5. 2.

스트링부트 | 엔티티 Entity ✅ 엔티티 Entity데이터베이스 테이블과 매핑되는 자바 클래스를 말한다. 엔티티는 모델 또는 도메인 모델이라고 부르기도 한다. SBB는 질문과 답변을 할 수 있는 게시판 서비스이다. 따라서 SBB에는 질문과 답변에 해당하는 엔티티가 있어야 한다. 💡 질문(Question) 엔티티속성명 - 설명id - 질문의 고유 번호subject - 질문의 제목content - 질문의 내용create_date - 질문을 작성한 일시@Entity 애너테이션: JPA가 엔티티로 인식한다.@Id 애너테이션: id 속성을 기본 키(primary key)로 지정한다. 기본 키로 지정하면 이제 id 속성의 값은 데이터베이스에 저장할 때 동일한 값으로 저장할 수 없다. 고유 번호를 기본 키로 한 이유는 고유 번호는 엔티티에서 각.. 2023. 5. 2.

스트링부트 | 데이터베이스 ✅ 데이터베이스데이터를 저장하거나 조회하거나 수정하는 등의 기능을 구현해야 한다. 웹 서비스는 데이터를 처리할 때 대부분 데이터베이스를 사용한다.데이터베이스를 사용하려면 SQL 쿼리(query)라는 구조화된 질의를 작성하고 실행하는 등의 복잡한 과정이 필요하다. ✅ ORM, Object Relational Mapping자바 문법만으로도 데이터베이스를 다룰 수 있다. ORM을 이용하면 개발자가 쿼리를 직접 작성하지 않아도 데이터베이스의 데이터를 처리할 수 있다.ORM을 사용하면 내부에서 SQL 쿼리를 자동으로 생성해 주므로 직접 작성하지 않아도 된다. 즉, 자바만 알아도 데이터베이스에 질의할 수 있다.ORM을 이용하면 데이터베이스 종류에 상관 없이 일관된 코드를 유지할 수 있어서 프로그램을 유지·보수하기.. 2023. 5. 2.

스트링부트 | 스프링부트 프로젝트 구조 ✅ 스프링부트 프로젝트 구조규모를 갖춘 프로젝트를 만들고자 한다면 프로젝트 구조를 잘 이해해야 한다. ✅ src/main/java 디렉터리💡 com.mysite.sbb 패키지자바 파일을 작성하는 공간이다. 자바 파일로는 HelloController와 같은 스프링부트의 컨트롤러, 폼과 DTO, 데이터 베이스 처리를 위한 엔티티, 서비스 파일 등이 있다. 💡 SbbApplication.java 파일스프링부트 애플리케이션의시작을 담당하는 파일이다. + Application.java 파일이다.스프링부트 프로젝트를 생성할때 "Sbb"라는 이름을 사용하면 SbbApplication.java 파일을 자동으로 생성한다.SbbApplication 클래스에는 @SpringBootApplication 애너테이션이 적용.. 2023. 5. 2.

스트링부트 | Spring Boot Devtools, Live Reload, Lombok 사용법 및 설치 방법 ✅ 스트링부트 도구💡 Spring Boot DevtoolsSpring Boot 애플리케이션 개발에 매우 유용한 다양한 기능을 제공한다. 자동 재시작 기능: 애플리케이션의 코드나 설정 파일이 변경될 때마다 자동으로 애플리케이션을 재시작하여 변경 사항을 확인한다.라이브 리로드 기능: 브라우저에서 애플리케이션을 다시 로드할 수 있는 LiveReload 기능을 제공하여 변경 사항을 실시간으로 확인한다.클래스 패스 변경 감지 기능: 새로운 클래스나 리소스를 추가하거나 수정하는 등의 작업을 할 때마다 애플리케이션을 재시작하지 않아도 된다.자동 구성 기능: 자동 구성 문제나 클래스 패스 충돌 문제를 해결한다.개발 환경과 운영 환경 분리 기능: 개발 환경에서만 사용되도록 설계되어 운영 환경에서는 비활성화할 수 있다... 2023. 5. 2.

스트링부트 | 컨트롤러 Controller ✅ 컨트롤러 Controller서버에 전달된 클라이언트의 요청(URL과 전달된 파라미터 등)을 처리하는 자바 클래스이다.웹 애플리케이션에서 사용자가 요청한 URL에 해당하는 컨트롤러가 선택되고, 컨트롤러는 해당 요청을 처리하기 위해 비즈니스 로직(Business Logic)을 호출하고 결과를 클라이언트에 반환한다.Spring MVC에서는 컨트롤러에서 처리한 데이터를 View에 전달하여 HTML 등의 문서를 생성하고 클라이언트에게 전송하는 방식으로 동작한다.컨트롤러의 역할은 요청을 처리하고 적절한 데이터를 View에 전달하는 것이다.💡 @Controller 애너테이션해당 클래스가 Spring MVC에서 컨트롤러로 동작하도록 설정한다.@Controller 애너테이션이 있어야 스프링부트 프레임워크가 컨트롤러.. 2023. 5. 2.

스트링부트 | 스트링부트(String Boot)란? ✅ 스프링부트 Spring Boot 스프링(Spring) 프레임워크를 기반으로 한 자바 애플리케이션 개발을 쉽고 빠르게 할 수 있도록 도와주는 오픈소스 웹 프레임워크이다. 💡 웹 프레임워크 Web Framework웹 애플리케이션 개발을 쉽게 할 수 있도록 기본적인 구조와 기능을 제공하는 소프트웨어 프레임워크이다.개발 시간을 단축하고 코드의 가독성과 유지보수성을 향상할 수 있으며, 보안과 성능을 만족시킬 수 있다.Spring Framework: Java 기반의 대표적인 웹 프레임워크로, 다양한 모듈과 기능을 제공한다.Django: Python 기반의 웹 프레임워크로, 빠르고 안정적인 웹 애플리케이션을 개발한다.Flask: Python 기반의 경량 웹 프레임워크로, 작은 규모의 웹 애플리케이션을 개발한다... 2023. 4. 26.

리액트 React | 리액트 라우터: react-router-dom 패키지 ✅ 라우팅 Routing 라우팅은 사용자가 요청한 URL에 따라 해당 URL에 맞는 컴포넌트를 보여주는 것이다. 사용자가 애플리케이션에서 다른 페이지로 이동하려고 할 때, 라우터를 사용하여 해당 페이지 컴포넌트를 렌더링 한다. ✅ 리액트 라우터 React Router 리액트 라우터(React Router)는 리액트 기반의 싱글 페이지 애플리케이션(SPA)에서 라우팅을 구현하기 위한 라이브러리이다. 리액트 자체는 View만을 담당하는 라이브러리로 페이지의 URL에 따라 적절한 컴포넌트를 렌더링 하고 상태를 관리하기 위해 리액트 라우터(React Router)를 사용한다. 💡 react-router 패키지 react-router React 기반의 웹 및 앱 라우팅을 처리하는 라이브러리이다. react-rou.. 2023. 4. 24.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 로딩 현상 구현 ✅ Movie 컴포넌트 구성하기 💡 App 컴포넌트 작성 import React from 'react'; // App 컴포넌트 정의 class App extends React.Component { // render 메소드 정의 render() { return ( {/* 컴포넌트 내용을 추가 */} ); } } // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄 export default App; 💡 isLoding state React 애플리케이션에서 데이터를 불러오거나 처리한다. 로딩 중일 때 사용자에게 로딩 중임을 알리기 위해 UI를 업데이트하는 데 사용한다. isLoading 변수는 true 또는 false 값으로 설정한다. import React from 'react'; // App 컴.. 2023. 4. 4.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3.

리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props) ✅ 속성(Props) React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다. 💡 속성(Props)의 읽기 전용성 React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항.. 2023. 3. 26.

리액트 React | 컴포넌트(Components) ✅ 컴포넌트(Components) 컴포넌트(Component)는 React 애플리케이션을 구성하는 최소한의 단위입니다. React에서는 UI를 재사용 가능한 개별적인 조각으로 분리하여 컴포넌트로 만들고, 각 조각을 개별적으로 살펴볼 수 있습니다 과거의 웹 프레임워크들은 일반적으로 MVC, Model-View-Controller 방식으로 구성되어 있어 각 요소의 의존성이 높아 재사용이 어려웠습니다. 그러나 React에서는 컴포넌트를 독립적으로 구성하여 재사용성을 높일 수 있습니다. 이를 통해 우리는 새로운 컴포넌트를 쉽게 만들 수 있습니다. 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM 노드를 출력하는 함수로 볼 수 있습니다. 💡 React 컴포넌트 네이밍 규칙 Reac.. 2023. 3. 26.

이전 1 ··· 4 5 6 7 8 9 10 11 다음

티스토리툴바