본문 바로가기
728x90
반응형

전체 글 보기164

[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.
Decorator Pattern 데코레이터 패턴은 객체에 추가 요소를 동적으로 더할 수 있으며 서브클래스를 만들 때보다 훨씬 유연하게 기능을 확장할 수 있다. 커피 종류, 추가 메뉴에 따른 총 가격을 출력해보자. 구조는 아래와 같다. 계속 감싸는 방식이라고 볼 수 있다. 파일 구조 더보기 Beverage.cs - Beverage : component 역할을 함 - CondimentalDecorator : decorator의 객체 Coffee.cs - Espresso - DarkRoast - HouseBlend - Decaf Additional.cs - Milk - Mocha - Soy - Whip Decorator.cs - Run : 커피주문!! 코드에는 추가로 size에 따라 추가메뉴의 가격이 달라지는 것을 반영하였다. 코드는 git.. 2022. 9. 6.
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.
Observer Pattern 옵저버(관찰자) 패턴은 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들한테 연락이 가고, 자동으로 내용이 갱신되는 방식이다. 변화가 일어나서 weatherData가 업데이트 될 때마다 장비의 화면을 갱신해보자. 구조는 아래와 같다. 인터페이스를 정의하고 구현하도록 구현해보자. 파일 구조 - 실습 c# 코드는 git에서 확인해보자! 온도가 바뀔 때마다 display되는 값들을 갱신한다. 2022. 8. 30.
9. 컴포넌트 성능 최적화 Todo App에서 todo list를 많이 만들면 렌더링을 많이 하기 때문에 속도가 느려진다. 이를 정량적으로 확인해보자. app 실행 후 개발자도구에서 Profiler를 클릭하면 왼쪽 상단에 파란색 녹화버튼이 있다. 녹화 버튼을 누른 후, 할 일 ~ 을 클릭한 뒤, 다시 녹화버튼을 눌러 녹화를 종료한다. 그러면 우측에 Render duration 값을 확인할 수 있다. 이는 리렌더링에 소요된 시간을 의미한다. 두 번째로, Ranked 버튼을 클릭하면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해준다. 이 차트를 통해서 해당 컴포넌트와 관계없는 컴포넌트들이 리렌더링 되고 있는게 아닌지 확인도 가능하다. 그렇다면,, 느려지는 원인을 분석해보자! 컴포넌트는 언제 리렌더링 될까? 1 ) 자신이 전달.. 2022. 8. 24.
Strategy Pattern 전략 패턴은 알고리즘군을 정의하고 캡슐화해서 각각의 알고리즘군을 수정해서 쓸 수 있도록 해준다. 클라이언트로부터 알고리즘을 분리해서 독립적으로 변경할 수 있다. Robot을 상속받으면서 각자 다른 attack, move를 가진 여러 Robot을 생성해보자. 이러한 구조에서는 RobotA의 attack, move를 RobotB에서도 사용하는 경우, 같은 메소드에 대하여 구현의 중복이 일어난다. 이는 새로운 Robot을 추가하는 경우에도 같은 method에 대해서 중복이 일어난다. 따라서 한 곳에 attack과 move 를 인터페이스로 정의해 둔 뒤, 각 메소드에 대하여 동작을 구현하여 하나씩 꺼내와서 정의하여 중복을 피할 수 있다. - 실습 C# (위의 구조에서는 set이 있지만 아래 코드에는 set을 사.. 2022. 8. 24.
13. 부팅 부팅 : 운영체제 커널을 storage에서 특정 주소의 물리 메모리로 복사하고, 커널의 처음 실행위치로 PC를 가져다 놓는 프로그램 ※ 패스트캠퍼스 [컴퓨터 전공자 따라잡기 온라인 완주반] 강의를 참고하여 작성하였습니다. 2022. 8. 22.
12. 파일시스템 파일시스템: 운영체제가 저장매체에 파일을 쓰기 위한 자료구조 / 알고리즘 파일시스템이 만들어진 이유? - 0과 1의 데이터를 비트 단위로 관리하기에 오버헤드가 너무 큼 -> 블록단위로 관리(고유 번호 부여) -> 사용자가 각 블록 고유 번호 관리가 어려움 -> 사용자는 파일단위로 관리, 각 파일은 블록 단위로 관리 파일 사이즈가 가변적인 경우가 있으므로 불연속 공간에 파일 저장 기능 지원이 필요함 - 블록 체인 : 블록을 linked list로 연결 - index block 기법 : 각 블록에 대한 위치 정보를 기록해서, 한번에 끝 블록을 찾아갈 수 있도록 함 windows : fat, fat32, ntfs linux : ext2, ext3, ext4 (inode 방식 사용) 파일 시스템과 시스템 콜 :.. 2022. 8. 22.
8. Component styling 새로운 프로젝트를 만들자. yarn create react-app styling-react CSS CSS 클래스가 중복되지 않게 만들기 위해서 1 ) 이름을 지을 때 특별한 규칙을 사용하여 짓거나 2 ) CSS Selector를 활용할 수 있다. 그 중 BEM Naming은 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식이다. css Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 예를들어 .App .logo{ }는 App의 logo에만 스타일이 적용된다. Sass(Syntactically Awesome Style Sheets) CSS 전처리기로 복잡하 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여주고, 코드.. 2022. 3. 8.
728x90
반응형

티스토리툴바