본문 바로가기

전체 글241

[React] useMemo useMemo useMemo is a React Hook that lets you cache the result of a calculation between re-renders. const cachedValue = useMemo(calculateValue, dependencies) Parameters calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next rende.. 2023. 11. 29.
[React] useCallback useCallback useCallback is a React Hook that lets you cache a function definition between re-renders. const cachedFn = useCallback(fn, dependencies) Parameters fn: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On next renders, React will give you the same function agai.. 2023. 11. 28.
[React] useRef useRef useRef is a React Hook that lets you reference a value that’s not needed for rendering. const ref = useRef(initialValue) Parameters initialValue: The value you want the ref object’s current property to be initially. It can be a value of any type. This argument is ignored after the initial render. Returns useRef returns an object with a single property: current: Initially, it’s set to the .. 2023. 11. 28.
[React] useEffect useEffect useEffect is a React Hook that lets you synchronize a component with an external system. useEffect(setup, dependencies?) 예시) useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect(); }; }, [serverUrl, roomId]); Parameters setup: The function with your Effect’s logic. Your setup function may also optionally re.. 2023. 11. 28.
[React] useState useState useState is a React Hook that lets you add a state variable to your component. Returns useState returns an array with exactly two values: The current state. During the first render, it will match the initialState you have passed. The set function that lets you update the state to a different value and trigger a re-render. useState는 초기값과 re-render를 트리거하는 set함수를 넘겨준다. 초기값으로 object를 넘길 수도 .. 2023. 11. 27.
[React] 리액트 개요 State Hooks State lets a component “remember” information like user input. useState declares a state variable that you can update directly. useReducer declares a state variable with the update logic inside a reducer function. Context Hooks Context lets a component receive information from distant parents without passing it as props. useContext reads and subscribes to a context. Ref Hooks Refs le.. 2023. 11. 27.
[Block Chain] 블록체인 월렛 개발 강의 블록체인 월렛을 개발하는 좋은 강의가 있어서 주말 동안 수강했다. 이 강의는 ethers.js를 가지고 계정을 생성하고 다른 계정으로 송금하는 는 등의 내용을 학습하게 된다. 개인적으로 크롬 익스텐션 개발의 전체적인 흐름을 파악할 수 있어서 좋았다. 기존에 웹 개발 스택하고 다른 것이 아니라, 그냥 동일하다. 크롬 익스텐션 옵션에 맞게 설정해주고 화면만 작게 만들면 끝이다. 크롬 익스텐션은 클라이언트 코드와 동일하게 동작하는데, 백엔드와 연동하는 처리를 추가할 수 있다. (그냥 프론트엔드라고 생각하면 편하다) 이 강의에서 DAPP과의 연동을 다루지는 않아서 그 부분은 추가적인 학습이 필요하지만, 강의 퀄리티에는 꽤 만족한다. 원하는 포트폴리오를 만들기 위한 기반 지식을 익히는데 많은 도움이 되었다. 다음.. 2023. 11. 20.
응용 프로그램 코드 사인 방법(간단한 조사) 응용 프로그램 코드사인 방법에 대해 조사했다. 인증서를 구매하여 pfx 파일을 받은 이후에 SignTool을 이용하여 응용 프로그램 서명을 진행할 수 있다. 다음 예시처럼 파일을 디지털 서명과 타임스탬프를 지정하는 명령어를 제공한다. signtool sign /f MyCert.pfx /t http://timestamp.digicert.com /fd SHA256 MyFile.exe https://learn.microsoft.com/ko-kr/windows/win32/seccrypto/signtool?redirectedfrom=MSDN 다음은 코드 인증서 업체에서 조사한 가격 정보(MSDN 오피셜 4곳) 1. DigiCert 코드 서명 인증서 기관 연 2000개 - 1년 699 USD - 2년 574 USD.. 2023. 11. 19.
[Block Chain] IPFS 프로토콜 정리 InterPlanetary File System는 분산 파일 시스템에 데이터를 저장하고 공유하기 위한 프로토콜, 하이퍼미디어, 파일 공유 P2P 네트워크이다. IPFS는 콘텐트 어드레싱을 사용하여 IPFS 호스트에 연결하는 전역 이름공간의 개별 파일을 고유하게 식별한다. (위키백과) What is IPFS IPFS is a modular suite of protocols for organizing and transferring data, designed from the ground up with the principles of content addressing and peer-to-peer networking. Because IPFS is open-source, there are multiple impl.. 2023. 11. 19.
Nginx 웹서버 정리 3 nginx Process Roles 마스터 프로세스가 처리하는 작업은 다음과 같다. 읽고 구성을 검증하는 것 소켓을 생성하고 연결하며 닫는 것 구성된 워크 프로세스 수를 유지하고, 시작/종료 하는 것 서비스 중단없이 재구성하는 것 논스탑 바이너리 업데이트를 제어하는 것(새로운 바이너리를 시작하고 필요시 이전 것을 롤백) 로그 파일 다시 열기 내장 펄 스크립트 컴파일링 워커 프로세스는 받아들이고 관리한다. 클라이언트로부터 연결을 진행한다. 리버스 프록시와 필터링 기능을 제공하고 엔진엑스가 할 수 있는 대부분의 것을 제공한다. 엔진엑스 인스턴스의 행동 모니터링과 관련하여, 시스템 관리자는 워커가 실제 동작을 반영하고 있는지 확인해야 한다. 캐시로더 프로세스는 온디스크 캐시 아이템을 확인하고 엔진엑스의 인메모.. 2023. 11. 17.
NginX 웹서버 정리 2 엔진엑스는 높은 동시성과 퍼포먼스를 타겟팅한다. 웹 서버의 기능에 로드밸런싱, 캐싱, 대역폭 컨트롤 그리고 다른 다양한 어플리케이션과의 통합을 지원한다. 이러한 다양한 통합 기능들이 웹 사이트 아키텍처를 위한 좋은 선택이 되었다. 엔진엑스는 세계에서 2번째로 인기있는 오픈소스 웹서버이다. 스마트폰의 등장으로 더욱 많은 트래픽이 필요했으며 비즈니스 생태계가 급진적으로 변화하였다. 인기 있는 웹사이트에서 수십만 수 백만 유저의 동시성을 유지하는 것은 일반적인 상황이었다. 동시성에 대한 주요 이슈는 느린 사용자였고 요즘은 모바일 클라이언트와 뉴스, 트윗, 친구들의 피드 같은 지속적 연결을 유지하길 원하는 새로운 어플리케이션 아키텍쳐로 인해 야기된다. 또한 현대 브라우저의 방식이 빠른 로드 속도를 위해 4~6개.. 2023. 11. 17.
Nginx 웹서버 정리 1 NginX 윈도우 이슈 Version of nginx for Windows uses the native Win32 API (not the Cygwin emulation layer). Only the select() and poll() (1.15.9) connection processing methods are currently used, so high performance and scalability should not be expected. Due to this and some other known issues version of nginx for Windows is considered to be a beta version. At nginx/Windows runs as a standard console.. 2023. 11. 17.
[C#] ClickOnce, Windows Installer, InstallShield 최근에 WPF 앱을 배포하는 방법을 알아보면서 ClickOnce와 InstallShield에 대해 검토하게 되었다. 데스크탑앱 배포 방식(엄청 많다;;) https://learn.microsoft.com/ko-kr/visualstudio/deployment/deploying-applications-services-and-components?view=vs-2022 ClickOnce ClickOnce를 쓰면 특정 웹 페이지에 파일을 배포하는 방식이나, 디스크에 설치 파일을 배포할 수 있다. 파일 서버를 연동하여 웹에 설치할 수 있다고 한다. 배포하면 application 파일과 setup.exe 파일이 나오는데 하나의 파일로 만드는 것은 어렵다는 의견이 많다. 스크립트를 작성하여 하나로 묶고, 압축을 푸는 .. 2023. 11. 14.
Socket vs WebSocket WebSocket 1. 양방향 통신 2. 단방향 통신의 http통신과 대조적 3. 실시간 네트워킹 웹 소켓 이전에 있던 기술 polling 1. 일정 주기마다 요청하여 연결, 실시간 X 2. 보낼 데이터가 없어도 요청을 보낸다. (리소스 낭비) Long Polling 1. 서버에 요청하고 응답을 받을 때까지 종료 X 2. 응답을 받으면 다시 연결을 보낸다. (항상 연결된 상태가 되도록 처리) 3. 많은 양의 메시지가 쏟아질 경우 부하 증가 Streaming 1. 끊임없이 데이터를 수신받는다. (=양방향 불가) 이러한 방식은 http 헤더 정보가 커서 부담이 크다. 웹 소켓의 경우 한번 연결시 http 프로토콜을 이후부터 wss를 사용한다. socket.io는 웹소켓을 지원하지 않는 경우 polling .. 2023. 11. 14.
[C#] WinForm VS WPF 데스트탑 앱 개발을 해야 하는 상황에서 winform과 wpf 사이에서 하나를 골라야 했다. Flutter나 Electron도 고려하긴 했지만 회사에서 C# 사용을 장려하는 분위기가 있어 제외했다. 윈폼은 컨트롤을 배치하면 컨트롤 생성 코드가 자동으로 생성된다. WPF 는 XML 형태의 XAML 문서에 생성된다. WPF 도 XAML 없이 코드만으로 생성 가능. 윈폼은 응용프로그램으로만 실행되지만 WPF 는 응용프로그램 뿐만 아니라 웹브라우저에서도 실행 가능. 윈폼은 윈도우 api 를 이용하여 draw 하는것이고 WPF 는 윈도우 api 사용을 최소화하고 직접 draw 한다. 윈폼은 애니메이션 구현이 어렵고 기본적으로 동기 방식으로 동작한다. WPF는 DirectX 렌더링 방식이기 때문에 연산량이 많고(백.. 2023. 11. 13.
비동기 프로그래밍과 쓰레드 Java의 쓰레드, Kotlin의 Coroutine, C#의 쓰레드, Task Dart의 async, await, Future, Javascript의 async, await, Promise 다양한 비동기 프로그래밍을 접해본 경험이 있으나 나는 비동기 프로그래밍과 멀티쓰레드의 차이를 잘 모르고 있더라. 그래서 이번에 관련 내용을 학습했다. 동기와 비동기 동기는 프로그램의 흐름이 순차적인 것이고 비동기는 프로그램의 흐름이 순차적이지 않은 것이다. 즉, 순서를 보장하지 않는다. 비동기 프로그래밍은 쓰레드를 사용하여 구현되기도 하고, 싱글 쓰레드 기반으로 처리되기도 한다. 자바스크립트에서는 이러한 문제를 Promise를 이용하여 해결한다. 나는 Promise같은 비동기에 대한 처리가 내부적으로는 Thread를 .. 2023. 11. 13.
디자인 패턴에 대한 생각 디자인 패턴은 사용의 이유가 있어야 한다. 단순히 디자인 패턴에 대한 지식을 알고 모르고는 크게 중요하지 않다. 현업에서 실질적으로 사용하는 디자인 패턴은 대체로 정해져 있다. Singleton, Delegate, Observer, Adapter, MVC, MVVM, DI 정도 선에서 정리되는 느낌이다. 솔직히 그렇게까지 거창한 개념도 아니고 개발하다보면 어느 시점에 써야 하는지 감이 온다. 하나하나씩 정리해볼까. Singleton: 객체의 개수를 1개로 고정하고 싶을 때, 게임 프로그래밍이라면 주로 Manager 클래스를 싱글톤으로 둔다. 어플리케이션 내에 1개의 객체만 생성하길 원하는 경우. 예를 들면 Logger 같은 거 만들 때 적합해보인다. Delegate: 프로그래밍 문법적으로 들어가 있는 경.. 2023. 11. 12.
테스트 서버(윈도우) 설정 방법 1. 하드웨어 셋팅 - 본체 구동하여 모니터/키보드/마우스 연결(설정 목적) 그래픽 카드가 있는 곳에 모니터를 꼽는다. USB가 안 잡히면 위치 바꿔서 다시 시도한다. 2. 인터넷 연결 - iptime 기기 뒤에 랜선을 통해 연결하거나 Wifi로 인터넷을 잡는다. 3. 시스템 설정 - 절전 모드 OFF(중간에 프로그램이 멈추면 안 된다.) 4. 원격 설정 - iptime 포트포워딩 설정 참고: https://youtu.be/WgT0KF2fmJc - 방화벽 설정(기본적으로 열려 있음) - 서버 프로그램이 외부망과 통신해야 하는 경우, 포트 열기 - 윈도우 사용자가 없는 경우, 추가 https://wikidocs.net/207095 - 원격 데스크탑 설정 활성화 - 원격 접속 테스트(내부/외부) 5. 윈도우.. 2023. 11. 12.
Apache 웹서버 정리 Apache 다양한 플랫폼에서 실행되는 것을 목표로 설계되었다. 모듈 기반의 기반으로 되어 있어 컴파일/런타임 시기에 원하는 모듈을 추가할 수 있다. 서버는 요청을 처리하고 네트워크 포트에 바인딩하는 MPM과 같이 제공된다. 오래된 소프트웨어와의 안전성을 생각한다면 prefork 방식을, 확장성을 고려한다면 worker나 event 방식을 선택할 수 있다. mpm_winnt 방식을 통해 윈도우 서버에서 네이티브 네트워킹 기능을 사용할 수 있다. (다른 OS에서도 적용됨) https://httpd.apache.org/docs/2.4/en/mpm.html prefork 방식 각 서버 프로세스는 들어오는 요청을 처리한다. 부모 프로세스는 서버풀의 사이즈를 관리한다. 쓰레드에 안전하지 않은 라이브러리와의 호환성.. 2023. 11. 12.
클라이언트와 DB 직접 연결하면 안 되는 이유 클라이언트와 DB를 연결하는 것은 어렵지 않다. 기술적으로 불가능한 것은 아니지만, 일반적인 어플리케이션을 개발할 때 사용하지 않는 방식이다. 클라이언트와 DB 연결의 종류 1. 클라이언트와 로컬 DB 2. 클라이언트와 DB 연결 3. 클라이언트와 서버 연결 주로 사용되는 형태는 1번과 3번이다. 서버와 통신하지 않는 앱을 만드는데 Database를 사용하고 싶다면 SQLite 같은 로컬 DB를 사용하면 된다. 이는 우리 앱이 단순히 자신의 정보를 저장하기 위한 목적으로 DB를 사용한다는 것을 의미한다. 나만의 Todo앱? 나만 사용하는 메모장? 같은 걸 만드는데 사용하면 된다. 만약 서버와 통신하고 싶다면 2번과 3번의 방식이 존재한다. 그렇다면 왜 3번의 방식을 주로 선택하는 것일까? 1. 보안상의 .. 2023. 11. 11.