혼자하는 코딩

본문 바로가기

최근글

[Web] Frontend

[React] 더 나은 상태(state) 관리하기

[React] 더 나은 상태(state) 관리하기 목표상태를 여러개 사용하다보면 상태 간 "꼬임"이 발생할 수도 있고 동기화를 놓쳐버려서 오류를 야기할 수도 있다.따라서 오류를 최소화하기 위해서 state를 단순화시키고 불필요한 state는 제거하는 것이 좋다. 데이터베이스 구조를 정규화해서 버그 발생 가능성을 줄이는 것과 유사하다. 방법들더 나은 상태를 관리하는 가장 좋은 방법은 state를 최대한 단순하게 만드는 것 이다. 연관된 state 그룹화 : 항상 한번에 업데이트해야하는 상태값들이 있다면 여러 개의 state로 분리하는 것 보다 하나의 object로 묶어서 하나의 state로 관리하자.State의 모순 피하기 : 서로 다른 상태 간에 논리적으로 불가능한 값을 가질 수 있는 환경을 제거하자.불필요한 state 제거하기 : 렌더링 중에 컴포넌트.. 2024.11.08
[Web] Frontend

[React] Controlled, Uncontrolled Component

[React] Controlled, Uncontrolled Component Controlled, Uncontrolled ComponentControlled와 uncontrolled는 엄밀히는 기술 용어가 아니다. (사실상 디자인 패턴에 가깝다) 개념상 아래처럼 2개로 나누지만, 무조건 둘 중 하나로 구분되는 것이 아니라 하나의 컴포넌트에 두개의 개념이 혼재될 수 있다. controlled component : 중요한 정보가 local state가 아닌 props에 의해 만들어지는 컴포넌트uncontrolled component : local state를 이용하여 내부적인 정보를 관리하는 컴포넌트 예시예를 들어, TextField라는 컴포넌트가 있을 때 이 컴포넌트를 이루는 중요한 정보는input 태그에 보여줄 정보인 value와사용자가 input 이라는 행위를 이루었을 때 .. 2024.10.07
Java

[Java] 자바 동작 과정

[Java] 자바 동작 과정 Java 동작과정 개요 자바 컴파일러가 소스코드를 바이트코드로 변환시킨다. 클래스로더가 바이트코드를 JVM의 runtime data area(메모리 영역)로 올리고 Execution engine의 interpreter와 JIT compiler를 통해 코드를 해석한다. 컴파일? 인터프리터? 자바는 컴파일 방식과 인터프리터 방식 둘 다 사용한다. 컴파일 방식 : 자바 컴파일러는 소스코드를(*.java)를 자바 바이트코드(*.class)로 변환시키고, 인터프리터 방식 : JVM은 변환된 소스코드를 런타임에 읽어서 코드를 실행한다. JVM 역할 Class Loader System Java byte code (*.class)를 runtime에 읽어서 JVM의 메모리(runtime data area)에 배치시킨다... 2024.04.01
Java

[JAVA] 버전에 따른 주요 기능들 (SE8~SE20)

[JAVA] 버전에 따른 주요 기능들 (SE8~SE20) 자바 버전이 변경됨에 따라 추가/변경된 주요 기능들을 담아봤다. SE8 (2014) Lambda, Method Reference Lambda Method Reference s -> s.getSample() Sample::getSample () -> Thread.currentThread().dumpStack() Thread.currentThread()::dumpStack (str, i) -> str.substring(i) String::substring (String s) -> System.out.println(s) System.out::println Interface Default Method 원래는 interface 내에는 메소드 정의만 가능하고 구현은 불가능 하였으나, default method를 이.. 2024.03.27
[Web] Backend

[SpringBoot] @Builder의 장점

[SpringBoot] @Builder의 장점 @Builde의 장점 Builer pattern을 권장하는데 그 이유가 궁금해서 정리해봤다. 장점 가독성을 높일 수 있고 human error 를 줄일 수 있다. 필요한 데이터만 설정할 수 있고 코드가 줄어든다. 유연성을 확보할 수 있다. toBuilder의 이점을 누릴 수 있다. 가독성을 높일 수 있고 human error 를 줄일 수 있다. 멤버변수가 많아지는 경우 생성자의 파라미터를 식별하기 힘들고 순서에 따라 실수가 발생하기 쉽다. 개발자의 편리성을 높여주고 사람에 의한 실수를 줄일 수 있는 것이다. 필요한 데이터만 설정할 수 있고 코드가 줄어든다. 생성자를 별도로 만들어줄 필요가 없다. 특히 일부 변수에 대해서만 갖는 생성자들을 반복적으로 만들어줄 필요가 없다. 이는 불필요한 코드를 줄일 수 있.. 2024.01.14
[Web] Frontend

[Javascript] null, undefined

[Javascript] null, undefined undefined vs null undefiend와 null이 비슷한 것 같지만 다르다. 명시적으로 없음을 나타내기 위해서는 undefined보다는 null이 좋다. undefined 값이 정의된 적 없음을 나타낸다. typeof undefined : 'undefined' null 값이 없음을 나타낸다. typeof null : 'object' 대입한 적 없는 변수나 속성과, 명시적으로 '없음'을 나타내는 경우가 구분되어야 코드의 의미가 명확해진다. 그렇기에 null과 undefiend를 구분해서 사용하는 것이 좋다. equality, identity 비교 시에도 차이가 발생한다. equality 비교 null == undefined : true indentity 비교 null === undefined .. 2024.01.11
JavaScript

[Javascript] Falsy, Truthy, &&

[Javascript] Falsy, Truthy, && Falsy, Truthy js에서 아래 값들은 false로 판단된다. 이러한 값들을 Falsy라 한다. false null undefined NaN 0 empty string('') 반대로 true로 판단되는 값들을 Truthy라고 한다. if나 3항 연산자에서 truthy가 true, falsy가 false로 판단되기에 null, undefined 외에도 0, empty string 등을 사용할 때 주의해야한다. && js에서 논리적 AND(&&)는 단순히 true, false만을 반환하는 것이 아니기에 주의가 필요하다. &&는 연결된 모든 피연산자가 false이면 false를 반환하고, true이면 맨 마지막 피연산자의 값을 반환한다. 즉, true && expression이라면 expression가.. 2024.01.11
[Web] Frontend

[React] useImperativeHandle (forwardRef의 ref 커스터마이징)

[React] useImperativeHandle (forwardRef의 ref 커스터마이징) useImperativeHandle forwardRef를 사용할 때 ref로 넘어가는 메소드나 값들을 커스텀하고 싶은 경우가 있다. 이런 경우 useImperativeHandle을 사용하면 부모 A가 forwardRef 자식 B에 접근해서 여러 메소드나 값을 사용할 수 있게 할 수 있다. 파라미터 useImperativeHandle(ref, createHandle, dependencies?) ref 필수 forwardRef의 두번째 인자로 넘어오는 ref이다. createHandle 필수 부모에서 ref.current 로 접근할 수 있는 핸들러를 리턴하는 함수이다. 어떤 타입이든 넘길 수 있으나 주로 대게 메소드들을 담은 object를 넘긴다. dependencies optional 다른 상태 함수들에서.. 2024.01.04
[Web] Frontend

[React] Store 유지한 채 페이지 새로고침하기 (Remounting)

[React] Store 유지한 채 페이지 새로고침하기 (Remounting) Remount 구현하게 된 배경 React를 사용할 때 전역 상태의 값은 냅두고 페이지를 새로고침하고 싶을 때가 있다. 예를 들어, 신청페이지에서 신청 내역을 작성 후 신청을 했을 때 사용했던 모든 local state를 초기화하고 싶은 경우이다. 이는 단순히 rerender를 통해 상태나 값을 새로 그리는것과는 다르다. 기존의 컴포넌트를 unmount 시킨 후 새로운 것을 mount 시키는 remounting을 원하는 것에 가깝다. 🙅‍♂️ window 이용? window.location.reload()를 통해 새로고침을 하면 상태를 비워버릴 수는 있지만 이 또한 아래와 같은 문제가 있다. 모든 state가 초기화되는 점 (local state를 포함한 global state(zustand 등)까지) .. 2023.12.24
[Web] Frontend

[React] useReducer

[React] useReducer useReducer React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다. useState와 마찬가지로 상태를 관리하지만, 컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서 useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... } Parameter, Return const [state, dispatch] = useReducer(r.. 2023.12.24

인기글

티스토리툴바