이번 글을 통해 배워갈 내용크롬에서 웹페이지 전체 캡처하는 방법1.lazy loading은 화면에 보이는 경우에만 이미지를 로딩하기 때문에 한번 아래로 스크롤 후에 2.크롬에서 F12 를 누르고맥은 아마 ( Command + Option + I) 3.Crtl + Shift + P 를 누릅니다맥은 아마 ( Command + Shift + P) 4.Capture full size screenshot을 치고 누릅니다. 크롬에서 전체화면 캡처하는 사진은 아래와 같습니다. 크롬에서 전체화면 캡처한 스크린샷은 아래와 같습니다. 읽어주셔서 감사합니다 좋은 하루 되세요~
이번 글을 통해 배워갈 내용 Chrome settings for silent printing 1. chrome.exe 바로가기 생성 후에 경로 마지막에 아래와 같이 추가 --kiosk-printing 2. 크롬을 모두 닫고 (필요시 작업관리자에서 크롬 모두 닫기) 3. 바로가기 실행 후에 프린트 읽어주셔서 감사합니다 좋은 하루 보내세요~ Chrome settings for silent printing 참조 및 인용 https://stackoverflow.com/questions/36265503/silent-print-from-browser Silent Print From Browser I have researched so much in the last few days and have given my en..
이번 글을 통해 배워갈 내용 Netlify에서 500 혹은 404 에러가 발생 및 해결 리액트 코드 자체문제가 아닌 배포환경의 문제가 있는 경우가 있습니다. 로컬에서 개발자 모드로 돌릴 때는 문제가 없다가 배포 후에만 문제가 발생하면 당혹스러운 경우가 있는데요 500 에러의 경우 SSR 서버사이드에서 렌더 할 때 발생하는 경우가 있습니다 리액트 18 버전의 Nextjs에서 Dynamic Route를 중첩해서 사용하는 경우 App 라우터와 함께 병행해서 사용하는 경우에 많이 발생하는데요 대부분의 경우 에러가 발생하는 페이지에 SSR을 false로 변경하고 nextjs에 프로젝트 루트 디렉토리에 netlify.toml 파일을 생성한 다음 아래와 같이 설정해서 해결하였습니다 [build] command = "..
이번 글을 통해 배워갈 내용 Visual Studio Code에서 Prettier를 전역으로 적용하는 방법을 배워보겠습니다. Prettier는 코드 포맷터 도구로, 일관된 코드 스타일을 유지하고 가독성을 높이는 데 도움이 됩니다. 아래 명령어는 Prettier를 전역으로 적용하는 방법입니다:) npx prettier --write . 읽어주셔서 감사합니다 좋은 하루 보내세요~
이번 글을 통해 배워갈 내용 nodejs 로깅에 시간추가하는 방법을 배우겠습니다 프로젝트에 npm 혹은 yarn으로 console-stamp를 추가합니다 yarn add console-stamp 프로젝트에 시작지점 index.js 혹은 app.js 파일에 consoleStamp를 추가해 줍니다 import consoleStamp from 'console-stamp'; consoleStamp(console, { format: ':date(yyyy/mm/dd HH:MM:ss.l) :label' }); 프로젝트 시작 시 아래와 같이 로깅이 잘되는 것을 확인할 수 있습니다 [2023/03/07 06:16:13.156] [LOG] listening on port 3000 읽어주셔서 감사합니다 좋은 하루 보내세요~..
이번 글을 통해 배워갈 내용 ul li 기본 스타일 제거하는 한 가지 방법 CSS StyleSheet reset 하는 한 가지 방법 프로젝트 기본 세팅값입니다 전역 CSS 파일 (예 Global.css)에 아래와 같이 붙여 넣습니다 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp..
이번 글을 통해 배워갈 내용 json-server Invoke-WebRequest문제를 해결하는 한 가지 방법 백엔드 서버를 프론트에서 간편하게 테스트해보고 싶은 경우 json-server를 많이들 애용합니다. npm install -g json-server 으로 설치 후에 json-server --watch json-server/db.json --port 3001 으로 json 서버를 포트 3001에 시작하고 디비 파일을 만든 다음 디비에 값을 넣는 경우 아래와 같이 "Invoke-WebRequest : 'Headers' 매개 변수를 바인딩할 수 없습니다. "System.String" 유형의 "Content-Type: application/json" 값을 "System.Collections.IDicti..
이번 글을 통해 배워갈 내용 자바스크립트 없이 카드를 뒤집는 방법을 배워보겠습니다. 아래와 같은 card flipping을 구현해보겠습니다. 리액트와 module.css를 사용하였지만 html과 css만을 사용하였기 때문에 조금 바꿔서 다른 라이브러리를 쓰셔도 무방합니다. body는 아래와 같이 정의했습니다 * { box-sizing: border-box !important; } body{ margin: 0; padding: 0; background: #c4c3ad; height: 100vh; display: flex; justify-content: center; align-items: center; } 그리고 card.module.css는 아래와 같이 정의했습니다 .card { width: 300px;..
