frontend39 [React] useCallback 사용법 정리 👩💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28. Prisma 사용/공부 요약 👩💻 Prisma를 공부하게 된 계기 이번에 Next.js 13버전으로 Airbnb 클론 프로젝트를 시작하게 되었다. 개인적으로 에어비앤비는 전세계적으로 많은 사람들이 많이 사용하는 웹서비스라 한번쯤 그 기능들을 내 나름대로 구현해 보고 싶었다. 하지만 에어비앤비를 프론트엔드로만 적용하기엔 백엔드 부재가 심하다 생각해서 망상만 하다가 이번에 Next.js로 만들기로 결정한 김에 풀스택을 찍먹해보기로 했다. 결정 한 후에 ORM을 찾던 중 스키마를 통해 데이터베이스를 간단히 조작할 수 있다는 Prisma를 알게 되었고 이번 프로젝트에 적용해보기로 결정했다. 📝 Prisma의 개념과 특징 소개 공식 문서를 확인하면 Prisma는 Node.js, TypeScript, Rust, Go 등 다양한 언어와 프레임.. 2023. 4. 27. RESTful API란? 🤔 RESTful API란? 📝 정의 RESTful API는 Representational State Transfer의 약자로, 웹 상의 자원을 HTTP 프로토콜을 이용하여 전송하는 것을 의미한다. RESTful API는 일관적인 인터페이스를 제공하며, 서버와 클라이언트 간의 통신을 가능하게 해준다. ❓ 사용하는 이유 RESTful API는 다음과 같은 이유로 많이 사용된다. HTTP 프로토콜을 이용하여 간단하게 자원을 전송할 수 있다. 서버와 클라이언트 간의 인터페이스를 일관적으로 제공한다. 클라이언트와 서버가 독립적으로 개발될 수 있다. 캐싱 처리가 용이하여 서버의 부하를 줄일 수 있다. 😎 적용방법 RESTful API를 적용하기 위해서는 다음과 같은 요소들을 고려해야 한다. ✅ HTTP 메소드 R.. 2023. 4. 21. [FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항) 🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느려지거나 멈추는 경우가 발생할 수 있다. 이러한 문제를 해결하기 위해서는 브라우저 렌더링 원리와 성능 최적화 방법을 이해하면 도움이 될 수 있다 판단해 시간을 내어 찾아보았다. 🤔 브라우저 렌더링 원리란 무엇인가 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 원리는 크게 렌더링 엔진, 렌더 트리, 레이아웃, 그리고 페인팅으로 구성된다. .. 2023. 4. 11. 이전 1 2 3 4 5 ··· 10 다음
