전체 글241 [Express] MySql 연동 express 환경에서 mysql을 연동하는 작업을 진행했다. mysql2를 깔고 다음과 같이 처리하면 된다. dotenv를 사용하여 처리한다. .env PORT=3000 DB_HOST=localhost DB_PORT=3306 DB_USER=root DB_PASSWORD=1234 DB_NAME=name config/mysql.js const mysql = require("mysql2"); const db_info = { host: process.env.DB_HOST, port: process.env.DB_PORT, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, }; const pool .. 2023. 12. 17. [Portfolio Log] NFT 가구점 5 가구 항목에 대한 다이얼로그가 추가되었다. 메인페이지에 표출하는 NFT 카드 UI가 수정되었고, 정보 페이지에서 이미지 옆 버튼을 눌러 탭을 이동하도록 처리하였다. 그 외에는 백엔드 개발이 필요한 부분에 대해 기능을 정리했다. 대략적인 내용까지만 정리해두었으며, url, 메소드 정보도 추가할 예정이다. DB는 설계해 두었다. 약간 수정되었는데, 워크벤치가 말을 안 들어서 다시 사진을 뽑지 못하고 있다. 1. 메인페이지 - 현재 판매중인 NFT를 순서대로 출력한다. (페이지네이션) 블록체인: 현재 판매중인 NFT의 정보를 요청 백엔드: NFT의 정보를 토대로 프론트에서 백엔드에 요청(nftItemId) 2. 가구 세상 접속 다이얼로그 - 내가 팔로우하고 있는 유저들의 방 정보를 가져온다. 백엔드: 팔로우하.. 2023. 12. 17. [Portfolio Log] NFT 가구점 4 12월 15일 작업 NFT 탭 기능을 추가했다. 다이얼로그를 출력하는 부분을 작업했는데, 정확한 이유는 모르겠지만 리액트 컴포넌트에서 외부에서 선언한 전역변수의 값을 변경했을 때 문제가 생기더라. 그래서 useAtom으로 다이얼로그에 출력할 문자를 관리하고 있다. 다이얼로그에 띄울 때 값을 설정해주고 있다. NFT의 상태에 따라 구매 가능 여부, 가격, 이름, 설명 등의 정보를 출력하고 있다. NFT의 이름이나 기본적인 내용은 DB에 저장해놓고 사용할 생각이다. 다만 어떤 아이템에 해당하는지, 가격은 어떤지, 판매 중인지 여부는 블록체인 네트워크에 저장할 생각을 하고 있다. flutter로 개발할 때와 비교하면, 리액트 쪽이 확실히 미리 만들어진 코드를 재사용한다는 느낌이 더 강했다. 이미 지원해주는 라.. 2023. 12. 16. [Portfolio Log] NFT 가구점 3 개발내역 방명록에 댓글 편집 버튼을 추가했다. 팔로잉 탭 내용을 추가하여 하트 애니메이션을 공통으로 적용했다. 기존에 댓글마다 다이얼로그가 있던 형태를 수정하여 탭이 가지고 있도록 했다. (리팩토링) 배운 내용 리액트의 다이얼로그는 매번 재생성 되는 형태가 아니라, 한번 그리고 flag로 애니메이션 처리만 해주는 형태이다. 따라서 useState로 초기값을 들고 있을 때, 변경되는 전역변수의 값이 처리되지 않더라. 그래서 useAtom(jotai 라이브러리)를 써서 전역변수에 대해 변하는 값을 인식하도록 처리한다. export const userAtom = atom(null); Const [item, setItem] = useAtom(userAtom); 내가하고 싶은 처리는 특정 전역 변수가 변했을 때,.. 2023. 12. 15. [Portfolio Log] NFT 가구점 2 요즘 개발을 너무 게을리하는지 집에 와서 글이나 쓰고 있지, 실질적으로 개발을 안 한다. 좀 맞아야 할 것 같은데;; 방명록 탭을 만들었다. 추가적으로 개발한 것이 없으니 배운 것만 정리하고 마무리하겠다. CSS 속성으로 width="calc(100% - 100)" 이런 식으로 사용할 수 있다. 차크라 UI에서 Flex와 Stack의 차이 Flex는 영역을 먹고, stack은 먹지 않는다. flutter에서 스택은 좌표계 처럼 위치를 조정하고 실질적인 가로 세로는 Row, Column을 사용한다. 그러나 웹, 차크라 UI에서는 Stack으로 가로, 세로를 처리하고 위치 조정은 position과 absolute/relative로 처리한다. 2023. 12. 14. 함수형 프로그래밍이란? 함수형 프로그래밍이란 무엇인가? 함수형 프로그래밍은 대입문을 사용하지 않는 프로그래밍이며, 작은 문제를 해결하기 위한 함수를 작성한다. 함수형 프로그래밍에서는 대입문이 없기 때문에 메모리에 한 번 할당된 값은 새로운 값으로 변할 수 없다. https://mangkyu.tistory.com/111 함수를 인자로 넘기는 것 일급 시민이 된다는 것은 무엇을 의미할까요? Argument로 전달할 수 있다는 의미. -> 함수가 Argument로 전달될 수 있다. 함수의 Return값이 될 수 있다는 의미. -> Return값이 함수가 될 수 있다. 값을 수정하기도, 값을 할당할 수도 있다는 의미. -> 함수를 값처럼 할당하기도 수정도 할 수 있다. https://nesoy.github.io/articles/201.. 2023. 12. 12. [WinForm] BLE 통신 예제 데스크탑 환경 테스트앱(C#)과 TOOKTOOk 기기(회사 IOT기기 이름) 연동 테스트 작업을 진행했습니다. PC에 블루투스 동글을 연결하여 IOT기기와 통신합니다. 프로젝트 참조 패키지 1. C:\Program Files (x86)\Windows Kits\10\UnionMetadata\10.0.22621.0\Windows.winmd 2. Nuget 패키지 System.Runtime.WindowsRuntime 설치 유의사항) 기기와 PC간 거리를 가까이 하지 않으면 스캔/통신 처리가 정상적이지 않았습니다. BLE 통신 요약 1. BluetoothLEAdvertisementWatcher를 선언하고 BLE 통신 콜백을 등록합니다. watcher.Received += OnAdvertisementReceive.. 2023. 12. 11. [Zigbee] FZ200BS 모듈 정리 지그비 모듈인 FZ200BS을 회사에서 테스트하면서 학습한 내용을 정리한다. (대부분 문서 정리한 내용) 조립하는 법 안테나를 뒤에 꼽고, USB 부분을 PC에 연결하면 된다. 코디네이터, 라우터, 엔드디바이스 지그비 네트워크 구성에는 코디네이터, 라우터, 엔드디바이스가 존재한다. 1) 코디네이터는 지그비 네트워크를 구성합니다. 코디네이터는 라우터/엔드디바이스와 통신합니다. 2) 라우터는 코디네이터 또는 라우터와 연결되어 네트워크를 확장합니다. 라우터는 코디네이터/라우터/엔드디바이스와 통신합니다. 3) 엔드디바이스는 지그비 네트워크에 참여 하여 라우터 또는 코디네이터와 통신합니다. 지그비 네트워크를 구성함에 있어서 코디네이터는 반드시 있어야 하며, 한 개의 지그비 네트워크에는 한 개의 코디네이터가 존재해.. 2023. 12. 11. [Portfolio Log] NFT 가구점 1 최근에 블록체인 프로젝트를 시작한다고 언급했었다. React, Express, 블록체인 기초, 블록체인 월렛(크롬 익스텐션 개발), threejs 등 준비가 다 되었다고 판단하여, 이번 주말부터 개발을 시작하고 있다. 처음에 구상했던 방향과는 약간 다르게 접근하고 있는데, 메타버스 환경 구축을 Unity가 아니라 Web환경에서 구축할 예정이다. React 환경에서 three.js를 사용하도록 도와주는 라이브러리인 threejs-fiber를 이용하고 있다. 앞으로 개발에 사용할 기술 스택은 다음과 같다. 언어: Typescript, Javascript, Solidity 서버: Express(Node.js) 블록체인: Polygon 프레임워크: React 라이브러리: Socket.io, Threejs-fib.. 2023. 12. 10. [Express] express 공식 문서 정리 Express4.18.1 Fast, unopinionated, minimalist web framework for Node.js Web Applications Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. APIs With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Performance Express provides a thin layer of fundame.. 2023. 12. 5. [시스템 프로그래밍] 가상 메모리와 힙 가상 메모리 프로그램에게 할당된 데이터는 메인 메모리의 크기를 넘을 수 있는데, 어떻게 이것이 가능할까? 프로그램은 할당된 메모리를 전부 사용하지 않을 확률이 높다. 이런 컨셉으로 나오는 것이 가상 메모리 시스템이다. MMU(Memory Management Unit) CPU가 마치 프로세스에 할당된 메모리가 실제로 존재하는 것처럼 관리해준다. CPU는 메모리를 요청할 때 직접 메모리에 접근하지 않고 MMU를 통해서 요청한다. 페이지 프레임은 실제 메모리 블록을 의미하고 페이지는 가상 메모리 블록을 의미한다. 가상 메모리는 물리 메모리와 매핑이 되어 있다. MMU는 CPU의 요청에 따라 매핑되는 페이지를 계산한다. 근데 만약에 물리 메모리에 해당 페이지 정보가 로드된 상태가 아니라면? 하드디스크를 메인 메.. 2023. 12. 4. [시스템 프로그래밍] 쓰레드 동기화와 캐시 알고리즘 쓰레드의 동시접근 이슈 일반적으로 실행중인 쓰레드의 변경이 라인 단위로 이뤄진다고 생각하지만, 연산을 처리하는 도중에 컨텍스트 스위칭이 일어날 수 있다. 따라서 쓰레드가 같은 메모리 영역을 동시에 접근하는 것은 문제를 일으킬 가능성이 높다. 메모리 접근의 동기화 - 유저 모드 동기화 동기화가 진행될 때, 커널 코드가 실행되지 않는 방식이다. 커널 모드의 전환이 일어나지 않으므로 성능상의 이점이 있다. 다만 그 만큼 기능상의 제한도 존재한다. - 커널 모드 동기화 동기화와 관련된 처리에서 커널 모드로의 전환이 이루어져서 성능 저하로 이어진다. 그러나 유저 모드 동기화에서 제공하지 못하는 기능을 제공 받는다. - 크리티컬 섹션 한 순간에 하나의 쓰레드만 접근이 요구되는 코드 블럭을 의미한다. - 유저모드 동.. 2023. 12. 3. [시스템 프로그래밍] 스케줄링과 쓰레드 비선점형 OS 현재 실행중인 프로세스보다 높은 우선순위의 프로세스가 등장한다고 해서 실행의 대상을 바로 변경하지 않는다. 실행중인 프로세스가 명시적으로 CPU를 양보할 때까지, 혹은 I/O작업 등으로 블로킹 상태에 놓일 때까지 기다려야 한다. 선점형 OS 현재 실행 중인 프로세스보다 우선순위가 높은 프로세스가 등장하면 스케쥴러에 의해 실행 순서가 조정된다. 비선점형 OS에 비해 스케쥴러가 하는 일이 더 많은 것도 특징이다. 라운드 로빈 스케쥴링 알고리즘 같은 우선순위 프로세스들간 형평성 유지를 위해, 정해진 시간 간격 만큼 실행하고 다른 프로세스에게 CPU할당을 넘기는 방식으로 동작한다. 스케줄링 알고리즘에 의해 스케줄링이 진행되는 시점 1. 매 타일 슬라이스마다 스케줄러 동작 정해진 시간이 지나면 다른.. 2023. 12. 3. [시스템 프로그래밍] 프로세스와 컨텍스트 스위칭 64비트와 32비트 CPU가 입출력 버스를 통해 한번에 전송 및 수신할 수 있는 데이터의 크기가 32비트라면 32비트 컴퓨터, 64비트라면 64비트 컴퓨터가 된다. 표현할 수 있는 주소의 범위가 많다는 것은 그 만큼 많은 메모리를 관리할 수 있다는 의미가 된다. 32비트 컴퓨터는 4GB의 메모리를 다룰 수 있다. 32비트 컴퓨터에서 주소값을 64비트로 사용한다는 것은, 주소값에 대한 연산을 두 번으로 나눠서 처리하게 되므로 성능 저하가 일어난다. 따라서 64비트 컴퓨터에서는 주소값이 64비트(8바이트)를 의미하고 32비트 컴퓨터에서는 주소값이 4바이트이다. direct 모드와 indirect 모드 레지스터에 저장할 데이터가 존재하는 주소에 직접 접근하는 방식을 direct 모드이다. indirect모드는.. 2023. 12. 3. [시스템 프로그래밍] 컴퓨터 구조 윈도우즈 시스템 프로그래밍이란? 윈도우즈 운영체제 기반의 컴퓨터에게 일을 시키는 프로그램을 개발하는 것 CPU(Central Processing Unit) 중앙처리장치, 프로그램의 연산을 담당한다. 메인 메모리(Main memory) 컴파일이 완료된 프로그램 코드가 올라가서 실행되는 영역이다. 입출력 버스(Input/Output Bus) 컴퓨터를 구성하는 요소 사이에서 데이터를 주고 받는 통로 역할을 한다. CPU에 대한 이해 ALU(Arithmetic Logic Unit) CPU 내에 존재하는 블록으로 덧셈이나 뺄셈과 같은 산술 연산 및 논리 연산을 처리한다. 컨트롤 유닛(Control Unit) 명령어에 대한 정보를 해석한다. 레지스터 세트(Register Set) 데이터를 저장하거나 데이터의 주소를.. 2023. 12. 3. [React] useReducer useReducer useReducer is a React Hook that lets you add a reducer to your component. const [state, dispatch] = useReducer(reducer, initialArg, init?) Parameters reducer: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types. initialArg: The value from w.. 2023. 11. 30. [React] createContext createContext createContext lets you create a context that components can provide or read. const SomeContext = createContext(defaultValue) Parameters defaultValue: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don’t have any meaningful default value, specify null. The default value is meant as a “.. 2023. 11. 29. [React] useContext useContext useContext is a React Hook that lets you read and subscribe to context from your component. const value = useContext(SomeContext) useContext는 넘긴 context 값을 반환한다. 컨텍스트 값을 결정하기 위해 리액트는 컴포넌트 트리를 검색하고 가장 가까운 컨텍스트 프로바이더를 찾는다. 컴포넌트에 Provider로 감싸거나 부모 컴포넌트 중에 하나를 감싸라. (매칭되는 컨텍스트 프로바이더로) import { useContext } from 'react'; function Button() { const theme = useContext(ThemeContext); // ... fun.. 2023. 11. 29. [React] forwardRef forwardRef forwardRef lets your component expose a DOM node to parent component with a ref. const SomeComponent = forwardRef(render) Parameters render: The render function for your component. React calls this function with the props and ref that your component received from its parent. The JSX you return will be the output of your component. Returns forwardRef returns a React component that you .. 2023. 11. 29. [React] memo memo memo lets you skip re-rendering a component when its props are unchanged. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) Parameters Component: The component that you want to memoize. The memo does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and forwardRef components, is accepted. optional arePropsEqu.. 2023. 11. 29. 이전 1 2 3 4 5 ··· 13 다음
