본문 바로가기

Dev111

[React] 리액트는 어떻게 작동할까? 리액트는 빌드 프로세스를 사용한다.즉, 작성한 코드가 그대로 브라우저에서 실행되지 않고, 브라우저에 전달되기 전에 내부적으로 코드가 수정되는 것이다. package.json 파일에서 프로젝트가 사용하는 모든 의존성 라이브러리들을 확인할 수 있다.이 중 react-scripts 패키지는 브라우저에 전달되기 전에 코드를 변환하는 다양한 툴을 제공한다.그 중 하나가 HTML 파일 안에 script를 추가하는 것이다.백그라운드의 빌드 프로세스가 script 요소를 생성하고 HTML 파일에 추가한다.개발 서버가 소스 코드를 확인소스 코드를 변환HTML파일에 script 요소 추가변환된 소스코드 로드 왜 이런 빌드 프로세스를 사용할까?리액트 코드는 따로 처리하지 않으면 브라우저에서 실행할 수 없기 때문이다.리액트는.. 2024. 6. 19.
[React] map() map()자바스크립트 배열의 내장 함수(메소드)이다.배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환한다.let arr = [3, 4, 5, 6];let modArr = arr.map(function(element){ return element *3;});console.log(modArr); // [9, 12, 15, 18]  arr.map(function(element, index, array){  }, this);요소(element)뿐만 아니라 인덱스(index), 전체 배열 객체(array)를 전달하고, this는 콜백함수 내부에서 사용하게 된다.  리액트 map() 예시const ItemList = () => { const data = ['.. 2024. 6. 12.
[React] useState State리액트를 사용하는 가장 큰 이유는 상태(State)에 반응(Reaction)을 하기 위해서이다. 즉, 변수 값이 업데이트되면 UI도 업데이트 해줘야 한다. 하지만 변수가 변경될 때마다 UI가 매번 변경된다면 엄청난 자원 비용이 발생한다. 그래서 리액트는 변수 변경이 아니라 UI가 변경되야할 때만 업데이트할 수 있도록 State 라는 걸 추가했다. 즉, 변수가 업데이트 된다해서 렌더링하지 않고, State가 업데이트 된다면 렌더링한다. 이 때 사용하는 함수가 useState이다.  useState()컴포넌트 상태를 관리할 수 있는 함수다. 1. useState 함수 불러오기import { useState } from 'react';  2. useState 사용하기 const [state, setS.. 2024. 6. 12.
you add an SSH key to your profile You can't push or pull repositories using SSH until you add an SSH key to your profile.SSH란?- Secure Shell- 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜이다.- SSH 이전에는 원격 접속 과정에서 옮겨지는 비밀번호나 파일 내용 등의 데이터를 탈취할 수 있었다.- SSH는 SSH Client와 SSH Server로 구성되어 있다.- 사용자(클라이언트)와 서버(호스트)는 각각의 키를 보유하여, 이 키를 이용해 연결 상태를 인증하고 안전하게 데이터를 주고받게 한다. 맥에 SSH 생성하기터미널에 ssh-keygen을 입력하고 엔터Generating public/private rsa key pair 이란 문구가 나오고Ent.. 2023. 10. 23.
뷰 컴포넌트 뷰 컴포넌트 화면 영역을 구분하여 개발(헤더, 네비, 콘텐츠, 푸터...) 코드의 재사용을 위함(코드 반복을 줄여서 여러 화면에 사용) new Vue({ el: '#app' }); 뷰 인스턴스를 생성하면 기본적으로 컴포넌트가 생성된다. 전역 컴포넌트 전역 컴포넌트는 component('컴포넌트이름', 컴포넌트내용)으로 만들수 있다. #app(Root 컴포넌트) 안에서 태그로 사용할 수 있다. 여러 인스턴스에서 공통으로 사용하며 위치에 상관없이 어디서든 호출할 수 있다. 전역으로 사용해야하는 플러그인이나 라이브러리만 사용한다. 최초 빌드시에 같이 빌드되기에 무거워질 수 있다. Vue.component('app-header', { template: 'Header' }) new Vue({ el: '#app' .. 2023. 8. 22.
뷰 템플릿 문법 뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 HTML로 변환해주는 속성 뷰 템플릿 문법 Vue는 DOM에 Vue의 데이터와 로직이 연결될 수 있도록 HTML 기반의 문법을 제공 1. 데이터 바인딩 {{ }} 콧수염 괄호를 이용해서 data 등의 속성들을 화면에 나타냄 - bind: 데이터 연결 - computed: 데이터 표현을 더 직관적이고 간결하게 도와주는 속성 {{ message }} {{ doubleNum }} 2. 디렉티브 HTML태그에서 'v-'로 시작하는 속성. 'v-' 속성들을 읽어들여 이벤트를 처리 - v-bind:id: id를 연결. DOM의 정보까지 리액티브하게 변경할 수 있다 - v-bind:class: class를 연결 - v.. 2023. 1. 14.
반응형

티스토리툴바