TIL

[TIL] 2024-0123 : this 바인딩

Findings - 자바스크립트의 this 문제 : 취준때 공부했던 내용을 실무에서 마주하다니... - 일반적인 함수선언 방식에서 this 는 호출 시점에 결정. - 화살표 함수 방식에서 this 는 선언 시점에 결정. 만약 클래스의 메서드로 일반 함수를 정의해두고 외부에서 호출한다면 그 호출 시점에 결정이 된다. 일반 함수 문법을 사용한다면... - 객체의 메서드로 호출시, 해당 메서드를 호출한 객체를 가리킴 - 단독 함수로 호출될 시, 전역객체 혹은 undefined - 생성자 함수로 사용이 된다면 새로 생긴 객체 인스턴스 오늘 내 코드의 경우엔, 다른 클래스에서 this를 사용해 메서드를 정의해두고 그 메서드를 또 다른 클래스에서 호출했기 때문에, 그 시점의 this 를 가리켜 의도치 않게 동작을 ..

[TIL] 2024-0110

Facts - 어제에 이어 여전히 electron 을 파헤치는 중... Feelings - 어쩌다보니 키오스크 개발을 웹 프론트에서 핸들링 하게 되었다. (사실 내가 할 수 있다고! 좋다고 했음..~) - 처음엔 Next.js 로 빌드해서 웹 서버로 띄웠었는데, 기기 펌웨어와 요러쿵 죠러쿵 통신을 해야하는 부분이 있어서 일렉트론으로 로컬 서버를 띄운 뒤에 private Ip 로 post 요청을 보내는 방식으로 했다가... - 동료 개발자분께서 여러 날의 디깅을 해주신 끝에 자동 업데이트 기능이 완성되어서, 본격적으로 일렉트론으로 코드를 옮겨 수정하고 있다. - 일단 전에 하던 것에 비해 새롭게 배우고 부딪혀야 할 것이 많긴 한데, 그게 꽤 재밌다. 웹 환경이 아닌 네이티브 환경이다보니 IPC 라던지, 보..

[TIL] 2024-0109 electron IPC 모듈로 통신하기

Facts - Next.js 로 웹서버에서 띄워주던 UI 를 Electron 내의 renderer 로 옮기는 통합 작업 진행 Findings - Electron 에서 로컬 경로의 이미지를 로드하려면, custom protocol 을 설정해주어야 한다. 그 이유는 일렉트론이 chronium 과 node를 기반으로 하는데 이 두 환경 사이의 상호작용에서 보안 이슈가 발생할 가능성이 있기 때문에 그렇다고 한다. (어떻게 동작하길래 보안 이슈가 발생할 수 있는거지..?) - electron 에서는 main 프로세스와 UI를 띄워주는(브라우저 같은..) renderer 프로세스를 갖는다. 이 두 프로세스 간 통신을 위해서는 IPC 모듈을 사용해야 하는데, 렌더러 프로세스에서 사용할 수 있는 IpcRenderer ..

[TIL] 2023-1227 Nest.js 공부하는 중

Facts 사내에서 electron + Next.js 를 활용한 키오스크 POC 개발을 담당하게 되었음. POC 자체는 80% 정도 진행 되었다고 보여짐. 현재까진 여러 이슈가 있지만 일단 눈앞에 놓인 것을 하고 있음. 백엔드에도 관심을 가지게 되어서 TS 기반 프레임웤인 Nest.js를.. 노마드코더 강의 보면서 공부해보는 중. Feelings 스타트업답게 회사에서 정말 많은 변화가 일어나고 있음. 그에 발맞춰 나도 변화해야겠다는 생각이 정말 많이 듬. 대표님과 사내 개발 문화에 대한 이야기를 나누다가, 문제의 본질 중 하나는 '서로 자유롭게 물어보기 힘든 분위기' 도 있음을 깨달음 예전에 팀플하면서도 느꼈던 부분이지만, 설령 실질적인 도움이 되는 이야기가 아니더라도 일단 자유롭게 이야기하고 받아줄 수..

[TIL] 2023-1208 노션 API 활용하기... 근데 그냥 삽질 푸념...

Facts & Feelings & Findings... - 개인 작업은 완전히 삽질 데이... 반년전에 멈춰두었던 블로그 프로젝트를 다시 진행중인데, db 겸 에디터로 활용하려고 했던 노션 api 가 말썽이다. 그냥 깔끔하게 html 로 데이터를 받아올 수 있으면 참 좋을텐데, notion api 는 자체적인 dto 로 데이터를 내보내주고 있다... 근데 이 block 단위가 무진장 헷갈린다... - react-notion-x 에서 제공하는 NotionRenderer 를 활용하면 이를 html 로 변환해주지만, 이를 스타일링 하기가 쉽지 않음... 최근 사내에서도 QR Scanner 라던지 date-picker 같은 외부 라이브러리를 불러와 디자인에 맞게 CSS 커스터마이징을 많이 해봤는데, 현재 프로젝..

[TIL] 2023-1207

Facts & Findings - 리스트의 선택을 관리하는 useSelect 훅을 만들었었는데, 제네릭을 활용해 타입을 유동적으로 받아오면서 여러 로직에 재사용 할 수 있도록 수정해주었다. 이 list 에 대해 중복된 상태를 제거하고, 훅에서 리턴하는 상태를 활용하도록 개선해줌. - QR 스캔에 관련된 테스트 로직을 작성중이다... cypress 에서 전체 시나리오에 대한 테스트를 진행하려고 했는데, QR 데이터를 주입하는게 좀 까다로워서 고민이 된다.... ... } containerStyle={{ width: '100vw', height: '100vh' }} videoContainerStyle={{ width: '100vw', height: '100vh', paddingTop: '0px', }} vi..

[TIL] 2023-1206 크로스 브라우징 지원, 테스트 코드 작성 등등등...

Facts - cypress 테스트를 위한 셋업, QA 수정사항은 테스트 코드와 함께 수정하려고 함... 근데 무진장 오래걸리겠는데 흠... - QR 코드 스캔하는 부분을 cypress 테스트로 작성하려고 함... 흠... 오래걸리겠지만 그래도 해봐야지... Findings - 사파리 브라우저 기본 컬러값이 크롬이랑 달라서, 사파리에서 버튼이 파랗게 보인다던지.. 그런 경우 디자인에 맞는 정확한 컬러를 지정해주면 된다. 전역으로 color 값을 지정한 경우라도 button 태그의 color 는 적용이 안되기 때문에 그런 현상이 있었던 것으로 보여짐. - max-height 과 overflow-y scroll 속성이 있는 경우 blur 처리되어서 나오는 현상이 있음.(크롬브라우저) 이 때 border-ra..

[TIL] 2023-1129

Facts - QA 넘기고 코드 개선 작업 진행중... 흠... - 디깅한 내용을 문서로 정리하는 중... 빠른 시일내에 블로그 글로 재탄생 시켜야지..! Feelings - 새 프로젝트가 시작되는데 기간이 아주 타이트함.. 하지만 재밌을 것 같다.. 하지만 일정이 제대로 갖춰질까..~? Findings 1. CSS 선택자 꿀팁... only-child 선택자를 사용하면 요소가 1개만 있을 때 속성을 제어할 수 있다. 아래는 2개 컬럼의 그리드에서 요소가 하나만 존재할 때 1개 컬럼으로 변경하는 코드.. display: grid; grid-template-columns: repeat(2, 1fr); /* 자식요소 하나만 있을 때 그리드 컬럼 1줄로 변경... */ & li:only-child { grid..

[TIL] 2023-1124

Facts - 에러 핸들링 로직을 수정했다. 커스텀 에러 바운더리를 쓰고 있는데, 현재 로직상으로 Get 요청에서 에러가 발생해도 에러가 발생한 UI를 다시 재렌더링 하므로 무한 Get 요청과 에러 지옥에 빠지는 현상이 있었다. 일단 급한대로 에러 바운더리에서 에러가 발생한 메서드 타입을 확인해서 분기처리 하도록 했는데.. 조금 더 우아하게 에러를 처리할 방법이 없는지 고민을 해봐야겠다. 흠..~ Feelings - 어제 수도 코드를 쓰자는 셀프 피드백을 받아들여서 적용해봤는데, 작업하다 흐름이 끊겨도 내가 어디까지 생각하고 있었는지 바로 복귀할 수 있어서 좋았음. 역시 메모와 기록을 생활화..~ 생각도 적으면서 하기..~ Findings [Five lines of code] - 함수가 한 번에 한가지 ..

[TIL] 2023-1123

Facts - 기록을 멈춘지 또 한달이 금세 지나버렸다. - api 연동 및 에러핸들링 로직 작성중. - five lines of code 스터디 시작. Feelings - 성장의 동력을 잃은 느낌... 나는 왜 일을하고 공부를 하고 발전해야 하는가... 인스턴스 즐거움 >> 깊이를 요하는 즐거움이 되어버린 요즘. - 하지만 성장의 즐거움과 기쁨을 이미 조금이나마 맛보았으므로, 다시 잃기 전에 빨리 돌아와야겠다. ~.~ Findings [Five lines of code] - 회사에서 기존 코드 리팩터링할 일이 많은데, 효과적으로 하고자 구매하게 됨. - 리팩터링에 있어서.. 메서드를 추출하는 까닭은 긴 코드