ㅂㄹㄱ ㅂㄹㄱ

public : static한 문서 src : dynamic한 문서 컴포넌트인지 순수 자바스크립트 코드인지 구별하기 위해 .js 대신 jsx를 쓴다. 프로젝트를 돌리다가 컴파일에 문제가 생기면 yarn&&yarn start를 사용한다.

* 바벨 떼기 -> 브라우저에서 매번 바벨로 jsx를 통역하는게 아니고 이미 통역된 js를 올림 create-react-app : 리액트 초기 개발에 필요한 모든 것을 자동으로 해줌 webpack : 웹개발 시 필요한 여러가지 작업들을 명령어 하나로 설정하는 것 참고 자료 - https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80 웹팩이란? | 웹팩 핸드북 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Image..

javascript api 중에 fetch()가 있음 fetch 관련 개념 1. promise https://joshua1988.github.io/web-development/javascript/promise-for-beginners/ 자바스크립트 Promise 쉽게 이해하기 (중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법 joshua1988.github.io 2. 비동기 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ 자바스크립트 비동기 처리와 콜백 함수 (중급..

1. jsx : javascript + xml -> javascript에 html을 끼얹은 문법 (html 태그 안에서는 중괄호를 사용하여 js를 사용할 수 있었음) const title = {count}번째 고양이 파란색이 바로 리액트 엘리먼트! 2. babel : jsx를 javascript로 통역해줌 (통역 내용은 header에 존재함) 최신 문법을 브라우저가 이해할 수 있는 javascript로 통역 브라우저는 jsx를 이해하지 못함 3. 리액트 코드를 html에 적용하기 html 코드에는 빈공간만 만들어 주고 리액트 코드를 html에 끼워넣는다. 4. 컴포넌트 : 여기저기 재사용 가능한 UI 코드 조각 -> 동일한 ui지만 컨텐츠는 다르게 그릴 수 있음 5. 이벤트 => 외우는 것이 아닌 자바스..

이벤트를 발생 시킬 때마다 그 횟수를 1씩 증가하도록 만드는 것 const counter = countState[0]; const setCounter = countState[1]; setCounter에서 counter를 조작할 수 있다. 그런데 매번 위의 코드블럭대로 쓰면 번거로우니까 const [counter, setCounter] = React.useState(1); 이런식으로 사용할 수있다. lifting state up 자식 컴포넌트 안에서 쓰이던 상태를 상위 컴포넌트에서 같이 쓰고자 할 때, 해당 컴포넌트를 위로 끌어 올린다. 달리 말하면 상위 컴포넌트에서 만든 상태를 하위 컴포넌트에 props로 넘겨서 쓸 수 있도록한다.

1. react는 자바스크립트 ui 라이브러리 : 프레임워크 아님 -> 웹과 모바일을 위한 하나의 완성된 자바스크립트 라이브러리 -> single page application을 만드는 것임 mvc 같은 디자인패턴은 아님 2. react 특징 - 컴포넌트 기반 : 독립된 ui 구성요소 - virtual DOM을 사용 : 바뀌는 부분만 업데이트 (굉장히 빠르다) - JSX (js안에 html 문법을 사용할 수 있음) 3. babel - 스크립트를 브라우저가 읽을 수 있는 형태로 번역해주는 애 4. {} 중괄호는 리액트의 표현식이다. - 이걸 쓰려면 최상위 태그가 하나여야 함 따라서 태그 하나로 묶어줘야함