Hello_coding

일하는 회사의 제품 특성상 RFID , 바코드 , 결제기 같은 단말기기를 다루게 되는데, 오늘 이런 기기들의 상호작용에 대해서 팀장님께서 친절히 설명해 주셔서 정리해본다! 1. MCU (Microcontroller Unit) 란 무엇인가. MCU는 소형 컴퓨터로, 마이크로프로세서, 메모리, 입출력 포트 등이 하나의 칩에 통합된 장치 다양한 주변장치에서 제어 및 데이터 처리를 담당 작은 cpu라고 생각하면 된다!! 2. 이 글에서 의미하는 주변장치? 나는 PC기준의 주변장치로만 글을 쓰려고한다! ( 그외는 나도 잘 모름 ㅎㅎ) 주변장치는 주로 개인 컴퓨터(PC) 또는 다른 컴퓨터 시스템과 상호작용하는 하드웨어 장치를 의미하는데, 이러한 장치들은 컴퓨터와 통신하여 데이터를 주고받거나 특정 작업을 수행힌다. ..

개발을 하던중 실행환경에 따라 기본적으로 사용할 수 있는 모듈이 있고 제약이 있는 모듈이 있다는것을 인지하게 되었다.. 사실 생각해보면 당연한건데 이제서야 인지한 나를 반성하며 (?) 정리해보자!! 내 상황 - webpack config 파일을 수정하던중 target을 electron-renderer로 잡으면 fs,os 모듈 실행이 가능한데 , target을 ['web',' electron-renderer'] 로 함께 잡으면 module not found 라는 오류가 떳다! - 그 이유는 'fs'나 'os' 같은 Node.js에서만 사용 가능한 모듈은 브라우저(web)에서 직접 사용할 수 없기 때문이다. 따라서 해결방안은 2가지였다. 1. webpack.web.config / webpack.electro..

클린 코드의 의의 - 실무에서 공공연한 지뢰코드가 존재한다. - 지뢰코드 === 흐름파악이 어렵고, 도메인 맥락 표현X , 동료에게 물어봐야하는 코드 - 즉 실무에서 클린코드란 유지보수 시간의 단축과 같다. ( 클린코드 != 짧은코드 ) == 원하는 로직을 빠르게 찾을 수 있는 코드 원하는 로직을 빠르게 찾으려면? 1. 하나의 목적을 가진 코드가 흩뿌려져 있다면 => 1.응집도를 높여라 2. 함수가 여러 가지 일을 하고 있다면? => 2.단일책임의 원칙을 따라라 3. 함수의 세부구현 단계가 제각각이라면? => 3.추상화 단계를 조정해 핵심 개념을 필요한 만큼 노출해라 1. 응집도 응집도가 낮은 코드 예제 리팩토링 시도 - custom Hook 사용 - custom hook을 이용하여 한번에 뭉쳤을때의 위..

자바스크립트에서 객체 이외에도 기본형 7가지 타입이 있다. (string, number, boolean, null, undefined, symbol, bigint ) 기본형들은 불변이며 메서드를 가지지 않는다는 점에서 객체와 구별된다. 하지만 string을 예로 들어보면 메서드를 가진것 처럼 보인다. 🤷‍♂️ charAt은 string의 메서드가 아닌걸요? 'primitive'.charAt(3) // => "m" 여기서 등장하는 개념이 바로 객체래퍼 이다! 객체래퍼란? - 원시타입의 프로퍼티에 접근하려 할 때 생성되는 임시객체를 뜻한다. 즉 위의 예제를 다시 한번 살펴보면, string은 객체가 아니기 때문에 메서드가 없지만 new String (str)을 호출한 것처럼 문자열 리터럴을 객체로 변환시켜주..

타입스크립트를 공부하던중 typeof와 keyof 라는 키워드가 자주 보였다. 비슷한듯 다른듯 헷갈려 확실히 정리하기 위해 쓰는 글! 1. keyof - 객체 형태 타입에서 따로 속성들만을 뽑아 유니온 타입으로 만들어 주는 연산자이다. interface Person { name: string; } interface Lifespan { birth:Date; death?:Date; } type k = keyof (Person | Lifespan); // type은 never // k 를 풀어보면 -> (keyof Person) & (keyof Lifespan) -> name & ( birth | death ) -> never - 여기서 ( keyof Lifespan )을 주목해서 보면 속성들만 뽑은 후 유니..

개발중 , useEffect를 useLayoutEffect로 바꾸었더니 해결되는 현상을 경험했다. useLayoutEffect를 들어보긴 했지만.. 정확한 개념을 알고자 정리해보자! useEffect - 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용한다. - Side effect를 수행하기 위한 Hook이다. useEffect에 대해서는 이전 글에서 자세히 정리해두었으니 아래 링크를 참고하도록 .. https://mandelina-code.tistory.com/80 [React - Hook] useEffect을 사용해 시계만들기 useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook reac..

Electron이란 ? - 데스크탑 프레임워크 , 현재는 깃허브에 의해 개발되고 있다. ( 데스크톱 GUI 애플리케이션을 개발하는데 사용! ) - JavaScript 코드베이스를 유지하고 Windows, macOS, Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. 코드베이스? 특정 소프트웨어 시스템, 응용 소프트웨어, 소프트웨어 구성 요소를 빌드하기 위해 사용되는 소스 코드의 모임 Electron 장단점 장점 - 방대한 커뮤니티 보유 - 낮은 러닝커브 - 웹 기술을 사용가능 - Node.js를 사용하여 JS의 모든 기능을 사용 가능 - MS,Discord,Slack 등에서 사용 단점 - 큰 사이즈의 설치 파일 사이즈 (~120MB) - 많은 RAM과 CPU 사용 - 모바일 지원 X - 보안에 ..

모든 언어에서 라이브러리 의존성 관리는 어려운 일이다.. (TS책의 한구절) 너무 공감한다. 그놈의 의존성 ㅜㅜ 내가 TS 프로젝트를 하면서도 이 의존성 문제 때문에 꽤 애를 먹었었다. 이참에 타입스크립트에서의 의존성을 마스터 해보자. devDependencies에 typescript와 @types 추가하기 npm은 자바스크립트 라이브러리 저장소와 프로젝트가 의존하고 있는 라이브러리들의 버전을 지정하는 방법을 제공한다. 3가지 종류의 의존성을 구분하며 관리하고 , 각 의존성을 package.json 파일 내 별도 영역에 들어있다. 1. dependencies - 현재 프로젝트를 실행하는 데 필수적인 라이브러리 포함 - 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 dependenci..

리액트로 개발을 하다 보면 늘 만나는 key 에러 ,,, 요번에 만난 에러는 TodoList를 만들던 중 key값이 unique하지 않다는 내용이였다. 예전에 정리해둔 글 (아래 링크 참고) 을 참고하려 했지만, 고유의 id값을 사용할 수 없었고, 투두리스트 같은 경우 재렌더링 되더라도 데이터가 유지 되어야하는데 이 경우 재렌더링 되면 다시 id값이 처음부터 시작되는 (...) 현상 때문에 다른방법이 필요했다. https://mandelina-code.tistory.com/102 [React] 리액트 키에러 | Warning: Each child in a list should have a unique "key" prop 에러 map을 사용하여 게시물들을 렌더링 하는 부분에서 Key에러가 발생되었다. 하지..

로컬스토리만 사용해보고 .. 세션스토리지,쿠키는 대충 알지만... 정확히 모르는 나를 위해 정리하는 글 ^^ web storage - HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장했어야 했다. - HTML5부터 Web Storage는 더 안전하게 웹 사이트 성능에 영향을 주지 않고 많은 양의 데이터를 로컬에 저장할 수 있게되었다. - 쿠키와 달리 저장 한도가 훨씬 더 크고, 정보가 서버로 전송되지 않는다. - Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. - 또한 영구저장소(로컬스토리지) 와 임시저장소(세션스토리지)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 맞는 선택이 가능하다. - Web Storag..