혼자하는 코딩

본문 바로가기

최근글

[Web] Frontend

[React] 컴포넌트의 순수함 : 컴포넌트는 순수해야한다.

[React] 컴포넌트의 순수함 : 컴포넌트는 순수해야한다. 컴포넌트의 순수함리액트에서 컴포넌트는 순수해야한다.여기서의 "순수함" 이란 javascript에서의 순수함수와 동일한 의미로 아래 두 가지를 지켜야한다.자신의 일에 집중한다. : 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않아야한다.같은 입력, 같은 출력 같은 입력이 주어졌다면 같은 결과를 반환해야 한다. 리액트는 컴포넌트가 순수하다는 것을 전제로 동작한다.때문에 개발자는 컴포넌트를 같은 입력에 대해서 같은 결과를 내놓도록 작성해야한다. 특히 컴포넌트 외부의 변수나 함수를 수정하지 않는 것이 중요하다. 또한 컴포넌트가 특정 순서로 렌더링 되리라 기대하면 안된다. 즉, 각 컴포넌트가 렌더링 중에 다른 컴포넌트에 의존하면 안되고 자체적으로 JSX를 연산해야한다. 나쁜 예시let guest =.. 2025.01.03
[Web] Frontend

[React] 0(숫자) && 은 0을 렌더링한다.

[React] 0(숫자) && 은 0을 렌더링한다. &&을 이용한 조건부 렌더링조건부 렌더링을 할 때 count && 와 같이 사용하는 경우가 있다. 이 때 count가 0이라면 boolean으로 판단되어 아무것도 렌더링되지 않는 것이 아니라, "0" 그 자체가 노출된다. 이유이건 javascript의 조건문 처리 결과에 의함이다. javascript는 && 연산자를 계산할 때 왼쪽에서 오른쪽으로 평가하며 처음 만나는 falsy한 값을 반환한다.falsy한 값은 다음과 같다.false;null;NaN;0;빈 문자열 ("" or '' or ``);undefined. 0은 falsy한 값이기 때문에 0 && 의 결과로 0을 반환하게 되는 것이다. &&에 대한 자세한 내용은 아래를 참고하자.https://developer.mozilla.org/ko/docs/.. 2025.01.03
[Web] Frontend

[React] 다른 방식으로 조건부 렌더링을 하는 컴포넌트는 동일할까?

[React] 다른 방식으로 조건부 렌더링을 하는 컴포넌트는 동일할까? 조건부 렌더링조건부 렌더링을 하는 방식은 여러가지가 있을 수 있다.if를 사용하는 방법, &&를 사용하는 방법, 삼항연산자를 사용하는 방법 등 말이다. 질문다른 방식으로 조건부 렌더링을 하는 컴포넌트는 "완전히 동일"할까? 예를 들어, 아래 컴포넌트 2개가 있다고 하자.아래 두 컴포넌트는 동일한걸까?if (isPacked) { return {name} ✅;}return {name}; return ( {isPacked ? name + ' ✅' : name} ); 정답정답은 "동일하다" 이다.JSX 엘리먼트 내부는 상태를 보유하지 않고 실제 DOM 노드가 아니기 때문에 동일하다고 볼 수 있다. 만약 내부적으로 상태를 갖고 있었다면 (각기 다른 상태를 가질 수 있기 때문에) 다르다고 볼 수 있을 .. 2025.01.03
[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

인기글

티스토리툴바