-
사용자 만족도 향상을 최우선으로 생각하는
Front-end 개발자 안유림입니다. TypeScript, React, Next.js, Jotai, React-Query ➜ Github
-
글또 10기 프론트&모바일 반상회 MC 후기.diary2025년 2월 6일, 우아한 형제들 테크 살롱에서 글또 10기 프론트&모바일 반상회가 진행되었습니다. 글또- 2주에 한번씩 글쓰는 개발자 모임반상회- 글또 내 직군별 행사 저는 지난 4기수 동안의 글또 활동 중 반상회 행사는 8기 프론트, 딱 한 번 참여했던 경험이 있습니다.당시 8기는 23년, 8월로 예정되어 있던 반상회가 초강력 태풍(?)의 영향으로 미뤄졌고9월 1일에 개최되었는데요. 제가 9월 2일생인데 ,,, 하루 전날 열렸던 행사여서 날짜가 기억에 남는군요 😇 아무튼, 그때의 반상회 행사 경험이 좋았었고 이번 기수에는 글또 활동도 좀 열심히 해볼 겸준비위(행사 운영)에 참여해 보기로 했습니다. 이번 10기 프론트&모바일 반상회는 3시간 동안 진행되었고, 3개의 발표 세션 이후, 네트워킹 시간.. 더보기 -
슬랙봇으로 피크민 챌린지 랜덤 조 편성: 매주 반복되는 작업 자동화하기오랜만에 재밌는 개발을 했어요! 💐 피크민 블룸피크민 블룸이란 포켓몬고의 피크민버전이라고 생각하면 쉬운데걸으면서 피크민을 키우고(?) 꽃을 심고 버섯을 패는(!) 등의 활동을 기본으로 하게 됩니다. 또 친구와 엽서를 주고받을 수 있으며개개인별로 하루동안 걸은 경로와 걸음 수로 짧게 기록을 남겨 주는데 꽤 재밌습니다.! 그리고, 매주 챌린지를 할 수 있는데 5명씩 모여 100,000걸음을 걷고, 꽃을 30,000송이 심는 것이 있어요.이는 친구와 함께 진행할 수 있어서 글또 10기 슬랙의 피크민또 채널에서 매주 월요일 인원을 모집하고 함께 진행해오고 있었습니다. 💫 사건의 발단그런데 가만보니 이 챌린지를 모집하고 진행하는 일이굉장히 별 것 아닌 일이지만 꽤나 번거로워보였어요. 매주 월요일 아침.. 댓글.. 더보기 -
TanStack Query의 난제, 코드로 직접 뜯어보기: isPending과 isFetching은 어떻게 달라요?과거 TanStack Query v4를 사용하면서버튼의 disable 상태를 처리할 때 isLoading과 isFetching를 사용한 적이 있었다. +) 참고: v4의 isLoading이 v5에서 isPending이 되었다.v5의 isLoading은 v4의 isLoading과 다르다. 이 글에서는 v5의 name을 기준으로 설명하겠다. isPending과 isFetching의 역할은 거의 비슷했지만 캐시 사용 여부에 따라 동작이 조금 달랐다.당시 사용했던 상황에서는 해당 쿼리에서 캐시를 사용하지 않았었고 그렇다면 둘 중 어떤 것을 사용해도 차이가 없어 보였다.둘 중 하나만 사용해도 특이점이 없는 것을 간단한 테스트로 확인했고(isPending === true)일 때 버튼을 disable 시키도록 구현했.. 더보기 -
앞단콘 2024 ! 프론트엔드 개발자의 삽질기 공유하기발표를 하게 되었습니다.힐링페이퍼에서 재밌는 행사를 주최해 주셨더군요.처음에는 참가자 모두가 발표라는 말에 살짝 걱정이 앞섰지만가벼운 발표 어디서 해 보기 쉽지 않은데 .. 어쩌면 재밌을지도 ..? 라는 생각에 신청하게 되었습니다 :> 발표 주제 선정가장 먼저 발표 주제를 고민했습니다. 자료 만드는 것보다 주제 고민이 더 오래 걸린 듯.. 현재까지의 제 개발인생에서 가장 재밌는 일이 아닐까 생각하는'무한클릭' 해프닝 이야기를 제일 먼저 떠올랐습니다. 3분이라는 시간 제한이 있었기에 기술적으로 딥한 이야기는 어렵지 않을까 생각했어요. 이외에는 개인적으로 CSS로 엄청난 것을 구현하는 사람들이 멋지다고 생각하는데그런 것을 따라해보고, 직접 손대 본 후기 느낌으로 발표를 해볼까 생각도 해봤습니다. 그러다 현실.. 더보기 -
ECMAScript 문서에서 Array.from()에 대해 읽어보기요즘 JS로 알고리즘 문제를 푸는 것이 꽤 재미있는 상태다.2차원 배열은 기본이고 3차원 배열도 자주 쓰게 된다. 다차원 배열을 초기화하여 선언하는 과정에서 원소를 복사해서 넣어주게 되면배열 복사 시 기본 특성인 shallow copy (얕은 복사, 주소 참조)로 인해원본 배열을 변경하여도 새 배열이 같은 주소를 참조하여 두 배열의 값이 함께 변경되는 의도하지 않는 일이 발생한다. 따라서 초기화 시 shallow copy 되지 않도록for문 혹은 map()을 이용해서 원소를 하나하나 넣어줄 수 있다. 또는 Array.from() 메서드를 사용할 수 있는데 요즘 나는 이 방법을 주로 사용하고 있다.처음에는 단순 사용법만 외워 쓰다가 원리를 알고 써야겠다 싶어 공부하게 되었다. 1. ECMAScript 명세.. 더보기 -
Github Action으로 Fork Repo Sync 자동화하기 (+CI/CD) | 팀 레포 Vercel 무료 배포하기Github Action를 통한 작은 Continuous Delivery 구축하기프론트엔드 프로젝트의 배포를 도와주는 Vercel을 무료로 사용하기 위해서는 개인 Repository여야 한다.Organization Repo 등을 사용할 경우에는 유료 버전을 사용해야 한다. 사실상 Vercel을 사용하면 배포는 vercel에서 해주는 것이고 나는 CD환경을 직접 구축하지 않아도 된다.보통 CD의 D를 deployment/delivery 중 혼용하여 사용하는 것 같은데, 여기서는 delivery에 가까운 듯 하다. 하지만 우리의 팀 프로젝트에서 Vercel의 기능을 사실상 우회..!하여 프론트엔드를 무료로 배포하기 위해팀 레포에서 공동 작업을 하고 -> 팀원의 개인 레포로 fork한 다음 vercel과 연결.. 더보기 -
우아한 타입스크립트 with 리액트일상이가 추천해준 이 책을 빠르게 빠르게 읽으면서 공부한 짧은 후기를 남겨보려고 한다. 일단 책을 집필한 사람들이 우아한형제들의 웹 프론트개발그룹 현직자들이기 때문에그들이 어떤 코드를 사용하는지 간접적으로 볼 수 있고 (클래스 기반이다 ..!)중간중간 '우형 이야기' 라는 코너에서는 어떤 개념을 사용하는 데 있어 팀별로 각각 다른 의견도 읽을 수 있다. 흥미롭다. 책의 구성도 좋은 것 같다. 초반부에 웹, 자바스크립트와 타입스크립트의 탄생 배경 같은 역사가 가볍게, 이해하기 쉽게 서술되어있다. 타입 개념으로 들어오면 나 같은 경우에는 타입스크립트를 조금은 사용해 봤기 때문에 익숙한 부분도 있었지만고급 타입 개념은 쓰는 방법을 잘 몰라서 코드에 적용해본 적이 없었기에 생소한 부분 다시 한 번 정리도 하면서.. 더보기 -
타입 확장하기 (Union/Intersection Type), 좁히기 (Type Guard)타입 확장하기타입스크립트에서는 중복되는 타입 선언을 줄이기 위해 "타입 확장"을 한다.interface A { name: string; url: string;}interface B extends A { time: number;}type C = { name: string; url: string;};type D = { time: number;} & C; extends 외에도 |, & 기호를 이용해서 유니온 타입, 교차 타입을 사용할 수 있다. 유니온 타입 (Union Type) 유니온 타입은 유니온 타입에 포함된 모든 타입이 공통으로 갖고 있는 속성에만 접근할 수 있다.두 타입의 공통 속성은 orderId뿐이다.step.distance를 찾게 되면 에러가 발생한다. 하지만 책에서는 이 개념을 합집.. 더보기 -
타입스크립트 고급 타입 (Index Signatures, Indexed Access Types, Mapped Types, Template Literal Types)인덱스 시그니처 (Index Signatures)인터페이스 내부에 [Key: K]: T 꼴로 타입을 명시해주면해당 타입의 속성 키는 모두 K 타입이어야 하고 속성값은 모두 T 타입을 가져야 한다는 의미다.위처럼 속성값에 해당하지 않는 타입을 정의하면 에러가 발생한다. 인덱스드 엑세스 타입 (Indexed Access Types)다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용된다.인덱스에 사용되는 타입 또한 그 자체로 타입이기 때문에 유니온 타입, keyof, 타입 별칭 등의 표현을 사용할 수 있다. 또한 배열의 요소 타입을 조회하기 위해 사용하는 경우가 있다.PromotionList 데이터에서 타입을 추론하고 싶을 때T[0]는 해당 ElementOf의 에 들어온 어떤 unknown 배열의 원소.. 더보기 -
실제로 타입스크립트의 컴파일 과정은 어떻게 동작할까런타임과 컴파일타임고수준(high-level) 언어: 사람이 이해하기 쉬운 형식저수준(low-level) 언어: 컴퓨터가 이해하기 쉬운 형식개발자가 작성한 고수준 언어의 소스코드는,컴파일러에 의해 기계어 코드(바이트 코드)로 변환되어 실행이 가능한 프로그램이 된다.이 단계를 컴파일타임 이라고 부른다. 소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데,컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정이다.이 시간을 런타임 이라고 한다. 자바스크립트 런타임자바스크립트가 실행되는 환경은 대표적으로 크롬이나 사파리 등의 인터넷 브라우저와 Node.js 등이 있다.자바스크립트 런타임의 주요 구성 요소는 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 있다. 자바.. 더보기 -
Web Rendering Patterns 조금 자세하게 알아볼까최근 patterns.dev 읽으며 디자인 패턴을 공부하고 있다.디자인 패턴을 간단하게 정리하며 마무리했고 어제는 렌더링 패턴으로 넘어왔는데,항상 얕게만 알고 있던 이 렌더링 패턴을 파헤쳐 제대로 정리를 좀 해야겠다고 생각이 들었다.개인적으로 patterns.dev의 내용만으로는 조금 부족하다고 느껴서 추가적인 내용은 여러 곳에서 모아 정리한다. SSR, CSR, SSG를 설명하려면 JS의 역사부터 꺼내오지 않을 수 없겠지만 ~거두절미하고 최대한 각각의 개념 에만 접근해 보겠다. Server-Side Rendering프런트엔드 개발자라면 아주 익숙한 약어인 SPA(Single Page Application)이 있기 전에, MPA(Multi Page Application)이 있었다.MPA는 여러 개의 HT.. 더보기 -
JS의 list 함수 끝판왕 reduce와 친해지기 :)분명 일상이는 나에게 타입 가드에 대해 설명해주고 있었는데갑자기 Math.max 가 number[] 타입이어서 .. 자기가 설정한 타입의 list에 max를 쓰려니 타입이 안되구 어쩌구 저쩌구그러더니 잠깐 , , max를 왜 써? 하고는갑자기 분위기 리듀스! const myMax = Math.max(...scores) as AnswerNumber;max를 쓰면, 내 myMax number[] 가 아니라 AnswerNumber 타입이라는 것을 aliasing 해주어야 했다.scores.reduce((acc, cur) => (acc 그러지 말고 리듀스로 바꿔버리기 .. 오 ..? 그리고 시작된 리듀스와 친해지기 시간 🥲 자 다음 문제를 풀어보시오 ~1. 짝수 원소는 제거한다.2. 모든 원소값을 2배한다.[.. 더보기 -
무한 if 지옥을 벗어나자 (feat. Map)위 코드에서 num은 질문의 문항이고, type은 답변의 문항이다. 분명 문제마다 답을 하나씩 선택했을 때 scores에 카운팅을 하는 것은 동일하기 때문에, 코드의 형식은 매번 같으나알고리즘 문제도 아니고 어떤 수치적으로의 패턴이 없는 상황에서이 if 지옥은 아무리 봐도 아닌 것 같은데 .. 근데 어떻게 해야하지 ... 하다가짱고수 개발자에게 자문을 구해보았다. 🤩Map을 만들어서, 문항별 답변에 어떤 스코어의 값을 올려줄 지 기록한다. 값을 올려줄 때 해당 스코어의 값을 Map에서 찾아와서 올려주는 코드는더 이상 중복하지 않고 두 줄로 끝내버린다. (에러 처리는 덤 ..) Map 자체는 계속 길어지지만, (아마 이 Map도 더 스마트하게 할 수 있는 방법이 있겠지)핵심 코드는 간단해졌기에 누가 봐도.. 더보기 -
Junction Asia 2023 Review!On August 18-20, in Busan, South Korea, Junction Asia!I didn't go to Junction completely of my own volition. Hmm... will it on fun?That weekend many many opened party everywhere.. But I'm going Hackathon?!!Even as I say that, my mind is already arrived Busan. Done Vacation plans and packing. Day 1.A warm welcome kit. XDI liked the glow-in-the-dark bracelet.The snack bar was overflowing with snac.. 더보기
