전체 글 123

신입 개발자 이도현 시작!

이 글은 프론트엔드 개발자 취업에 도움되는 내용이 아니다. 신입 개발자로 취업했다고 호들갑떠는 글이니, 키워드로 유입된 분들은 돌아가셔도 좋다. 3년 21년의 이도현 이런 글을 쓴다는게 어딘가 상당히 어색하고 부끄럽기도 하다. 초등학교 시절 쓰던 일기 이후에는 내 생각을 정리하는 글을 써본적이 없기 때문이다. 이곳에는 정말 하고 싶은 아무 말이나 다 think0wise.tistory.com 22년도 1월 1일. 프로그래밍을 독학한지 1년이 지난 시점에 작성한 회고이다. 글의 끝에는 본격적으로 학습을 해보겠다며 다니던 회사를 그만두겠다 선언하고 있다. 22년의 이도현 다니던 회사를 그만두고 프로그래밍 공부에 전념해야겠다고 다짐한 후 벌써 1년이 흘렀다. 22년을 마무리하는 시점에서 지난 1년 동안 이루어 ..

목표와 회고 2024.02.03

23년의 이도현

우아한테크코스와 함께한 23년 분명 많은 것을 이루었을 23년 처절하게 노력했던 지난날을 돌이켜 보자. 우아한테크코스 시작 합격 메일을 받고 나서 곧바로 알바를 구했고 열심히 서빙을 했다. 알바와 부모님 찬스로 생활비를 구했고 서울 고시원으로 향했다. 태어나서 처음 공부를 위해 금전적 지원을 해줄 수 있냐는 말에 적잖이 당황하면서도 알겠다 말하던 아빠 얼굴이 선하다. 덕분에 이 철부지는 무사히 1년을 버텨낼 수 있었다. 고시원 무개념 입주자로 인해 고시원에 대한 추억은... 뭐 그리 좋지는 않다. 제발 오늘은 조용히 잠만 자자고 기도했지만, 침대에 누운 지 5분 만에 들려오는 온갖 소음에 허탈하게 웃어버린 적도 있다. 그래도 뭐... 옥상 실외기 위 판자에 올려놓고 먹던 라면은... 참 좋았다. 라면이 ..

목표와 회고 2024.01.01

Tanstack Query, TkDodo 도아일체 (1)

https://tkdodo.eu/blog/practical-react-query Practical React Query Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... tkdodo.eu 2018년경 GraphQL과 아폴로 클라이언트가 핫하던 시기에 사람들은 리덕스를 대체할 것이라며 난리법석이었다. 나는 전혀 이해하지 못했다 '데이터 패칭 라이브러리가 어떻게 전역상태 관리라이브러리인 Redux를 대체하지?' 아폴로는 데이터 패칭 기능뿐만 아니라, 서버 데이터 캐싱도 지원했다. 여러 컴포넌트에서 동일한 쿼리를 사용하면 캐싱..

Tanstack Query, TkDodo 도아일체

라이브러리를 학습하다보면, 공식문서만큼 해당 라이브러리에 대한 철학이 잘 드러난 곳이 있다. 바로 컨트리뷰터의 블로그...! 아무래도 잘 알려진 컨트리뷰터들은 개인의 철학보다는 해당 라이브러리의 철학을 기반으로 글을 작성하는 경향이 있다. 자신이 곧 라이브러리가 되어버렸다고도 할 수 있겠다.(Dan Abramov형 처럼...) 인간 Tanstack Query, TkDodo형의 블로그에 총 23편의 장편으로 구성된 실전 압축 팁이 모여있다. (도도형이 직접 언급) 도도형은 어떤 생각을 가지고 라이브러리를 만들었으며, 각 꿀팁들에 대한 생각을 흡수해보자. 이번 시리즈는 도도형의 꿀팁들을 읽고 정리하며 내실을 다지는 포스팅이 될 것 같다. 시작!

우테코 레벨3, 4 학습 내용 총정리

레벨3, 4 학습 내용 총정리🤪 팀 프로젝트 S-HOOK과 함께한 레벨3, 4 소중한 기억을 정리해보자! 그래서 뭘 배웠어?🤷‍♂️ 개인적으로 몰입했던 키워드는 다음과 같다. 프론트엔드 개발 환경 프론트엔드 최적화 + AWS 찐~한 협업과 찐~한 소프트 스킬 1. 프론트엔드 개발 환경 팀 프로젝트를 위한 개발 환경을 밑바닥부터 하나하나 설정했다. 오만가지 설정법과 설명이 있는 webpack docs를 보고있자면 토가 나오는 것 같았지만 아무렴 어때! 개발 환경 구성에 필요한 기술들을 접하고 이해하면서 프론트엔드 개발환경의 큰 그림을 이해하게 됐다. webpack, babel, eslint, TS, react... 이외에도 자잘한 부수 기능까지...! 입맛대로 환경대로 골라서 적용하는게 점점 재미가 붙었다..

목표와 회고 2023.10.02

HTTP cache(with. MDN)

이번 포스팅에서는 HTTP cache에 대해 알아보겠습니다. 포스팅의 전반적인 내용은 MDN - HTTP caching 문서 기반입니다. 다루지 않은 디렉티브나 내용에 대해 더 자세하게 알아보고 싶다면 문서를 참고하세요! HTTP caching - HTTP | MDN The HTTP cache stores a response associated with a request and reuses the stored response for subsequent requests. developer.mozilla.org 캐시(cache)란? 자주 사용되는 자원(데이터, 값)을 임시로 복사해서 보관하는 장소를 말합니다. 기존 자원에 접근하는 시간 혹은 다시 계산하는 시간을 절약하고자 사용합니다. HTTP cache c..

Network 2023.09.24

CloudFront(CDN), S3란?

1. CDN(Content Delivery Network)이란? 클라이언트와 서버의 물리적 통신거리가 긴 경우(ex. 한국에서 미국 웹사이트에 접속) 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸립니다. CDN은 클라이언트와 서버 중간에서 통신에 관여해 위와 같은 문제를 해결해 줍니다. 클라이언트와 물리적으로 가까운 CDN을 통해 데이터를 주고받아 웹 트래픽을 줄이고 빠른 로딩으로 사용자 경험을 개선할 수 있습니다. 1-1. CDN 적용 시 장점 물리적 거리 감소 및 캐싱을 통해 페이지 로드 시간 단축되고, 이로 인해 사용자 경험이 좋아집니다. 자체 캐싱 및 최적화를 통해 서버가 제공해야하는 데이터 양을 줄일 수 있고, 이로 인해 서버 호스팅비용을 절감할 수 있습니다. ..

Infra 2023.09.14

[삽질] - imagemin 패키지의 Unknown plugin 오류

1. 사건의 발단 이미지 최적화 관련 webpack플러그인 중 하나인 ImageMinimizerPlugin은 여러 하위 플러그인과 함께 사용하는 패키지이다. 하위 플러그인인 imagemin-xxx 패키지들을 설치하여 빌드할 때 해당 패키지들을 찾지 못하는 오류 발생 2. 문제 원인 분석 빌드 관련 패키지의 종속성의 버전이 낮았던 것이 원인. *build 스크립트에서 webpack-cli 패키지를 사용하고 있었다. *실행 일자 기준 2년전 생성한 프로젝트로 webpack-cli 패키지의 버전이 4.x.x 버전이었다.(최신 5.x.x) 3. 원인에 대한 학습 이미지 최적화 관련 패키지를 설치하기 전까지 build 커멘드는 문제없이 작동했기에, 새로 설치한 패키지(이미지 최적화 관련)에 대한 부분만 의심한 케..

S-HOOK - 서비스 런칭 [Week 7 ~ 8]

어느덧 레벨3 마지막 스프린트를 진행했습니다. 성공적인 런칭 페스티벌! 그 마지막 여정은 어땠는지 되돌아 봅시다! 1. 사용성 위주의 피드백 반영 이번에도 역시 지난 데모데이 피드백을 반영했습니다. 사용성 위주의 피드백이 많았던 만큼 실제 유저가 느낄 수 있는 불편함을 해결하고자 노력했어요. 1-1. 듣기 / 등록 - 플로우 분리 등록과 듣기라는 정책을 함께 묶어 제공하던 기존의 방식은 오히려 듣기 기능을 주로 사용하는 유저에게 불편함을 줄 수 있었습니다. 관련한 문제점에 대해서는 이미 우려했던 부분이기에 관련하여 정책을 변경하였습니다. 별도의 페이지에서 한정된 기간 동안 특정 노래에 대해 킬링파트를 등록할 수 있도록 하고, 듣기 페이지에서는 이미 선정된 킬링파트를 들을 수 있게 하여 플로우를 완전히 분..

프로젝트 2023.08.23

컴포넌트 관심사 분리의 중요성 뼈 속까지 직접 느껴보기(feat. 의식적인 리팩터링)

이번 포스팅에서는 진행중인 프로젝트의 Page 단위 컴포넌트를 리팩터링 하는 과정과 느낀점을 담아보겠습니다. 도메인이 듬뿍 담긴 컴포넌트의 리팩터링 과정을 담다보니 다소 복잡합니다. 코드를 이해하기 보다는 가볍게 느낌만 봐주세요. (느낌만 봐도 충분히 복잡합니다..ㅎ) 과정과 설명 없이 Page컴포넌트의 Before / After 만 보고 싶으시면 아래 접힌글을 펼쳐서 코드를 확인해 주세요. 맨밑으로 가서 느낀점만 보셔도 됩니다... 더보기 Before After 1. Page 컴포넌트의 문제점 우선 리팩토링 대상 컴포넌트 코드를 살펴봅시다. 미리 주요 관심사들에 대해 주석으로 표시해 두었습니다. 코드를 하나하나 이해하는 것 보다는, 주석 부분만 읽으면서 '관심사가 이렇게 많구나~' 정도만 파악하시면 좋..

Frontend/React 2023.08.07