뚜sh뚜sh

global.css 파일에서 datepicker classname에 특정 css를 주었으나 스타일 적용이 안됨 .react-datepicker { font-size: 1em; padding: 4px; } [해결방법] 뒤에 !important 를 붙여서 global.css 파일에서 설정한 스타일이 적용되게 함 .react-datepicker { font-size: 1em !important; padding: 4px !important; }

아래 코드에서 TypeError: Right-hand side of 'instanceof' is not an object가 생겨서 로직이 제대로 처리되지 않았다 try { tokenValue = parseJwt(Cookies.get(tokenName), tokenKey) as AuthToken; } catch (err) { console.log(err); } [해결방법] 원래 사용하고 있던 jsonwebtoken 버전이 9.0.0이었는데 8.5.1로 다운그레이드하니 해결되었다 ! -모듈 삭제 npm uninstall 모듈 - 원하는 버전으로 모듈 설치 npm install 모듈@원하는 버전

버튼을 누르면 파일을 다운로드 받게 하기 위해 a태그를 사용했다 다운로드 에러 - 나는 파일을 public 페이지에 넣어놨었는데 href를 지정할 때 href="public/file.pdf" 처럼 지정했더니 계속 실패 (파일없음)했다.. 해결방법 - 구글링을 하다 보니 public을 경로에 넣으면 안된다고 해서 href="/file.pdf" 로 지정했더니 성공했다 !!

나는 인풋 창에 이메일을 입력하면 입력한 이메일로 파일이 자동 전송되는 기능을 만들어야 했다 찾아보다가 nodemailer라는 모듈을 사용하기로 결정했다! 1. 먼저 nodemailer를 설치했다 yarn add nodemailer 2. gmail을 사용하기 위해 필요한 설정들을 해주었다 Google 계정 관리에 있는 보안 탭에 들어간 후 2단계 인증 사용하기! 앱 비밀번호를 생성하기! (이 부분을 위해 위에서 2단계 인증을 사용함) 3. pages/api/email.js 파일을 생성한 후, 아래 코드를 작성하기! - 나는 public 폴더 안에 첨부파일들을 보관했다 export default async function handler(req, res) { const nodemailer = require(..

1. .env 파일안에 스트림 측정 ID 값 저장하기 # 구글 애널리틱스 NEXT_PUBLIC_GA_TRACKING_ID="G-" 2. gtag.ts 파일 생성하기 import { URL } from "url"; export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID; // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url: URL) => { window.gtag("config", GA_TRACKING_ID, { page_path: url, }); }; interface GTagEvent { action:..

캐러셀이란? CSS 3D 트랜스폼과, 약간의 JavaScript로 만들어진 일련의 콘텐츠를 순환시키기 위한 슬라이드 쇼 처음엔 css와 자바스크립트로 구현할 생각을 했으나 찾아보니 npm이 있길래 npm을 사용하기로 했다 !! react-slick 설치 방법 yarn add react-slick // typescript 사용한다면 아래도 설치해야함! npm install @types/react-slick react-slick css 설치 방법 yarn add slick-carousel 나는 MobileSlider라는 컴포넌트를 만들었다 import Slider from "react-slick"; // 기본 스타일 적용 import "slick-carousel/slick/slick.css"; import ..

나는 원 모양의 이미지 중 상위 반원이 직사각형 위에 올라오게 표현했어야 했다 (아래와 같은 모양으로 ...) 생각한 대로 코드를 짜고 봤더니 아래와 같이 되었다... 어떻게 해결해야 할 지 고민하다가 아래의 코드로 해결함 (position과 z-index, height를 계산해서 해결!!) // position 속성을 이용하면 요소를 겹치게 놓을 수 있음 // z-index는 position의 수직 위치이며, // 값은 정수이고, 숫자가 클수록 위로 올라옴 결과물은 !!!!!!!!!!!!!!!!!!!

카카오톡 공유하기 버튼 구현하는 방법 1. Kakao Developers 에 들어간 후 헤더에 있는 내 어플리케이션에 들어가서 애플리케이션 추가하기 2. 추가한 애플리케이션을 눌러 요약 정보에 있는 JavaScript 키를 복사하기 3. 복사한 JavaScript 키를 프로젝트의 .env 파일에 저장하기 // ex NEXT_PUBLIC_KAKAO_KEY=카카오 JavaScript 키 4. 프로젝트에 있는 _app.tsx 파일에 global 타입 선언하고 declare global { interface Window { Kakao: any; } } 5. Script를 추가해주고 // 카카오 SDK 호출 6. kakao JavaScript 키를 초기화 해주는 함수를 만들어주기 const kakaoInit = ..

const pageQuery = (url: string, page: number) => { if (router.query.page !== undefined && url.includes("&page")) { return router.push( url.substring(0, url.indexOf("&page")) + `&page=${page}` ); } else if (router.query.page === undefined && router.asPath.includes("?")) { return router.push(router.asPath + `&page=${page}`); } else { return router.push(getPathName(router.asPath) + `?page=${page}`)..

import { useState } from "react"; import CheckButton from "../components/CheckButton"; 중괄호 {} 를 사용한 변수는 export 될 때 default를 사용하지 않고 export 된 경우이며, 중괄호를 사용하지 않은 변수는 export 할 때 default로 export 된 경우이다. 또, 중괄호 안에 들어가서 import 되는 변수는 변수 이름을 마음대로 바꿀 수 없지만, 아래처럼 as를 사용해서 a라는 변수를 이 파일에서는 b로 사용할 수 있다. import { a as b } from '../zz.js' 따라서, 중괄호의 사용여부의 의미는 export 될 때 default로 export가 되냐 안되냐의 차이이다.