강태풍의 개발블로그

운이 좋게도 모 금융그룹 채용연계형 인턴에 합격해서 저축은행 인턴을 시작한지 딱 4일차이고, 부서에 출근한지는 2일차입니다. 최근 반년간 바쁘게 지내왔던 것들을 쳐냈습니다. 9학점의 대학교 전공수업에 취업계를 내며, 5개월간 피땀 흘려가며 수강해온 야놀자X패스트캠퍼스는 조기종료를 했습니다. 기자단 활동도 물론 그만 뒀습니다. 그러는 와중에 총 29개 넘는 기업에서 서류, 면접, 코테를 보는 것도 이제 그만 뒀습니다. 취업 시작 전만에도 굉장한 오만함에 빠져있었습니다. 서울에서도 중상위권 대학에 (전자전기)컴퓨터공학부에, 학점 4.03이었고 야놀자 협력의 4, 5개월 가까운 직무 부트캠프, 800명 넘게 참여한 해커톤에서 우수상 등을 받았었습니다. 금방 취업할 것이라는 기대감과는 다르게 1차 서류 합격을 ..

🚀Fact 이번에 반려묘를 기르는 집사를 위한 채팅 커뮤니티 `Cat Talk`을 만들었습니다.10일 동안 4명의 Front-end 동료와 함께 하였으며 팀장역할을 맡았습니다. 이번 프로젝트는 10일로 짧기도 했으며, 다음 미니프로젝트(백엔드 3명, 프론트엔드 5명끼리의 협업 프로젝트)가 바로 예정 돼있었기에 기술적인 스택들을 다양하게 이용해보고자 했습니다. Socket 통신과 JWT 토큰을 이용한 회원가입, Next JS 14를 사용한 SSR/SSG Fetch 방식, Next에서의 전역 상태관리(recoil, URL을 통한 정보 전달, fetch, react-query), tailwind CSS/MUI 사용 등 새로운 기술들을 다양하게 받아들이며 소화할 수 있었습니다. 멘토님의 조언은 새롭게 배우는 기..

🚀 개요 Next 14 앱 라우팅 방식 + tailwind CSS 를 사용한 프로젝트에서 개발(로컬) 환경에서는 tailwind css가 문제 없이 잘 적용됐으나, Vercel 배포 환경에서는 tailwind css의 스타일이 부분적으로 적용되지 않았습니다. 처음엔 팀원과 단순 next 14의 문제로 치부해 다운그레이드 시 해결 될 줄 알았으나, 다운그레이드에도 해결되지 않아 디버깅을 통해 찾아냈습니다. 😵 문제 발생 Vercel 배포 환경에서 tailwind CSS가 부분적으로 적용 됐습니다. 'cursor-pointer ' 속성은 적용이 됐으나, `list-none` 속성은 적용이 되지 않았습니다. 😛 해결 방법 app 라우팅 방식을 사용하다 보니 루트 프로젝트에 app, Components 디렉토리..

🚀개요 23년 7월 10일에 과정을 시작하고 절반이 지났습니다. 과정을 참여하면서 강의들을 통해 수 많은 지식들이 쌓였고. 이 지식을 적절이 활용하여 프로젝트를 3개째 수행하였습니다. 각 프로젝트마다 회고를 작성했어야 했으나, 지금이나마 작성을 하고자 합니다. 프로젝트를 경험해온 것들을 정리하고, 배운 것들을 통해 앞으로의 방향성을 정리하는 글입니다. 📚경험해온 프로젝트들 1️⃣ 토스 클론코딩 : HTML/CSS 프로젝트 ✨객관적인 사실들 HTML/CSS 과제로 시작한 클론코딩입니다. 원래 과정 의도상 클론 코딩을 통하여 훌륭한 레퍼런스를 통해 HTML과 CSS 지식을 이용하고자 한 과제로 보입니다. 저는 기존에 웹사이트를 기존에 미리 만들어 봤어서, 도전욕구를 불러모아 1주일간의 기간동안 어렵고, 애니..

🎈개요 인프콘 2023 에서 발표한 "왜 내가 만든 서비스는 안쓰지?: 개발자가 알아두면 좋은 사이드 프로젝트 제작 팁 " 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다. 📚강의 내용 정리 개발 외적인 내용 위주 좋은 문제를 찾고 이해하고 해결하자 작가 : 작가의 생각으로 만들어짐 상품 : 시장의 니즈로 발생함 솔루션을 먼저 정의하고 고객을 끼워 맞추는 경우 ⇒ X 사용자를 위한 서비스가 아니라 내가 만들고 싶은 서비스를 만들지 말자 좋은 문제를 어떻게 찾을까? 반문하기 : 주변에 당연하다고 여기는 것들을 당연하지 않다고 여기며 개선하기 관찰하기 : 기존의 프로세스의 확인 펼쳐보기 : 현상의 이유와 개선점 찾기 주위에서 문제가 찾기 어렵다면 나 자신이 고객의 문제를 ..

🚀개요 아놀자X패스트캠퍼스 FE 부트캠프 과정에서 제가 되게 도움을 받았던 강사님들을 소개하고 싶어서 글을 작성합니다. 우선 과정이 실시간 강의가 진행되는 와중에 온라인 강의가 제공됩니다. 온라인 강의에서 Heropy 강사님과 John Ahn 강사님의 강의가 제공됩니다. Heropy 강사님의 강의가 저에게 도움이 많이 되서 추천드리고자 합니다. 또한 과정 내 K사에 다니신 커리어 멘토님이 본인의 커리어에 대한 1 대1 멘토링을 제공해 주셔서, 포트폴리오, 자기소개서, 면접, 공부 방향 등의 정보를 얻을 수 있었습니다. 다음 과정에 참여를 고민하신 분들을 위해 이를 공유하고자 합니다. Heropy 강사님의 강의는 현재 패스트캠퍼스에서 유료로 제공되나, 패스트캠퍼스 부트캠프에 참여하면 국비지원으로 무료로 들..

🚀 개요 사진 압축 JS 라이브러리 Broswer-Image-Compression 을 사용해 보니 다음과 같은 장점을 느꼈습니다. 손쉬운 사용, 직관적이고 강력한 옵션, 용량 자체가 다른 라이브러리에 비해 가벼웠습니다. 반면에 사진의 압축 시 원본의 변형이 생각보다 더 많이 일어났습니다 😵 사진 용량에 낭비가 심하다 기존에 작업한 프로젝트에서 유저 이미지 파일을 받는 부분이 있는데, 화면에서 100px X 100px 정도의 작은 사이즈임에도 큰 리소스를 잡아 먹는 것을 보고 사진을 압축하기로 결정했습니다 화면에 정말 작은 사이즈가 나타남에도 큰 용량과 큰 사이즈의 사진을 받기도 합니다. 위 사진은 사진의 원래 크기 564*352 px 이지만 실제 화면에 보이는 크기가 가로 세로 100px 이므로 쓸데 없..

🚀개요 야놀자X패스트캠퍼스 부트캠프에서는 현직에서 종사하시는 멘토님들과 주 1회씩 궁금한 것을 물어보는 시간을 가집니다. 평소에는 그룹 스터디 멘토님이, 개인 질문과 그룹 스터디 질문을 받아주셔 궁금증을 해결해 주십니다. 그리고 토이 프로젝트를 할 경우, 각 프로젝트 시에는 프로젝트 멘토님이 저희들의 질문을 받아주셔 다 같이 궁금한 내용을 해결합니다. 멘토님들마다 성향과 경험과 경력이 다 달라 소통과 설명이 달라질 수 있지만, 모든 멘토님들마다 최선을 다해 열정있게 가르쳐 주셨습니다. 보통 하다가 막힌 경우 에러의 원인에 대해서 묻기도 하였고, 멘토님의 현업 경험에 대해 묻기도 하였습니다. 또한 프로젝트 멘토님께는 프로젝트 질문을, 그룹 스터디 멘토님께는 그룹 스터디 방향에 대해 질문하기 편했습니다. 저..

🚀 개요 프론트엔드에서의 지속적인 통합과 지속적인 배포의 자동화에 대해 적용을 하여 최적화를 진행한 경험과 방법을 공유하고자 합니다. 우선 현재 프로젝트 환경에 대해 간략히 이야기 하겠습니다. 두 명이서 2주동안 진행하는 소규모 프로젝트이다 보니, Dev 브랜치에서만 Pull 과 Push를 하며 협업하기로 합의했습니다. 현 상황에 맞게 Dev 브랜치로 Push가 발생한다면 Github Actions에 의해 자동으로 Main 브랜치로 지속적인 통합을 해주며, 바뀐 Main 브랜치의 커밋을 감지하여 Netlify에 의해 자동으로 지속적인 배포를 해주는 자동화 로직을 구현하였습니다. 추가적으로 자동으로 테스팅하려면 `package.json`의 script에 test와 관련된 라이브러리(vitest, jest)..

🎈개요 인프콘 2023 에서 발표한 " Turborepo Next.js Typescropt 이용한 모노레포 적용기 " 발표를 듣고 인사이트를 얻으며 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다. 📚강의 내용 정리 모노레포란? 하나의 레포지토리에서 독립적인 여러 프로젝트를 관리하는 방법 기존에 많이 사용하던 Multi Repo 같은 경우는 다른 라이브러리에서 공통으로 사용하는 라이브러리를 중복하여 설치할 수 밖에 없습니다. 반면 모노레포의 경우 공통적으로 사용하는 라이브러리를 한 곳에 모아 관리하고 사용합니다. 모노레포의 장점 빠른 코드 수정 UtilA와 UtilB를 변경하더라도 App에서 바로 반영 가능하다 멀티 레포의 경우 버젼을 올리고 의존성을 다시 설치 해야함 각 레포마다..

🚀그룹스터디 개요 그룹스터디에서 하고 싶은 주제에 대한 설문 조사를 통해서 5명의 조원을 짜주었습니다. 사이드 프로젝트, CS 기초지식, 알고리즘 등의 주제를 선택할 수 있었는데, 저는 빠른 취업을 위해 CS 기초 지식과 알고리즘에 대한 공부를 하기 원했습니다. 이를 통해 면접과 코딩테스트를 준비하기를 원했습니다. 주에 2회 1시간씩, 총 17번의 그룹활동 시간이 정해졌습니다. 장기간 혼자 공부하다 보면 스스로 나태해지는 시간이 있을 수 있는데, 한번 잡은 목표로 조원들과 함께 해서 더욱 성실하게 공부할 수 있습니다. 또한 협업 프로젝트 이전에 온라인으로 진행되는 강의들로 이루어져 있어서 심심했었는데, 대화를 나눌 조원이 있어서 덜 심심하게 보냈는거 같습니다. 여기에 서로 도움되는 취업관련한 정보들도 공..

🎈개요 10분 테코톡 에서 발표한 " 발표내용 " 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다. 📚강의 내용 정리 왜 이미지를 개선해야 하는가? 웹성능(로딩성능과 렌더링 성능) 을 개선해야함 이미지의 파일이 웹페이지의 가장 큰 용량을 가짐 차세대 이미지 형식 결정하기 PNG : 무손실 압축 사용, 최고 품질이미지를 제공하나, 크기가 다른 형식에 비해 훨씬 크다 JPEG : 손실 압축 사용, PNG에 비해 용량이 작다 WebP : 구글에서 2010년 발표, JPEG보다 더 나은 압축과 더 많은 기능을 제공, 범용성이 더 높다 AVIF : AOMedia에서 2019년 발표, WebP와 유사하게 높은 압축률 자랑 WebP 사용시 JPG에 비해 35% ~ 65%정도 용량을..