본문 바로가기
728x90
반응형

프로그래밍/ReactJS18

nextjs 파일 다운로드 링크 만들기 nextjs 에서 파일 다운로드 링크를 만들고 싶으면 아래와 같이 코드를 작성하면 됩니다. 파일 다운로드 a 태그를 사용할때 download를 추가하면 됩니다. “download=파일이름” 을 지정해서 다운로드할 파일 이름을 변경할 수도 있습니다. 하지만 이 방법은 다른 도메인에 있는 파일을 다운로드할 때는 동작하지 않습니다. 해결 방법 const request = require("request"); export default (req, res) => { const pipeline = promisify(stream.pipeline); export default async (req: NextApiRequest, res: NextApiResponse) => { const id:string = req.quer.. 2022. 5. 28.
Server Error ReferenceError: window is not definedThis error happened while generating the page. Any Server Error ReferenceError: window is not definedThis error happened while generating the page. Any console logs will be displayed in the terminal window. import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../components/hello')) function Home() { return ( HOME PAGE is here! ) } export default Home 동격 가져로기로 에러해결 2022. 4. 19.
nextjs 비주얼 스튜디오 코드 디버깅 .vscode/launch.json 파일 추가 { "version": "0.2.0", "configurations": [ { "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", "command": "npm run dev" }, { "name": "Next.js: debug client-side", "type": "pwa-chrome", "request": "launch", "url": "http://localhost:3000" }, { "name": "Next.js: debug full stack", "type": "node-terminal", "request": "launch", "command": "np.. 2022. 4. 19.
useState 동기화 문제 export default function Test() { const [value1, setValue1] = useState(0); const [value2, setValue2] = useState(0); return ( value1 : {value1} value2 : {value2} { setValue1(prev => prev+1); setValue2(value1); }}> 계산 ) } 얼마 전에 useState를 사용하다가 난감한 상황에 빠져서 해결방법을 공유합니다. 대충 위와 같은 코드를 작성했습니다. 버튼을 클릭할 때마다 value1을 +1시 키고 value2에 대입합니다. 코드만 봤을 때는 두 값이 동시에 올라가야 합니다. 결과는... value2 값이 1 작게 설정됩니다. 이유는 SetValu.. 2022. 4. 19.
nextjs Open graph 추가하기 - 셀프 코딩 부트캠프 Open Graph 카카오톡에 URL을 붙여 넣기 하면 위와 같이 스크린샷과 간단한 내용이 나옵니다. 위처럼 잘 나오는 경우도 있지만 나오지 않는 경우도 있습니다. OG(Open Graph)를 세팅하지 않으면 저 정보가 나오지 않습니다. ... Open Graph 정보는 카카오톡뿐만 아니라 페이스북, 트위터 등 대부분 SNS에서 지원합니다. 링크를 보기 전에 간략한 내용을 볼 수 있기 때문에 마케팅 측면에서도 아주 중요합니다. OG 정보는 html 코드에서 head 태그 안쪽에 삽입하면 됩니다. 대표적으로 title, description, image, url이 있습니다. 테스트하는 방법은 간단합니다. 자신이 사용하는 SNS에 링크를 보내보면 됩니다. 카카오톡에 OG정보를 변경해도 동작하지 않는 경우가 .. 2022. 4. 11.
Nextjs Fast Refresh 안되는 문제 해결 - 핫 리로딩 You have enabled experimental feature(s). warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk. nextjs를 사용하는데 Fast Refresh가 안 되는 문제가 있었습니다. dev 빌드를 돌리면 위와 같은 에러가 발생했습니다. Fast Refresh가 안 되는 게 저 에러와 관련 있는지 확실하지는 않지만 해결하니 에러는 사라 졌습니다. 이것저것 삽질하다 보니 해결되었습니다. 혹시 안되면 아래 방법들을 시도해 보시기 바랍니다. next버전을 올렸습니다. package.json 에.. 2022. 4. 1.
728x90
반응형

티스토리툴바