SdardewValley의 개발 농사

리액트에 외부 폰트 적용하는 방법 중에서 제일 간단한 방법을 소개하고자 한다. 이번 프로젝트에서 나는 배민체 중 도현체를 웹 페이지에 적용하고자 한다. 🥓 적용하고자 하는 글씨체를 찾는다. 구글 폰트 사이트에서 원하는 글씨체를 찾는다. 저기서 Language를 Korean으로 설정하면 한글을 지원해 주는 글씨체를 모아서 볼 수 있다. 🥓 Select this style을 클릭한다. 빨간 네모친 부분을 보면 Select this style을 찾을 수 있다. 저 버튼을 클릭하자. 오른쪽 상단에 있는 저 버튼을 클릭하자. 그럼 위와 같은 Selected family가 나타난다. 저기서 @import를 선택하고 저기서 @import url('주소');를 복사한다(style 태그는 제외한다). 🥓 리액트에서 설정..

👩‍💻 state 🚌 컴포넌트 내부에서 바뀔 수 있는 값 ❗ props: 부모 컴포넌트에서만 바꿀수 있으며 컴포넌트 자신은 읽기만 할 수 있다. 👩‍💻 클래스형 컴포넌트 state constructor(props) { super(props); this.state = { number: 0 }; } contructor 메소드는 생성자 메소드이다. 클래스형 컴포넌트에서는 super(props)를 호출해 주어야한다. this.state 값에 객체 형식으로 초기값을 설정힌다. render() { const {number} = this.state; return ( {number} this.setState({number: number + 1})}>+1 ); } this.state: 현재 state를 조회할 때 사용 ..

pops(properties) ⚡ 컴포넌트 속성을 설정할 때 사용 ⚡ 부모 컴포넌트에서 설정 import React from 'react'; const MyComponent = props => { return 지금 {props.study}를 공부하고 있습니다.; }; export default MyComponent; src/MyComponent.js 파일이다. import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return }; export default App; src/App.js 파일이다. 출력 화면을 보면 study 값이 "리액트"로 설정되어 출력된 것을 확인할 수 있다. MyComponent...

import React from "react"; import "./App.css"; function App() { const study = "리액트"; return ( {study} ); } export default App; 여기서 App은 함수형 컴포넌트이다. 이것을 다음과 같이 클래스형 컴포넌트로 변경할 수 있다. import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { const study = '리액트'; return {study} } } export default App; render 함수가 사용된 것을 확인할 수 있다.

JSX에는 몇 가지 규칙들이 있다. 🔥 여러 element들은 하나의 element로 감싸야 한다. import React from 'react'; function App() { return ( JSX 문법 감싸기! ); } export default App; 위의 코드를 작성하고 터미널을 보면 에러가 발생한다. 보라박스는 개인 정보를 가린것이다! "must be wrapped in an enclosing tag" 문구를 확인할 수 있다. 여러 element들이 하나의 element에 감싸져 있지 않기 때문이다. 이 코드를 수정해보자! import React from 'react'; function App() { return ( JSX 문법 감싸기! ); } export default App; 코드를 수..

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( 위의 코드는 public/index.html 코드이다. 여기서 밑에서 세번째 줄의 div element를 보면 id가 root인 것을 확인할 수 있다.