Front-end11 Next.js 15 변경점 Next.js가 15버전으로 변경되며 생기는 변경점과 현재 제 개발 스펙에 어떻게 적용할 수 있는지에 대해 기술합니다 업그레이드 방법Next.js는 패키지 매니저별 쉽게 버전업이 가능합니다. pnpm examplepnpm up next@rc react@rc react-dom@rc eslint-config-next@rc 변경점1. React 버전React와 React-dom은 이제 19버전입니다.https://ghdev.tistory.com/15 React 19에 대하여React가 19버전으로 변경되며 적용했을때 생기는 변경점과 현재 제 개발 스펙에 어떤것들을 적용할 수 있는지 적어보았습니다.1. useTrasition 기존 useTrasition은 React 18에 도입된 Hook으로 UI를 차단하ghd.. 2024. 12. 10. React 19에 대하여 React가 19버전으로 변경되며 적용했을때 생기는 변경점과 현재 제 개발 스펙에 어떤것들을 적용할 수 있는지 적어보았습니다.1. useTrasition 기존 useTrasition은 React 18에 도입된 Hook으로 UI를 차단하지 않으면서 상태 업데이트를 효율적으로 처리하는데 도움을 주나, 기존 useTrasition은 비동기 작업과 함께 사용하는데 제약이 있었습니다.React 19부턴 이제 비동기 함수와 함께 사용할 수 있습니다. // Using pending state from Actions// examplefunction UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null.. 2024. 12. 9. Good Refactoring vs Bad Refactoring 이번글은 리팩토링을 주제로한 글로 해외 게시글을 토대로 좋은 리팩토링과 나쁜 리팩토링의 예를 구분하여 정리합니다.이 글의 작성자는 수년간 많은 개발자를 고용해 왔고 그중 상당수는 우리의 코드는 대대적인 리팩토링이 필요하다는 확고한 신념을 가지고있었다 말합니다. 하지만 많은 경우에서 리팩토링된 코드를 이전보다 이해하고 유지보수하기 더 어렵다고 느꼈고 더 느리고 버그가 많기도 했다고 합니다.리팩토링 자체는 코드 베이스를 견고하게 유지하는데 중요한 과정이지만 더 나은 것을 만들려다 오히려 상황을 더 악화시키는 함정에 빠지기 쉽게 한다고 합니다.그렇다면 좋은 리팩토링과 나쁜 리팩토링의 차이를 알아보겠습니다.1. 코드 스타일을 크게 바꾸는것 before// 🫤 this code could be cleanerfu.. 2024. 9. 9. Next.js 14 SSR로 사용자 데이터 보안 강화하기 아트인포 아트인포-ARTINFO예술의 중심 아트인포! 예술 채용, 레슨 등 모든 예술 정보를 아트인포에서 찾아보세요www.artinfokorea.com 최근 뉴스에 댓글 기능을 추가하면서 이전에 개발하며 지나쳤던 내용이 떠오른게 있었다.현재는 로그인되어있을때(토큰이 쿠키에 있을때) 유저데이터를 CSR로 불러와 tanstack query를 사용하여 캐싱하는 상태이다.개발 당시에는 로그인한 본인의 정보이기때문에 보안적으로 크게 문제될거라고는 생각하지 않았지만 지금은 생각이 좀 달라졌다. 유저의 정보가 저렇게 노출되어선 안된다고 생각하였고 어떠한 방법들로 개선해볼까 생각하였고 떠오르는 방법들로는BFF(Backend For Frontend)Next.js에 중간 연결역할을 해줄 api를 하나 더 만드는 것이다. .. 2024. 8. 21. 이전 1 2 3 다음
