Lighthouse of FE beginner

자바스크립트에서 객체를 순회하는 방법에 대해서 알아보겠습니다. 배열자바스크립트에서는 흔히 사용하는 배열도 객체 타입입니다. 배열은 다음과 같은 방법으로 손쉽게 순회할 수 있습니다.const list = [1, 2, 3, 4];// 선언형 프로그래밍for (let a; a { // 순회 로직}) 배열을 순회하는 방법은 쉽습니다. for 문을 활용해 순회, 혹은 배열의 내장 메서드인 forEach 함수를 활용합니다. 프론트엔드 개발을 하다보면 종종 팀의 컨벤션이나 프로젝트에 작성된 코딩 스타일이 함수형 프로그래밍인 경우가 있습니다. 이럴땐 forEach 메서드를 활용해 팀에 컨벤션에 맞춰서 작업할 수 있습니다. key, value 형식의 Object흔히 이야기 하는 객체(Object)를 순회하는 방법을 ..

useEffect 훅은 리액트에서 부수 효과를 일으키는 훅으로 여러개의 컴포넌트 생명주기를 다룰수 있는 훅 입니다. 그만큼 많이 사용하고 자주 사용하는 훅이지만 잘못 사용하면 무한 루프가 발생하던지 예상치 못한 버그가 발생할 수 있습니다. 가끔 개발된 컴포넌트를 보다보면 하나의 useEffect 훅에 여러 역할을 하는 함수를 넣는 경우가 있습니다. 이는 정말 좋지 못한 케이스이며 부수 효과로 인해 불필요한 로직이 실행됩니다. function App() { const [isSuccess, setIsSuccess] = useState(false); const [isError, setIsError] = useState(false); useEffect(() => { const fetch = async..

컴포넌트 내부에 다른 컴포넌트를 선언하는 것은 일반적으로 코드의 결합도를 증가시키는 결과를 가져옵니다. 이는 몇 가지 부작용을 초래할 수 있습니다. 결합도 증가구조적, 스코프적 종속성: 내부 컴포넌트는 외부 컴포넌트에 종속되어 구조적으로 강하게 결합됩니다. 이는 코드의 유지보수 및 확장성을 저해할 수 있습니다.확장성 저하: 나중에 내부 컴포넌트가 분리되거나 재사용해야 할 경우, 이를 위한 변경이 어려울 수 있습니다. 즉, 기능의 추가 또는 수정이 더 어려워집니다.성능 저하리랜더링 문제: 상위 컴포넌트가 리랜더링될 때, 내부에 있는 하위 컴포넌트도 함께 재생성됩니다. 이는 성능 저하로 이어질 수 있습니다. 특히, 내부 컴포넌트가 많고 복잡한 경우에는 이 문제가 더 심각해질 수 있습니다.예시function ..

React에서는 Props를 통해 컴포넌트 간 데이터를 전달하는데, 특히 Object를 Props로 전달할 때 주의해야 할 사항들이 있습니다. 이를 효율적으로 관리하기 위해 몇 가지 팁을 살펴보겠습니다.JavaScript에서의 ObjectJavaScript에서의 값은 원시 값 혹은 객체 입니다. 흔하게 사용하는 List도 다른 언어에서는 특정 타입의 값의 집합이지만 JavaScript에서는 Object 입니다.// Objectconst Object = { a: 'a'};// Objectconst Array = [1, 2, 3];Object.is와 불필요한 리랜더링React에서는 리랜더링 시 컴포넌트 비교를 위해 Object.is 메서드를 사용합니다. 이 메서드는 같은 모양의 객체라도 메모리 주소값이 다..

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..