유데미 스타터스 취업 부트캠프 3기 - 백엔드 3주차 학습 일지

jinhyungrhee 2022. 12. 11. 13:32

2022. 12. 11. 13:32

1. 좋았던 점(Liked)

짧지만 강렬했던 React와의 추억

지난 주 금요일부터 이번 주 화요일까지 3일 동안 리액트 프레임워크에 대해서 배웠다. 아주 짧은 기간인 만큼 리액트 프레임워크의 핵심에 대해서만 간략하게 배우고 간단한 CRUD 실습을 한 뒤 학습 일정을 마무리했다. 어떤 언어든 프레임워크든 이론과 실습만 가지고 완벽히 배울 수는 없다. 실제로 프로젝트나 업무에서 필요에 의해서 적용하면서 배우고 익힐 때 확실한 내 지식과 스킬이 된다고 생각한다. 이번에 배운 핵심 내용들을 잘 기억하고 정리하여 다음에 언젠가 마주치거나 써먹어야 할 일이 생길 때 유용하게 사용해야겠다.

본격적인 백엔드 학습에 들어가기 전에 자바 기초 다지기

이번 주 수요일부터 자바 프로그래밍 단원에 들어가기 때문에 새 학습 교재를 받게 되었다. 'Java의 정석 : 기초편'으로 많은 사람들이 선택하는 기초 Java 문법 교재라고 한다. 여러 방면에서 많은 지원을 해주셔서 매번 감사하다.

부트캠프에서는 Java 17버전을 사용하여 학습한다. 강사님 현장 강의와 함께 Udemy에서 제공하는 기초 Java 인강을 병행하며 학습하고 있다. 해당 강의 제목은 '완전 초보자를 위한 Java 프로그래밍 : 단기간에 Java 완벽 정복(Ranga Karanam)' 이다. Java 언어를 상당히 세세하게 다루고 있기 때문에 분량이 상당히 많지만 내용 자체는 괜찮은 강의인 것 같다. 지금까지는 프론트엔드 학습이라는 이유로 다소 가벼운 마음으로 임했지만, 이제부터는 시간과 노력을 좀 더 투자하여 학습하고 수업에 참여해야 할 듯 하다.

2. 배운 것들(Learned)

1. React.js

◼ 리액트 프레임워크

자바스크립트의 코드 복잡성을 줄이고, 모듈 형태로 사용하기 위해 등장한 라이브러리
하나의 모듈 내부에 HTML, CSS, Javascript를 모두 포함해서 표현함
특징 : 모듈화, 컴포넌트화, 재사용성

◼ JSX(=Javascript XML) 문법

Javascript에 XML을 추가, 확장한 문법
- XML 특징
  - 대소문자 구분
  - 시작과 끝으로 구성
무조건 한 개의 단일 태그만 리턴하는 것이 원칙
JSX 문법을 사용하여 코드를 작성하면, Babel 컴파일러가 HTML로 변환해줌
JSX 문법 내부에서 Javascript 변수를 사용해야 할 경우, 중괄호({ }) 기호 사용

◼ 컴포넌트 구조

constructor()
- 부모로부터 값을 전달받거나 클래스 변수를 선언 또는 초기화하는 함수
- 초기에 한번만 실행됨
render()
- JSX문법을 HTML 문법으로 해석하여 화면에 그려주는 함수
- 변수 값이 변경될 때마다 반복해서 여러 번 실행됨
Props
- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용
- 단방향 (부모 ➡ 자식)
- 전달받은 값 수정 불가(Read-Only Property)
- 함수형 컴포넌트에서 Props : 매개변수 이름 자유롭게 설정 가능
- 클래스형 컴포넌트에서 Props : 지정된 매개변수 이름만 사용 가능
State
- 리액트 컴포넌트의 이벤트를 처리할 때 사용
- props 값을 state로 받아서 사용하면, 부모로 받은 값을 수정하여 사용할 수 있음!
- 함수형 컴포넌트 : useState() 사용
- 클래스형 컴포넌트 : setState() 사용

◼ 리액트에서 이벤트 처리시 this 키워드는 사용하지 않음!

이벤트 처리시 이벤트 발생한 객체 표현 방법 : e.target

import React from "react";

class GreetingClass extends React.Component {


    render() {
        const welcome = (e)=>{ 
            alert(e.target.value+ "하네요"); 
            e.target.value = "퇴근";
        }  // 변수 범위가 반드시 render 함수 내부여야 함! 
        return (
        <div>
            <input type="button" value="인사" onClick={welcome} />
            <h3></h3>
        </div>
        );
        // Q. JSX로 화면구성을 끝낸다음인데, 핸들러 함수가 호출되었을 때 화면구성을 어떻게 변경시킬 수 있을까??
        // react에는 this가 없음! : const welcome = ()=>{ alert(this.value + "하네요"); } 동작 X
        // 이벤트 처리시 이벤트 발생한 객체(=target) 표현 방법 : e.target
    }
}

export default GreetingClass;

◼ JSX에서 반복문 처리 방법 (2가지)

1) 미리 loop 함수를 정의해서 JSX 내부에서 사용 -> JSX문법이 제대로 처리되지 않을 수 있음!

import React from "react";

class Loop extends React.Component {

    constructor(props) {
        super(props);
        this.userList = 
        [{id : 'sba1', pw:'sba1', name:'홍길동', age:20},
        {id : 'sba2', pw:'sba2', name:'김영희', age:30},
        {id : 'sba3', pw:'sba3', name:'안철수', age:35},
        {id : 'sba4', pw:'sba4', name:'박보검', age:25},
        {id : 'sba5', pw:'sba5', name:'유재석', age:22}];
    } // constructor 

    render() {
        const loop = ()=>{
            let result = "";
            for (var i = 0; i < this.userList.length; i++) {
                result += "<li>" + this.userList[i].id + ", " + this.userList[i].name + ", " + this.userList[i].age + "</li>";
            } // for
            return result;

        } // loop 

        const outerResult = loop();
        
        return (<ol>{outerResult}</ol>);

    }

}

export default Loop;

2) map 함수 사용 -> index가 반드시 포함되어야 함!

import React from "react";

class Loop extends React.Component {

    constructor(props) {
        super(props);
        this.userList = 
        [{id : 'sba1', pw:'sba1', name:'홍길동', age:20},
        {id : 'sba2', pw:'sba2', name:'김영희', age:30},
        {id : 'sba3', pw:'sba3', name:'안철수', age:35},
        {id : 'sba4', pw:'sba4', name:'박보검', age:25},
        {id : 'sba5', pw:'sba5', name:'유재석', age:22}];
    } // constructor 

    render() {

        const loop = this.userList.map( 
            (oneUser, index)=>{
                
                // map이 리턴하는 것을 loop가 모아놓는 것!
                return (<li key={index}> {oneUser.id} : {oneUser.name} : {oneUser.age} </li>);

            }); // loop end

            // loop가 다 실행되고나면
            /* 
                <li> ... : ... : </li>
                <li> ... : ... : </li>
                <li> ... : ... : </li>
                <li> ... : ... : </li>
                <li> ... : ... : </li>
            */

            return (<ol>{loop}</ol>);


    } // render



}

export default Loop;

2. Java

◼ 객체지향 프로그래밍

객체란?
- 프로그래밍에서 표현하는 현실 명사
과정
- 1) 객체의 '정적 특성'과 '동적 특성' 파악하기
  - 정적 특성 : 속성, 상태, 정보 (= 데이터 값) ➡ 변수
  - 동적 특성 : 기능, 동작 ➡ 메서드
- 2) 클래스(동일 변수와 메서드들) 정의
  - 클래스 구조 정의 = 변수 + 메서드 ➡ 객체틀, 객체모형, 객체 원본
- 3) 인스턴스 생성
  - 클래스로부터 변수와 메스드를 복사(= 메모리 할당) ➡ 원하는 만큼 객체 생성
장점
- 1) 코드 관리가 쉽다
- 2) 재사용성이 높다
클래스를 정의하는 이유
- 클래스는 '여러 타입의 데이터와 메서드의 모음'임
- 현실 세계를 표현하기 위해서는 여러 가지 데이터 타입의 조합이 필요함
- 이러한 이유에서 클래스는 사용자 필요에 의해 생성하는 '사용자 정의 데이터 타입'이라고 하기도 함
객체지향 조건
- 1) 캡슐화
  - 클래스 { 변수 + 메서드 } 형태
  - 정보 은닉
- 2) 상속
- 3) 다형성(Polymorphism)
  - 여러가지 형태를 띌 수 있는 것 (-> Method Overloading, 같은 이름이어도 다른 결과를 리턴)

◼ 변수

생성 위치에 따른 구분
- 메서드 내부
  - 지역변수 : 블록({ }) 내부에 선언되는 변수
  - 매개변수 : 호출하는 곳으로부터 전달받는 입력 변수
- 메서드 외부
  - static 변수
    - 변수가 저장되는 영역이 객체 내부(Heap영역)가 아니라 클래스 내부(Class영역)임.
    - 모든 객체가 공통된 값 사용
    - 딱 1개만 생성됨
    - 사용 : 클래스명.static변수명
  - non-static 변수
    - 여러 객체마다 서로 다른 값을 저장.
    - 여러 개 생성됨.
    - 일반적인 변수
    - 사용 : 객체참조변수명.non-static변수명
기본형(primitive type) 변수 vs 참조형(reference type) 변수
- 기본형 변수
  - Stack 메모리에 '실제 리터럴 값'이 저장됨
  - 기본형 변수는 모두 고정된 값 (8개 primitive data type)
- 참조형 변수
  - Stack 메모리에 '객체가 저장된 주소 값'이 저장됨
  - 실제 객체는 Heap 메모리 영역에 저장됨!
    - 크기를 고정할 수 없기 때문에 이러한 방식을 사용 (Heap은 자유로운 영역) ➡ String, Array 등
    - 프로그래머가 저장 주소(=번지)를 직접 지정할 수 없음(Java에는 pointer 개념이 없음)

◼ 제어자(Modifier)

특정 요소 앞에 선언하며, 해당 요소의 사용 방법을 결정함
역할1 : 접근 제한
역할2: 활용 방법을 제시하는 키워드

static 키워드
- 딱 1개만 생성됨. 모든 객체가 공통된 값 저장함.
- 자바프로그램이 run되는 과정
  - 1) 코드 검증
  - 2) static 변수 우선 메모리 할당 ➡ 클래스 영역(공유 영역)
  - 3) main 메서드 실행 (객체 생성됨)
- static 메서드 vs non-static 메서드
  - static 변수만 사용하는 메서드 ➡ static 메서드로 정의
  - non-static 변수만 사용 or static변수와 non-static 변수 혼용하는 메서드 ➡ non-static 메서드로 정의
final 키워드
- 상수(=변경 불가능한 값) 키워드
- 절대불변, 진리 값 표현 시 사용 (PI = 3.14)
- '여러 객체들이 공유해야 하는 값'에도 사용함 ➡ 다른 클래스에 의해 실수로 값이 바뀌는 상황 방지

3. 아쉬운점(Lacked)

React 부분에서 CRUD 실습이 꽤 어려웠다. 최대한 할 수 있는 상태까지 구현해 놓은 상태고, 일단 정답 코드를 받아놓기만 했다. 곧 바로 Java 학습에 들어가느라 아직 깊이 들여다보지 못했는데 까먹기 전에 다시 한번 봐야겠다.

4. 바라는점(Longed for)

게을러지지 말자.

참고

자바의 정석 기초편(2019), 도우출판, 남궁성 저

* 유데미 바로가기 : https://bit.ly/3V220ri

* STARTERS 취업 부트캠프 공식 블로그 보러가기 : https://blog.naver.com/udemy-wjtb

본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.

'유데미 스타터스 3기 > 학습일지' 카테고리의 다른 글

유데미 스타터스 취업 부트캠프 3기 - 백엔드 6주차 학습 일지 (0)	2023.01.01
유데미 스타터스 취업 부트캠프 3기 - 백엔드 5주차 학습 일지 (2)	2022.12.25
유데미 스타터스 취업 부트캠프 3기 - 백엔드 4주차 학습 일지 (0)	2022.12.18
유데미 스타터스 취업 부트캠프 3기 - 백엔드 2주차 학습 일지 (0)	2022.12.04
유데미 스타터스 취업 부트캠프 3기 - 백엔드 1주차 학습 일지 (1)	2022.11.27

기록하는 습관