Next.js를 사용하는 이유 SEO(Search Engine Optimization)와 SSR이 가장 크다. 리액트 단독 사용의 경우 화면이 나중에 구성되기 때문에, 최초의 페이지는 빈 화면이기 때문. (CSR) 참조 : CSR과 SSR https://aboveimagine.tistory.com/114 비전공자 관점에서 보는 MPA, SPA, CSR, SSR MPA & SPA : 웹 어플리케이션을 구성하는 형태 MPA(Multiple Page Application) - 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환 SPA(Single Page Application) - 단일 페이지, 해당 페이지 aboveimagine.tistory.com 설치 npx create-next-ap..

Next.js가 13으로 업그레이드 되면서 몇가지 변화가 생겼다 update release 에서도 확인이 가능한데, 내가 이번 프로젝트 작업을 하면서 변한 부분을 확인하자면, 참고로 현재 리액트, TS, Next, 테일윈드 를 사용 중. 1. Link import Link from 'next/link' // Next.js 12: `` has to be nested otherwise it's excluded About import Link from 'next/link' // Next.js 13: `` always renders `` About 기존에 링크 태그 안에 a 태그가 들어가는 방식이었는데, 이제는 링크 태그 단독으로 사용! 2. Layout // components/layout.js import ..

첫 리액트 프로젝트는 로컬 스토리지를 데이터베이스를 사용하였는데, 이번 프로젝트는 노션을 데이터베이스를 사용하기 위해 API 연결을 진행했다. 기초작업 1. 노션에 데이터베이스 만들기 프로젝트에 사용될 데이터베이스 만들어야한다. 노션에서 새 페이지를 생성하여 /데이터베이스(인라인)을 작성한다. 2. Notion API 공식사이트에서 intergration 생성하기 https://www.notion.so/my-integrations Notion (노션) – 모든 팀을 위한 하나의 워크스페이스 Notion은 단순한 워드프로세서가 아닙니다. 내 스타일에 맞게 커스텀해서 사용하세요. www.notion.so 해당 사이트에서 API intergration을 만들고 프라이빗 토큰을 생성한다. 3. intergrat..

Context 리액트 컴포넌트에서 Props가 아닌 다른 방식으로 컴포넌트 간에 값을 전달하는 방법. 사용이유 Props drilling 부모에서 자식으로만 전달하는 단방향 리액트의 문제. 컴포넌트 트리에서 하위 컴포넌트로 내려주기 위해 그냥 거쳐가기만 하는 Prop들이 생긴다. 따라서 불필요한 props drilling을 지양하기 위해 Context를 사용한다. Provider Context 객체에 포함된 React 컴포넌트. context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할. value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. 값의 갯수는 제한이 없고, 이를 전달 받을 수 있는 컴포넌트 수의 제한도 없다. Provider 하위에서 context를 구독하는..

한 프로젝트를 시작하기 전 미리 잡아둬야할 부분 정리- 1. 스타일링 CSS 1. 폰트 제일 먼저 사용할 폰트 정하기 주로 웹폰트를 많이 사용하므로 먼저 링크 가져오기. 2. css 초기화 브라우저가 기본으로 가지고 있는 css 속성들 초기화 시키기 3. SCSS 세팅 - 변수 - mixin - 클래스 - 미디어쿼리 2. 공통 컴포넌트 구성 1. 상태관리 세팅 ReactRouter reducer, onCreate, onRemove, onEdit 만들기 2. 프로젝트 state context export const DiaryStateContext = React.createContext(); 컴포넌트 트리를 컨텍스트의 프로바이더로 감싸주고 데이터를 밸류로 전달. 일기 데이터를 관리하는 앱 컴포넌트의 데이터 ..

이벤트 전달 in React.js 이벤트를 전달할 때 주의점 = return문 안에서 태그에 onClick={} 에서 함수에 () 붙고 안 붙고 차이 1. DOM 요소에만 이벤트 설정이 가능. 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이 예제는 doSth 함수를 실행하는 것이 아닌 이름이 onClick인 props를 MyComponent에게 전달해줄 뿐이다. 2. 함수 형태의 값을 전달 html에서는 "" 안에 실행할 자바스크립트 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다 따라서 onClick={doSth} 혹은 onClick={()=>alert('실행')}