all category

talk

링크드인 html, css, js, react 기술 평가 후기

퀴즈는 못참지 링크드인에서 제공하는 재밌는 콘텐츠가 있어서 해봤습니다. 링크드인 기술평가는 총 15문제를 각 문제당 1분 30초의 제한시간동안 풀게 됩니다. 그리고 푼 문제의 정답률에 따라 상위 30%에게만 통과아이콘을 준다고 하는데요.. (30% 턱걸이했다가 시간 지나서 떨어지면 어떻게 되는거지..?) javascript는 헷갈리기 쉬운 객체 참조, this 바인딩과 같은 문제들이 출제 되는데 확실히 기초지식이 없으면 구글링이나 ai의 도움을 받더라도 1분 30초 안에 옳은 선지를 고르기가 쉽지 않아보였습니다. 의외로 어려운게 html, css 였는데 자주 쓰게되는 태그나 셀렉터에 대한 문제는 10초만에 풀고도 넘어갈 수 있지만 잘 안쓰는 태그들이나 이런 태그가 있다고? 싶은 태그들도 많더라구요 그런면..

frontend

npm 라이브러리를 만들고 publish 하기

라이브러리 만들어서 배포하면 편하지않을까요? 그래서 한번 만들어봅니다. 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..

best

husky와 commitlint로 jira 이슈번호 자동화 시키기

😚 이거 왜 필요한가요? 최근 팀 차원에서 jira를 도입하게 되었는데 기왕 사용하는 거 조금 더 편하고 잘 사용해보고자 개발 환경을 구성해보았습니다. 지라의 이슈는 이런 형태로 구성되어있는데요 이렇게 이슈를 생성하게 되면 자동으로 해당 이슈에 대하여 이슈번호가 할당됩니다. 이런 형태입니다. 여기에서 이슈번호는 WPA-91이 되며 이슈번호의 알파벳 프로젝트 차원에서 관리할 수 있습니다. 이렇게 만들어진 이슈는 이슈번호를 통해서 브랜치 , 커밋과 연동이 가능합니다. 하지만 그렇게 브랜치, 커밋을 연동하기 위해서는 깃허브와 지라를 먼저 통합하는 과정이 필요합니다. 깃허브와 지라의 통합은 Github for Jira 라는 앱을 통하여 할 수 있습니다. chrome에서는 무한로딩 -> 에러가 발생하는 문제가 있..

typescript

ts-pattern을 사용하여 선언적으로 분기 관리하기

ts-pattern은? 프로그래밍에서는 패턴 매칭이라는 개념이 존재합니다. 데이터가 특정한 패턴(값, 자료구조, 타입, 함수)에 일치하는지 따지는 것을 통하여 대상을 특정하는 기술을 패턴 매칭이라고 지칭하는데요 ts-pattern은 타입스크립트 생태계에서 이러한 패턴 매칭을 구현한 라이브러리입니다. 프로그래밍 세계에서 분기는 필연적으로 필요한 존재입니다. 우리는 분기가 존재하지 않는 프로그램을 상상할 수 있을까요? 그런데 우리는 복잡한 요구사항에 의해 매우 복잡한 분기를 작성하게 되곤 합니다. 예를 들어 이런 코드를 상상해봅시다. const complexFunction = ( first: string | number | null | undefined | { text: string }, second: { ..

testcode

cypress와 jest 를 함께 사용하려하면 conflict이 날 수 있다.

🙃 대체왜요??이거.. 좀 케케묵은 이슈이기도 하고.. 스택오버플로우 보면 4년전에도 이런 일을 겪은 사람이 있고.. 공식문서에서도 안내사항을 만들어둘만큼 유명한 이슈인 것 같은데요... 처음 시도하는 사람은 약간 신고식처럼 맞고가야하는 것 같네요 저는 마침 처음 시도해본 덕에 호되게 맞고왔습니다. 동작 자체는 문제가 없기 때문에 타입스크립트 사용자 한정으로 문제가 됩니다만.. 요새 타입스크립트 안쓰는 사람이 어딨어요 하하😙 왜 문제인가요?자바스크립트 생태계의 테스트 프레임워크들이 여러개 존재한다는 것때문에 발생한다고 할 수 있습니다. jest, vitest, mocha 등등등... 테스트 프레임워크는 참 많은 종류가 나와있고 또 얘네들은 사용자 편의를 위해 하나 익혀두면 다른것도 뭐 그냥저냥 쓸 수 있..

간헐적 회고

11월 중순의 간헐적 회고

👱‍♂️간헐적 회고 시간이 너무 빠른 것 같습니다. 벌써 입사한지 두달이 지났는데 회사에 들어오길 잘했다는 생각이 조금 들곤합니다. 항상 best pratice에 집착하면서 더 좋은 방법.. 더 좋은 방법..을 고민하는 것이 제 장점이자 단점이라고 생각하는데 그러면서도 마감기한은 맞춰야하는 상황이 있다보니 코드퀄리티와 속도를 적절히 타협하는 연습이 된 것 같습니다. 회사일과 개인적인 목표 두가지로 나누어서 정리하고 회고해보는 시간을 가져보고자합니다. 회사 1. 회사일은 생각보다 반복되는 작업이 많다. -> 기술적으로 난이도가 있는 일은 아닌데 귀찮은, 일일이 하면 자동화할 수 있는 여지가 많은 일들이 꽤 있었습니다. 이것들이 자동화되면 참 좋을 것 같다는 생각이 들기도하면서 내 몸은 하나다보니 적절히 리..

react

리액트 쿼리 v5 에서 바뀐 점들 체크해봐요

🦯 너무 많이 바뀐거 아냐..? 좀.. 많이 바뀌었더라구요 버전 올리기 전에 바뀐점들 간단하게 문서읽으면서 정리해봤습니다. 제 기준에서 임팩트 있는 변화들만 적은거지 실제로는 더 많이 바뀌었습니다. 관심이 있으신 분은 해당 문서를 참고해주세요 https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5 Migrating to TanStack Query v5 | TanStack Query Docs useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to m..

frontend

next.js , tailwindcss, path alias storybook 세팅하기

할때마다 세팅방법 찾아보는게 지긋지긋하다 이런 세팅을 할때마다 꼭 문제가 발생합니다. 해결방법도 보통 전에 했던 방법과 비슷하게 하면 해결이 되곤하는데요 문제는 이게 여러가지 파일을 만져줘야하는 경우도 많고 하다보니 뭐 하나 빠뜨려서 잘 안되고 스트레스받고 그런 경우가 많다는 것입니다. 환경세팅 포스트는 유통기한이 짧긴하지만.. 없는것보단 나으니.. 이번 글에서는 tailwindcss를 storybook과 통합하는 방법 nextjs에서 storybook을 사용하는 방법 그리고 path alias를 사용하는 모듈도 적절히 resolve 하는 방법을 다룹니다. nextjs에서 storybook 깔기 npx storybook@latest init 간단합니다. 최신버전으로 깔아주시면 되겠습니다. tailwind..

냠냠맨
'분류 전체보기' 카테고리의 글 목록 (6 Page)