성공팔이 인스타 릴스를 보다보면 흔히 그런 계정들을 만나게 되곤 한다. 개인적으로 "성공팔이"라고 부르는 류의 계정인데 대체로 어린나이에 경제적 자유를 이루었다고 주장하거나 그게 아니라면 "어린나이지만 열심히해서 경제적 자유를 이루겠다. 그래서 나는 이러이러한 일을 하고있다." 와 같은 류의 영상을 올리는 사람들이다. 정말 열심히 사는 사람이라면 "나 열심히 살아요 멋지죠?" 라는 메시지밖에 담기지 않은 영상을 찍는 시간도 없을 것이며 그런 영상을 찍을 시간 자체를 아까워 할 것이라고 생각하지만 (물론 나의 개인적인 생각이다.) 말이 가지고 있는 힘이 존재한다는 생각도 같이 들었다. 그래서 나는 그들의 "나 열심히 살아요 멋지죠?"에는 냉소적이지만 "나는 ~~를 할거야" 와 같이 목표를 되뇌이고 이야기하..
😙 HighOrderComponent란? 고차 컴포넌트란 컴포넌트 로직을 재사용하기 위한 기술입니다. 리액트 문서의 정의에 따르면 고차 컴포넌트는 "컴포넌트를 가져와 새 컴포넌트를 반환하는 함수" 라고 해요 const EnhancedComponent = higherOrderComponent(WrappedComponent); 예제를 보면 다음과 같은데 구조만 보면 꽤나 익숙합니다. React에서 제공하는 forwardRef , memo와 같은 함수들의 사용형태와 같은데 redux의 connect 함수도 생각이 나네요 😇 횡단 관심사(cross cutting concerns) 이러한 고차컴포넌트 패턴은 리액트에서 횡단관심사를 통하여 로직을 바라볼 수 있게 도와줍니다. 이전에는 mixin을 사용하여 구현하였으..
커리어리를 보다보니 벌써 2023년에 대한 회고 글들이 몇몇 올라와있더라구요 남들 다하니까 하는 심리도 한스푼 있지만 연말이 많이 바쁠 예정이라 미리 적는게 좋을 것 같습니다. 최근 회사 동료분에게 블로그를 오픈해드렸는데 회고글을 제일 먼저 읽어보시더라구요 사실 저도 다른 사람 블로그 들어가면 회고 먼저 읽어보고 기술글을 읽습니다. 사람 심리가 다 똑같은 것 같네요 개발을 하기전에는 회고라는 개념 자체가 없었는데 또 여기서는 회고라는 말을 참 많이 쓰는 것 같습니다. 회사에서도 한 스프린트를 마무리하면 꼭 회고를 하기도하고요 그냥 일기 쓰는 마음으로 , 혹은 그냥 시켜서 하기는 했지만 어떤 동기로든 기록을 남겨두는 건 좋은 것 같습니다. 2023년의 나는.. 제게 2023년은 개발을 제대로 시작한 첫해라..
아무 생각없이.. 그냥 아무생각없이 빌드 결과물이 모이는 dist 폴더와 실제 작업이 들어가는 src 폴더를 함께 배포하고 있었는데 문득 그런 의심이 들었습니다. 어차피 사용자는 빌드된 결과물만 사용할텐데 나는 왜 자연스럽게 src 폴더도 같이 배포하고있지? 라는 의문이 들었고 여러가지 평소에 써오던 라이브러리를 참고하여 본 결과 (zod, zustand, jotai , ) 대부분의 라이브러리들이 빌드 결과물만을 내보내고 있다는 사실을 깨닫게되었습니다. src 폴더를 내보내는 경우에는 사용자가 내부구현을 살펴볼 수 있게하기 위함이나 / 사용자가 라이브러리를 확장할 수 있게끔 하고 싶을 때 유용하다는 내용들을 찾을 수 있었는데 사실 라이브러리를 사용하는 사람의 관점이나 만드는 사람의 관점이나 사용자가 라이..
🐁 퍼널 써보니까 좋은데..? 라이브러리로 한번 만들어보자 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: { ..
