신입개발자_장민기

import reacting from "./assets/exam.png"; function App(){ return ( {/* assets에서 이미지 파일 가져옴(import 필요) */} {/* public에서 이미지 파일 가져옴(import 불필요) */} ) } export default App;

data.js export const CORE_AVATARS = [ { name: "홍길동", age: 20, address: "서울" }, { name: "이순신", age: 50, address: "전라" }, { name: "강감찬", age: 44, address: "경기" }, ] App.js(외부 데이터 사용 + 스프레드 함수 + Map 함수) import { CORE_AVATARS } from "./data/data" function Avatar(props){ const {name, age, address = "제주"} = props; return ( 이름: {name} 나이: {age} 주소: {address} ) } export default function App(){ console.l..

App.js import Avatar, {Avatar2} from "./components/Avatar" //외부 파일 Avatar import Member from "./components/Member" //외부 파일 Member export default function App(){ const addr = "서울"; const chul = {name: "유관순", age: 10, address: "부산"}; return ( {/* 문자열을 제외한 모든 값을 전달할 때는 반드시 중괄호 사용 */} 외부 파일 Avatar {/* jsx주석: 매개변수에서 직접 분해 가능 */} 회원0: 회원1: 회원2: 회원3: Avatar2: Member: ) }; Avatar.js function Avatar(prop..

import "./App.css" /* Avatar */ function Avatar(props){ console.log(props); // {name: "홍길동", age: 20, addr: "서울"}; const {name, age, address = "제주"} = props; //기본값 return ( 이름: {name} 나이: {age} 주소: {address} ) } function Avatar2({name2 = "강감찬", age2, address2}){ /* 객체의 분해 할당 */ return ( 이름: {name2} 나이: {age2} 주소: {address2} ) } function Member({person}){ //JSON: props대신 {person}으로 받음 const {name..

import "./App.css" //import sample from "./assets/sample.png" // //공통으로 사용하는 변수 let title = "Menu"; let names = ["홍길동", "이순신", "강감찬"]; let attr = {href: "http://www.google.com", target: "_blank"}; const App1 = (props) => { console.log("App1", props); return App1입니다. } function App(){ return ( jsx 사용 1 - 기본 숫자는 중괄호로 출력, 계산 : {100 +1} Boolean값(true, false, null)은 직접 출력 안 됨 : {3 > 2} Boolean값(true,..

https://komas.tistory.com/142 [Spring] 스프링 Resources 파일 읽기, 복사 resoruces에 위치한 data.json을 읽어야 한다. { "hello": "123" } data.json의 내용은 다음과 같다. @SpringBootApplication public class RestApIsApplication { public static void main(String[] args) throws IOException { SpringApplication.run(Re komas.tistory.com https://born2bedeveloper.tistory.com/70 [Spring Boot] 이메일 보내기 (3) - html 템플릿 적용 (feat. Thymeleaf) ..

import "./App.css" function App1(){ //1. 일반 jsx 요소 반환 return Hello } function App2(){ //2. 일반 컴포넌트 요소 반환 return } function App3(){ //3. 일반 문자열 반환 return "Hello World" } function App4(){ //4. 배열 return ["A", "B"] } function App5(){ //5. JSON(사용 불가) -> String //jsx의 기본문법 {} 때문에 문자열 형태의 json 포맷으로 리턴해야 함 return "{a: 100, b: 200}" } function App6(){ //6. 여러 개 반환시 반드시 root 태그 필요 return ( Hello1 Hello2..

import "./App.css"; //일반 함수 function MyButton(){ return 버튼; } //arrow 함수 const MyButton2 = (props) => { return 람다 버튼 } function App(){ //1. function 생성 return ( App ) //2. return 생성 } export default App; //3. export default 함수명 람다 함수의 경우 const Btn2 = (props) => 버튼2 도 가능하다. !!!@@@컴포넌트 첫 글자는 반드시 대문자로 할 것@@@!!! 반면, const는 반드시 소문자로 해야 한다. Export하는 함수에서 입력하지 않았거나, 컴포넌트가 소문자면 함수명이 어두워진다.

App.js 기본 틀 function App(){ //1. function 생성 return ( Template ) //2. return 생성 } export default App; //3. export default 함수명 public 폴더와 src/assets폴더의 차이 public 폴더: 기본 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공 -> 빌드 프로세스에서 처리하지 않고, 일반적으로 사용할 수 있어야 하는 이미지 src/assets폴더 - 모든 형식의 파일은 대중에게 공개되지 않음(유저가 액세스할 수 없음) -> 대신 코드 파일에서 사용 가능(반드시 import로 사용) 컴포넌트 이름은 항상 대문자로 사용 - 소문자는 DOM으로 취급

1. Node, Vs 설치 3. 내 컴퓨터에 폴더 생성 4. cmd에서 cd C:\폴더명 으로 이동 5. npx create-react-app react_stu -> y 4. cd react_stu 리엑트 설치한 폴더로 이동 5. npm start 서버 가동