'홈' 729건

props는 컴포넌트에서 컴포넌트로 전달하는 데이터를 말합니다. 컴포넌트 여러 개 사용해 보기import React from "react";function Movie() { return I love myday;}function App() { return ( 안녕!!! (이후 16개의 Movie 컴포넌트 입력 생략...) );}export default App;앱을 실행하면 I love myday가 20개 출력됩니다.이런 코드는 상당히 비효율적이고, 컴포넌트가 서로 다른 값을 출력해야 할 떄가 있으므로 컴포넌트를 데이터로 보내는 방법을 배워야 합니다. props로 컴포넌트에 데이터 전달하기import React from "re..

자바의 다차원 배열은 특별한 구조를 가지고 있습니다.2차원 배열2차원 배열의 선언과 생성1차원 배열과 마찬가지로 2차원 배열에서도 레퍼런스 변수 선언 후 배열을 생성합니다.2차원 배열의 레퍼런스 변수를 선언하는 방법은 다음 두가지가 있습니다.int intArray [][];char charArray [][];double doubleArray [][];또는int [][] intArray;char [][] charArray;double [][] doubleArray; 2차원 배열의 저장 공간은 다음과 같이 new 연산자를 이용하여 생성하며, 첫 번째 []는 행의 개수를, 두 번째 []는 열의 개수를 나타낸다.intArray = new int [2][5]; // 2행 5열의 2차원 배열 생성charArray ..

컴포넌트는 자바스크립트와 HTML을 조합한 JSX라는 문법을 사용해서 만듭니다.JSX는 HTML과 자바스크립트를 조합한 것입니다. Myday 컴포넌트 만들기src 폴더 안에 Myday.js라는 이름의 새 파일을 만듭니다.파일 이름에서 첫 번째 글자는 반드시 대문자로 합니다.import React from "react"; Myday.js에 Myday() 함수를 추가로 작성합니다.import React from "react";function Myday() { } 컴포넌트를 작성할 때 중요한 규칙은 이름은 대문자로 시작해야 한다는 점입니다.Myday.js에 Myday 컴포넌트가 JSX를 반환할 수 있도록 수정해줍니다.import React from "react";function Myday() { ret..

배열이란?배열(array)은 인덱스(index)와 인덱스에 대응하는 데이터들로 이루어진 연속적인 자료 구조로서, 같은 종류의 데이터들이 순차적으로 저장합니다. int i = new int[10]; // 10개의 정수 공간 배열 생성. 배열의 이름은 i 배열을 사용하는 큰 이유 중 하나는 반복문의 활용에 있습니다.for (sum = 0, n = 0; n  배열의 선언 및 생성배열의 생성은 다음 두 단계로 이루어집니다.배열에 대한 레퍼런스 변수 선언배열 생성 - 배열의 저장 공간 할당  배열에 대한 레퍼런스 변수 선언다음은 배열 선언문으로 레퍼런스 변수 intArray를 선언합니다.int intArray[]; 이 선언만으로 배열 공간이 할당되지 않습니다. intArray는 배열 공간에 대한 주소 값(레퍼런스..

반복문 내에 contine 문과 break 문을 이용하면 반복의 흐름을 바꾸거나 반복에서 벗어나게 할 수 있습니다. continue 문continue 문은 반복문을 빠져나가지 않으면서 즉시 다음 반복으로 넘어가서 사용됩니다,continue; 반복문에서 continue 문에 의해 실행 경로가 변경됩니다.for문에서 continue문을 만나면 '반복 후 작업'으로 분기하고, while 문이마 do-while 문에서는 조건식을 검사하는 과정으로 분기합니다.  continue 문을 이용하여 양수 합 구하기import java.util.Scanner;public class ContinueExample { public static void main(String[] args) { Scanner sc..

App.js 파일로 컴포넌트의 정의 알아보기 App.js 파일을 열고 App() 함수와 App() 함수가 반환하는 값을 알아봅시다.function App() { return 안녕!!!;}export default App; App() 함수가 정의되어 있고, 이 함수가 안녕!!!를 반환하고 있습니다. 이것이 바로 App 컴포넌트를 정의한 것입니다. App() 함수가 번환한 HTML이 리액트 앱 화면에 그려지는 것 입니다. import React from "react";import ReactDOM from "react-dom/client";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root...

자바는 반복 연산을 프로그래밍할 수 있도록 다음 3가지 종류의 반복문을 제공합니다. for 문, while문, do ~ while문 for 문은 처음부터 반복 횟수를 알 수 있는 경우에, while 문과 do ~ while 문 반복  횟수를 알 수 없고, 조건에 따라 반복이 계속되거나 중단되는 경우에 이용합니다.while문은 반복 조건을 처음부터 따지는 경우에, do ~ while문은 반복 조건을 나중에 따지는 경우에 적합합니다. for 문 초기문초기문은 주로 조건식에서 사용하는 변수를 초기화합니다.초기문의 특징이 다음과 같다.초기문은 시작할 때 한 번만 수행됩니다.콤마(,)로 분리하여 여러 문장을 나열할 수 있습니다.초기문은 빈 상태로 두어도 되지만 끝에 세미콜론(;)은 있어야 합니다.조건식조건식에는 ..

리액트는 우리가 작성한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용하여 해석합니다.그리고 해석한 결과물을 index.html로 끼워 넣습니다.  리액트는 index.html의 중간에 넣을 결과물을 프로젝트 폴더에 있는 파일(App.js, ...)을 해석하여 만들어 넣는 역활을 담당합니다. index.js 살펴보기import React from "react";import ReactDOM from "react-dom/client";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(); const root = ReactDOM.createRoot(document.getElem..

리액트 앱 프로젝트 폴더 살펴보기VSCode에서 movie_app_2025 폴더에는 node_modules, public, src 폴더가 보입니다. public 폴더 살펴보기 public 폴더에는 favicon.ico 파일이 있습니다. 이 것은 브라우저 제목과 함께 표시되는 아이콘입니다.  index.html 파일 살펴보기index.html 파일에는 기본 내용만 작성되어 있습니다.  src 폴더 살펴보기src 폴더에는 setupTests.js, serviceWorker.js, logo.svg, index.js, index.css, App.test.js, App.js, App.css 등 많은 파일이 들어 있습니다.  src 폴더 정리하기아래 그림을 참고하여 사용하지 않을 파일을 삭제합니다. index.js..

조건문을 이용하면 조건의 참, 거짓에 따라 서로 다른 작업을 수행할 수 있습니다.if 문, if~else 문, switch 문 단순 if 문단순 if 문의 모양과 실행 과정은 다음과 같습니다.if (조건식) { ... 실행 문장 ... // 조건식이 참인 경우}  if 문의 조건식은 비교 연산이나 논리 연산이 혼합된 식으로 구성되며, 조건식의 결과는 boolean입니다.조건식의 참(true)이면 if 내부의 '실행 문장'이 실행되며, 거짓(false)이면 if문을 벗어납니다. if (n % 2 == 0) { System.out.println(n + "은 짝수 입니다");} if ((score >= 80) && (score  if의 실행문의 한 문장의 경우 다음과 같이 중괄호({})를 생략해도 됩니다.if..

식과 연산자주어진 식(expression)을 계산하여 결과를 얻어내는 과정을 얻어내는 과정을 연산이라고 합니다.식에는 연산자와 피연산자로 나누어져 있습니다. 식에서 +, >, == 을 연산자(operator), 데이터를 피연산자(operand)라고 합니다.연산의 종류연산자연산의 종류연산자증감++ --비트& | ^ ~산술+ - * / %논리&& || ! ^시프트>> >>조건? :비교> = 대입= *= /= += -= &= ^= |= >>= >>>= 연산자 우선순위식에 여러 개의 연산자가 있는 경우, 우선순위가 높은 연산자를 높인 연산자를 먼저 처리합니다.우선순위가 동일하면 왼쪽에서 오른쪽으로 처리하나, 대입 연산자, --, ++, +(양수 부호), -(음수 부호), !, 타입 변환 연산자 등은 오른쪽에서 ..

로컬 저장소 초기화하기터미널에서 루트 폴더로 이동한 후 다음 명령어를 입력합니다. git init 명령어를 실행하면 현재 폴더에 저장소(repository)를 새롭게 초기화할 것입니다. 위의 두 메시지 중 하나가 뜨면 성공입니다. 깃허브에 저장소 만들기깃허브 페이지에 접속하여 회원가입이 되어 있지 않다면 회원가입 후 로그인을 해야만 깃허브 저장소 만들기 페이지에 접속할 수 있습니다.  정보들을 입력 후 Create repository 버튼을 누르면 저장소가 생성이 됩니다. 위와 같은 화면과 함께 깃허브 계정에 movie_app_2025라는 이름의 깃허브 저장소가 생겼습니다. 깃허브 저장소에 리액트 앱 업로드하기깃허브 저장소의 URL을 사용해 터미널에 다음과 같이 명령어를 입력합니다.  위 명령어들을 차례..