SimCoding

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 현재라인..

[React] 전역 스타일링 - createGlobalStyle 안녕하세요. 이번 포스팅에서는 Styled-Components에서 제공하는 함수인 createGlobalStyle 함수에 대해 알아보겠습니다. 리액트에서, - 전역적으로 CSS를 사용하고 싶을 경우, - 기존 CSS를 덮어쓰고 싶을 경우 ( 컴포넌트 자식Class의 CSS 변경할 때 등 ) createGlobalStyle을 사용해서 전역적 스타일링, CSS덮어씌우기 등의 작업을 할 수 있습니다. 예시 코드를 통해 사용방법을 알아봅시다. 예시 코드에서는 createGlobalStyle을 사용해서, Slick컴포넌트의 자식Class인 slick-slide의 CSS를 덮어 씌어주고 있습니다. import Slick from "react-slick..

게더타운 커뮤니티 소개 - 코게더 카페 안녕하세요. 요즘 핫한 메타버스 플랫폼 게더타운.. ! 하지만 외국서비스이다 보니 사용법도 다 영어로 되어있고, 정보가 부족해 어려워 하시는 분들이 많이 계신 것 같습니다. 게더타운 처음 입문하시는 분들이 참고하면 좋을 만한 커뮤니티가 있어 추천드립니다.! 사실은 제가 운영하고 있는 커뮤니티입니다..😊 https://cafe.naver.com/gathertown 게더타운 한국 대표 커뮤니티 - 코게... : 네이버 카페 메타버스 플랫폼 게더타운 한국 대표 커뮤니티 '코게더' 입니다 ! cafe.naver.com Q. 커뮤니티에는 어떤것들이 있나요 !? - 게더타운 입문자를 위한 게더타운가이드가 한글로 작성되어 있습니다. - 팁게시판에서는 5천명의 커뮤니티 회원분들이..

[REACT] input[type="file"] 디자인 커스텀 하는 방법 , 파일이나 이미지를 업로드 하기 위해서 을 사용해야한다. 하지만 의 경우, 기본디자인이 정해져 있고 직접적으로 커스텀을 할 수 없다. 그렇다고 아이에 방법이 없는 것은 아니다. 직접적으로 커스텀 할 수는 없지만, 약간의 편법을 사용해서 간접적으로 디자인을 한 것처럼 보이게 할 수 있다. 과정은 다음과 같다. 1) input 태그를 안보이게 숨긴다. 2) 버튼으로 사용할 태그를 하나 만든다. 3) 버튼을 클릭 했을 때, input태그에 클릭 이벤트를 발생시킨다. 4) 버튼 디자인을 커스텀 해준다. 이게 무슨 말인지 코드를 통해 좀 더 자세히 알아보자. import React, { useRef } from "react"; const ..

NEXTJS 환경 REDUX 초기셋팅 코드예시 Redux 관련 라이브러리 설치. npm i next-redux-wrapper redux react-redux redux-devtools-extension 초기상태 및 리듀서 설정 // reducers/index.js import { HYDRATE } from "next-redux-wrapper"; const initialState = { user: {}, post: {}, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payl..

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

리액트 Customhooks 만들어서 반복되는 코드 줄이기. 커스텀 hook을 만들어서 반복되는 코드를 줄여줄 수 있다. 훅을 사용하지 않는다면 보통 Input의 onChange이벤트를 관리하기 위해 아래와 같이 코드를 작성 할 것이다. const [password, setPassword] = useState('') const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const [id, setId] = useState('') const onChangePassword = useCallback((e) => { setId(e.target.value); }, []); const [name, setName] = use..