Frontend6 [Next.js] Data Mutation: Server Actions 1. Server ActionsNext.js의 server component는 hydrate되지 않은, 즉 interactive하지 않은 컴포넌트로 useState, useEffect 없이 데이터를 불러올 수 있다. 데이터를 변경시켜야 하는 상황에서는 server actions를 사용하면 API route 없이 서버 측에서 직접 DB에 접근할 수도 있고, 페이지 렌더링 과정에 참여하게 된다. 기존에 browser -> (front server ->) backend server -> DB 의 구조를 browser -> front server -> DB로 줄인 것이다. 장점- network 요청 수를 줄일 수 있다- SEO 향상- 민감한 데이터를 클라이언트 측에 노출시키지 않고 처리할 수 있다- client.. 2024. 7. 16. React의 최적화 전략 목차- 프롤로그- 렌더링 최적화 기법- 상태 관리 및 업데이트 최적화- 로딩 성능 최적화프롤로그 지난번에는 리액트를 왜 쓰는지에 대해 브라우저의 렌더링 원리부터 리액트의 특징까지 알아보았다. 이렇게나 잘 만든 라이브러리인데 장점을 최대한 살려 코드를 짜야하지 않을까? 이번에는 최적화를 어떻게 하는지 알아보자! 프로젝트 5개 하고 돌아보는 React를 쓰는 이유목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용hwanheejung.tistory.com렌더링 최적화 기법#불필요한리렌더.. 2024. 4. 11. React의 원칙: Immutable Data Pattern 목차- 프롤로그- JavaScript 복습- React는 어떻게 state 변화를 감지하는가? - Immutable Data Pattern이란? - TypeScript + Immutable Data Pattern - 정리 프롤로그React의 핵심에는 컴포넌트 기반 아키텍처가 있다. 이를 통해 개발자는 재사용 가능한 UI 조각을 만들어 레고처럼 조립한다. React는 선언적 UI를 통해 애플리케이션의 상태가 변경될 때 자동으로 변경사항을 감지하고, 필요한 컴포넌트만을 효율적으로 리렌더링함으로써 개발자가 명시적으로 조작할 필요가 없도록 한다. 이러한 프로세스는 불변성 원칙을 통해 최적화된다. state를 직접 변경하지 않고 setState를 사용해야 하는 이유.. react에서 변경된 값을 감지하는 방법... 2024. 4. 11. 프로젝트 5개 하고 돌아보는 React를 쓰는 이유 목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용한 팀프로젝트만 5개를 했더라. 프로젝트를 하면 확실히 해당 기술의 숙련도를 빠르게 향상할 수 있고, 무엇보다 재밌다. 그리고 해당 프레임워크의 장단점을 몸으로 느끼며 그 단점을 보완하기 위해 어떤 또 다른 기술이 등장했는지 흐름을 파악하기에는 프로젝트만 한 것이 없다. 하지만 눈앞에 놓인 기능 구현에만 집중하다 보면 "진짜 공부"를 놓칠 때가 많다. 예를 들어 React의 렌더링 과정에 대해 알고 코드를 치는 사람과 모르고 치는 사람.. 2024. 4. 4. [Navigation] Stack vs Native Stack 무엇을 선택해야할까? 우선, 차이가 뭔지 알아보자 1. Stack NavigatorStack Navigator | React Navigation Stack Navigator | React NavigationStack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.reactnavigation.orgnative가 아니라 js로 구현된 것따라서 각 플랫폼의 navigation을 사용하지 않는다native로 구현된 것보다 성능이 안좋을 수 있음JavaScript 구현으로 인해 대규모 애플리케이션 또는 복잡한 전환 효과를 사용할 때 성능 저하가 발생할 수 있음 JavaSc.. 2024. 3. 26. [ReactNative/AOS] Native module RNDatePicker tried to override RNDatePicker. Check the getPackages() method in MainApplication.java ios에서는 잘 되는데 android에서 빌드할 때 이런 오류가 떴다. MainApplication.java 파일에 있는 getPackages() 메서드 내에서 RNDatePicker 모듈이 수동으로 추가되고 있는지 확인. 만약 추가되고 있다면, 그 부분을 주석 처리하거나 제거. 하지만 우리는 수동으로 추가하지 않았다. 뭐가 문젤까.. Native module RNDatePicker tried to override RNDatePicker. Check the getPackages() method in MainApplication.java 여기서 말하길, ReactContextBaseJavaModule을 extend하는 함수 내에서 다음을 추가하라 한다. @Override public boolean canO.. 2024. 3. 26. 이전 1 다음
