프론트엔드 기록 by chloee 🐳

항해플러스 프론트엔드 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…

FSD아키텍쳐 활용하여 폴더구조 변경하기

가독성이 좋지 않고 복잡했던 기존 폴더구조의 문제점 안에 각 페이지 별로 대부분의 코드들이 분류되어 들어가 있다. (가독성이 좋지 않음) 안에 뷰로직,비즈니스로직, 작은 컴포넌트들이 다 모여있어서 구분이 어렵다. api호출하는 부분은 커스텀 훅안에 넣어져있다. <예시 이미지> FSD아키텍쳐로 폴더구조 변경하기 위 문제를 해결하기 위해 FSD아카텍쳐를 …

발박스가 화면 가장자리에 붙을 경우 에러메시지 뜨게 하기

업무 배경 카메라 화면에서 발박스가 가장자리에 붙을 경우 에러 메시지를 띄워야 했다. 발박스가 카메라 화면의 가장자리에 위치해있다는 것을 구분해야했다. 구현 방법 아래 이미지는 실제로 구현에 성공한 과정에서 찍은 스크린샷이다. 라는 가상의 canvas를 만든다. 이 화면은 카메라 화면의 width, height와 동일하다. width,height을 we…

react hooks와 함수형 프로그래밍

언젠가 테크리드가 이런 얘기를 한 적이 있다. “React Hooks와 함수형 프로그래밍은 서로 밀접한 관계가 있지만, 엄연히 달라요.” 그렇다면 이 둘은 어떤 특징을 가지고 있고, 어떤 밀접한 관계가 있는지 알아보려고 한다. React Hooks란? Hooks는 함수형 컴포넌트에서 React의 와 기능에 직접적으로 연결(hook)할 수 있도록 해주는…

React 19의 새로운 기능

2024년 12월 5일, react 19버전이 stable로 올라오게 되었다. 이번 기회에 어떤 내용들이 있는지 간략하게 정리해보고 공부해보면 좋겠다는 생각이 들었다. 1. Actions React 19에서는 비동기 함수와 트랜지션을 활용하여 상태 업데이트를 더욱 간편하게 처리할 수 있는 를 도입했다. 이를 통해 pending 상태, 오류 처리, 낙관적 …

Three.js-Galaxy Generator 만들기

Three.js journey 강의를 들으며, galaxy를 만들 수 있는 부분이 있어서 참고해서 개발하며 정리한 것을 기록해보려고 한다. Galaxy generator 1. 맨 처음 galaxy 함수를 하나 만들고, galaxy생성에 필요한 parameter 객체를 하나 만든다. 2. geometry와 particles(점) 만들기 parameters의…

Three.js Project - 달 구현해보기 🌕

Three.js 프로젝트를 시작하며 Three.js study를 10월부터 시작하며 기본적인 개념들을 공부했다. Three.js의 3가지 기본 요소인 에서부터 , , 등등을 공부하며 여전히 모르는 건 많지만 어느정도 기본적인 것은 많이 파악되었다는 생각이 들었다. 이젠 개념에 대한 공부뿐만 아니라 실제로 개발을 해봐야겠다는 생각이 들어서, 나만의 프…