인프콘 2024 초대권을 받았다! 올해는 너무 감사하게도 인프런 유저 인터뷰 이벤트에 당첨되어 인프콘 초대권을 받았다.그냥 참여하는 것보다 훨씬 더 값진 느낌..! 유저 인터뷰도 진심을 꾹꾹 눌러썼었는데 내 마음이 통한 걸까?작년에 이어 올해도 이벤트로 참석한다는 사실이 얼떨떨하면서도 감사할 따름이다.🙇♀️ 작년보다 더 좋았던 인프콘 2024 컨퍼런스를 개최한다는 것 자체도 대단하지만, 행사 운영이 작년보다 훨씬 깔끔하고 많이 발전했다고 느꼈다. 올해 좋았던 점을 몇 가지 말해보자면, 첫 번째는 동아리 부스가 생긴 것! 취업/이직러가 아닌 분들도 방문할 수 있고, 나처럼 IT 동아리에 관심이 많은 분들도 많이 방문했을 것 같다. 이름만 들어도 아는 디프만 같은 유명한 부스도 있었고, 개발자 커뮤니티 ..
1일: 모닥불 | EP.3 프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까?원문 보기사이드 프로젝트를 진행하면서 테스트 코드를 적용해보고 있다. 테스트 코드의 필요성보다는 많은 기업의 JD에 적합한 사람이 되고 싶어 시작했다. 모닥불 영상을 보고 느낀 테스트 코드의 장점 중 가장 와닿은 건 '개발 사이클 단축'이라고 생각한다.백오피스를 개발할 때 하나의 기능을 확인하려면 일련의 과정을 꼭 거쳐야 하거나, 특정 요소에 의해 분기 처리가 돼야 하는 경우가 많은데 이런 곳에 테스트 코드를 작성하면 필요성을 크게 느꼈을 텐데! 공부한답시고 컴포넌트마다 상세하게 작성하려다 보니 에너지는 뺏기고, 좋은 건 알겠는데 꼭 써야 하나.. 이렇게 생각했던 것 같다. 앞으로는 너무 유닛테스트에 집착하지 말고 필요에 따라 ..
원티드 하이파이브 2024 원티드에서 개최한 하이파이브, Makers Day에 다녀왔다.나는 당시에 원티드 프리온보딩 챌린지에 참여하고 있었는데, 참여자를 대상으로 하이파이브 프렌즈 모집을 해주셨다.그리고 너무 감사하게도 프렌즈에 당첨되어, 해당 컨퍼런스를 도우미 역할로 함께 할 수 있었다🕺 참여한 세션Pioneer Technology기술을 통해 남보다 앞선 미래를 준비하는 사람들의 이야기 이번 후기도 단순한 내용 정리가 아닌, 들으면서 인상 깊었던 점과 내가 느꼈던 감정과 생각 위주로 작성했다.오후 때는 프렌즈 활동을 하느랴, 내 생각을 실시간으로 정리할 수 없어서 내용이 다소 부족하다.. 2024 실리콘밸리 테크 트렌드 톱7(발표자: 더밀크(TheMiilk) / 대표, 손재권 님) "AI = 기술..
2일: Web: React Hooks의 등장 배경과 의의원문 보기클래스 기반으로 작업을 하던 나에겐, 함수 컴포넌트는 큰 변화로 다가왔다.함수 컴포넌트에서 클래스의 생명 주기를 어떻게 구현할지가 제일 궁금했었고, 가장 먼저 useEffect를 찾아봤었다.그리고 왜 클래스 컴포넌트가 버려졌을까에 대한 의문이 많았는데, 이 글을 통해 납득할만한 이유를 알게 되었다. (상태에 따라 그 결과 값이 의도치 않게 변한다는 문제) 3일: [React Anatomy] useState 의 동작 원리를 직접 구현하며 알아보자원문 보기useState가 closure의 원래로 동작한다는 것은 알고 있었지만, 구현 과정을 코드로 확인해 보니 쉬운 듯 어려웠다! 클로저까지는 괜찮았지만 갑자기 등장한 모듈 패턴부터 머리가 복잡해져..
개요프로젝트를 진행하며 커스텀 체크박스 컴포넌트를 제작했습니다.이 컴포넌트는 외부에서 useState를 사용하여 상태를 관리하고, 그 값을 value로 바인딩하는 방식으로 설계되었습니다.그러나 Storybook에서 테스트할 때는 value 값을 외부에서 변경해 줄 수 없었기 때문에, 클릭 이벤트에 의해 UI가 변경되지 않는 문제가 발생했습니다. Storybook에서 체크박스의 상태 변화를 시각적으로 확인할 수 있기를 희망했고, useState를 Storybook 내에서 사용하는 방법을 찾아보았습니다. 그리고 해결 방법을 이 글을 통해 서술하겠습니다. 프로젝트 환경Next 14.1.4 Storybook 8.0.6 checkbox.tsx먼저, 내가 작성한 Checkbox 컴포넌트의 코드는 아래와 같습니다.상..
판교 입성 인프런에서 퇴근길 밋업을 오픈한다길래 바로 신청했다.구구절절 정성을 쏟아서 그랬을까 너무 감사하게도 당첨되었다!판교 처음이야.. 인프랩 그 자체로도 감동..🕺🕺 실리콘밸리에서 인정받는 개발자의 특징 10가지이번 밋업 내용은 한기용 님의 “실리콘밸리에서 인정받는 개발자의 특징 10가지”였다. 가장 기억에 남았던 몇 가지를 적어보자면,나에게 맞는, 내가 좋아하는 환경 고민하기결과 지향적인 사람이 되고, 그 결과를 위해 현재에 최선을 다하자좋은 평판(내가 성취하는 모습 x긍정적인 태도) & 영향력 가지기질문과 의사소통을 통해 문제를 정의하기 = 일을 시작하기 전에 꼭 필요한 태도위 내용 말고도 정말 많은 얘기를 해주셨으며, 이직과 성장을 고민하며 항상 불안감을 가지고 있던 나에게 큰 힘과 방향성..
개요프로젝트에서 Next.js의 next/font/local을 사용하여 Pretendard 폰트를 적용하고 있습니다.이 글에서는 Storybook에서도 동일한 폰트를 적용하는 방법을 정리했습니다. 프로젝트 환경Next 14.1.4 Storybook 8.0.6 Next.js에서 Pretendard 폰트 설정Next.js에서는 next/font/local을 사용하여 폰트를 불러오고, 최상위 layout.tsx에서 className을 부여하여 전역적으로 스타일을 적용하고 있습니다. 아래는 Pretendard 폰트를 설정하는 코드 예시입니다.// app/font.tsimport localFont from 'next/font/local';export const Pretendard = localFont({ s..
개요어느 날, 파일 업로드에 오류가 발생했다.프론트에서 이미지 업로드에 성공했으나, 업로드한 경로에 이미지가 없다고 404 에러가 발생했다.현재 프로젝트에서는 이미지는 CDN에 업로드하고, 파일 경로를 백엔드에 문자열로 저장한다.이미지 업로드, 데이터 저장 모두 성공적으로 요청되었기에 원인을 파악하려 하나씩 살펴보았다.[문제가 발생한 환경]Nest 9.1.4Multer 1.4.4-lts.1busboy 1.6.0 원인 확인Middleware로 NestJS를 사용하고 있었는데, 파일명에 한글이 포함된 경우만 NestJS로 넘어온 파일명이 이상하게 변환된 걸 확인했다.CDN에 파일을 요청할 때, 요청한 파일명과 백엔드에 저장한 파일명이 달라 404가 내려온 것으로 판단하였다. 해결을 위한 과정NestJS에서 ..
클론 코딩을 시작한 이유NextJS가 SSR이 가능한 React 기반의 프레임워크라는 소식을 듣고, 궁금증과 배워보고 싶은 욕구가 동시에 들었다.React 문법을 익히는 것은 물론이고 SSR도 경험해보고 싶었던 차에, 클론 코딩은 이러한 두 마리 토끼를 한 번에 잡을 수 있는 좋은 방법이라고 생각했다. 기술을 빠르게 습득하고자 했기 때문에 제대로 된 서비스를 직접 제작하고 싶었지만, 사이드 프로젝트를 진행할 시간적 여유가 없었다.그래서 부딪혀가며 빠르게 배우고자 클론 코딩을 선택하게 되었다. 여기어때를 선택한 이유웹으로 서비스하는 제품을 만들고 싶었고, 프론트/백 엔드 모두 기본적인 기능과 복잡한 로직을 함께 다루고 싶은 니즈가 있어 커머스 분야가 적절하다고 판단했다. 여기어때는 UI와 UX에 대해 많은..
청년 정책 박람회에서 현직자와 커피챗할 기회를 제공해준다고 하길래 바로 신청했고, 운좋게 당첨되었다!커피챗이라길래 1:1인 줄 알았지만~ 실제로는 20명 정도가 함께 듣는 발표와 질의응답 형식의 시간이었다.시간이 애매해서 회사에 출근한 뒤, 시간차를 사용해서 다녀왔다. 커피챗 ☕️커피챗을 담당해주신 멘토분은 송요창(@totuworld)님이었다.우아한형제들에 계신 시니어 프론트엔드 개발자셨다. 같은 직군이라서 더 반가웠다. 사실 커피챗 당시에는 성함을 몰라서 이 글을 작성하면서 찾아보았는데, 인프런, 인프콘, 우아콘 등등 여기저기서 봤던 이름이었다..!여러 대외 활동을 하셔서 였을까, 아이스 브레이킹부터 발표까지 정말 매끄러웠다. 멋있었음.. 발표 내용은 멘토분의 연대기 겸 자기 소개와 이력서/ 취업 위주..
