코딩하는라민

[Frontend] 스웨거(swagger) API 사용하는 방법 (feat. 리액트) 프론트엔드 개발자로써 첫 회사에 들어가자마자 스웨거 API 링크를 받았다. 멋사에서 프로젝트할 때 서버리스로 Firebase 만 써본 입장에서 스웨거 API 는 너무 새로웠다. method 종류별로 색이 달랐고, url 과 Parameters, Pesponses, Responses 등등 낯설어서 익숙해지는 데 며칠이 걸렸던 기억이 있다. 지금은 시행착오를 거치면서 아주 잘 사용하고 있고, 이렇게 편한 도구가 있을까 싶을 정도이다. 🙂 스웨거(swagger)란? REST API를 설계, 빌드, 문서화 하는 것을 도와주는 오픈 소스 소프트웨어 프레임워크이다. API 를 문서화해서 사용하기 쉽게 만들며, 따로 API 문서 작..

[React] 리액트에서의 아토믹 디자인(Atomic Design)이란 Medium Out of nothing, something. You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories about finding what you didn’t know you were looking for will take you somewhere new? bootcamp.uxdesign.cc 본 게시글은 위의 글을 읽고 번역하여 정리한 내용입니다. 📌 아토믹 디자인(Atomic Design) 효율적이고 확장 가능한 웹 애플리케이션을 만드는 방법중의 하나는 아토믹 디자인 시스템을 사용..

[책 리뷰] 프론트엔드 성능 최적화 가이드 예전에 리액트 프로젝트를 하면서 성능 문제를 겪은 적이 있습니다. development 모드라 빌드 전이기는 했지만, 성능이 너무 낮게 나왔었습니다. 성능을 보고 모든 팀원들이 충격에 먹었었는데, 지금 생각해보니 코드를 남발하기만 하고 최적화 작업을 해주지 않았었습니다. 처음에 어떻게 하면 프로젝트의 성능을 끌어 올릴 수 있는지 몰라 막막했는데, 이 책을 읽고 나서 앞으로는 기능 구현만 신경쓸 것이 아니라는 것을 깨닫게 되었습니다. Lighthouse 분석 이 책은 제목 그대로 웹사이트의 성능을 리액트를 기준으로 최적화해주는 가이드북입니다. 이전에는 Lighthouse 의 전체적인 성능 수치만 확인했을 뿐 그 안의 요소 하나하나에 대한 분석은 하지 않았습니다. ..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..

[React] useLayoutEffect 는 언제 사용할까? 📌 useEffect 이란? [React] Hooks - useEffect ( ) [React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 ramincoding.tistory.com 앞의 포스팅에서 알아본 바와같이 useEffect 는 클래스형 컴포넌트 생명주기의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것으로 의존성 배열 deps..

[React] React Router 📌 라우팅 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 여러 페이지로 이루어진 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 라우팅이 필요하다. 리액트 라우터는 라우팅 시스템으로 가장 많이 사용하는 인기있는 라이브러리이다. 리액트 라우터를 사용하면 SPA(Single Page Application) 를 구현할 수 있다. 📌 Single Page Application(SPA, 싱글 페이지 애플리케이션) SPA 는 한 개의 페이지로 이루어진 애플리케이션이다. 리액트 라우터는 여러 페이지로 이루어진 프로젝트를 만들 수 있는 것이라고 했다. 그런데 왜 싱글 페이지 애플리케이션이라고 하는 것일까? ✅ MPA(Multipage ..

[React] Recoil 상태 관리 라이브러리 설치 및 기본 📌 상태관리란? 상태는 컴포넌트 내부에서 변경이 일어나는 값을 관리하기 위한 모든 데이터를 말한다. 상태관리는 변경이 일어나는 값들을 관리하는 것이다. 상태관리는 초기값을 저장할 수 있어야 하고, 현재값을 읽을 수 있어야 하고, 값을 업데이트할 수 있어야 한다. 함수형 컴포넌트에서 useState 로 자식 컴포넌트에서 부모 컴포넌트의 state 를 변경하여 상태관리를 할 수 있었다. 또 다른 방법이 하나 더 있는데 바로 상태관리 툴을 이용하는 것이다. 상태관리 툴은 다양한 종류가 존재한다. Redux Recoil React query MobX apollo useSWR ... 📌 상태 공유 기능의 한계 기존에 사용하던 방식은 다음과 같은 한계점..

[React] Styled Component (CSS-in-JS) 📌 CSS in JS? CSS in JS는 기존의 CSS 스타일링의 방식과 다르게 스타일 정의를 별도의 CSS 파일이 아닌 JS 파일에 작성하는 스타일 기법을 말한다. JS 파일에서 작성해서 바로 컴포넌트에 적용하기 때문에 손쉽게 스타일을 적용할 수 있다. CSS in Js 라이브러리에는 Styled Components, emotion, styled-jsx 등이 있다. 이러한 CSS in JS 라이브러리 중에서 가장 많이 사용되는 것이 Styled Component 라이브러리이다. 📌 Styled Component Styled Component 는 스타일링 파일을 따로 두지 않고 동일한 컴포넌트에서 컴포넌트 이름을 사용하듯 스타일을 지정할..

[React] Vite 차세대 프론트엔드 개발 툴 📌 Vite 란? Vite(프랑스어로 "빠르다(Quick)"를 의미한다. 발음은 /vit/ 이다. → '바이트' 라고 읽지 않도록 주의하자!! Vite 는 CRA(Create React App) 과 달리 구성 환경이 다른 프로젝트를 위한 빌드 툴이다. 속도가 굉장히 빠르기 때문에 요즘 CRA 보다는 Vite 를 많이 사용하고 있는 추세이다. Vite 에 대한 만족도와 관심도가 가장 높으며, 사용량도 빠르게 늘어나고 있다. 반면 Webpack 은 만족도와 관심도가 크게 감소했으며, 사용량이 소폭 감소했다. The State of JS 2022: 빌드 도구 기술 이름을 클릭하면 자세한 정보를 확인하고 관련 데이터를 자세히 볼 수 있습니다. 2022.state..

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..