10

State: A Component's Memory프론트엔드 개발에서 상태(state)는 사용자 인터페이스를 이루는 특정 시점의 데이터를 말한다. 따라서 상태는 동적으로 변화하는 데이터다. 사용자와의 상호작용이나 네트워크 응답과 같은 이벤트에 따라 변경되므로 UI의 렌더링에 직접적인 영향을 미친다. 상태에 따라 UI는 표시되거나 숨겨질 수 있다. 또 사용자와의 상호작용 중 현재 시점의 맥락을 의미하기도 한다. 입력값, 목록에서 선택된 항목, 여러 단계의 프로세스가 있는 경우 현재 위치한 페이지를 기억할 필요가 있다. 이는 모두 '상태'다. React 컴포넌트의 상태란 일종의 컴포넌트 별 메모리다. 각각의 컴포넌트가 기억해야 하는 정보를 의미한다.function App(): React.ReactElement..

순수 함수순수 함수는 두 가지 조건을 만족해야 한다.참조 투명성(Referential Transparency)부작용 없음(No Side Effects)아래 함수는 순수 함수라고 할 수 있다.function add(a, b) { return a + b;} 동일한 인자(`a`, `b`)가 주어지면 항상 동일한 결과를 반환한다. 또 이 함수의 결과가 외부의 상태를 변경하지 않는다. 반면 아래 함수는 순수 함수라고 할 수 없다.let count = 0;function increase() { return ++count;} 함수 외부의 변수 `count`에 의존하고 있기 때문에 동일한 인자가 주어지더라도 다른 값을 반환할 수 있다. 다른 함수에서 `counter`에 접근할 수 있기 때문이다. 따라서 순수..

Java 진영의 프레임워크나 라이브러리는 많은 것이 추상화 되어 있다.추상화가 잘 되어 있으면 코드를 블록 조립하듯 작성할 수 있다. 이 구현체는 이런 역할을 담당하고, 이 메서드는 이런 input을 넣으면 이런 output을 뱉는다... 정도만 알고 있어도 특정한 동작을 하도록 만드는 것은 어렵지 않다.하지만 그걸 배우는 입장에서는 잘 된 추상화는 이해를 방해한다. 전체적으로 어떻게 구현이 되어있는지 파악하기 어렵다. 개인 프로젝트로 작은 웹 서비스 서버를 구현해보면서 JWT 기반 인가 처리와 OAuth 인증을 구현하고 싶었는데, 내가 접근했던 모든 정보는 이걸 구현해서 Bean으로 등록하면 됩니다, 정도에서 그쳤다.OAuth 2.0 기반 인증 처리를 구현할 때, 최초에 이해한 것은 다음이 전부였다.구..

Spring Data JPA Repository의 기본 구현체를 분석해보며 기계적으로 서비스 계층의 메서드에 `@Transactional` 어노테이션을 붙이는 것이 적절한가? 그리고 JPA가 제공하는 메서드들은 내부적으로 어떻게 동작할까? 일반적으로 Spring Data JPA를 사용해 Repository를 Interface로 만들고 메서드 쿼리를 사용한다면 `save()`, `findById()`와 같이 메서드 이름으로 원하는 쿼리를 만들어낼 수 있다. Interface만으로 동작할 수 없으므로 `save()`, `findById()`와 같은 기본 메서드를 구현하는 구현체가 있을 것이다. 이 구현체의 동작 방식을 코드 레벨에서 확인해보면 내가 정확히 알지 못하고 사용하던 메서드를 조금 더 깊게 이해할 ..

Spring이 지원하는 DB Transaction의 내부 동작 원리와 Transaction Propagation이 동작하는 방식을 파악하기 위해 디버깅을 해봤다. @Transactional 어노테이션을 클래스 레벨이나 메서드 레벨이 붙이면 Spring이 DB Transaction 관리를 알아서 해준다.이렇게 작성하면 프레임워크가 혹은 라이브러리가 알아서 해준다, 정도로 이해해야 하는 상황이 가장 답답하게 느껴진다. 어떻게 알아서 해준다는 것인지 따로 찾아보지 않으면 영원히 모르게 될 가능성이 높기 때문이다. 그래서 알아서 해주는 것을 확인하고 적용해본 다음에는 꼭 어떻게 알아서 해주는 것인지를 찾아봐야 마음이 놓인다.보통은 서비스 계층의 메서드에 @Transactional 어노테이션을 붙이면 해당 메서드..

개인 프로젝트를 하다가 Java Optional 클래스가 해결하는 문제와 각 메서드의 역할 및 동작 원리가 궁금해졌다. 나는 아래와 같은 코드를 작성했다.// Email, Provider로 기존 유저 조회, 없으면 새 유저 생성User user = userRepository.findOAuthUser(email, providerType) .orElse(createOAuthUser(oAuth2User, providerType)); 기대하는 동작은 아래 쿼리를 전송해서 registrationId와 email 조건을 만족하는 기존 유저를 조회하고, 없는 경우 새로운 유저를 생성하는 것이었다.SELECT * FROM userWHERE email = 'user@gmail.com' AND provider = 'GO..

Reconciliation을 구현하기 전에 `workLoop()`와 `doNextWork()`를 변경했다.변경 목적은 전체 트리 렌더링이 완료되기 전에 브라우저가 작업을 방해할 수 없도록 하는 것이다. 하나의 트리가 모두 만들어지면(다음 work 없음) 그 때 한 번에 전체 fiber 트리를 DOM에 집어 넣는다.function doNextWork(fiber) { // ... if (fiber.parent) { fiber.parent.dom.appendChild(fiber.dom); } // ...} 기존에는 doNextWork 함수 내부에서 작업 중간에 parent node가 존재하는 경우 child를 parent에 append 처리 했는데, 이 부분을 제거했다. doNextWo..

React는 자바스크립트 기반이기 때문에 싱글 스레드로 동작한다.그러나 Concurrent Mode를 이용하면 여러 작업을 동시에 처리할 수 있다. 기본적으로 리액트는 UI 렌더링 도중에 렌더링 이외의 모든 작업을 중단하는데, 동시성은 여러 작업을 작은 단위로 나눈 뒤 그들 간의 우선 순위를 정하고 작업을 번갈아 수행하는 방식이다. 실제로 작업이 동시에 이루어지는 것은 아니지만 작업 간 전환이 매우 빠르게 일어나기 때문에 동시에 작업하는 것과 같은 효과를 낸다.보통 이런 문제를 해결하기 위해 디바운스나 스로틀이 사용되는데, 이 방식에는 약간의 문제가 있다.유저가 input에 뭔가를 입력함과 동시에 무거운 작업을 수행해야 하는 경우, 디바운스는 사용자의 마지막 입력이 끝난 뒤 일정 시간이 지나면 작업을 시..

const element = ( link to index console.log("click")}> click me... ) React에서 JSX로 위와 같이 작성하면 Babel을 통해 만들어진 결과물을 볼 수 있다. Babel 공식 문서에는 결과물에 대한 예제가 다음과 같이 나와 있다.// inputconst profile = ( {[user.firstName, user.lastName].join(" ")} );// outputimport { jsx as _jsx } from "react/jsx-runtime";import { jsxs as _jsxs } from "react/jsx-runtime";..

관련 개념테스트 하려는 대상(System Under Test)을 SUT라고 한다. 유저의 어떤 행동에 대한 결과를 테스트하는 경우 유저는 SUT다. 예를 들어 유저가 어떤 글을 저장하는 로직에 대한 테스트 코드가 있다면 SUT는 유저다. 저장을 하는 행위가 SUT라고 생각하기 쉽지만 SUT는 테스트하고자 하는 주요 대상이 되는 Unit을 의미한다.  테스트는 행동에 집중해야 한다. 유저가 시스템을 사용하는 User Story를 생각해야 하고, 시나리오를 고려해야 한다. 이를 지키기 위해 테스트 코드를 작성할 때 given-when-then 뼈대를 사용하기도 한다. 어떤 상황이 주어졌을 때(given), 어떤 행동을 하면(when), 결과가 이러해야 한다(then)는 구조다. 대상 함수의 구현을 호출하지 ..