WHIMSICAL

위 방법을 사용했더니 성공했다.

[코딩앙마] React JS 강좌 $ npx create-react-app voca 터미널에 다음과 같은 명령어를 통해 voca 라는 프로젝트를 만들어준다. 다음과 같은 파일들이 install 됨. node_modules 는 프로그램이 실행할 때 사용되는 모듈이며, 지워졌을 경우 npm i 명령어를 통해 설치가 가능하다. package.json 파일에 모두 기록되어 있다. 깃에 올릴 때 modules 폴더는 올리지 않는다. 컴포넌트 각 블럭별로 컴포넌트가 나뉘어짐. export default function World() { return World; } import World from "./World"; const Hello = () => { return ( Hello ); }; export defaul..

[처음 만난 리액트] 섹션 8. Handling Events Event 사건. 특정 사건을 의미 사용자가 버튼을 클릭한 사건 버튼 클릭 이벤트 DOM의 Event Activate 리액트의 Event Activate camelCase Event Handler 어떤 사건이 발생하면 사건을 처리함 Event Listener 라고도 함 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; //callback 에서 this 를 사용하기 위해서는 바인딩을 필수적으로 해줘야 합니다. this.handleClick = this.handleClick.bind(this); } han..

[처음 만난 리액트] 섹션 7. Hooks Hooks state !!!! function Component - state 사용 불가 - Lifecycle 에 따른 기능 구현 불가 - Hooks Class Component - 생성자에서 state 를 정의 - setState() 함수를 통해 state 업데이트 - Lifecycle methods 제공 갈고리 프로그래밍 언어로는 갈고리처럼 끼어들어 같이 실행되는것 원하는 시점에 정해진 함수가 실행되도록 만든 것. Use 를 사용 (훅을 나타내는 것) useState() state를 사용하기 위한 Hook useState() 사용법 const [변수명, set함수명] = useState(초기값); 리턴값으로 배열이 나온다. (변수, set 함수) import..

[처음 만난 리액트] 섹션 6. State and Lifecycle 6강. State and Lifecycle 가장 중요한 부분 중 하나. 클래스 컴포넌트와 관련됨 (함수 컴포넌트에서도 사용) State (상태) 리액트 Component 의 상태 !!!!! 리액트 Component 의 변경 가능한 데이터. -> State 개발자가 정의함 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 함 state는 JS 객체이다. class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } ... } 다음과 같은 예제가 있다. 모든 클래스 컴포넌트에는 construc..

[처음 만난 리액트] 섹션 4. Rendering Elements 렌더링 엘리먼트. 크리에이트 엘리먼트. 엘리먼트는 무엇이며, 어떤 역할인지. Elements 어떤 물체를 구성하는 성분 (요소, 성분) 리액트 앱을 구성하는 가장 작은 블록들 Dom 에서 사용하는 개념 리액트 엘리먼트와 돔 엘리먼트의 차이. 리액트 앨리먼트는 돔 엘리먼트의 가상 엘리먼트 돔 앨리먼트가 더 무겁다. 화면에 나타나는 내용을 기술하는 자바스크립트 객체 Descriptor => Dom 엘리먼트 Elements 는 화면에서 보이는 것들을 기술한다. 우리는 Elements 를 토대로 돔 엘리먼트가 만들어진다. Elements 의 생김새 리액트 Elements는 자바스크립트 객체 형태로 존재한다. 일반적인 자바스크립트 객체이며 불변성을..

[처음 만난 리액트] 섹션 3. JSX JSX 리액트를 사용할 때 필수적으로 알아야 함 JSX 란? A syntax extension to JavaScript (자바스크립트의 확장 문법) JS + XML/HTML const element = Hello, world! ; JS 와 HTML 이 결합되어 있는 JSX 코드이다. JSX 의 역할 내부적으로 HTML 코드를 JS 코드로 변환시켜 준다. //JSX 를 사용한 코드 const el = ( Hello, world! ) //JSX 를 사용하지 않은 코드 const el = React.createElement( 'h1', { className : 'greeting' }, 'Hello, world!' ) const el = { type: 'h1', props..

[처음 만난 리액트] 섹션 2. 리액트 시작하기 HTML 만으로 간단한 웹사이트 만들기 참진의 블로그에 오신 여러분을 환영합니다. CSS 를 사용하여 웹사이트 스타일링하기 h1 { color: green; font-style: italic; } 동일한 디렉터리에 위치해야 한다. 웹사이트에 React.js 추가하기 참진의 블로그에 오신 여러분을 환영합니다. function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( "button", { onClick: () => setIsClicked(true) }, isClicked ? "Clicked!" : "click here!..

[처음 만난 리액트] 섹션 1. 리액트 소개 1강. 리액트 소개 정의를 잘 알고 배우는 것이 중요하다. 리액트는 무엇인가? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리(도서관)는 무엇인가? 프로그래밍 언어에서 라이브러리라는 것은 자주 쓰는 기능들을 정리해 모아 놓은 것이다. 사용자의 인터페이스(User Interface, UI) 사용자와 컴퓨터프로그래밍의 입력과 출력을 제어해주는 것 버튼이나 텍스트 입력창 등이 모두 사용자 인터페이스라고 생각하면 된다. (버튼을 누르고 --> 반응) 이러한 기능들을 모아놓은 것 UI 라이브러리 (화면을 만들기 위한 기능들을 모아놓은 것) ex ) 엔귤러JS, 리액트, 뷰JS, 구글 페이스북 등에서 사용됨 리액트는 가장 많이 사용되는 JS UI 라이브..

[처음 만난 리액트] 0강. 준비하기 HTML Hyper Text Markup Language 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 Tag (태그) 의 형식 태그는 열었으면 꼭 닫아줘야 한다. (제대로 닫지 않을 시 오류 발생) head 태그에는 웹사이트의 속성 (머리) 이 포함 되어 있다. 메타 데이터 라고 한다. body 태그에는 실제로 웹사이트에서 보이는 콘텐츠 (몸통) 가 들어간다. html 파일이 여러개일 때 SPA(Single Page Application)을 활용한다. 리액트는 한 개의 html 파일에 Content 여러 개를 동적으로 채워 넣을 수 있게 한다. Css Cascading Style Sheets 디자인을 입힌다. CSS 만 변경해도 전혀 다른 형태를 만들 수 있..