프론트엔드 기록 by chloee 🐳

3D xylophone 만들기

난 거의 매일 꿈을 꾸는데, 꿈 속에서 은색의 실로폰을 봤다. 하나 하나 눌러보면 소리가 나는 악기였는데, 이 장면이 너무 인상적이어서 웹으로 한번 만들어보면 좋겠다는 생각이 들었다. 3D로 개발하고 싶어서 Three.js를 사용하려고 했는데 이번엔 react-three-fiber를 사용해서 개발해봤다. 🛠 사용한 기술 스택 React + @react-t…

항해플러스 프론트엔드 5기 | 3챕터 회고

들어가며 벌써 항해가 8주차가 흘렀다. 3챕터의 큰 주제는 테스트코드였다. 테스트 코드는 실무에서 cypress로 e2e테스트만 해봤는데, 이번 챕터 과제를 하며 유닛테스트, 통합테스트, e2e 모두를 아우를 수 있는 테스트를 경험해볼 수 있었다. 그만큼 힘들었지만(?) 뿌듯했던 시간을 보낼 수 있게 해주었던 과제였던 것 같다. 과제를 하며 배운 점 1.…

항해플러스 프론트엔드 5기 5주차 회고

들어가며 5주차 과제는 클린코드로 리팩토링하는 것이 필요했는데 계층을 이해하고 분리하여 정리정돈을 하는 기준이나 방법등을 습득하는 것이 목표였다. 기본과제, 심화과제의 요구사항을 분석하며 어떤식으로 개발할지 초반에 정리하는 시간을 먼저 가졌다. 과제의 핵심취지를 분석한 후, 계층을 이해하며 개발해야함을 알고 이번 과제의 개발 방향을 세웠다. 엔티티 개념이…

항해플러스 프론트엔드 5기 4주차 회고

들어가며 4주차 과제는 더티코드 개선하기!! 생각보다 양이 많아서 놀랐던 과제였다. 쉬운줄 알았지만 절대 쉽지 않았다. 이번에 배운 것을 토대로 더 가독성 좋고 협업하기 좋은 코드를 작성하는 것을 목표로 해야겠다는 생각이 들었다. 💩 1. 더티코드 개선하기 (basic 과제) 더티코드를 처음 접했을 때, 정말 보기 어렵고 어떻게 개선하면 좋을지 고민이 많…

항해플러스 프론트엔드 5기 3주차 회고

들어가며 3주차 과제는 hook을 직접 구현해보며, 동작원리를 살펴보는 시간을 가졌다. 내가 몰랐던 부분들을 알게 되는 과정이 재밌었던 시간이었다. ✨과제 셀프회고 이번 과제를 통해 내가 궁극적으로 얻고 싶었던 것은 Hook을 직접 구현해보며 동작을 제대로 이해해 보는 것이었다. ,,를 실무에서 사용해봤으나 제대로 사용해서 성능 최적화를 하고 있나에 대한…

항해플러스 프론트엔드 5기_2주차 회고

들어가며 벌써 2주차가 지났고 3주차에 들어가게 되었다. 2주차의 과제 주제는 바로 virtualDom을 직접 구현하고 가상돔을 돔으로 변환하는 것이었다. 말로만 들어도 어렵겠다 생각했는데, 정말 쉽지 않은 과제였다. 많은 어려움들이 있었지만 운이 좋게 과제를 마무리할 수 있었다. 어떤 문제가 있었고 어떻게 해결했는지 정리해보았다-! 🌟 이번 과제를 통해…

항해플러스 프론트엔드 5기 | 1주차 회고

들어가며 항해플러스 프론트엔드 1주차가 드디어 시작되었다. 항해플러스 과정에 대한 이야기는 많이 들었는데, 생각보다 빡세지만 배우는게 많다는 후기가 많아서 지원하게 되었다. 난 어떤 환경안에 있는지 굉장히 중요한 사람이라 들어오길 참 잘했다는 생각이 든 1주였다. 1주차 과제는 vanilla JS로 SPA를 개발하는 것이었다. vanilla JS로 개발…

Vanilla JS에서 브라우저 라우터와 Hash 라우터의 차이

들어가며 오랜만에 Vanilla JS로 개발을 해볼 일이 생겼다.Vanilla JS로 SPA 구현하기를 진행하다보니 라우팅 구현을 두 가지 방식으로 구현할 수 있다는 것을 알게 되었다. 바로 History API를 이용한 와 이다. 이 두 방식의 차이와 동작 원리를 더 깊이 이해하고 싶어졌고, 실제로 라우팅 시 겪었던 이슈들도 함께 정리해봤다. 🔍 1. …

npm 패키지 만들어보기 (react-popup-draggable-resizable)

NPM패키지를 한번도 publish해본 경험이 없어서 이번 기회에 경험삼아 만들어보고 싶었다. 패키지 작성부터 빌드, publish까지 “한 번 만들어보면 별거 아니지만, 해보기 전까지는 어렵게 느껴진다”라는 말을 듣고 이번 기회에 도전해보기로 했다. NPM패키지를 작성해보면서 어떻게 패키지를 만들어야하는지 살펴보고, 실제 publish까지 해본 과정을 …

SSR은 어떻게 동작하는가

들어가며 실무에서는 SSR(Server-Side Rendering)을 사용할 일이 많지 않아 아쉬웠는데, 이번 기회에 SSR의 원리와 동작 방식에 대해 정리해보았다. 특히, Next.js와 같은 프레임워크를 사용할 때 SSR을 제대로 활용하려면 먼저 SSR의 본질적인 개념과 동작 원리를 이해하는 것이 중요하다고 생각했다. SSR의 핵심은 서버에서 HTML…