SimCoding

[VSC] *.ts,* .tsx 파일에서 prettier가 작동하지 않을 때 해결방법 vsc의 setting.json을 수정하면 됩니다. "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

puppeteer access denied 해결 방법 - puppeteer-extra-plugin-stealth 안녕하세요. 이번 포스팅에서는 puppeteer access denied 에러를 해결하는 방법에 대해 알아보겠습니다. 저는 쿠팡 크롤링 과정에서 puppeteer access denied 에러가 발생해.. 아주 고생을 했습니다 ..! 다행히 열심히 구글링한 결과, 해결 방법을 찾을 수 있었습니다 ! 이 문제를 한번에 해결해주는 라이브러리가 있더라구요.. ! 'puppeteer-extra-plugin-stealth' 라이브러리를 이용하면 문제를 해결 할 수 있습니다. 설치하기 npm install puppeteer puppeteer-extra puppeteer-extra-plugin-stealt..

[React] React에서 디스코드 오픈채팅 위젯 만들기 ! 안녕하세요 이번 포스팅에서는 , React프로젝트에 디스코드 오픈채팅 위젯을 만드는 과정에 대해 알아보겠습니다. Q 디스코드 오픈채팅 위젯이 뭔가요 !? - 디스코드 위젯을 통해 디스코드 채널에서 바로 채팅을 가능하게 해주는 장치입니다. 아래 사진을 참고해주세요! [ 디스코드 오픈채팅 위젯 만들기 ] 1. 디스코드 채팅방에 위젯 봇 초대하기 먼저, 디스코드 채팅방에 위젯 봇을 초대해주셔야 합니다. 위젯 봇 초대는 아래링크를 통해 가능합니다. 봇 추가 링크 : https://add.widgetbot.io/ Discord - A New Way to Chat with Friends & Communities Discord is the easiest ..

[Error] AWS S3 NEXTJS 배포 후, index외 페이지에서 새로고침 할 때 에러가 뜨는 문제 해결. 안녕하세요. 오늘은 AWS S3에 NEXTJS를 배포하면서 생긴문제와 해결방법에 대해 포스팅 하려고 합니다. > 문제 Index페이지 이외의 페이지에서 새로고침, 또는 url로 직접 접근하려고 할 때 에러가 발생했습니다.. SPA 을 S3에 배포할 때, 종종 발생하는 문제 인 것 같더라구요.. ! > 문제 파악 Router경로가 위의 이미지에서 보이는 것처럼 '/post/washingMachine' 으로 설정되어 있는데요, 빌드하는 과정에서 /post/washingMachine/index.html 파일로 build가 되는 것을 발견했습니다. 그런데 S3에서는, 이걸 자동으로 찾아주지 못하는 ..

faker 오류, faker.js사태 - faker구버젼 사용하기 안녕하세요. 오늘은 fakerjs에 관한 이슈에 대해 포스팅 하려고 합니다.. ! 현재 faker최신 버젼을 설치할 경우, 오류가 나는 것은 faker라이브러리 자체의 문제입니다. 더미데이터를 생성하기 위해 faker.js 라이브러리를 설치했는데 !! 오류가 나서 알아보니 .. 엄청난 일이 있었더라구요 'Marak Squires'라는 개발자가, 자신이 만든 라이브러리인 faker.js 와 color.js를 고의로 손상시켰다고 하네요.. 이 분의 의도는 많은 사람들이 자신의 오픈소스를 공짜로 쓰는데, 아무런 보상이 없는것에 대한 불만으로 저지른 일이라고 합니다.😦 뭔가 안타까운일인 것 같네요... 그 동안 라이브러리 설치에 의심을 갖지 않았..

안녕하세요. 이번 포스팅에서는, 제가 VSC에서 자주 사용하는 단축키들을 알려드리려고 합니다. VSC 단축키를 활용하면, 이전보다 훨씨 높은 생산성을 가지실 수 있을거에요 ! 탭에 관련된 단축키 새탭열기 Ctrl + n 파일열기 Ctrl + o 현재탭 닫기 Ctrl + w 이전에 닫힌탭 다시 열어주기 Ctrl + shift + t 탭 분할 Ctrl + \ 함수 정의문으로 이동 F12 함수 정의문으로 미리보기 Alt + F12 탭 앞뒤로 이동하기 Ctrl+ PgUp/PgDn 내용 편집 관련된 단축키 들여쓰기, 내어쓰기 Tab, Shift + Tab 현재라인 위치이동(위,아래) Alt + ↑/↓ 현재라인 복사 후, 붙여넣기(위,아래) Alt + Shift + ↑/↓ 현재라인 잘라내기 Ctrl + x 현재라인..

프론트개발 진행중에 쿠키가 받아지지 않는 경우 해결방법 : axios 예시 백엔드와 프론트엔드의 도메인 주소가 다른 경우, 쿠키 전송이 되지 않아 당황스러운 경우가 있다. 이를 해결하기 위해서는 withCredentials 를 설정해주어야 한다. axios를 사용할 경우 아래와 아래와 같이 작성해주면 된다. axios.get(주소, { withCredentials: true }); axios.post(주소, 데이터, { withCredentials: true }); 위와 같이 설정했음에도, 쿠기가 받아지지 않는다면 백엔드단에서 설정이 잘못되어 있을 수 있다.

[Redux] reducer에서 immer를 이용한 불변성관리 예시코드. 리덕스에서 새로운 state를 반환해주기 위한 함수로 reducer를 사용한다. reducer에서는 한가지 지켜줘야하는 것이 있는데, 바로 불변성이다. 불변성을 지키기 위해서는 이전상태를 변경하지 않고, 이전 상태를 참조해 새로운 상태를 반환해 줘야된다. 이때, 주로 얕은 복사를 이용한다. 얕은 복사를 이용해서 충분히 불변성을 유지할 수 있지만, depth가 깊어질수록 코드가 길어지고 가독성이 떨어지는 문제가 발생한다. 이를 해결하기 위해 등장한 것이 immer이다. 예시 코드를 통해 immer를 이용해 불변성 관리하는 방법을 확인해보자. @ immer const { produce } = require('immer'); const ..