🐁 퍼널 써보니까 좋은데..? 라이브러리로 한번 만들어보자 https://www.youtube.com/watch?v=NwLWX2RNVcw 위 영상에서 본 퍼널의 접근방식이 마음에 들어서 회사 서비스에도 간단하게 구현하여 적용을 해봤습니다. 적용을 해두고보니 DX가 매우 좋았어서 이것을 다른 프로젝트에서도 사용하고 싶어졌는데요. 한가지 사소한(큰) 문제가 있다면 구현이 next.js의 next/router 라이브러리의 useRouter훅에 의존하고있다는 것이었습니다. 즉 next.js 위가 아니면 돌아갈 수 없는 프로젝트라는 것이 가장 큰 문제였고 토스의 toss/slash 라이브러리의 구현에서도 next/router 라이브러리에 의존하고있는것을 확인할 수 있었습니다. 따라서 제 목표를 크게 next.js..
둘 다 상당히 까다로움 {" dsafsafa \n hdsfds"} 두개 모두 적용된 css입니다. 이렇게 가로세로가 일치하면서 개행문자 \n을 인식하여 개행을 시켜주고있는것을 확인할 수 있죠? 그냥 정사각형을 만드는 것은 쉽지만 반응형 정사각형을 만드는것은 상당히 까다롭습니다. 왜냐하면 현재 htmlelement의 가로길이가 유동적으로 변화하고있는 상황에서 가로길이를 명확히 캐치해내는것이 까다롭기 때문인데요 vw와 같은 단위를 사용하면 가능하긴하지만 vw를 쓰게되면 뷰포트 단위로 생각을 해야만하는 강제성이 생겨 유지보수하기가 매우 까다로워집니다. 물론 html element의 offSetWidth 등 현재 크기를 알 수 있는 돔 어트리뷰트에 접근하는 방법도 있습니다. 그러나 이방법의 문제점은 1. 무조건..
퀴즈는 못참지 링크드인에서 제공하는 재밌는 콘텐츠가 있어서 해봤습니다. 링크드인 기술평가는 총 15문제를 각 문제당 1분 30초의 제한시간동안 풀게 됩니다. 그리고 푼 문제의 정답률에 따라 상위 30%에게만 통과아이콘을 준다고 하는데요.. (30% 턱걸이했다가 시간 지나서 떨어지면 어떻게 되는거지..?) javascript는 헷갈리기 쉬운 객체 참조, this 바인딩과 같은 문제들이 출제 되는데 확실히 기초지식이 없으면 구글링이나 ai의 도움을 받더라도 1분 30초 안에 옳은 선지를 고르기가 쉽지 않아보였습니다. 의외로 어려운게 html, css 였는데 자주 쓰게되는 태그나 셀렉터에 대한 문제는 10초만에 풀고도 넘어갈 수 있지만 잘 안쓰는 태그들이나 이런 태그가 있다고? 싶은 태그들도 많더라구요 그런면..
라이브러리 만들어서 배포하면 편하지않을까요? 그래서 한번 만들어봅니다. https://junghyeonsu.com/posts/deploy-simple-util-npm-library/ 간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그 NPM 배포를 처음 해보는 사람들을 위해서 차근차근 가이드를 작성해 봤습니다. junghyeonsu.com 이 분 블로그 참고하면서 작성했는데 너무 잘 작성해주셔서 뭐 더 추가할 게 없을 것 같고요 다만 저는 yarn 대신 npm을 사용해서 라이브러리를 만들었기 때문에 이부분에 약간의 차이가 존재합니다. https://github.com/XionWCFM/xion-calculate GitHub - Xion..
😚 이거 왜 필요한가요? 최근 팀 차원에서 jira를 도입하게 되었는데 기왕 사용하는 거 조금 더 편하고 잘 사용해보고자 개발 환경을 구성해보았습니다. 지라의 이슈는 이런 형태로 구성되어있는데요 이렇게 이슈를 생성하게 되면 자동으로 해당 이슈에 대하여 이슈번호가 할당됩니다. 이런 형태입니다. 여기에서 이슈번호는 WPA-91이 되며 이슈번호의 알파벳 프로젝트 차원에서 관리할 수 있습니다. 이렇게 만들어진 이슈는 이슈번호를 통해서 브랜치 , 커밋과 연동이 가능합니다. 하지만 그렇게 브랜치, 커밋을 연동하기 위해서는 깃허브와 지라를 먼저 통합하는 과정이 필요합니다. 깃허브와 지라의 통합은 Github for Jira 라는 앱을 통하여 할 수 있습니다. chrome에서는 무한로딩 -> 에러가 발생하는 문제가 있..
ts-pattern은? 프로그래밍에서는 패턴 매칭이라는 개념이 존재합니다. 데이터가 특정한 패턴(값, 자료구조, 타입, 함수)에 일치하는지 따지는 것을 통하여 대상을 특정하는 기술을 패턴 매칭이라고 지칭하는데요 ts-pattern은 타입스크립트 생태계에서 이러한 패턴 매칭을 구현한 라이브러리입니다. 프로그래밍 세계에서 분기는 필연적으로 필요한 존재입니다. 우리는 분기가 존재하지 않는 프로그램을 상상할 수 있을까요? 그런데 우리는 복잡한 요구사항에 의해 매우 복잡한 분기를 작성하게 되곤 합니다. 예를 들어 이런 코드를 상상해봅시다. const complexFunction = ( first: string | number | null | undefined | { text: string }, second: { ..
🙃 대체왜요??이거.. 좀 케케묵은 이슈이기도 하고.. 스택오버플로우 보면 4년전에도 이런 일을 겪은 사람이 있고.. 공식문서에서도 안내사항을 만들어둘만큼 유명한 이슈인 것 같은데요... 처음 시도하는 사람은 약간 신고식처럼 맞고가야하는 것 같네요 저는 마침 처음 시도해본 덕에 호되게 맞고왔습니다. 동작 자체는 문제가 없기 때문에 타입스크립트 사용자 한정으로 문제가 됩니다만.. 요새 타입스크립트 안쓰는 사람이 어딨어요 하하😙 왜 문제인가요?자바스크립트 생태계의 테스트 프레임워크들이 여러개 존재한다는 것때문에 발생한다고 할 수 있습니다. jest, vitest, mocha 등등등... 테스트 프레임워크는 참 많은 종류가 나와있고 또 얘네들은 사용자 편의를 위해 하나 익혀두면 다른것도 뭐 그냥저냥 쓸 수 있..
👱♂️간헐적 회고 시간이 너무 빠른 것 같습니다. 벌써 입사한지 두달이 지났는데 회사에 들어오길 잘했다는 생각이 조금 들곤합니다. 항상 best pratice에 집착하면서 더 좋은 방법.. 더 좋은 방법..을 고민하는 것이 제 장점이자 단점이라고 생각하는데 그러면서도 마감기한은 맞춰야하는 상황이 있다보니 코드퀄리티와 속도를 적절히 타협하는 연습이 된 것 같습니다. 회사일과 개인적인 목표 두가지로 나누어서 정리하고 회고해보는 시간을 가져보고자합니다. 회사 1. 회사일은 생각보다 반복되는 작업이 많다. -> 기술적으로 난이도가 있는 일은 아닌데 귀찮은, 일일이 하면 자동화할 수 있는 여지가 많은 일들이 꽤 있었습니다. 이것들이 자동화되면 참 좋을 것 같다는 생각이 들기도하면서 내 몸은 하나다보니 적절히 리..
