[React] 실습 - 댓글 컴포넌트 만들기

[React] 실습 - 댓글 컴포넌트 만들기

- Comment.jsx import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText: { color: "black", fontSize: 16,..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 24.
  • textsms
[React] 실습 - 시계 만들기

[React] 실습 - 시계 만들기

- Clock.jsx import React from "react"; function Clock(props) { return ( 안녕, 리액트! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(d..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 24.
  • textsms
[React] JSX 정의, 장점, 사용법

[React] JSX 정의, 장점, 사용법

JSX - JavaScript + XML/HTML - XML/HTML 코드를 JavaScript로 변환하는 역할 React.createElement() : React Element 객체 생성 : JSX 코드를 createElement() 코드를 사용하도록 변환 React.createElement( type, [props], [...children] ) // JSX 사용 Hello, {name} // JSX 사용 안함 React.createElement('div', null, 'Hello, ${name}') JSX 장점 코드 간결성 가독성 향상 - 버그 발견 쉬움 Injection Attacks 방어 - 보안성 증가 JSX 사용법 - XML/HTML을 사용하다가 자바스크립트를 사용하고 싶으면 {중괄호} 이..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 24.
  • textsms
[React] create-react-app

[React] create-react-app

create-react-app - 리액트로 웹 애플리케이션을 개발하기 위한 모든 설정이 되어 있는 상태로 프로젝트 생성 - Node.js v14.0.0 이상, npm v6.14.0 이상, vs code 필요 1. 리액트 폴더 생성 - vs code의 터미널에 아래 코드 입력 - 에 원하는 폴더 이름 넣기 npx create-react-app 2. 폴더로 이동 - 생성한 리액트 폴더로 이동 cd / 3. 리액트 애플리케이션 실행 npm start

  • format_list_bulleted Front-end/React
  • · 2023. 5. 17.
  • textsms
[React] HTML 코드에 직접 리액트 연동

[React] HTML 코드에 직접 리액트 연동

HTML 코드에 직접 리액트 연동 - 화면에 Hello World! 표시 - Click here이라고 적힌 버튼 생성 - 버튼을 클릭하면 Clicked로 변경되도록 함 1. DOM Container(Root DOM Node) 추가 - virtual DOM의 시작점인 DOM Container를 태그 내에 추가 Hello world! 2. 리액트와 리액트 컴포넌트 가져오기 Hello world! 3. 리액트 컴포넌트 제작 - MyButton.js 라는 이름의 파일 생성 후 다음 코드 입력 function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {o..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 17.
  • textsms
[React] 리액트의 정의, 장단점

[React] 리액트의 정의, 장단점

리액트(React) - 사용자 인터페이스(User Interface, UI)를 만들기 위한 javascript 라이브러리 - 즉, 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위해 javascript의 기능 모음집 리액트의 장점 빠른 업데이트 & 렌더링 속도 : 웹사이트 탐색 시 화면 내용이 빠르게 바뀜 : 이를 위해 내부적으로 virtual DOM(Document Object Model) 사용 -> 업데이트 해야 할 최소한의 부분만 찾아서 업데이트 컴포넌트(Component) 기반 : 레고 블록 조립하듯 컴포넌트들을 모아서 개발 재사용성(Reusability) : 소프트웨어 및 모듈을 다른 곳에서도 사용 가능 : 개발 기간 단축 : 유지 보수가 용이 메타(Meta)의 지원 : 꾸준한 버전 관..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 17.
  • textsms
[React] 개발 환경 설정(Node.js, npm)

[React] 개발 환경 설정(Node.js, npm)

Node.js - javascript로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) - node.js를 위한 패키지 매니저 - 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제가 가능하게 함 - node.js를 설치하면 자동으로 탑재 Node.js 설치 1. https://nodejs.org/en/에 접속한다 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 왼쪽(안정화된 버전)과 오른쪽(최신 버전) 중 더 맞는 버전 다운로드 3. cmd 창을 열어서 설치 확인 : --version 명령어..

  • format_list_bulleted Front-end/React
  • · 2023. 5. 17.
  • textsms