반응형 coding/front-end10 Next js 13 - app directory(Beta) App Directory(beta) next js 13 버전부터 페이지들을 app과 pages에 병행해서 다룰 수 있도록 업데이트되었습니다. 이번시간에는 새로 업데이트된 app 폴더에 대해서 글을 작성해 보려고 하는데요! pages와 이번에 업데이트된 app 폴더를 비교해 보면서 전에 사용하던 방법이 어떻게 업데이트되었는지, 추가적으로 무슨 기능이 생겼는지 정리해 보도록 하겠습니다! 그전에 페이지들을 app폴더에서 관리하고 싶을 때는 next.config.js에서 appDir 값을 true로 변경을 해주셔야 합니다. Layout pages에서 _app, _document 파일의 역할을 app폴더에서는 layout 파일이 역할을 수행하고 있습니다. 아래와 같이 app 폴더를 사용한다면 반드시 아래에 한 개.. 2023. 3. 9. [React]Redux Toolkit (리덕스 툴킷)사용해 보기- Typescript import React from 'react'; import './App.css'; import Btn from './component/Btn'; import Input from './component/Input'; import { useAppSelector } from './store'; function App() { const { value } = useAppSelector((state) => state.input); return ( {value} ); } export default App; React에서 상태 관리할 때 가장 많이 사용하는 툴이 Redux인데요. Redux를 사용하기 전에 초기 코드를 설정하는 과정이 정말 길고 복잡합니다. 그리고 중간에 store에 새로운 데이터를 만드는 일이 생기.. 2022. 5. 10. [React]useCallback, Memo 함수 이해하기 안녕하세요. 오늘은 React hook인 useCallback 와 memo 함수에 대해서 정리해 보겠습니다. 그전까지는 사람들이 사용하는 코드만 보고 제 프로젝트에도 적용해 봤지만 실제적으로 크게 필요한 부분에 사용하고 있지 않았습니다. 이번 기회에 확실하게 공부하고 가겠습니다! 예제 코드 App.tsx import React, { useCallback, useState } from 'react'; import './App.css'; import Input from './components/Input'; import Btn from './components/Btn'; function App() { const [input, setInput] = useState(''); const onChange = (e:.. 2022. 5. 7. [Next] 티스토리 OPEN API next.js 에서 적용하기(1) 안녕하세요. 오늘은 next.js 프로젝트에서 티스토리 open api를 사용해서 블로그에 글 목록, 정보 등을 받아 보도록 해보겠습니다. 티스토리 open api 정리가 잘 돼있어서 어렵지 않게 적용했던가 같은데요. 시작해 보겠습니다! 앱 애플리케이션 등록하기 https://www.tistory.com/guide/api/manage/register TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com 위에 사이트에 접속해줍니다. 오픈 API 이용약관에 대해 동의를 눌러줍니다. 서비스 명과 설명을 잘 적어주고 서비스 URL에 해당 서비스 URL을 적어 주고, CallBack URL에는 데이터를 요청해서 받은 다음 어디로 URL로 보낼지 적어주는 곳입니다. 앱을 등록하면 App .. 2022. 5. 2. 이전 1 2 3 다음 반응형
