본문 바로가기
728x90
반응형

Programming44

다형성 유형 직렬화(Serialize Polymorphic Types) 공식문서를 옮기며 학습한 내용입니다. (.NET 8)  1. 파생 클래스의 속성 직렬화.NET 7부터 System.Text.Json특성 주석을 사용한 다형성 유형 계층 직렬화 및 역직렬화를 지원함. Base class와 파생 class 하나씩 정의한다. (Base class에 정의한 attribute는 링크 참조)[JsonDerivedType(typeof(WeatherForecastWithCity))]public class WeatherForecastBase{ public DateTimeOffset Date { get; set; } public int TemperatureCelsius { get; set; } public string? Summary { get; set; }} public.. 2024. 6. 27.
Bit 연산 num1 int num1 = 15;int result1 = num1  bit 열15 : 00000000 00000000 00000000 0000111130 : 00000000 00000000 00000000 0001111060 : 00000000 00000000 00000000 00111100120 : 00000000 00000000 00000000 01111000​  반대의 경우 >>num1 >> num2 : num1의 비트 열을 num2칸 씩 오른쪽으로 이동시킨다 2024. 1. 3.
Graceful Shutdown 예제(C#) https://data-gardner.tistory.com/171 간단한 콘솔 앱을 만들어보았다. Worker의 background에서 event가 channel에 쌓일 때마다 IMyService를 통해 event를 처리한다. IMyService가 event를 처리하는데 소요되는 시간은 event가 발생하는 주기보다 길다. event가 channel에 계속 쌓여가는 상태에서 시스템이 종료되면 이미 쌓인 event는 MyService가 처리하지 못하므로, MyService가 모든 event를 처리할 때까지 system은 종료하지 않도록 한다. 핵심은 appLifetime.ApplicationStopping과 appLifetime.ApplicationStopped를 잘 활용하는 것이다. Stopping은 종.. 2024. 1. 2.
14. Redux로 React app 상태 관리 Counter와 Todo component를 만들자. Counter.js import React from ‘react‘; const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }; export default Counter; Todo.js import React from ‘react‘; const TodoItem = ({ todo, onToggle, onRemove }) => { return ( 예제 텍스트 삭제 ); }; const Todos = ({ input, // 인풋에 입력되는 텍스트 todos, // 할 일 목록이 들어 있는 객체 onChangeInput, onInsert, onToggle, onR.. 2022. 10. 26.
13. Redux 전역 상태를 관리할 때 ContextAPI도 사용할 수 있지만, 리덕스를 사용하면 상태를 체계적으로 관리할 수 있다. 코드 유지 보수성, 작업 효율, 미들웨어 기능 제공을 통한 비동기 작업 관리 측면에서 좋다. 1. Action : 상태에 어떤 변화가 필요하면 발생한다. - action 객체는 type 필드를 반드시 갖고 있어야 한다. (action의 이름과 같은 역할) 2. Action 생성 함수 : action 객체를 만들어 주는 함수이다. 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 한다. function addTodo(data){ return { type:'ADD_TODO', data }; } 3. Reducer : 변화를 일으키는 함수, 액션을 만들어서 발생시키면 reducer가 현재 .. 2022. 9. 17.
12. ContextApi 기존 컴포넌트간에 상태를 교류해야할 때 무조건 부모 -> 자식 흐름으로 props를 통해 전달하였는데, 이제는 ContextAPI를 통해 더 쉽게 상태를 교류할 수 있다. 프로젝트 컴포넌트 구조가 간단하고 다루는 상태 종류가 많지 않다면 Context를 사용할 필요는 없지만 전역적으로 사용되는 상태가 있고 컴포넌트 개수가 많은 상황에서 유용하게 사용할 수 있다. 아래에서 App-H-J , App-A-B-F, App-A-B-E-G 로 접근하던 것을 바로 접근할 수 있다. Consumer 우선 프로젝트를 새로 생성한다. yarn create react-app context-tutorial 다음 파일들을 생성한다. - src/contexts/color.js import {createContext} from '.. 2022. 9. 14.
[Electron] 기초 설정 1. 메뉴 바 삭제 electron을 처음에 설치하면 상단 메뉴바가 자동으로 생성된다. mainWindow.setMenuBarVisibility를 false로 변경한다. function createWindow() { mainWindow = new BrowserWindow({ width: 900, height: 680, webPreferences: { nodeIntegration: true, //enableRemoteModule: true, devTools: isDev, }, }); mainWindow.setMenuBarVisibility(false) (mainWindow = null)); mainWindow.focus(); } 삭제 완료 ! 2. 앱 아이콘 변경 우선 사용하고 싶은 아이콘을 다운받고 폴더.. 2022. 9. 10.
11. 라우터로 SPA 개발하기 SPA : Single Page Application의 약어로 한 페이지로 이루어진 애플리케이션을 말한다. 이전까지는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다.(화면을 서버측에서 준비) 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비한다면 성능의 문제가 발생할 수 있다. (ex. traffic많거나, 사용자몰려서 서버에 높은 부하) 캐싱과 압축을 해서 서비스 제공하면 최적화는 가능하지만 바뀌지 않는 부분까지 새로 불러와서 보여주어야 하는 불필요한 로딩도 있기 때문에 비효율적이다.그래서 뷰 렌더링을 사용자의 브라우저가 담당하고, 앱을 브라우저에서 불러와.. 2022. 9. 8.
10. immer사용하여 불변성 유지하기 불변성을 유지하면서 상태를 업데이트하는 것은 렌더링 관점에서 중요하다. 하지만 객체의 구조가 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것이 어렵기 때문에 immer 라이브러리를 통해 짧게 구현할 수 있다. (필수는 아니다) 1 ) immer 설치 yarn add immer 2 ) file 생성 import {useRef, useCallback, useState} from 'react'; import './App.css'; function App() { const nextId = useRef(1); const [form, setForm] = useState({name: '', username: ''}) const [data, setData] = useState({ array: [], uselessV.. 2022. 8. 31.
9. 컴포넌트 성능 최적화 Todo App에서 todo list를 많이 만들면 렌더링을 많이 하기 때문에 속도가 느려진다. 이를 정량적으로 확인해보자. app 실행 후 개발자도구에서 Profiler를 클릭하면 왼쪽 상단에 파란색 녹화버튼이 있다. 녹화 버튼을 누른 후, 할 일 ~ 을 클릭한 뒤, 다시 녹화버튼을 눌러 녹화를 종료한다. 그러면 우측에 Render duration 값을 확인할 수 있다. 이는 리렌더링에 소요된 시간을 의미한다. 두 번째로, Ranked 버튼을 클릭하면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해준다. 이 차트를 통해서 해당 컴포넌트와 관계없는 컴포넌트들이 리렌더링 되고 있는게 아닌지 확인도 가능하다. 그렇다면,, 느려지는 원인을 분석해보자! 컴포넌트는 언제 리렌더링 될까? 1 ) 자신이 전달.. 2022. 8. 24.
728x90
반응형