Lighthouse of FE biginner

CSS-in-JS를 사용할 때, 스타일 코드를 인라인으로 지정하는 것은 일반적으로 지양되는 패턴 중 하나입니다. 대신에, 컴포넌트 외부에 스타일 코드를 선언하는 것이 권장됩니다. 여기서는 이러한 방법이 왜 더 좋은지, 그리고 어떤 장점을 가지는지 살펴보겠습니다. 외부 스타일 코드 선언하기Emotion을 사용해 스타일을 할 때 emotion/css emotion/react 라이브러리를 활용해 스타일링을 할 수 있습니다. 이때 css API는 Tagged Function을 사용하는 것 보다는 JS 객체 형식의 스타일 코드를 사용하는 것이 권장됩니다. 이때 스타일 코드는 JSX에 인라인 스타일로 작성하는 것 보다는 컴포넌트 외부의 변수로 빼내어 사용하는 것이 성능에 좋습니다. 외부로 분리할 경우 장점1. 랜더..

2021년 부터 리액트를 사용해 만 3년이 넘는 기간동안 리액트를 사용하고 있다.아직 주니어 개발자이지만 이전 회사에서 다양한 컴포넌트를 만들어보고, 기능도 만들고, 리팩토링도 하면서 리액트에 경험을 쌓았고 나름 리액트를 잘 쓴다고 생각하면서 개발하고 있었다. 그러다 문득 어제 나는 리액트를 잘 쓰는 프론트엔드 개발자일까? 라는 생각이 들었다. 4월에 새로 입사한 회사에서 입사하자마자 코딩 컨벤션을 주도적으로 정착시키고 zustand 컨벤션을 녹여 팀 내에 zustand 사용하는 방식을 변경했고, react-query를 사용하는 코드를 추상화하여 리팩토링을 하고 있다. 또 최근엔 exceljs 라이브러리를 사용해 프로젝트에서 사용할 수 있는 커스텀 훅을 만들었고 팀원들이 이 훅을 사용해 Excel 파일을..

History회사에서 현재 진행중인 프로젝트 프론트엔드의 환경은 CRA 템플릿을 활용한 SPA 프로젝트입니다.CRA의 유지보수가 중단되고 Vite라는 더 좋은 개발툴이 있기에 해당 툴로 개발 환경과 번들러를 Rollup으로 마이그레이션 할 계획을 잡았습니다. 프로젝트가 시작되고 유지보수까지 굉장히 오랜 시간이 흘렀기에 한번에 딸깍 모든 것을 교체할 수 없었습니다. 본격적으로 마이그레이션 하기 전 어떤 문제가 있을지 테스트를 해봤고 도출한 여러 문제 중 react-data-export 라는 라이브러리에서 문제가 발생한다는 것을 알게 됐습니다. 그래서 이번 이슈를 통해 해당 라이브러리를 사용하는 엑셀 다운로드를 exceljs를 활용해 엑셀을 다운로드 받는 것으로 리팩토링을 결정했고 리팩토링 한 과정을 소개하..

React Server ComponentRSC가 서버에서 실행이 되지만 RSC 와 SSR 은 동일한 개념이 아닙니다. RSC 는 클라이언트에서 실행되는 컴포넌트(RCC)와는 다르게, 빌드 시점에 생성이 되거나 서버와 함께 사용한다면 서버에서 랜더링이 수행되는 컴포넌트 입니다. RSC의 개요RSC는 서버에서 랜더링이 수행된다. 즉 클라이언트에서 랜더링이 수행되지 않기 때문에 클라이언트 전용 API를 사용할 수 없다. 또한 서버에서 랜더링이 되기 때문에 클라이언트에서 랜더링이 발생하지 않는다. (리랜더링이 없다.) 기본적으로 모든 컴포넌트는 서버 컴포넌트이다. 만약 클라이언트 컴포넌트를 사용하고 싶다면 "use client"를 컴포넌트 파일 최상단에 기입해야한다. 서버 컴포넌트를 가지고 있는 페이지는 요청을..

5월 4일 대면 시험으로 AWS Solutions Architect - Associate 자격증을 취득함으로써 자격증 취득 과정을 회고하고 공유하고자 작성합니다. AWS 자격증 종류AWS에는 여러 가지 자격증이 있습니다.가장 기초가 되는 Practitioner 자격증부터 시작해서 가장 전문적인 Specialty 자격증까지 존재합니다.AWS에서는 Practitioner 자격증은 3~6개월가량의 AWS 경험을 권고하고, 다음 단계인 Associate 단계에서는 1년 이상의 경험을 권고하고 있습니다. Associate 단계부터는 자격증이 아키텍트, 운영, 개발로 나누어져 있고 시험 문제의 방향성도 달라지니 본인의 직무에 가장 유사한 자격증에 응시하게 됩니다.제가 응시한 Solutions Architect 자격..

IntersectionObserver랜딩페이지 작업 중 특정 색션에 접근 시 애니메이션이 발생하도록 구현해야 했습니다.`Scroll` 이벤트를 활용해 구현을 할 수 있지만,사용해본 경험이 있는 `IntersectionObserver` 을 활용해 구현했습니다.과정먼저 ref 객체를 만들어 관찰해야할 요소에 바인딩 해줍니다.  안심업체 소중한 우리 집, 안심하고 맡겨보세요.  IntersectionObserver 객체를 생성하고, observer 콜백 함수와 옵션 객체를 인자로 넘겨줍니다.콜백 함수의 매개변수로 entries 를 받을 수 있습니다.entries 는 IntersectionObserverEn..