11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장함수를 사용하면 간단하게 배열과 객체를 복사하고 새로운 값을 덮어쓸 수 있지만, 객체의 구조가 매우 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다. 이러한 상황에서 immer라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하면서 업데이트를 해줄 수 있습니다. 12.1 immer를 설치하고 사용법 알아보기 12.1.1 immer 설치 $ yarn add immer 12.1.2 immer를 사용하지 않고 불변성 유지 먼저 immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴..

22-23/22-23 리액트 스타터 3 2022. 12. 29. 10:01

10장에서 만든 일정 관리 애플리케이션은 추가되어 있는 데이터가 매우 적기 때문에 아직은 사용하는 데 불편함이 없습니다. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 따라서 11장에서는 이와 같은 흐름으로 컴포넌트 성능 최적화를 위한 실습을 진행합니다. 많은 데이터 렌더링하기 -> 크롬 개발자 도구를 통한 성능 모니터링 -> react.memo를 통한 컴포넌트 리렌더링 성능 최적화 -> onToggle과 onRemove가 새로워지는 현상 방지하기 -> react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 우선 실제로 랙(lag)을 경험해보기 위해 많은 데이터를 렌더링해 보겠습니다. createBulkTodos ..

22-23/22-23 리액트 스타터 3 2022. 12. 29. 10:00

앞선 단원에서 전개 연산자와 배열의 내장 함수를 사용하여 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓰는 것을 배웠습니다. 하지만 객체의 구조가 깊어진다면 불변성을 유지하면서 업데이트하는 것은 힘든 일입니다. 이러한 상황에 immer라이브러리를 사용해볼 수 있습니다. 이번 단원에서는 다음과 같은 순서로 진행합니다. immer 설치 immer 사용법 App 컴포넌트에 immer 적용하기 useState의 함수형 업데이트와 immer 함께 쓰기 I. immer 설치 및 사용법 알아보기 1. immer 설치 $ yarn add immer 2. immer 사용법 immer라이브러리를 사용하면 불변성을 유지하면서 간단하게 값을 업데이트할 수 있습니다. import produce from 'immer'; cons..

22-23/22-23 리액트 스타터 2 2022. 12. 29. 10:00

지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:00

데이터가 무수히 많아지면 앱 속도가 느려지는 것을 체감할 정도의 지연이 발생한다. I. 많은 데이터 렌더링하기 => App 컴포넌트를 다음과 같이 수정하여 데이터를 추가하면 랙(lag)이 발생한다. createBulkTodos 함수를 만들어 2500개의 데이터를 자동 생성한다. //App.js function createBulkTodos() { const array = []; for(let i=1;i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; export default App; 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것이다. useState( createBulk..

22-23/22-23 리액트 스타터 2 2022. 12. 29. 10:00

12장의 키워드 메시지(문자열) 다루기 MessageSource 문자열 관리 인터페이스 메시지 출력 태그 커맨드 객체의 값 검증과 에러 메시지 처리 에러 메시지 처리 태그 Validator (글로벌 범위, 컨트롤러 범위) Bean Validation을 이용한 값 검증 처리 MessageSource 문자열 관리 인터페이스 스프링은 locale(지역)에 상관없이 일관된 방법으로 문자열(메시지)를 관리할 수 있도록 MessageSource 인터페이스를 제공한다. 특정 지역에서 메시지를 사용할 때 getMessage()를 이용한다. package org.springframework.context; import java.util.Locale; public interface MessageSource { String..

22-23/22-23 Spring 2 2022. 12. 29. 10:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team NOMAD의 SQL vs. NoSQL에 대한 이야기인데요, 관계형 데이터베이스를 다루는 언어인 SQL과 비관계형 DBMS를 일컫는 NoSQL에 대해 알아봅시다!

Corner 코너 2022. 12. 28. 17:55

🔍 웹 소켓 실시간 양방향 데이터 전송을 위한 기술 WS 프로토콜 사용 노드에서는 WS나 Socket.IO 같은 패키지를 통해 웹 소켓 사용 가능 처음 웹 소켓 연결이 이루어지고 나면 계속 연결된 상태로 있으므로 업데이트가 있는지 따로 요청 보낼 필요 없음 HTTP 프로토콜과 포트 공유 가능하므로 다른 포트에 연결할 필요 없음 ✅ 폴링(polling) 웹 소켓 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송 구현했고, 대표적인 방법이 폴링이다. HTTP가 클라이언트에서 서버로 향하는 단방향 통신이므로 주기적으로 서버에 새로운 업데이트가 있는지 요청 보낸 후, 있다면 가져오는 단순 무식한 방법. ✅ 서버센트 이벤트(Server Sent Events, SSE) EventSource 객체 사용 처음에 한..

22-23/22-23 Node.js 2022. 12. 22. 10:00

11장 (2)는 목록 8 - 14까지 다루고 있습니다. (초보 웹 개발자를 위한 스프링5 프로그래밍 입문 286p~319p) 11 - (2)장의 키워드 # @ModelAttribute 애노테이션 # 커스텀 태그 # ModelAndView 8. @ModelAttribute 애노테이션으로 커맨드 객체 속성 이름 변경 @ModelAttribute : 커맨드 객체 속성 이름을 변경하고 싶을때 사용한다. @PostMappint("/register/step3") public String handleStep3(@ModelAttribute("formData") RegisterRequest regReq) { ...//"RegisterRequest -> formData 라는 이름으로 커맨드 객체에 접근 가능 } 9. 커맨..

22-23/22-23 Spring 2 2022. 12. 22. 10:00

이번 10장에서는 컴포넌트의 일정관리 웹 애플리케이션에 대해서 알아보고자 합니다. 지금까지 배운 이론을 바탕으로 실제로 사용 가능한 웹 용 애플리케이션을 만들어 봅시다. 10.1 프로젝트 준비하기 이전의 이론을 바탕으로 애플리케이션을 생성하기에 앞서, 라이브러리 설치 및 기타 프로그램 설정과 생성이 필요합니다. 이를 단계별로 나누어 알아봅시다. 1) 라이브러리 몇 가지를 다운로드합니다. 명령프롬포트 창 등을 통해 라이브러리를 설치하면 되는데, 설치할 라이브러리는 우선 3가지입니다. SASS CLASSNAMES (편리한 조건부 스타일링 제공) REACT-ICONS (다양한 SVG 아이콘 제공) 2) Prettier 설정을 합니다. 2장에서 Prettier에 대해 학습했었습니다. 이를 참고해서 프로젝트를 만..

22-23/22-23 리액트 스타터 1 2022. 12. 22. 10:00

지금까지 배운 것들을 바탕으로 일정 관리 웹 애플리케이션을 만들어 보도록 하겠습니다. 10.1 프로젝트 준비하기 일정 관리 웹 애플리케이션을 만들기 위한 준비작업을 해보겠습니다. 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app $ cd todo-app $ yarn add sass classnames reacct-icons 애플리케이션을 위한 프로젝트를 새로 생성해줍니다. 이번 프로젝트에서는 sass를 이용할 예정이며, classnames를 통해 좀 더 편한 스타일링을 할 예정입니다. 또한, react-icons를 통해서 다양한 아이콘도 사용해 볼 예정입니다. 10.1.2 Prettier 설정 { "singleQuote": true, "sem..

22-23/22-23 리액트 스타터 3 2022. 12. 22. 10:00

11장의 키워드 #RequestMapping #GetMapping #PostMapping #커맨드 객체 #리다이렉트 프로젝트 준비 pom.xml 작성, 코드 복사 DB 연동을 위한 모듈 설정 DataSource, 트랜잭션 설정 스프링 MVC 기본 설정 파일 요청 매핑 애노테이션을 이용한 경로 매핑 ❓웹 어플리케이션 개발 특정 요청 URL을 처리할 코드 작성 ⇒ 컨트롤러(Controller) 처리 결과를 HTML 형식으로 응답하는 코드 ⇒ 뷰(View) ❓요청 매핑 애노테이션 @RequestMapping, @GetMapping, @PostMapping 요청 애노테이션을 사용한 컨트롤러 클래스를 이용하여 URL을 처리할 코드를 구현한다. @Controller public class HelloControlle..

22-23/22-23 Spring 2 2022. 12. 22. 10:00