본문 바로가기

분류 전체보기

 (36)
eslint-plugin-import in nestjs install $ yarn add eslint-plugin-import .eslintrc.js plugins : [import], extends : ['plugin:import/recommended'], rules : { 'import/order': ['error', { alphabetize: { order: 'asc' }, groups: [ ['builtin', 'external','internal'], ], pathGroups: [ { pattern: '@*/**', group: 'external', position: 'before', }, { pattern: '#*/**', group: 'internal', position: 'after'} ], 'newlines-between': 'always' ..
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
ip filter middleware 🎇middleware 작성 @Injectable() export class IpFilterMiddleware implements NestMiddleware { use(req: Request, res: Response, next: NextFunction) { let allowIps: string[] = []; if (process.env.NODE_ENV == 'local') { allowIps = ['127.0.0.1']; } if (!allowIps.includes(req.ip.toString())) { throw new UnauthorizedException('invalid ip'); } next(); } } 🎇 middleware 주입 # app.module.ts ... export class App..
custom repository 🎇 repository import { EntityRepository, Repository } from 'typeorm'; import { User } from '@entity/user.entity'; @EntityRepository(User) export class UserRepository extends Repository {} 🎇 service @Injectable() export default class UserService { constructor( private userRepository: UserRepository ) {} ... 🎇 module 서비스단과 컨트롤러단에서 repository를 사용할 수 있게, module 단에서 호출하는 repository를 import 시켜줘야 한다 ! @..

티스토리툴바