반응형 전체 글44 [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. [Next.js]다크모드 구현하기 (sass) 안녕하세요. 오늘은 next에서 scss를 이용해서 다크 모드를 구현해볼 건데요. 왜 css 가 아닌 scss(sass)를 사용하는지 차이점을 비교하고 다크 모드를 구현해보겠습니다. Sass vs Css css 코드 .container { background-color: yellow; } .container div { background-color: green; } .container div a { color: red; } Scss 코드 .container { background-color: yellow; div { background-color: green; a { color: red; } } } 첫 번째로 nesting이 가능하다는 것인데요. 또한, scss에서는 변수, 함수 선언이 가능하고 Mixi.. 2022. 4. 24. 이전 1 2 3 4 5 6 ··· 11 다음 반응형
