본문 바로가기

분류 전체보기70

react-modal을 사용한 모달 만들기 react-modal npm 설치$ npm install --save react-modal$ yarn add react-modal redact-modal의 옵션들 interface Styles { content?: React.CSSProperties | undefined; overlay?: React.CSSProperties | undefined; }// react-modal Styles 옵션에는 content와 overlay가 있다.// content : 모달창 내부영역 디자인// overlay : 모달 외부영역 디자인interface Props { isOpen: boolean; // 모달의 열림을 결정 shouldCloseOnOverlayClick?: boolean | u.. 2024. 6. 2.
[코드잇 스프린트] 6개월의 기록(일기) 1줄 요약하면 "으아아 이게 뭐야 으아아아 저게 뭐야 으아아아 넌 또 어디서 나왔어.." 하는 정신 없던 6개월 이었지만 좀 길게 일기를 써보자  때는 작년 5월, 미래에 대한 막연한 두려움에 많은 상상을 한 시기였다. 이런 저런 진로를 생각해 보다가 내린 결정은 1. 꾸준히 발전하는 기술을 배우자 2. 나이가 들어도, 취업을 못해도 혼자서 할 수 있는 무언가. 3. 다양한 직군에서 필요로 하는 직종 (+ 친구의 추천)까지 생각하다 보니 코딩을 공부하자는 결론이 나왔다. 빠른 결정을 하고 생활코딩을 보면서 HTML과 CSS를 공부했다. 코드를 작성하는 대로 화면에 그려지는 걸 보면서 **이거 재밌네?**를 느끼게 되고 나름 꿈이 생기기 시작했다.  어쩌다 코드잇인가?  심심했다. 혼자서 공부하기에 방향성.. 2024. 5. 29.
ssr getInitialProps - import { NextPageContext } from 'next' Page.getInitialProps = async (ctx: NextPageContext) => { const res = await fetch('https://api.github.com/repos/vercel/next.js') const json = await res.json() return { stars: json.stargazers_count } } export default function Page({ stars }: { stars: number }) { return stars } - 페이지라는 최상위 컴포넌트를 선언 -> 페이지컴포넌트의 getInitalProps property에 함수를 선언,.. 2024. 4. 5.
eslint 설정 { "env": { "browser": true, "jasmine": true, "jest": true, "es2021": true, "node": true }, "extends": [ "airbnb", "airbnb/hooks", "prettier", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended", "next" ], "overrides": [], // 특정 파일에 대해서 lint규칙을 재정의할 때 사용 "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "l.. 2024. 4. 5.
axios error처리 export interface ErrorResponse{ status:string; serverDataTime:string; errorCode:string; errorMessage:string; } //axios error의 타입, const isServerError = (error: unknown): error is AxiosError => { return isAxiosError(error); } //axios error타입가드 const useSignIn = (setError : any) => { const router = useRouter(); const getSignIn = async (data: any) => { try { const res = await axios.post("/sign-in",.. 2024. 2. 28.

티스토리툴바