1. 생성자 1-1. 생성자가 필요한 이유 객체를 생성하는 시점에 어떤 작업을 하고 싶다면 생성자(Constructor)를 이용하면 됩니다. 밑에서 간단한 코드로 설명드리겠습니다. 전체 코드 package construct; public class MemberInit { String name; int age; int grade; } package construct; public class MethodInitMain1 { public static void main(String[] args) { MemberInit member1 = new MemberInit(); member1.name = "user1"; member1.age = 15; member1.grade = 90; MemberInit member2 ..

1. 절차 지향 프로그래밍 프로그래밍 방식은 크게 절차 지향 프로그래밍과 객체 지향 프로그래밍으로 나눌 수 있습니다. 절차 지향 프로그래밍 절차 지향 프로그래밍은 이름 그대로 절차를 지향합니다. 쉽게 이야기해서 실행 순서를 중요하게 생각하는 방식입니다. 절차 지향 프로그래밍은 프로그램의 흐름을 순차적으로 따르며 처리하는 방식입니다. 즉, "어떻게"를 중심으로 프로그래밍합니다. 객체 지향 프로그래밍 객체 지향 프로그래밍은 이름 그대로 객체를 지향합니다. 쉽게 이야기해서 객체를 중요하게 생각하는 방식입니다. 객체 지향 프로그래밍은 실제 세계의 사물이나 사건을 객체로 보고, 이러한 객체들 간의 상호작용을 중심으로 프로그래밍하는 방식입니다. 즉, "무엇을" 중심으로 프로그래밍합니다. 절차 지향은 데이터와 해당 ..

1. 변수와 초기화 1-1. 변수의 종류 멤버 변수 (필드) : 클래스에 선언 지역 변수 : 메서드에 선언, 매개변수(파라미터)도 지역 변수의 한 종류입니다. 지역 변수는 이름 그대로 특정 지역에서만 사용되는 변수라는 뜻입니다. 멤버변수(필드) 예시 코드 package class1; public class Student { String name; int age; int grade; } name, age, grade 는 멤버 변수입니다. 지역 변수 예시 코드 1 package class1; public class ClassStart3 { public static void main(String[] args) { Student student1; student1 = new Student(); Student st..

예제 코드 public class Sample { public static void main(String[] args) { System.out.println(sum(1,3)); } public static int sum(int a, int b) { return a+b; } } 1. 인자 (Argument) 인자는 메서드, 생성자를 호출할때 데이터를 매개변수에 값을 전달해줍니다. 예제 코드 System.out.println(sum(1,3)); 여기서 1, 3 이 인자입니다. 2. 매개변수 (Parameter) 매개변수는 메서드, 생성자를 선언할 때, 어떤 형태로 데이터값이 들어올지 정의해줍니다. 예제 코드 public static int sum(int a, int b) { return a+b; } 여기서 ..

1. 기본형, 참조형 - 개념 변수의 데이터 타입을 가장 크게 보면 기본형과 참조형으로 분류할 수 있습니다. 사용하는 값을 변수에 직접 넣을 수 있는 기본형, 그리고 이전 글에서 나온 Student student1과 같이 객체가 저장된 메모리의 위치를 가리키는 참조값을 넣을 수 있는 참조형으로 분류할 수 있습니다. 기본형 (Primitive Type) : int, long, double, boolean처럼 변수에 사용할 값을 직접 넣을 수 있는 데이터 타입을 기본형이라고 합니다. 참조형 (Reference Type) : Student student1, int[] students와 같이 데이터에 접근하기 위한 참조(주소)를 저장하는 데이터 타입을 참조형이라고 합니다. 참조형은 객체 또는 배열에 사용됩니다...

1. 클래스가 필요한 이유 코드를 통해 살펴보겠습니다. 1-1. 변수 사용하기 package class1; public class ClassStart1 { public static void main(String[] args) { //학생 1 String student1Name = "학생1"; int student1Age = 15; int student1Grade = 90; //학생 2 String student2Name = "학생2"; int student2Age = 16; int student2Grade = 80; //출력 System.out.println("이름:" + student1Name + " 나이:" + student1Age + " 성적:" + student1Grade); System.out...

1. LocalStorage로 만드는 최근 본 상품 기능 1 새로고침하면 state가 초기값으로 돌아가는 것은 원래 그런것이다. 나는 이게 싫으면 state를 서버로 보내서 DB에 영구저장하면 됩니다. 만약 서버도 모르고 DB도 싫다 그러면 LocalStorage에 저장해둬도 됩니다. (반영구적 저장가능) Local Storage는 브라우저에서 제공하는 데이터 저장소입니다. Local Storage 특징 1. key : value 형태로 저장이 가능합니다. 2. 최대 5MB의 문자만 저장이 가능합니다. 3. 사이트에 재접속해도 남아있습니다.(브라우저 청소하면 삭제됨) Session Storage는 브라우저 끄면 날라갑니다(휘발성) 데이터 저장은 localStorage.setItem(이름,값) 데이터 출력..

if문을 써서 조건부로 html을 보여주고 싶을 때가 매우 많습니다. 어떤것이 있는지 살펴보겠습니다. 1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능합니다. if (어쩌구) {저쩌구} 이게 안된다는 소리입니다. 그래서 보통 return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용합니다. (참고) 근데 이렇게 쓰시려면 else 생략이 가능합니다 function Component() { if ( true ..

1. 장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 먼저 Redux를 사용하기 위해 장바구니 페이지를 만들어 보겠습니다. 여기서 tr은 가로줄 th, td 넣으면 열 하나 생깁니다. Cart라는 js를 따로 만들어줘서 테이블을 작성해 준다음(Bootstrap 테이블) App.js에서 가져다 쓰겠습니다. 여기서 만약 장바구니 state 같은 것들을 여러 군데에서 쓰고 싶을때 Redux를 사용하여 관리하면 편하다.(props 전송이 필요 x) 리액트 구인시 대부분 Redux 요구 만약 Redux를 사용할꺼면 package.json에서 react 18버전, react-dom이 18버전 이상이어야 잘 작동됩니다. 여기까지 완료 됐으면 Redux 라이브러리를 설치해 봅시다. npm i..

1. Lifecycle과 useEffect 컴포넌트가 보이는 순간을 마운트(mount) 됐다고 볼 수 있다. 컴포넌트 안에서 state를 조작하면 업데이트(update)가 되기도 하고 필요없으면 제거되고 (unmount) 이런식으로 컴포넌트는 생명주기(Lifecycle)을 가진다. 중간중간 간섭이 가능하기 때문에 Lifecycle을 배운다. 이런식으로 갈고리를 달아서 이것을 제거되기 전에 실행할 코드를 실행하던가 업데이트될때 실행하던가 하는것 때문에 Lifecycle을 배우는 것이다. 컴포넌트에 갈고리 다는 법 이런식으로 작성할 수 있지만 요즘은 이런식으로 useEffect를 사용합니다. 이렇게 쓰게 된다면 mount, update 시 useEffect 안에 있는 코드가 실행됩니다. 실제로는 디버깅을 위..