React 썸네일형 리스트형 useEffect, useLayoutEffect(feat. SSR 환경) useEffect() 리액트의 useEffect()는 해당 스코프의 컴포넌트가 render와 paint 된 후 호출되는 리액트 라이프사이클 훅이다. 비동기적으로 실행되고 로직에 DOM에 영향을 주는 코드가 있을 경우 사용자는 화면의 깜빡임을 확인할 수 있다. useLayoutEffect() useLayoutEffect()는 컴포넌트가 render가 되고 호출된다. paint 전에 호출 된다는 점이 useEffect()와 다른데,. 만약 DOM에 영향을 주는 로직(setState)이 있을 경우 화면에 그려지기 전 실행되므로 사용자는 깜빡임을 경험할 수 없다. 주의할 점은 useLayoutEffect는 동기적으로 실행되므로 로직이 처리되는 시간 동안 사용자는 빈화면을 볼 수밖에 없으므로 목적에 맞게 잘 사용.. 더보기 리액트 쿼리(react-query)로 관심사 분리하기 이전 SWR 포스팅을 작성했는데요. SWR보다 react-query 다운로드 수가 2배가량 높습니다. 원티드 프리온보딩 챌린지를 하면서도 사용했고 점점 대중화되어가는 눈치입니다. 부랴부랴 포스팅 남겨봅니다. 다행히도 Next.js와 리액트에서 SWR을 사용해 본 경험이 있어 덕분에 리액트 쿼리를 이해하는데 오래 걸리지 않았습니다. [React] SWR(Stale-While-Revalidate) 최근 프론트엔드와 관련 한 카카오톡 오픈 채팅방을 통해 스터디를 시작했고 관련해서 공부했던 내용을 발표해야했기 때문에 포스팅을 진행해봤습니다. SWR이란? 클라이언트는 서버에서 데이터 juni-official.tistory.com React-Query 리액트 쿼리는 리액트 내에서 서버의 상태(데이터), 캐싱, 동기.. 더보기 Next.js에 nProgress 입히기 요즘 원티드에서 진행하는 프리온보딩 챌린지를 통해 프론트엔드 스킬과 현업에서의 고충, 노하우를 얻어가는 계기가 되었습니다. 오늘은 강의 내용 중 nProgress라는 효과를 처음 알게 되었고 Next.js에서 라이브러리를 통해 구현해 보았습니다. nProgress 란? Next.js 에서 페이지를 이동하는 움짤을 만들어봤습니다. 페이지를 이동할 때마다 상단에 프로그래스 바가 생겼다 사라지는데요. 일종에 서버의 응답을 기다릴 때 보여주는 스피너와 동일합니다. 확실히 로딩 스피너 보다 nProgress 가 더 깔끔한 느낌이라 호감이 갑니다. 코드 샌드박스 임베드 코드 넣어서 바로 보여드리려 했는데, 이제 무료에서는 기능을 제공하지 않는 거 같습니다. 아래 링크에서 테스트해 볼 수 있습니다. wonderful.. 더보기 [React] Styled-Components useRef 타입스크립트 오류 Styled-Components Ref Styled-Components로 만든 컴포넌트에 ref를 사용하고 싶었으나 타입스크립트 에러 때문에 안되는 상황. 검색을 해보면 별도의 컴포넌트를 만들어 해당 컴포넌트를 기반한 스타일드 컴포넌트로 만들어 사용하고 forwardRef를 사용해 Ref를 전달 후 할당하는 방법 밖에 나오지 않았다. 분명 스타일드 컴포넌트에 ref를 바로 선언해 사용 할 수 있을거라 생각해 스택오버플로우를 다 뒤져봤다. 그랬더니 나와같은 상황을 겪은 분을 찾아 코드를 가져왔다. import React, { useRef, useEffect } from 'react'; import styled from 'styled-components'; const StyledInput = styled.i.. 더보기 [React] 스타일드 컴포넌트(Styled-Components) HTML요소 동적으로 생성하기 사내 디자인 가이드에 따라 프론트엔드 개발자 분들이 사용할 컴포넌트들을 만들고 있습니다. MUI처럼 사용할 수 있도록 여러 컴포넌트를 설계하면서 코드를 작성하고 있는데요. Typography 컴포넌트 작업을 하다 HTML Element를 동적으로 변경하고 싶었는데 검색 키워드가 잘 못 됐는지 한국에서는 다루는 포스팅이 하나도 없길래 작성해 봤습니다. import styled from 'styled-components' const StyledComponent = styled.div` width: 100px; hegiht: 100px; border: 1px solid #000; ` const Component = () => { return } export default Component 위 코드는 스타일드 .. 더보기 프리온보딩 프론트엔드 챌린지 - yarn berry workspace 오늘은 모노레포를 알아보았고 yarn Workspace를 사용해 모노레포를 구성했고 공통 모듈을 프로젝트에 불러와 사용해봤다. > yarn set version berry > yarn init -w packages/lib → 공통 라이브러리 apps/web → 서비스 apps 폴더에는 web 이라는 Next.js 프로젝트를 생성했고, packages/lib/src/index.ts의 모듈을 apps/web에서 사용하려면 아래와 같이 명령어를 사용한다. yarn workspace @macjjuni/web add @macjjuni/lib @macjjuni/web = Next.js 패키지 이름 @macjjuni/lib = 공통으로 사용할 패키지 이름 명령어를 입력해주면 apps/web/package.json 파.. 더보기 원티드 프리온보딩 챌린지 - 모노레포(Monorepo) 오랜만에 포스팅 남기네요. 새롭게 시작할 프로젝트 계약이 무산되고 어처구니없는 프로젝트에 투입되어 시간이 없었습니다 😰 이번 포스팅은 원티드에서 진행하는 프리온보딩 챌린지에 참여해 알게된 내용들입니다. 너무 일에만 치여지내다 보니 업계 동향이나 자기계발에 뒤쳐지고 있다 생각이 들었습니다. 그래서 회사 동료분들에게도 추천을 했고 다 같이 참여하는 시간을 갖게 되었습니다. 참여하기 전 사전과제로 해당 주제를 미리 공부해보는 시간을 가져야합니다. 주제는 모노레포 시스템입니다. 고맙게도 원티드에서 모노레포와 관련된 내용의 링크를 미리 첨부해주어 참고해 포스팅을 작성해보겠습니다. 시작하기 전 아래 내용은 프로젝트를 어떻게 하면 효율적으로 유지 관리하는 방법에 대한 지식입니다. 모노레포(Monorepo) 모노레포란.. 더보기 [React] 웹팩 정적파일 연결하기 (feat.copy-webpack-plugin) 리액트를 사용할 때 CRA(create-react-app) 명령어로 프로젝트를 시작할 때 개발자들을 대신해 얼마나 많은 설정들을 해주고 있는지 깨닫고 있는 시점입니다. 뭐 어느 정도 많은 설정들을 해줬겠지 싶었는데.. 상상 이상이더군요. CRA 명령어로 만든 프로젝트에서 public 폴더에 보통 정적으로 사용할 파비콘이나 이미지, 기타 파일들을 저장해 사용하는데요. 빌드 후 웹팩이 알아서 dist폴더안에 정리해줍니다. 수동으로 웹팩 설정을 하신분들은 잊고 넘어갈만한 설정인데요. 제가 그렇습니다.. 자동으로 되는 줄 알았습니다. 왜냐면 개발서버에서는 잘 접근되거든요. 플러그인 설치 npm install copy-webpack-plugin --save-dev webpack.config.js const Cop.. 더보기 이전 1 2 3 4 5 다음
