CDN 사용해 React 설치하기

개발용 리액트를 사용하기위해 두개의 자바스크립트 코드 react와 react-dom을 import 해야 합니다. 아래는 개발용 CDN을 통해 react와 react-dom을 import 한 예시이며 import한 스크립트들은 개발용으로 적합한 버전입니다. 배포용 React의 용량 및 성능 최적화된 배포용 CDN 버전을 아래와 같이 import 합니다. 작성일 기준 최신버전인 18버전으로 작성했습니다. react와 react-dom의 특정 버전을 로딩하려면 18을 사용하고자 하는 버전으로 대체하면 됩니다. 이후 최신버전은 https://ko.reactjs.org/docs/cdn-links.html에서 참고하시기 바랍니다. Reference https://ko.reactjs.org/docs/cdn-links..

• format_list_bulleted React
• · 2023. 4. 20.
• textsms

[React] Component Input declared PropTypes instead of propTypes 해결방법

이 오류는 React 컴포넌트의 prop 유형을 propTypes 대신 PropTypes 사용하여 선언할 때 발생합니다. 참고로 propTypes 객체는 부모로부터 전달받은 props의 데이터 유형 및 유효성 검사 규칙을 지정하는 속성입니다.ERROR Warning: Component Input declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment? 예를 들어 다음과 같이 PropTypes을 선언하는 대신import PropTypes from 'prop-types'; ... Input.PropTypes = { title: PropTypes.string.isRequired, placeholder: PropT..

• format_list_bulleted React
• · 2023. 4. 19.
• textsms

MAC(맥북) hosts 파일 수정 방법

1. hosts를 설정하기 위해 Mac에서 터미널을 엽니다. 2. 터미널에 sudo nano /etc/hosts를 입력하고 엔터를 누릅니다. 이렇게 하면 관리자 권한으로 nano라는 텍스트 편집기에서 호스트 파일을 열 수 있습니다. 3. 설정하려는 호스트의 IP 주소와 IP 주소와 연결하려는 도메인 이름을 추가합니다. 예를 들어 IP 주소 192.0.0.10을 도메인 이름 mysite.com과 연결하려는 경우 호스트 파일에 다음과 같이 추가합니다. 4. Control+X, Y, Enter를 차례로 눌러 파일을 저장합니다. 호스트 설정이 완료되었습니다!

• format_list_bulleted 기술팁
• · 2023. 4. 18.
• textsms

[SQL] 데이터베이스 TRUNCATE, DELETE, DROP 차이점

TRUNCATE, DELETE, DROP는 데이터베이스 테이블에서 삭제를 수행할 수 있는 작업이지만 각 작업에는 차이점이 있습니다. TRUNCATE, DELETE, DROP 차이점을 알아보겠습니다. DELETEDELETE 명령은 테이블에서 하나 이상의 행을 제거하는 데 사용됩니다. DELETE 명령을 사용하면 데이터만 제거되고 테이블 구조는 변경되지 않습니다. 테이블에서 특정 행을 제거하되 나머지 데이터는 그대로 유지하려는 경우에 사용합니다.DELETE FROM employees WHERE department = 'IT'; TRUNCATETRUNCATE 명령은 테이블 구조를 유지하면서 테이블에서 모든 행을 제거하는 데 사용됩니다. TRUNCATE 명령을 사용하면 테이블의 모든 데이터가 삭제되지만 테이블 ..

• format_list_bulleted MSSQL
• · 2023. 4. 18.
• textsms

[React] useState 사용법

React에서 useState는 상태를 추가하고 관리할 수 있게 해주는 hook입니다. 상태란 시간이 지남에 따라 변경될 수 있는 값으로 이 값을 저장하고 관리하는 데 useState를 사용합니다. useState 사용법 먼저 useState의 사용법은 다음과 같습니다. const [상태 변수, 상태 변경 함수] = useState(초기값); useState함수에 초기 상태 값을 매개변수로 호출하면 배열이 반환됩니다. 이 배열에는 현재 값을 나타내는 상태 변수와 상태 값을 변경하는데 사용하는 함수가 들어가 있습니다. 예를 들면 다음과 같습니다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = us..

• format_list_bulleted React
• · 2023. 4. 16.
• textsms

[React Native] 키보드 내리기 방법

React Native에서 화면에 이미 활성화되어 있는 키보드를 내리려면 React Native API에서 제공하는 키보드 모듈을 사용하면 됩니다. Keyboard 모듈은 키보드를 제어하는 데 사용할 수 있는 몇 가지 메서드를 제공하는데요. 그 중 키보드를 내리기 위해서는 Keyboard.dismiss() 메서드를 사용하면 됩니다. 키보드 내리기 예제 1 특정 버튼을 클릭했을 때 키보드를 내리는 예제입니다. import React from 'react'; import { View, TextInput, Button, Keyboard } from 'react-native'; const MyComponent = () => { return ( Keyboard.dismiss()} /> ); }; export de..

• format_list_bulleted React
• · 2023. 4. 16.
• textsms

[React Native] iOS 시뮬레이터에서 키보드 안 보일 때 해결방법

현상 React Native로 개발 후 iOS 시뮬레이터를 실행했습니다. 터미널에 별다른 오류 로그가 찍히지 않으나 TextInput 컴포넌트를 클릭하면 키보드가 나타나지 않는 현상이 있었습니다. 해결방법 iOS simulator 안에 있는 Textinput에 focus한 상태로 command(cmd) + K를 입력합니다.

• format_list_bulleted React
• · 2023. 4. 2.
• textsms

[React Native] TextInput 별표 표시 방법

secureTextEntry 일반적으로 React Native에서 TextInput 컴포넌트에 내용을 입력하면 우리가 입력한 내용이 그대로 화면에 나타납니다. 비밀번호나 신용카드 번호와 같은 민감한 정보를 다른 사람의 눈에 띄지 않도록 보호하려는 경우 secureTextEntry를 사용합니다. React Native의 secureTextEntry는 TextInput 컴포넌트와 함께 사용할 수 있는 프로퍼티입니다. secureTextEntry가 true로 설정되어 있으면 TextInput 컴포넌트에 입력된 모든 텍스트가 숨겨지고 점이나 별표로 대체되어 비밀번호와 같은 민감한 정보를 보호할 수 있습니다. secureTextEntry 사용 방법 다음은 React Native에서 secureTextEntry를 ..

• format_list_bulleted React
• · 2023. 4. 2.
• textsms

MX레코드 확인 방법

MX레코드란? MX 레코드(Mail Exchanger Record)는 메일 교환 레코드를 의미합니다. 특정 도메인 이름을 대신하여 이메일 메시지를 수락할 메일 서버를 지정하는 DNS(도메인 이름 시스템) 레코드의 한 유형입니다. 누군가 특정 도메인 이름을 가진 이메일 주소로 이메일을 보내면 발신자의 이메일 서버는 해당 도메인의 DNS 레코드를 참조하여 해당 도메인의 이메일 처리를 담당하는 서버를 찾습니다. 도메인의 MX 레코드에는 이메일 메시지를 수신해야 하는 이메일 서버의 호스트 이름이 포함되어 있습니다. 예를 들어 누군가 amy@google.com로 이메일을 보내면 발신자의 이메일 서버는 google.com에 대한 MX 레코드를 조회하여 amy의 사서함으로 메시지를 전달하기 위해 연결해야 하는 서버를..

• format_list_bulleted 기술팁
• · 2023. 3. 30.
• textsms

[Javascript] 배열, 문자열, 맵 전체 출력하기 - for of 반복문

for of 반복문 for of 반복문은 배열, 문자열, 맵과 같은 반복 가능한 객체를 더 쉽게 반복할 수 있도록 ES6에서 새롭게 도입된 기능입니다. 사용 방법은 다음과 같습니다. 배열 반복 배열로부터 for of 문을 사용하여 배열의 요소를 반복해 출력하는 예시입니다. See the Pen javascript - for of - array by saladent (@saladent) on CodePen. 문자열 반복 "Hello" 값을 가진 문자열로부터 str을 for of 문을 사용하여 문자를 반복해 출력하는 예시입니다. See the Pen javascript - for of - string by saladent (@saladent) on CodePen. 맵 반복 세 개의 키-값 쌍이 있는 map으..

• format_list_bulleted javascript
• · 2023. 3. 30.
• textsms