전체 글

JVM 구성아래 3가지만 기억Class Loader(로더): 실행을 위한 Bytecode(.class)를 가져온다.Runtime Data Area(메모리): 바이트 코드를 메모리에 얹고Execution Engine(엔진): 구동한다.(바이트코드 -> 기계어)1. Class Loaderjavac(컴파일러)를 통해 컴파일된 바이트코드는 Class Loader가 아래 Runtime Data Area에 적재컴파일 후 생성되는 바이트코드가 엄청 많은데 이걸 메모리에 한번에 올려서 구동하면 메모리 과부화... 그래서 class Loader가 필요한 클래스만 꺼내서 메모리에 올려준다.동적 로딩(Dynamic Loading): 필요한 바이트코드만을 Runtime Data Area(메모리)에 적재3가지 절차를 수행: L..

컴파일 에러와 런타임 에러 (Checked / Unchecked Exception)java는 에러를 자바 프로그램 입장에서의 에러 발생 근원 (source)에 따라 2가지로 구분해 놓음자바 프로그램 "외부" 에서 발생하는 것: (Need to be) Checked Exception충분히 예상 가능한 에러이기에, 복구가 필요한 예외(예외 처리 강제) + 제어할 수 있다.자바 프로그램 "내부 로직" 에서 발생하는 것: Unchecked Exception어떤 상황에서 발생되는지 예측할 수 없어, 어떻게 복구해야할지 전혀 알 수 없다.그래서 로그를 잘 남겨야한다. 그게 Unchecked Exception 처리의 가장 근본, 원칙에러 처리: Try -> Throw -> Catch자바 언어에서는 Try -> Thr..

spring 프로젝트 생성 (Intellij, Gradle)java 17gradle3.3.0의존성 추가Spring Web: 가장 기본적으로 Spring MVC기반의 REST API 혹은 웹 페이지 반환을 위한 Tomcat서버Lombok: 불필요한 java 코드 작성을 최소화하기 위한 어노테이션 기반 코드 자동 생성기Thymeleaf: Spring에서 웹 페이지를 만들어 클라이언트에게 서빙하려 사용하는 서버사이드 템플릿 엔진 JDK(Java Development Kit) 설치 : 모든 개발 및 실행의 근간인 JDK JDK 버전은 상관없는데, 실습에서 사용하고자 하는 language level 이 17이면 된다.Gradle구동을 위한 자바 JDK 자바 버전을 동일하게 설정Intellij에는 2개의 자바 어플..

우리가 Java코드를 작성하면 그것이 어떻게 우리가 사용하는 웹 서버(혹은 프로그램)가 되는걸까?먼저 프로그램이 동작하는 기본 원리를 집자면, 기계어가 머신에서 (해석되어) 실행되는 것이다.컴파일(complie)과정java코드(.java) -> (자바 컴파일러(javac)를 통해) ->  bytecode(.class).java를 컴파일해서 .class로 만들고 .class파일을 jar압축한다. c언어로 보는 컴파일 과정런타임(Runtime) 과정bytecodes(.class) -> (자바엔진(JVM)을 통해) -> 기계어(binary code)Interpreter 인터프리터 = 자바 엔진(JVM)JVM은 JVM을 사용하고 있는 os, cpu에 따라서 바이너리 코드를 만든다. Interllj가 알려주는 컴..

immer: 불변성 객체로 인한 리렌더링 이슈 해결 객체 State 업데이트하기 – ReactThe library for web and native user interfacesko.react.dev 패스워트 컴포넌트 내 useRef 통한 input 태그 타입 변경을 렌더링 없이 적용 한 후 유효성 검증 상태들을 객체로 단일화 하였더니 아래와 같은 문제 발생import { useRef, useState } from 'react'import '@/App.css'function UsernameInput() { return ( Username : )}function PasswordInput() { const [valid, setValid] = useState({ maximum..

Ref: 외부변수 -> 비제어 컴포넌트비제어 컴포넌트: 리액트가 인지하지 못한 변수이기에 Ref 내부 값이 변경 시 리렌더링 X 리액트 리렌더링을 발생시키지 않고 변경 가능한 값을 담는 참조(reference) 생성Ref(외부 변수)를 리액트가 인지할 수 없기에 Ref값의 변동과 리렌더링은 전혀 상관이 없다.라는 의미에서 Ref를 통해 값을 관리하는 컴포넌트를 비제어 컴포넌트라고 부른다.Reference(useRef로 생성한)를 HTML 요소에 연결Reference(useRef로 생성한)는 값을 저장하는 용도로도 사용될 수 있지만 Reference는 기본적으로 리액트에서 DOM 조작을 위해 사용`reference.current` 출력: DOM`document.getElementById` 출력 = DOMf..

React Hook 은 함수 컴포넌트를 사용하여 개발하고 함수형 프로그래밍 패러다임을 도입하였다. 따라서 하나의 컴포넌트를 하나의 함수로 생각한다면, State & Props & Ref 세 가지 모두 이해하기가 훨씬 쉽다. state: 내부 변수 제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남내부변수의 의미: 값이 변경되면 컴포넌트 리렌더가 발생함props: 파라미터Ref: 외부 변수 비제어 컴포넌트: React가 인지하지 못한 변수이기에 Ref변경 시 렌더링 X외부 변수의 의미: 값이 변경되어도 컴포넌트 리렌더가 발생하지 않음State: 내부 변수제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남State: 단방향 바인딩..

Props: 파라미터값을 부모 컴포넌트가 자식 컴포넌트에게 넘겨줄때 props로 전달자식 컴포넌트에게 넘겨줄 props값 일반적인 예시부모 컴포넌트의 State부모 컴포넌트이 State를 변경할 수 있는 SetState [State Lifting]State Lifting(상태 끌어올리기): 자식 컴포넌트가 부모 컴포넌트의 State를 SetState로 변경 state Liftring을 위해 매번 State, SetState 2개씩 보내주어야할까? SetState 사용법 2가지SetState(새로운 상태값)SetState(새로운 상태값 생성 함수)function ButtonComponent( /* props → object destructure */ { className, onClick, children..

왜 setState에 대한 글만 따로 빼서 설명하게 되었는가평소에 짜던 모든 코드가 동기로 작동해서 비동기로 동작하는 setState의 동작 원리가 이해가 가질 않았다. 공식 문서 + 블로그 를 참고하면서 공부한 내용을 정리해보고자 한다. setState(nextState, callback?)리액트 공식 문서 중 일부setState를 호출해서 React 컴포넌트이 state를 변경한다.setState는 컴포는트 state에 대한 변경 사항을 큐에 넣는다. 이 컴포넌트와 그 자식이 새로운 state로 다시 렌더링해야 한다는 것을 React에게 알려준다. 이것이 상호작용에 반응하여 사용자 인터페이스를 업데이트하는 주요 방법 setState를 사용해서 state를 업데이트해야 사용자와 상호작용할 수 있다는 말..