최근 회사에서 키오스크 머신 앱 개발을 담당하게 되었다.기존 코드를 리팩토링하고, electron의 renderer 부분을 react로 마이그레이션 하는 작업을 하고 있다. 처음 업무를 맡은 이후로 2주 동안 마이그레이션할 프로젝트 환경을 세팅하고, 포트 연결 클래스 추상화 등을 진행했고, 다음주부터는 본격적으로 포트 연결을 통해 하드웨어와 시리얼 통신을 해나가면 된다. 시리얼 통신을 하기 전에 앞서, 기존 코드의 로직들이 시리얼 통신에서 어떤 역할을 하고 왜 필요한 로직인지 이해하려면 기본적인 지식이 있어야할 것 같아서 학습하기로 마음 먹었다. 시리얼 통신 (Serial Communication)Serial : 일렬로 이어지는, 순차적인시리얼 통신은 영어 단어에서도 알 수 있듯이, 데이터를 한 비트(..
3월 8일날 SQLD 시험을 보고 왔다. 프론트엔드 개발자에게 꼭 필요한 자격증은 아니지만, 최근 회사에 들어와보니 어느 정도 데이터베이스 구조에 대한 이해를 해야 기획 및 요구사항을 파악하는데 도움이 될 것 같다는 생각이 들어서 준비하게 되었다. 데이터정의서를 보면서 어떤 데이터를 요청했을 때 조회 성능이 나빠지는지 이런 부분들을 파악하고 나면 소통할 때도 훨씬 수월할 것 같다. 비전공자이지만, 정보처리기사 자격증을 가지고 있고 이때 꽤 깊게 열심히 공부했어서 아직 지식이 남아있는 상태였다.5일 정도 공부했고, 다행히 합격 ! 했다. 그럼 SQLD 시험을 어떻게 준비했고, 붙었는지 공유해보도록 하겠다~! SQLD가 뭔데?https://www.dataq.or.kr/www/sub/a_04.do 데이터자..
Type Challenge를 통해서 TypeScript 실력을 기르겠노라 다짐했고, 쉬움 난이도를 다 풀어서 복기할 겸 포스팅을 한다.이전 글을 참조하세용 :) 2025.03.05 - [☝️ 당당한 개발자가 되기 위해] - [Type Challenge] TypeScript 실력을 길러보자 :) [Type Challenge] TypeScript 실력을 길러보자 :)최근에 기존 바닐라 자바스크립트, Node.js로 되어 있는 프로젝트를 TypeScript로 마이그레이션 하고 있다.그래서 지금 사용하고 있는 모듈의 Type들을 잘 정의해서 타입 안정성을 확보하고, 최대한codingaring.tistory.com 쉬움 난이도의 문제들을 풀면서 사용한 문법들을 먼저 정리하고, 문제 풀이를 통해 그 문법들을 통해서..
최근에 기존 바닐라 자바스크립트, Node.js로 되어 있는 프로젝트를 TypeScript로 마이그레이션 하고 있다.그래서 지금 사용하고 있는 모듈의 Type들을 잘 정의해서 타입 안정성을 확보하고, 최대한 런타임 이전에 오류를 잡아내야 한다. 하지만 지금까지 TypeScript 를 사용하면서 정말 타입 안정성이 높아졌는지를 돌아보면 그렇지는 않은 것 같다.단순히 props와 api의 data schema 정도를 정의해서 IDE의 자동완성 기능만 활용하고 있었던 것 같다.(물론 any 범벅에 "일단 써" 그 정도로 막 사용하지는 않았다 나름 열심히 써보려고 했음) 그래서 Type Challenges를 통해서 TypeScript의 다양한 타입 유틸리티를 익히려고 한다.라이브러리 소스 코드를 이해함에 있어서..
오랜만에 블로그를 쓰려니 기분이 이상하다...!원래는 못해도 한 달에 한 개는 쓰려고 하는데, 최근 들어 취업하게 되면서 정신이 좀 없었다. 그래도 취뽀한 기념으로~! 나의 취준기를 공유해볼까 한다. 어떻게 준비했지?"시장이 안좋다", "신입 역량이 점점 높아진다" 프론트엔드 개발자로의 취업을 준비하고 있다면 한 번은 들어봤을 것이다.나 역시 정말 많이 들었고, 들을 때마다 그러면 내가 뭘 할 수 있지? 라는 무력감만 들었었다. 남는게 시간이다보니, 이런저런 생각도 정말 많이 했었는데 내가 내린 결론은 "내가 할 수 있는 일을 하자" 였다.그런 말을 듣는다고 내가 할 수 있는게 없는 것도 사실이지만, 그런 말을 듣는다고 내가 뭘 못하는 것도 아니다.그래서 '그런 말들에 흔들리지 말자'고 생각하면서 하던 ..
요즘에 코딩 테스트를 풀면서 최적의 알고리즘이 무엇일지 공부하고 있다.이번 문제를 풀면서 비교적 간단한 문제이지만 이 알고리즘 기법을 사용하면 조금 더 쉽게 문제를 풀 수 있어 공부하려고 가져와 봤다. 슬라이딩 윈도우란?Sliding window는 배열이나 리스트 같은 연속된 데이터에서 특정 구간의 값을 효율적으로 계산하거나 탐색할 때 사용하는 알고리즘 기법이다.여기서 특정 구간을 윈도우라고 지칭한다. 코딩 테스트 중에서 특정 구간의 합, 연속된 숫자의 조합 같은 키워드가 있을 때는 이 알고리즘을 생각하며 문제를 접근하는 것이 좋을 것 같다. 이 알고리즘 기법을 사용하면 전체를 매번 계산하지 않고, 이전 결과를 사용해서 반복적으로 계산을 갱신해나갈 수 있다.function slidingWindowSum(..
우리가 흔히 사용하는 공통 컴포넌트(Input, Dropdown 등)를 사용할 수 있도록 제공하는 shadcn에 대해서 알게되어서 소개해보려고 한다.github를 봤을 때, 예전에 구현햇었던 합성 컴포넌트 방식과 약간 유사하다고 생각해서 무엇인지에 대해서 알아보았다. shadcn이 무엇인가?https://ui.shadcn.com shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com컴포넌트 라이브러리가 아니고, 복사&붙여넣을 수 있는 재사용 가능한 컴포넌트의 모음이라고 스스로 정의하고 있다. 이때 컴포넌트 라이브러리가..
문제를 풀 때마다 그 문제에 적합한 알고리즘이 무엇일지 찾으면서 공부하고 있는데, 알고리즘은 참 다양한 것 같다.두 개의 예제를 통해서 이 알고리즘을 어떻게 적용하는지 알아보려고 한다. 두 포인터(Two Pointers)란?배열이나 리스트에서 두 개의 포인터(인덱스)를 사용하여 효율적으로 문제를 해결하는 알고리즘이다.주로 정렬된 배열이나 리스트에서 특정 조건을 만족하는 값을 찾거나, 병합, 탐색할 때 사용된다. 두 개의 포인터를 사용배열이나 리스트의 특정 위치를 가리키는 두 개의 포인터를 사용해 문제를 해결주로 시작점과 끝점, 또는 두 배열의 각각 첫 번째 요소에서 시작 효율성배열 전체를 한 번만 순회하거나, 필요한 만큼만 순회하기 때문에 시간 복잡도가 O(N) 또는 O(N + M)으로 매우 효율적 주..
문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다.-1+1+1+1+1 = 3+1-1+1+1+1 = 3+1+1-1+1+1 = 3+1+1+1-1+1 = 3+1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한 사항주어지는 숫자의 개수는 2개 이상 20개 이하입니다.각 숫자는 1 이상 50 이하인 자연수입니다.타겟 넘버는 1 이상 1000 이하인 ..
재사용을 염두에 둔 컴포넌트를 구현하다보면, 하나의 컴포넌트에 style variant를 정의해야하는 경우가 생긴다.prop으로 어떤 스타일이 적용될지 전달받는 것인데, 전달해주지 않아도 기본값으로 일정 이상의 스타일이 적용되어 있어야 한다. 이전에는 컴포넌트 파일에 size, backgroundColor, textSize 등을 각 각 지정해두고 props으로 넘겨받을 수 있게 구성했었다. 그리고 사용하는 곳에서 스타일을 추가했을 때 그 스타일도 적용되어야 했다. 어느 스타일까지가 공통적으로 적용되고 어디서부터 variant로 나뉘는 것인지 한 눈에 보기도 어렵고, 스타일 속성이 여러 개의 prop으로 나눠져서 받아야해서 사용하는 사람이 한 눈에 이해하기 어려웠다. 이번에는 style variant를 한..
