리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미함. 클래스형 컴포넌트가 가지고 있는 state가 있고, 함수형 컴포넌트가 가지고 있는 state가 있다. => props와 다른 점은 부모 컴포넌트가 설정하는 값이고 자식 컴포넌트에서 읽기 전용으로만 사용할 수 있다는 점 import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); // state의 초깃값 설정 this.state = { number: 0, }; } render() { const { number } = this.state; return ( {number} { this.setState({ ..

- export키워드는 다른 파일에서 파일 import 할 때 위에서 선언한 클래스 불러오도록 함 export default MyComponent; - import 키워드로 아래와 같이 모듈을 불러올 수 있다. import React from 'react'; const MyComponent = () => { return 나의 새롭고 멋진 컴포넌트; }; export default MyComponent; import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; export default App;

VsCode에서 Reactjs Code Snippet 확장 프로그램을 설치했다면, 컴포넌트 코드를 빠르게 생성 가능하다. 1. 편집기에서 rsc 입력 후 엔터를 누르면 함수형 컴포넌트 생성 가능 2. 혹은 rcc를 입력 후 엔터를 누르면 클래스형 컴포넌트 생성 가능

1. 마켓플레이스에서 Prettier 플러그인 설치 2. F1누르고 format 입력 후 enter (code formatter가 prettier로 설정이 되어있어야함) 3. 코드 자동 정렬 및 세미클론,큰따옴표 실수 보정 프로젝트 루트 경로에 .prettierrc 파일 만들어서 { "singleQuote": true, "semi" : true, "useTabs" : false, "tabWidth": 2 } 사용자 스타일 지정도 가능. F1누르면서 enter쳐서 코드 포맷팅 하는 기능이 귀찮다면 VSC 상단 파일 탭 > 기본 설정 > 설정 들어가서 format on save 검색하고 Fomat On Save Option 체크해주면 저장할때마다 코드가 자동 정렬됨.

- JSX는 자바스크립트의 확장 문법 - JSX형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드를 번들링하는 과정에서, 바벨을 사용하여 일반 JS형태 코드로 변환된다. - 하나의 컴포넌트를 만들 때 요소 여러 개를 꼭 하나의 요소로 감싸주어야 함 => 가상 DOM을 생성하면서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록, 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야한다는 규칙이 있기 때문에 function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; - JSX에서 다음과 같이 자바스크립트 표현식을 쓸 ..

import React from 'react'; - 모듈을 불러와서 사용하는 것은 원래 브라우저에서 없는 기능이다. - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게끔 Node.js에서 지원함. - 이러한 기능을 브라우저에서 사용하기 위해, 번들러(Webpack, Parcel, broserify)를 사용함 - 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 합쳐서 하나의 파일 생성 가능 import logo from './log.svg'; import './App.css' - 이런 식으로 파일을 불러올 수 있는데, 이는 웹 팩의 로더라는 기능이 담당함

JPA는 특정기능을 제공하는 라이브러리가 아닌 인터페이스이다. 따라서 이를 구현하는 Hibernate, OpenJpa등이 JPA를 구현함. JPA 의존성을 가져오면, dependecies에 내부적으로 jpa 인터페이스를 가져오는 것을 볼 수 있음. - jpa 2.2버전을 쓴다. (persistence version = "2.2" - persistence-unit name 으로 이름을 지정할 수 있음 - 안에 driver, user, password, url, dialect가 들어감 - hibernate.dialect => SQL 표준을 지키지 않는 특정 데이터베이스만의 고유한 기능 ( ex : mySql limit, Oracle의 rownum) => 해당 property의 value에 사용하는 디비 종류..

function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } const getDog = async () => { await sleep(1000); return "멍멍이"; }; const getRabbit = async () => { await sleep(500); return "토끼"; }; const getTurtle = async () => { await sleep(3000); return "거북이"; }; async function process() { const dog = await getDog(); console.log(dog); const rabbit = await getRabbit(); console.log..

function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function process() { console.log("안녕하세요!"); await sleep(1000); console.log("반갑습니다!"); } process().then( value -> { console.log(value); }); - 프로미스 앞 부분에 await을 붙여주고, await키워드를 사용하는 함수 앞부분에 async키워드가 들어가야 함 - async를 붙이면 해당 함수는 항상 프로미스를 반환함. 프로미스가 아닌 것은 프로미스로 감싸서 반환함 - await은 해당 프로미스가 끝날때까지 기다렸다가 다른 작업을 수행할때 사용함