memo 란?React의 memo 함수는 불필요한 컴포넌트 재렌더링을 방지하기 위한 고차 컴포넌트이다. 컴포넌트를 memo로 감싸면, React는 컴포넌트의 현재 props와 다음 props를 얕게 비교한다. 변화가 있을 때만 컴포넌트를 재렌더링한다.memo에 대한 주

Infinite-scroll-component를 활용한 무한스크롤 구현하기2차 프로젝트에서는 라이브러리를 활용할 수 있어서 무한스크롤을 구현할때 Infinite-scroll-component를 사용해보았다.리액트 라이브러리를 사용하면 더 수월하게 기능구현이 가능할 줄

📚 Storybook > 기업 협업 인턴을 시작하면서 회사에서 storybook 을 처음 사용해보았다. 이번 기회를 통해서 storybook을 왜 사용하는지, 그 장점이 무엇인지 자세히 알아보는 계기가 되었고, 공부한 내용을 정리한 포스트이다. 📄 Storybo

Vercel에 배포하기 CI/CD 버셀을 사용하면 자동으로 CI/CD 가 반영된다. 코드를 올려놓은 깃헙과 연동해 놓으면 자동반영 commit / branch 별 url 할당해준다. -> 그리고 메인 url에도 반영됨 하지만 vercel은 버그 확인 시간 없이

AWS S3 프론트엔드 배포하기부트캠프에서의 1차 프로젝트 배포가 끝났다(드디어)하여 프론트엔드 배포과정을 기록하는 포스트이다.우선 나는 aws s3 버킷을 이용하였다.Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이

Typescript - Classes 객체지향 프로그래밍 타입스크립트가 많은 양의 중복 코드를 줄여준다.

Next.js - Hydration failed 에러 넥스트 js 로 블로그 프로젝트를 만들던 중 'use client'를 사용하는 컴포넌트에서 발생한 에러이다. > Error: Hydration failed because the initial UI does n

인터페이스는 자바스크립트 런타임 환경에서는 전혀 영향을 주지 않는다. 인터페이스는 타입스크립트에서 변수의 구조로 선언된다.다음 두가지는 동등한 선언이며 하나는 인라인 주석을 사용하고 두번째는 인터페이스를 사용한다.Sample B의 장점은 누군가가 myPoint 라이브러

typescriptC 매개변수의 타입은 Number, D 매개변수의 타입은 Number Literal 이다.따라서, C 매개변수의 타입이 D 매개변수의 슈퍼타입이므로 D를 C로 취급하는것은 불가능하지만 이 케이스에서는 가능하다. 마치 다운캐스팅을 허용하는 것 같아 보이

typescript 개념 정리

Next.js의 Dynamic RoutingNext.js 의 동적 라우팅은 웹 개발에서의 유연성을 크게 높이는 기능이다. 이 기능을 이용하면, 미리 설정된 URL 패턴에 구애받지 않고, 실시간으로 변화하는 사용자의상황이나 특정 조건에 따라 다양한 URL 경로를 제공할

2차 프로젝트 때 내가 맡은 페이지는 소셜 로그인과 상품 리스트 페이지 였다.처음 활용해보는 외부 api를 활용해서 로그인 페이지 구현 나의 코드카카오 로그인 버튼을 클릭하면 kakao 소셜 로그인 페이지로 넘어가게 된다.

장바구니 페이지 기술 블로그 1) dropdown 처음 장바구니를 계획했을 때 이솝 사이트 레이아웃을 따라가서 드롭다운 형식으로 구현했다. 2) GET, PATCH, DELETE methods API 장바구니 페이지는 지금 다시 생각해보면 기억에 많이 남

1st' project - Aesop를 참고하여 주요 구현 사항 나의 역할: 메인페이지 / 장바구니 / 아트페이지 1. 프로젝트 소개 프로젝트 진행기간 : 2023.05.01 ~ 2023.05.12 (총 2주) 클론 코딩 사이트 : Aesop (https://ww

useState 사용해서 count 버튼 만들기 값을 업데이트 하는 함수를 파라미터로 넣어주었습니다. 함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하게 된다. 그래서 setNumber(number + 1) 이 아니라 이렇게 함수형 파라미터로

리액트 컴포넌트에는 라이프 사이클이 존재한다. 컴포넌트의 수명은 페이지가 렌더링을 준비하는 때부터 페이지에서 사라질 때 끝난다. 오늘 배운 useEffect를 더 잘 이해하기 위해 간단히 정리해두어야겠다고 생각했다. 컴포넌트를 렌더링할 때 어떤 작업을 처리하거나

What is React Conditional Rendering? > 리액트에서 말하는 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 화면에 렌더링 하는 것을 의미한다. +) 요즘 리액트를 공부하면서 익히고 있는 개념들 중 하나이다. 삼항연산자, &&연산자