react (16) 썸네일형 리스트형 next.js http header 적용하기 Strict Transport Security header 를 적용해 보자 ! # next.config.js module.exports = { ..., async headers() { return [ { source :'/(.*)', headers : [ { key: 'Strict-Transport-Security', value: 'max-age=63072000;' } ] } ] } } https://nextjs.org/docs/api-reference/next.config.js/headers react-toastify - custom toast 적용하기 toast가 필요한데, 얕은 지식으로 직접 만들지는 못했고 react-toastify 라이브러리를 사용했다. 이때 자체 제작한 component 를 사용해보자 install yarn add react-toastify ToastContainer 적용 import { ToastContainer } from 'react-toastify'; import 'style/toast.css'; function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; toast 하나만 띄울거라서 limit 1로 걸어줬다. react-toastify에서 toast를 위한 css를 제공해 주는데, 거기에서 필요한 값부분만 가져와서 styl.. emotion in next.js + typescript jsxImportSource @emotion/react 없이 사용하기 1. emotion 설치 $ yarn add @emotion/react @emotion/styled 2. tsconfig 설정 { "compilerOptions": { ... "types": ["@emotion/react/types/css-prop"] } } 3. .babelrc { "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] } 4. eslint에서 실패할 경우 ! rule을 추가해주자 .eslintrc.jso.. nextjs deployment with 644 permission 보안팀의 요청으로 nextjs 배포시 모든 파일 권한을 644로 해야했다. 644 로 했더니 run시에 permission deny 에러가 발생했다. 삽질 끝에 적용한 해결방법을 기록함 ! 🎶 dockerfile # dockerfile RUN find . -type f -exec chmod 644 {} \; RUN chmod 744 node_modules/next/dist/bin/next node_modules/next/dist/bin/next 이파일만 read 권한을 부여해주면 된다. 🎶 자세히 ! #package.json "scripts": { ... "start": "next start" }, 내가 진행한 프로젝트의 경우 $ yarn start -> next start를 통해 실행된다. 이때 nex.. react-date-range with useRef 결과물은 이렇다 ! 달력 컴포넌트외부를 어둡게 처리하고, 어두운 부분 클릭시 달력이 닫히게 구현하고 싶었다. 🎂 install $ yarn add react-date-range 🎂 code export const DatePicker = ({ calendarCloseHandler, dateRange, setDateRange, }: { calendarCloseHandler: (range: Range) => void; dateRange: Range; setDateRange: (range: Range) => void; }) => { const ref = useRef(null); const [isShowCalendar, setIsShowCalendar] = useState(false); const [focused.. react-i18next in next.js next.js 에서 react-i18next 를 적용해 보자! 🎈 서버 단에서 번역을 처리해 주는 next-i18next 도 있지만, 브라우저 단에서 i18next를 수행하고 싶었기에 react-i18next를 사용했다. yarn add yarn add i18next i18next-browser-languagedetector react-i18next init i18next // config/i18n.ts import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from 'i18next-browser-languagedetector'; import en from "public/loca.. useContext in navigation bar useContext 를 사용하여 네비게이션 바에 계정 정보를 노출 시키자 ! 나는 next.js 에서 적용했는데, 리액트도 같은 방법으로 적용할 수 있을것 이다. // src/context/account.tsx interface AccountProps { name: string; email: string; } const AccountContext = createContext(null); export const useAccount = () => { return useContext(AccountContext); } export const AccountProvider = ({children}: { children: ReactNode }) => { const [account, setAccount] = useSt.. jsx switch component를 분기 처리를 통해 렌더링 해보자 ! (switch 처럼) { { term: , login: , }[step] } 아래와 같은 수행을 한다. {(() => { switch (step) { case 'term': return ; case 'login': return ; default: return; } })()} 🎈 https://stackoverflow.com/questions/46592833/how-to-use-switch-statement-inside-a-react-component 이전 1 2 다음
