NEXTJS 13 정리 13버전부터는 모든 React 컴포넌트는 서버사이드 컴포넌트입니다. app 디렉토리 v12 : pages 폴더 하위의 모든 파일들이 하나의 경로였습니다. v13 : app/ 이라는 디렉토리가 만들어졌습니다. 그리고 아래의 컴포넌트 들을 구성할 수 있습니다. 12버전의 pages 와 별 다를것 없어보이지만 app 디렉토리를 사용하면 디렉토리 구조도 깔끔해지고 layout, React 서버 컴포넌트, 스트리밍의 여러가지 기능이 존재합니다. layout.tsx 기존 pages 폴더 밑에 있던 _app.tsx 파일과 _document.tsx 파일의 역할을 합니다. app 폴더 밑에 이렇게 꼭 한 개의 layout.tsx 파일이 있어야 합니다. export default function R..

SEO란 Search Engine Optimization의 약자로 "검색엔진 최적화"라는 의미를 담고 있습니다. SEO 처리를 하게 되면 네이버, 구글과 같은 검색 엔진에서 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업입니다. 블로그 홍보글, 온라인 판매몰 등 같은 단어를 검색하더라도 SEO를 처리한 웹 사이트는 SEO 처리를 하지 않은 웹사이트에 비해서 유저 방문 트래픽 차이가 있을겁니다. 사내 시스템 담당자로 근무를 할 당시에는 사실 SEO에 대해서 크게 관심이 없었습니다. 왜냐하면 사용자 유입에 대한 작업보다는 동적으로 데이터를 받아서 처리하는 과정이 중요했었습니다. 그러나, 지금의 조직은 SEO 최적화가 필요하기 때문에 생각난김에 블로그에 정리하고자 합니다. 🎈 React에서 SEO 최..

안녕하세요. 미루고 미뤄왔던 지난번 프로젝트를 이번에 이어서 작업중에 있습니다. React-Native 차트 라이브러리를 좀 찾다보니 무료 라이브러리 중 'svg'라는 라이브러리를 많이 사용하는듯 보이더라구요. www.npmjs.com/package/react-native-svg react-native-svg SVG library for react-native www.npmjs.com 별 생각없이 평소 하던데로 받으려니 > npm i react-native-svg 왠걸.... 어디서 많이 본듯한 안본듯한 에러가 발생하더랍니다. package-lock.json 지우기 cache clean.. 등 작업을 했는데도 증상이 같았습니다. npm install throws "Could not resolve depe..

더보기 네비게이션이란? 웹에서는 React-router로 컴포넌트를 구분했지만, React Native(반응형 앱)에서는 별도의 URL이 존재하지 않기 때문에 React-Navigation을 이용하여 구분합니다. React-Navigation V5를 사용하여 앱에서 각각의 버튼이나 이벤트가 발생될 때, 어느 공간으로 이동할 것인지 먼저 따라해봅시다. https://reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 가장 먼저 해야할 것은, React-Navigation 설치겠죠? 1. React-Navigation Install 위..