천천히 차근차근

템플릿 메서드(template method) 싱글톤 패턴과 같은 디자인 패턴 중 하나이다. 모든 객체 지향 프로그램에서 사용하는 구현 방법이다. 따라서 이 방법은 자바에서 뿐만 아니라 C, C++, C#에서도 동일하게 적용된다. package template; public abstract class Car { public abstract void drive(); public abstract void stop(); public void startCar() { System.out.println("시동을 켭니다."); } public void turnOff() { System.out.println("시동을 끕니다."); } // 템플릿 메서드 final public void run() { startCar();..

package beginJava; public class ComputerTest { public static void main(String[] args) { Computer c1 = new Computer(); // Computer 추상 클래스로 오류 Computer c2 = new DeskTop(); Computer c3 = new NoteBook(); // NoteBook 추상 클래스로 오류 Computer c4 = new MyNoteBook(); } } 추상 클래스는 모두 구현되지 않은 추상 메서드를 가지고 있기 때문에 인스턴스를 생성할 수 없다. 추상 클래스의 형 변환 가능 하지만 추상 클래스도 형 변환이 가능하다. 위와 같이 상위 클래스 Computer를 상속 받았으므로 Computer 형으로 ..

추상 메서드를 모두 구현하지 않고 1개만 구현한 추상 클래스 package beginJava; public abstract class NoteBook extends Computer { @Override public void display() { System.out.println("DeskTop display()"); } } 상속 받은 추상 클래스의 추상 메서드를 모두 구현하지 않으면 하위 클래스도 추상 클래스가 된다. 추상 클래스가 된 하위 클래스에서는 구현되지 않은 나머지 추상 메서드에 대해서 구현하면 아래와 같이 추상 클래스가 되지 않는다. package beginJava; public class MyNoteBook extends NoteBook { @Override public void typing..

int add(int x, int y) { return x + y; } {} 안의 내용이 함수 몸체(구현부: implementation) 추상 함수 : abstract function 아래와 같이 구현부가 없는 함수 abstract int add(int x, int y); 자바에서 추상 메서드는 abstract 예약어를 사용하여 선언만 하는 메서드이다. 추상 메서드 추상 메서드가 있는 클래스는 추상 클래스여야 한다. 그러지 않으면 오류 발생. 추상 클래스의 추상 메서드 구현부가 없는 이유 하위 클래스에 따라 구현이 달라질 수 있다. 추상 메서드의 구현에 대한 책임을 상속받는 클래스에 위임한다. 하위 클래스마다 다르게 구현할 메서드는 추상 메서드로 선언해두는 것이다. 추상 클래스를 상속받는 클래스에서 해야..

Animal ani = new Human(); 생성된 인스턴스 Human은 Animal 형이다. 이렇게 Animal형으로 형 변환이 이루어진 경우에는 Animal 클래스에서 선언한 메서드와 멤버 변수만 사용할 수 있다. Human 클래스에서 더 많은 메서드가 구현되어 있고 다양한 멤버 변수가 있다고해도 자료형이 Animal형인 상태에서는 사용할 수 없다. 필요에 따라 다시 원래 인스턴스의 자료형(Human)으로 되돌아가야 하는 경우가 있다.이렇게 상위 클래스 형으로 형 변환되었던 하위 클래스를 다시 원래 자료형으로 형 변환하는 것을 다운캐스팅(down casting)이라고 한다.

https://spring.io/tools 최신버전부터는 jdk 버전 11이상 설치, 사용이 가능하다고 한다. 기존에 1.8을 사용했어서 sts만 새로 설치하고 실행을 시키니 오류 발생. jdk 14 설치 https://www.oracle.com/kr/java/technologies/javase/jdk14-archive-downloads.html C:\Program Files\Java\jdk-14.0.2\bin Program Files 폴더 안에 Java 폴더를 만들고 그 안에 jdk 폴더를 붙여넣기. 고급 시스템 설정 메뉴에서 환경변수를 아래와 같이 수정해준다. '새로만들기'로 위와 같이 변수 이름과 변수 값을 입력한다. 변수 값: 설치한 jdk의 bin폴더 내에서의 위치. %JAVA_H..

클래스형 컴포넌트 import React from "react"; import PropTypes from 'prop-types'; /* 1. 클래스형 컴포넌트의 기본 뼈대 2. React.Component를 상속받는 것. 3. 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. 4. React.Component에서 제공하는 기능들을 상속받아 사용하기 위함. 5. 클래스형 컴포넌트를 사용하는 것은 state를 사용하기 위함. */ class App extends React.Component { /* 1. render() 함수를 선언하지 않았는데 사용할 수 있는 이유: React.Component를 상속 받았기 때문에. 2. 함수형 컴포넌트는 return 문이 JS..

Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.number.isRequired }; 위와 같이 입력을 해주면 Food 컴포넌트는 name, picture, rating이라는 props를 전달받는 컴포넌트로 정의된다. 각 props는 string, number의 자료형을 갖게 된다. 정의되지 않은 props명이나 자료형으로 코딩을 하면 프로그램 오류로 실행이 안되진 않지만 경고가 발생하여 개발자가 수정할 수 있도록 도와준다. 프로그램이 커질수록 그 진가를 발휘하게 된다. isRequired 의미 필요하다는 뜻 때에 따라 없어도 된다. 평점의 예로 아직 평점이..

prop-types 설치 npm install prop-types 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해준다. 예를 들어 내가 test props를 보내야 하는데 practice props를 보낼 수도 있다. 이런 경우 prop-types를 통해 미리 컴포넌트에 반드시 test props가 전달돼야 한다.라고 정의를 할 수 있다. 정의해놓은 test props가 아닌 다른 props가 전달될 경우 오류 메시지를 출력하게 할 수 있다. package.json 'dependencies'에 추가된 prop-types 확인 { "name": "myfirst_movie_app_2021", "version": "0.1.0", "private": true, "dependenci..

리액트에서 map함수를 사용하는 경우의 key props 배열에 map함수를 활용해서 컴포넌트를 출력할 때 사용한다. 배열 길이가 10인 배열에 map함수를 통해서 10개의 컴포넌트가 출력될 경우, 리액트는 이 컴포넌트들이 다른 것들인지 구분하지 못한다. 각각 다른 컴포넌트들임을 알려주기 위해서 컴포넌트 props에 명시적으로 구분을 해주어야 한다. 컴포넌트마다 다른 id를 부여하고, 그 아이디를 key={id} 와 같은 리액트 내부에서 사용되는 특수 props를 사용해 이것들이 다른 컴포넌트임을 알려준다. key props는 내부 사용 특수 props라서 컴포넌트에 직접 전달되지 않는다. key props를 사용하지 않아도 프로그램 자체에서 오류가 발생하지는 않는다. 다만, key props를 입력해서..

function renderFood(dish) { return ( ) }const renderFood = dish => ; 첫번째 function 정의 방법과 두번째 arrow function의 결과는 같다. 함수를 정의하는 방법은 위와 같이 두가지 방법이 있다.

App.js import React from "react"; function App() { return ( {foodLike.map((dish) => ( ))} {animalLike.map((animal) => { return ; })} ); } // 아래 코드들 // ~~~~ // ~~~~ // ~~~~ export default App; App에서는 음식과 동물 이름, 사진을 각 배열의 map 함수를 사용해서 필요한 컴포넌트에 props를 전달한다. map 함수를 사용할 때, return하는게 하나라면? {} 중괄호를 사용하지 않고 arrow function을 사용할 수 있다. HTML에서 JavaScript를 사용하려면 {}중괄호를 여닫아 사용한다. 음식, 동물 배열 const foodLike = ..

장점 배열의 index를 이용하지 않고 변수에 값을 정의할 수 있다. 코드를 줄일 수 있다. import React from 'react'; function Food(props) { console.log(props); return I like {props.fav}; } function App() { return( Hello World ); } export default App; 구조분해할당 // 구조분해할당 방법1. function Food(props){ { fav } = props; return I like {fav}; } // 구조분해할당 방법2. function Food({fav}){ return I like {fav}; } 위의 두가지 방법 중 아무거나 사용해도 된다. 연습 예제 l..

props 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터. 컴포넌트의 props를 사용하면 컴포넌트를 효율적으로 재사용할 수 있다. 컴포넌트 매개변수 문자열이 아닌 경우 중괄호{}를 사용한다. import React from 'react'; function Food() { return I like Potato; } function App() { return( Hello World ); } export default App; 컴포넌트의 첫번째 인자로는 props가 전달된다. App컴포넌트에서는 props에 있는 데이터를 객체(Object)로 변환하여 Food 컴포넌트(함수)에 전달. import React from 'react'; function Food(props) ..

babel에 있는 라이브러리를 모두 yarn으로 추가해준다. babel.config.js 입력 사항 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ['@babel/plugin-transform-flow-strip-types'], [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ] };metro.config.js /** * Metro configuration for React Native * https:..

화면 이동을 할 때 사용하는 라이브러리 import { createAppContainer } from 'react-navigation'; createStackNavigator는 페이지를 Stack에 쌓아두어 이동하는 방법입니다. 이것은 이전의 페이지를 그대로 유지할 수 있어 navigation의 goBack 메소드를 통해 쉽게 이전페이지로 이동할 수 있 는 장점이 있지만 페이지를 재로딩을 하지는 않습니다. stack에 남겨놓고 싶지 않다면 createSwitchNavigator을 사용 하면 됩니다. App.js import React, {Component} from 'react'; import {createStackNavigator, createAppContainer} fro..

설치 목록 node.js npm ( node.js 설치시 함께 설치됨 ) npx 리액트 앱 프로젝트 생성 npx create-react-app ProjectName 예전에는 웹팩, 바벨과 같은 도구를 따로 설치해야 했지만 이제는 프로젝트를 생성하면 자동으로 셋팅이 된다. create-react-app은 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해 주는 도구이다. 리액트 앱 실행 npm start리액트 앱 종료 Ctrl + c 프로젝트를 실행한 터미널에서 입력. 터미널에서 바로 VSCode로 프로젝트 여는 방법. 프로젝트가 있는 디렉터리로 이동해서 아래 명령어 입력code ProjectName 보일러 플레이트(boiler plate) 개발을 바로 시작할 수 있..

// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(', '); console.log(result); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(','); //const result = fruits.split(',', 2); split의 개수를 정할 수도 있다. console.log(result); } // Q3. make this array look like this: [5, 4, 3..

"use strict"; // Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; let str = ''; for ( let fruit of fruits ) str += ' ' + fruit; console.log(str); // 이렇게구낭. console.log(fruits.toString()); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; c..

'use strict'; // Array // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); // 출력 : undefined // 배열의 제일 마지막 index를 출력할 때는 // 아래와 같이 출력하기도 한다. console.log(fruits[fruits.length - 1]); // 3. Loopi..