불러오는 중…
프론트엔드 개발자 손기연이 배운 것과 배울 것을 기록합니다.
Array = Object를 변환해야 하는 일은 너무나 빈번하다. 근데 그 와중에 순서를 보장해야 하는 일은 그렇게 빈번하진 않다고 생각한다. (객체로 변환 후 Object.keys 같은 걸 사용하여 순서대로 뽑아야 하는 경우) 이번엔 필자가 겪은 문제와 순서를 보장해야 하는 경우에 관…
빌드 시간이 너무 길고 레거시 환경을 개선하고자 webpack을 vite로 마이그레이션하는 작업을 23년 10월쯤에 진행했었는데, 업무가 너무 바쁘다는 핑계로 지금에야 정리를해본다. 차이점 webpack은 빌드 시점에 모든 것을 번들링하지만, vite는 빌드 시점에는 번들링하지 않고 브…
우린 js를 쓸 때 함수를 잘게 쪼개서 재사용성을 높이곤 한다. 그리고 css의 전처리기인 scss에도 스타일을 재사용하고 코드 중복을 줄이기 위한 mixin이 존재하는데, js와는 다르게 mixin을 오용하면 다음과 같은 함정에 빠질 수 있다. 1. 중복된 css 생성 scss는 cs…
1일 1커밋을 시작했을 때는 듬성듬성한 잔디들이 얼마 전 github를 들어가 보니 꽉 찼기에 기간을 확인해보니 어느덧 1년이 지났다. 1일 1커밋을 하면서 느낀 점과 1년 동안 내가 무엇을 했는지 간략하게 적어보려 한다. 1년간 어떤 거로 커밋을 했는지? 작년 8월에 이직 준비 및 기…
100만 개 이상의 데이터를 가진 배열을 주기적으로 갱신할 때, 어떻게 해야 할까? 3주나 걸린 고민의 흔적을 남겨본다. 문제의 시작은 이렇다. 1. Vue를 기반으로 한 사내 라이브러리 EVUI 의 scatter chart를 활용하여 3초마다 갱신되는 데이터를 표현하는 화면을 만들었다…
예전에 patch package에 대한 글을 보았는데, "서드 파티 라이브러리를 영구적으로 커스텀할 수 있는 도구" 라길래 그때 들었던 생각은 보통 서드 파티 라이브러리에서 구현이 안 되는 기능은 기획 의도를 변경하거나 다른 라이브러리를 써야 하는 게 맞지 않나? 라는 생각이었다. 그런…
알고리즘을 풀면서 다른 사람들이 풀이를 보면 정규 표현식을 쓰는 경우가 있는데 나도 필요성을 느껴서 공부한 걸 정리하고자 한다. 아래의 코드는 regexr 에서 테스트해볼 수 있다. 아니면 콘솔창에 긁어서 쓰면 된다. [] 문자열의 집합 : 안에 있는 문자들은 모두 문자열의 집합이다.…
최근 vue3에서 watch를 사용하면서 겪은 시행착오를 적어본다. 결론부터 말하자면 watch의 세 번째 인자인 flush로 callback의 발생 타이밍을 조절할 수 있다. 아래는 내가 겪은 상황이다. 1. api로 데이터를 받아와서 pinia(빈 배열)에 넣었음. 2. watch로…
전 직장 개발자분하고 얘기를 나누던 중에 copilot 에 대한 찬사를 듣고 나도 3개월 전부터 실무에서 써보았다. 처음 2개월은 무료로 사용해보고, 꽤나 유용해서 1년치( 100달러 )를 끊었다. 아래 내가 느낀 2가지 장점과 문제점 그리고 내 종합적인 생각을 적어본다. 장점 1. 주…
작년만까지만 해도 react와는 다르게 vue는 상태관리를 위한 라이브러리가 "vuex" 단 한 가지 밖에 없었다. 그러나 vuex가 5.x를 앞둔 상태에서 vuex 공식 문서 에서 pinia가 vue의 새로운 공식 상태 관리 라이브러리로 변경되었다고 하고, Vue의 개발자, Evan…
나는 알고리즘을 많이 짜는 직군은 아니지만 그렇다고 아예 안쓰는 직군도 아니다. 그래서 빅오표기법에 대해 찾아봤고 Udemy강의 중 Colt Steele의 Javascript 알고리즘 & 자료구조 마스터클래스 를 듣고 프론트엔드 개발자로서 실무에 꽤 유용한 부분이 있어서 따로 정…
최근 공부 중인 SQL 기본 문법에 대해 정리하고자 한다. postgreSQL, MySQL 기준으로 작성하였다. DB는 udemy postgreSQL , udemy MySQL 에서 가져왔다. 데이터 유형 string, numeric, date and time 주요 3가지가 있다. CHA…
요즘은 실무에서 프론트엔드 프레임워크를 위주로 쓰니 html template engine을 안 쓰는 편이다. (react, vue에서도 쓰는 경우가 종종 있다.) html template engine은 서버 데이터를 정적 파일( html )에 그려서 클라이언트에 전달해주는 역할을 한다.…
한 달간 꼬박꼬박 1일 1커밋한 후기를 적는다. 한 달 동안 알고리즘 조금, nextjs 조금, react native 조금, vue를 공부하였다. 왜 이렇게 중구난방으로 했냐면... 1. 알고리즘 최근 프론트엔드로 이직준비를 하느라 코딩테스트를 위해서 공부를 조금 했다. 조금 하다가…
난 꾸준히 공부를 하는 편이라고 생각한다. 아니 생각했다... 2022년 8월 2일 기준 내 github 기여도이다. 꾸준하다고 할 수 있을까? 주말은 전멸이라고 할 수 있고 애초에 초록불보다 검정불이 많다. 구차하게 변명을 하자면 회사에서 시간 남을때마다 공부를 했던 커밋은 내 git…
작년에 이 회사에 입사하고서 스크립트 쓴거를 봤는데 죄다 jQuery 투성이였다. 심지어 리액트에도 jQuery 투성이였다. 요즘에도 jQuery에만 의존하는 회사가 있다는 거에 놀랐고, 나도 javascript에 대해서 잘 모르는 편이지만 여기는 나보다 더했다. 그래서 꾸준히 순수 j…
이번에 간단한 프로모션 페이지를 작업하는데 예상치 못한 버그가 있었다. IOS Safari에서만 발견된 문제였는데 css의 transform: rotate를 animation( transition도 마찬가지 )을 걸었을 때 position: fixed된 영역을 가린다는 것이다. 설명만으…
bootstrap 5 를 써본 사람은 알겠지만 내가 만든 UI Component 가 비슷하다는 것을 알 것이다. 왜냐하면... 내가 그걸 참고 해서 만들었으니까! 부트스트랩 라이브러리를 사용했다는 건 아니고 거기에 쓰인 Components들을 보고 참고하여 만들었다. 부트스트랩의 UI…
Javascript의 addEventListener가 기본으로 제공하는 100가지 정도의 이벤트리스너를 말고 이벤트를 직접 만들 수 있는 CustomEvent를 알아보자. 이전 글들에서 짤막하게 소개했었는데 나는 주로 UI Component를 만들 때 특정 시점에서 콜백 용도로 쓰고 있…
이전 글에 이어 이번 글에선 AnimationEvent에 대해 알아보자. TransitionEvent와 거의 비슷하나, 개인적으로 AnimationEvent를 선호한다. 실무에서 썼을 때 transitionEvent의 경우 동작 중에 이벤트 방지 기능을 안 걸어두고 다시 클릭하거나 취소…
스타일을 작성할 때 단조로움을 피하기 위해서 transition과 animation 효과를 많이 쓰게 된다. 그리고 그걸 활용할 수 있는 javascript 기본 API인 TransitionEvent와 AnimationEvent에 대해 알아보려한다. 실은 이 글을 쓸때는 비교적 자주 쓰…
난 2년 전에 포트폴리오를 만들 때 gatsbyJS를 썼다. gatsby 경험자니까 무난할 줄 알았다. 하지만 오산이었다. 포트폴리오를 만들 때는 기능이 단순했을 뿐이었다. 처음에 gatsby starter blog 를 받고 타입스크립트로 바꾸고 내 스타일에 맞게 바꾸는 것까지는 무난하…
블로그를 만들어야겠다고 생각한건 작년부터였는데... 4월부터 시간이 될 때마다 만들기 시작하여 드디어 어느정도 글을 쓸 준비가 되어 첫 글을 쓴다. 이 블로그는 gatsby starter blog 를 기반으로 만들어졌다. 조금 더 완성되어있는 테마를 쓸까 하다가... 라이브러리를 과하게…