거니의 velog

* 이전 장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트 하는 것이 왜 중요한지 배웠다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것이 매우 힘들다.const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4] }, bar: 2 }, foo: 1};// somewhere.deep.inside 값을 4로 바꾸기let nextObject = { ...obje..

* 인터셉트(intercept) - 클라이언트에서 서버로 요청을 보낼 때, DispatcherServlet이 맨 먼저 받는다. 각각의 핸들러, 리퀘스트 매핑 정보 등을 조합하여 응답에 대한 뷰를 만들어서 디스패처가 내보낸다. - 여기서, 필터라고 하는 녀석을 이용해서 인코딩 설정, 로그 기록, 세션 관리 등을 진행했다. - 문제 : 클라이언트와 서버 라고 하는 전반적인 영역 안에서 필터의 위치가 어딜까? - 필터가 스프링 자원을 가용하기 위한 옵션 설정이 매우 어렵다. 그래서 AOP라는 녀석을 활용했다. - 서비스 타겟 실행 이전에 AOP가 실행. 중간에 프록시가 동작. 위치는 어디? 서버 안에 타겟이 들어 있다. 그래서 스프링 자원을 충분히 가용 가능. - 단, AOP는 대규모 시스템에서는 사용이 가능..

package kr.or.ddit.controller.exception; public class ExceptionController { /* * [ 16장 : 예외처리 ] * * 1. 예외처리 * * 일반적으로 프로그램이 처리되는 동안 특정한 문제가 일어났을 때, 처리를 중단하고 다른 처리를 하는 것을 예외처리라고 한다. * 웹 컨테이너는 기본적으로 예외처리를 하여 기본 에러 페이지를 표시해준다. * 하지만, 페이지에 애플리케이션 서버의 내부 정보가 일반 사용자들에게 노출되어 프레임워크의 보안 취약점을 노린 공격을 * 받을 수 있다. 이런 점을 고려하여 최대한 사용자가 직접 예외를 처리하여 사용자가 정의한 에러 페이지를 표시하게 해야 한다. * * 1-1) 예외 종류 * - 스프링 프레임워크 예외 * -..

6. 불변성의 중요성 * 리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요하다. 앞에서 useState를 사용해 만든 todos 배열과 setTodos 함수를 사용하는 onToggle 함수를 다시 확인해 보자. const onToggle = useCallback(id => { setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo, ), ); }, []); * 기존 데이터를 수정할 때 직접 수정하지 않고, 새로운 배열을 만든 다음에 새로운 객체를 만들어서 필요한 부분을 교체해 주는 방식으로 구현했다. 업데이트가 필요한 곳에서는 아예 새로운 배열 혹은 새로운 ..

4. React.memo를 사용하여 컴포넌트 성능 최적화 * 컴포넌트의 리렌더링을 방지할 때는 이전에 배운 shouldComponentUpdate 라는 라이프사이클을 사용하면 된다. 그런데 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없다. 그 대신 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화해 줄 수 있다. * React.memo의 사용법은 매우 간단하다. 컴포넌트를 만들고 나서 감싸 주기만 하면 된다. TodoListItem 컴포넌트에 다음과 같이 React.memo를 적용해 보자. import React from 'react'; import { MdCheckBoxOutlineBlank..

package kr.or.ddit.controller.transaction; public class TransactionController { /* * [ 15장. 트랜잭션 ] * * 1. 트랜잭션 설명 * * - 한 번에 이루어지는 작업의 단위를 의미한다. * * # 트랜잭션 성격(ACID 원칙) * * - 원자성(Actomicity) * > 하나의 트랜잭션은 모두 하나의 단위로 처리되어야 한다. * - 일관성(Consistency) * > 트랜잭션이 성공했다면 모든 데이터는 일관성을 유지해야 한다. * - 격리성(Isolation) * > 트랜잭션으로 처리되는 동안에는 외부에서의 간섭이 없어야 한다. * - 영속성(Durability) * > 트랜잭션이 성공적으로 처리되면 그 결과는 영속적으로 보관되..

* AOP 1. 로깅 2. 보안 3. 트랜잭션 4. 에러 * 이 4가지 중에 제일 첫 번째 로깅처리를 할 것이고, 보안은 스프링 시큐리티 이용, 트랜잭션도 AOP 기반. 이를 활성화해야 돌아감. 마지막 에러의 예외처리는 web.xml, 어노테이션, try-catch로 진행해 볼 것. * AOP를 보면 정말 많이 나오는 예시가 처리속도. 예를 들어 취업해서 회사 들어가 첫 업무가 본인이 맡게 될 프로젝트의 처리속도를 확인해 달라고 요청함. 메소드를 만들어서 테스트 완료 후 팀장님께 간다. 흔쾌히 피드백. 우리 플랫폼에 모든 처리속도를 확인해 달라고 하면? 약 20억개 메소드. 오늘 안에 다 끝내야 하는 업무라면? 하나하나씩 다 열어서 처리 속도를 다 만들어 내야 한다. * 모든 서비스를 열어서 모듈 마다 ..

아이디찾기 아이디 찾기는 이메일, 이름을 입력하여 찾을 수 있습니다. 회원님의 아이디는 [] 입니다. 아이디찾기 비밀번호찾기 비밀번호 찾기는 아이디, 이메일, 이름을 입력하여 찾을 수 있습니다. 회원님의 비밀번호는 [] 입니다. 비밀번호찾기 MAIN MENU 로그인 package kr.or.ddit.controller.crud.notice; import java.util.Map; import javax.inject.Inject; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.spr..

* 이전에는 학습한 지식을 활용하여 멋진 일정 관리 애플리케이션을 만들어 보았다. 현재까지는 이 애플리케이션을 사용할 때 불편하지 않았다. 추가되어 있는 데이터가 매우 적기 때문이다. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생한다. * 이번 실습은 다음과 같은 흐름으로 진행한다. 1. 많은 데이터 렌더링하기 * 우선 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보자. 물론 데이터를 하나하나 직접 입력하지 않고 코드를 사용하여 쉽게 추가할 수 있다. * App 컴포넌트를 다음과 같이 수정해 보자. import React, { useCallback, useRef, useState } from 'react'; import TodoTemp..

(3) 지우기 기능 구현하기 * 이번에는 지우기 기능을 구현해 보겠다. 리액트 컴포넌트에서 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우, 배열 내장 함수인 filter를 사용하면 매우 간편하다. [1] 배열 내장 함수 filter * filter 함수는 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출하여 새로운 배열을 만들어 준다. * 다음 코드 예제를 한번 확인해 보자. const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const biggerThanFive = array.filter(number => number > 5); console.log(biggerThanFive); // 결과 : [6, 7, 8, 9, 10] * filte..