우사미 코딩

1. 경로 1) same directory - ./ 2) up one directory - ../ 2. export js파일에서는 함수와, 변수 모두 export할 수 있다. 3. import import 할 때는 함수명은 변경할 수 있고 변수명은 변경이 불가하다! App.js에서 fuction App()라는 이름으로 정의된 함수더라도 import MyApp from './App'; 으로 이름을 바꿔서 불러올 수 있는데, 이건 다양한 패키지에서 동일한 함수명이 있을 때 중복을 피하기 위해서 사용한다. 이렇게 함수명은 변경할 수 있지만 변수명은 변경이 불가함! 패키지를 불러올 때는 경로를 입력하지 않고 바로 import React from 'react'로 사용할 수 있는데 이건 node_modules폴더에..

1. Layout function App(){ const name = 'usami'; const age = 5; return ( My name is {name} and I'm {age}! ) } 변수를 선언하고 보여질 컴포넌트에 컨텐츠를 업데이트하는데 오잉 컴포넌트는 대부분 비슷한 레이아웃을 하고있네영 그럼 뭐다? 재활용이 가능하게 컴포넌트화 하면 된다! 암튼 이건 컴포넌트에서 다시 다룰거임 html input태그에 속성을 입력하는 것을 jsx에서는 props라고 하는데 이걸 어떻게 사용하는지 보겠습니당 1. 변수로 속성 설정하기 function App(){ const inputType = "number" const minValue = 5; return } 2. curly braces로 속성을 array..

저번에 index.js파일을 만들고 h1태그를 반환하는 리액트 함수를 만들었단 말이져\? 저렇게 태그로 반환되는걸 jsx라고 한다네염 그럼 이렇게 반환된 코드는 이렇게 표현된다고 함;;; 여튼 이론은 이러하고 message라는 변수를 선언해서 string값으로 설정한 후 h1 태그에 출력해보자. * 변수 선언과 출력 function App(){ this is an element! // it dosen't show on the screen, because it's not returning on line 14 let message = 'Bye there!' let num = Math.random() if(num > 0.5){ message = 'Hello there!' } console.log("num : ..

...? 그만 알아보자 ^^ 는 뻥이고 앱을 구동시키는데 저 파일들이 다 필요한 것은 아니다! 중요한것만 알아보자. 암튼 그렇다고 함 그럼 프로젝트에서 필요없는 녀석들을 제거-해보겠다. public에서는 index.html만 남기고 삭제했고 src폴더 안은 모두 삭제 후 index.js를 새로 생성햇다. index.js파일은내 프로젝트가 브라우저 안에서 실행될 때 가장 먼저 수행되는 파일이다. 그럼 텅 빈 index.js파일을 아래와 같이 채워넣자! // 1) Import the React and ReactDOM libraries import React from 'react'; import ReactDOM from 'react-dom/client'; // 2) Get a reference to the d..

1. 프로젝트 시작하기 Node.js설치하고 cmd 열어서 명령어 입력하는데 에러 뜸 C:\Users\User>npx create-react-app jsx npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\User\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\User\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of ..

1. 태그를 컴포넌트화(부품화)하여 코드 재사용율을 높이고, 코드 수정이 쉽게 한다. 전 직장에서 소프트웨어 개발할 때 모든 ui를 부품화하여 개발했는데 그거랑 비슷한 개념임. 굿! 버튼에 클릭 이벤트를 넣는다던가 별도의 함수를 호출한다? 그럼 해당 컴포넌트에 함수를 작성하면 됨. 굿! 2. 웹에서 ui를 실시간으로 고치는 작업은 비용이 크다고 한다. 그런데 react를 사용하면 ui를 새로 그리는 비용이 줄어든다고 함. 3. jsx function App() { return ( Hello ); } React에서 위와 같이 html코드를 return하는 스타일을 jsx라고 하고 파일명도 .jsx로 되어있다. 4. component import React from "react" import TodoItem..